From 875a7c4c6282c5c8a5f62a955009f2ed55497229 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 30 Jul 2024 02:41:14 +0100
Subject: [PATCH] Button changes on the custom roadmap page

---
 .../CustomRoadmap/CustomRoadmapRatings.tsx    | 31 +++++++++++++------
 .../CustomRoadmap/RateRoadmapForm.tsx         |  8 ++++-
 .../CustomRoadmap/RoadmapActionButton.tsx     | 20 ++++++------
 .../CustomRoadmap/RoadmapHeader.tsx           | 19 ++++--------
 src/components/Rating/Rating.tsx              |  4 +--
 5 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/CustomRoadmap/CustomRoadmapRatings.tsx b/src/components/CustomRoadmap/CustomRoadmapRatings.tsx
index 9cf4f1160..e1d7caebe 100644
--- a/src/components/CustomRoadmap/CustomRoadmapRatings.tsx
+++ b/src/components/CustomRoadmap/CustomRoadmapRatings.tsx
@@ -35,16 +35,27 @@ export function CustomRoadmapRatings(props: CustomRoadmapRatingsProps) {
         />
       )}
       {average === 0 && (
-        <button
-          className="flex items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium hover:border-black"
-          onClick={() => {
-            setIsDetailsOpen(true);
-          }}
-        >
-          <Star className="size-4 fill-yellow-400 text-yellow-400" />
-          <span className="hidden md:block">Rate this roadmap</span>
-          <span className="block md:hidden">Rate</span>
-        </button>
+        <>
+          {!canManage && (
+            <button
+              className="flex items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium hover:border-black"
+              onClick={() => {
+                setIsDetailsOpen(true);
+              }}
+            >
+              <Star className="size-4 fill-yellow-400 text-yellow-400" />
+              <span className="hidden md:block">Rate this roadmap</span>
+              <span className="block md:hidden">Rate</span>
+            </button>
+          )}
+          {canManage && (
+            <span className="flex items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium cursor-default opacity-50">
+              <Star className="size-4 fill-yellow-400 text-yellow-400" />
+              <span className="hidden md:block">No ratings yet</span>
+              <span className="block md:hidden">Rate</span>
+            </span>
+          )}
+        </>
       )}
 
       {average > 0 && (
diff --git a/src/components/CustomRoadmap/RateRoadmapForm.tsx b/src/components/CustomRoadmap/RateRoadmapForm.tsx
index cdf21b7cd..68363d667 100644
--- a/src/components/CustomRoadmap/RateRoadmapForm.tsx
+++ b/src/components/CustomRoadmap/RateRoadmapForm.tsx
@@ -46,6 +46,12 @@ export function RateRoadmapForm(props: RateRoadmapFormProps) {
   const [userFeedback, setUserFeedback] = useState('');
 
   const loadMyRoadmapRating = async () => {
+    // user can't have the rating for their own roadmap
+    if (canManage) {
+      setIsLoading(false);
+      return;
+    }
+
     const { response, error } = await httpGet<GetMyRoadmapRatingResponse>(
       `${import.meta.env.PUBLIC_API_URL}/v1-get-my-roadmap-rating/${roadmapSlug}`,
     );
@@ -127,7 +133,7 @@ export function RateRoadmapForm(props: RateRoadmapFormProps) {
                     )}
                   </div>
 
-                  <span className="w-14 shrink-0 text-sm text-gray-500">
+                  <span className="w-[35px] shrink-0 text-xs text-gray-500">
                     {percentage}%
                   </span>
                 </li>
diff --git a/src/components/CustomRoadmap/RoadmapActionButton.tsx b/src/components/CustomRoadmap/RoadmapActionButton.tsx
index b6a6b3f3c..59a65e8be 100644
--- a/src/components/CustomRoadmap/RoadmapActionButton.tsx
+++ b/src/components/CustomRoadmap/RoadmapActionButton.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+import { Lock, MoreVertical, PenSquare, Shapes, Trash2 } from 'lucide-react';
 
 type RoadmapActionButtonProps = {
   onDelete?: () => void;
@@ -32,34 +32,34 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md z-[9999]"
+          className="align-right absolute right-0 top-full z-[9999] mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
-            {onUpdateSharing && (
+            {onCustomize && (
               <li>
                 <button
                   onClick={() => {
                     setIsOpen(false);
-                    onUpdateSharing();
+                    onCustomize();
                   }}
                   className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
-                  <Lock size={14} className="mr-2" />
-                  Sharing
+                  <PenSquare size={14} className="mr-2" />
+                  Edit
                 </button>
               </li>
             )}
-            {onCustomize && (
+            {onUpdateSharing && (
               <li>
                 <button
                   onClick={() => {
                     setIsOpen(false);
-                    onCustomize();
+                    onUpdateSharing();
                   }}
                   className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
-                  <Shapes size={14} className="mr-2" />
-                  Customize
+                  <Lock size={14} className="mr-2" />
+                  Sharing
                 </button>
               </li>
             )}
diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx
index 6cc1dd52d..69e30e3cb 100644
--- a/src/components/CustomRoadmap/RoadmapHeader.tsx
+++ b/src/components/CustomRoadmap/RoadmapHeader.tsx
@@ -115,7 +115,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               aria-label="Back to All Roadmaps"
             >
               &larr;
-              <span className="hidden sm:inline">&nbsp;Community Roadmaps</span>
+              <span className="hidden sm:inline">&nbsp;Discover More</span>
             </a>
 
             <ShareRoadmapButton
@@ -150,20 +150,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                   />
                 )}
 
-                <a
-                  href={`${
-                    import.meta.env.PUBLIC_EDITOR_APP_URL
-                  }/${$currentRoadmap?._id}`}
-                  target="_blank"
-                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-                >
-                  <PenSquare className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                  <span className="hidden lg:inline-block">Edit</span>
-                  <span className="lg:hidden">Edit</span>
-                </a>
-
                 <RoadmapActionButton
                   onUpdateSharing={() => setIsSharing(true)}
+                  onCustomize={() => {
+                    window.location.href = `${
+                      import.meta.env.PUBLIC_EDITOR_APP_URL
+                    }/${$currentRoadmap?._id}`;
+                  }}
                   onDelete={() => {
                     const confirmation = window.confirm(
                       'Are you sure you want to delete this roadmap?',
diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx
index 5a880fef4..c04f07281 100644
--- a/src/components/Rating/Rating.tsx
+++ b/src/components/Rating/Rating.tsx
@@ -44,9 +44,9 @@ export function Rating(props: RatingProps) {
           />
         );
       })}
-      {props.total && (
+      {(props.total || 0) > 0 && (
         <span className="ml-1.5 text-xs text-gray-400">
-          ({Intl.NumberFormat('en-US').format(props.total)})
+          ({Intl.NumberFormat('en-US').format(props.total!)})
         </span>
       )}
     </div>