Add Creator Details (#4530)

* Add Creator details

* Add Skeleton Loading

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -40,6 +40,17 @@ export interface RoadmapContentDocument {
   }[];
 }
 
+export type CreatorType = {
+  id: string;
+  name: string;
+  avatar: string;
+};
+
+export type GetRoadmapResponse = RoadmapDocument & {
+  canManage: boolean;
+  creator?: CreatorType;
+};
+
 export function hideRoadmapLoader() {
   const loaderEl = document.querySelector(
     '[data-roadmap-loader]'
@@ -53,7 +64,7 @@ export function CustomRoadmap() {
   const { id, secret } = getUrlParams() as { id: string; secret: string };
 
   const [isLoading, setIsLoading] = useState(true);
-  const [roadmap, setRoadmap] = useState<RoadmapDocument | null>(null);
+  const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null);
   const [error, setError] = useState<AppError | FetchError | undefined>();
 
   async function getRoadmap() {
@@ -66,7 +77,7 @@ export function CustomRoadmap() {
       roadmapUrl.searchParams.set('secret', secret);
     }
 
-    const { response, error } = await httpGet<RoadmapDocument>(
+    const { response, error } = await httpGet<GetRoadmapResponse>(
       roadmapUrl.toString()
     );
 

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -15,7 +15,12 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
   const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap);
   const $currentRoadmap = useStore(currentRoadmap);
 
-  const { title, description, _id: roadmapId } = useStore(currentRoadmap) || {};
+  const {
+    title,
+    description,
+    _id: roadmapId,
+    creator,
+  } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
   const toast = useToast();
@@ -54,10 +59,20 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     }
   }
 
+  const avatarUrl = creator?.avatar
+    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}`
+    : '/images/default-avatar.png';
+
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
-        <div className="mb-3 mt-0 sm:mb-4">
+        <div className="flex items-center gap-1.5">
+          <img src={avatarUrl} className="h-5 w-5 rounded-full" />
+          <h3 className="text-sm font-medium">
+            {creator?.name || 'Anonymous'}
+          </h3>
+        </div>
+        <div className="mb-3 mt-4 sm:mb-4">
           <h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1>
           <p className="mt-0.5 text-sm text-gray-500 sm:text-lg">
             {description}

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -2,14 +2,18 @@ export function SkeletonRoadmapHeader() {
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
-        <div className="mb-3 mt-0 sm:mb-4">
+        <div className="flex items-center gap-1.5">
+          <div className="h-5 w-5 animate-pulse rounded-full bg-gray-300" />
+          <div className="h-5 w-2/12 animate-pulse rounded-md bg-gray-200" />
+        </div>
+        <div className="mb-3 mt-4 sm:mb-4">
           <div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" />
           <div className="mt-0.5 h-5 w-1/3 animate-pulse rounded-md bg-gray-200 sm:h-7" />
         </div>
 
         <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="h-7 w-[35.04px] sm:w-32 animate-pulse rounded-md bg-gray-300 sm:h-8" />
-          <div className="h-7 w-[32px] sm:w-[89.73px] animate-pulse rounded-md bg-gray-300 sm:h-8" />
+          <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
+          <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
         </div>
 
         <div className="mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border">

src/stores/roadmap.ts

@@ -1,7 +1,7 @@
 import { atom, computed } from 'nanostores';
-import { type RoadmapDocument } from '../components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
+import type { GetRoadmapResponse } from '../components/CustomRoadmap/CustomRoadmap';
 
-export const currentRoadmap = atom<RoadmapDocument | undefined>(undefined);
+export const currentRoadmap = atom<GetRoadmapResponse | undefined>(undefined);
 export const isCurrentRoadmapPersonal = computed(
   currentRoadmap,
   (roadmap) => !roadmap?.teamId