feat: showcase roadmap (#7791)

* wip * wip * fix: status issue * feat: update UI * wip * wip: showcase status * wip: showcase listing * feat: update showcase status * chore: update roadmap content json (#7738) Co-authored-by: kamranahmedse <[email protected]> * Fix issue in sticky top ad * Add preloading of ad image * feat(backend): update unit testing node resources (#7743) * feat: container orchestration * Update container-orchestration@Yq8kVoRf20aL_o4VZU5--.md Simplified content and added working links to resources for better clarity and learning. * Update container-orchestration@Yq8kVoRf20aL_o4VZU5--.md Replace content and added working links to resources for better clarity and learning. * Update container-orchestration@Yq8kVoRf20aL_o4VZU5--.md * Update src/data/roadmaps/devops/content/container-orchestration@Yq8kVoRf20aL_o4VZU5--.md --------- Co-authored-by: Arik Chakma <[email protected]> * docs: fix typos and improve grammar in documentation (#7747) Corrects typos and grammatical errors in various markdown files to enhance clarity and readability. * feat: add PearAI code editor Added PearAI to the list of AI Code Editors (An Open Source Option for developers!) * chore: update roadmap content json (#7751) Co-authored-by: kamranahmedse <[email protected]> * feat: center of mass explain video (#7754) video addition explaining COM better * Ad new changelog entry * Update C# link to correct URL (#7757) * Add engineering manager roadmap * chore: update roadmap content json (#7758) Co-authored-by: kamranahmedse <[email protected]> * Update frontend FAQs (#7764) Tweaked the first two Qs * Update DevOps skills (#7763) Added internal refs * Add ref to DevOps roadmap in guide (#7762) Added roadmap ref. * Add engineering manager roadmap * Update engineering manager roadmap content * Update engineering manager roadmap * Add content to engineering manager roadmap * chore: update roadmap content json (#7768) Co-authored-by: kamranahmedse <[email protected]> * fix: postgresql link (#7766) * fix(typo): comma todo-list-api.md (#7772) * Add new link of Redis in FullStack (#7771) * chore: update roadmap content json (#7778) Co-authored-by: kamranahmedse <[email protected]> * Add content to vue.js performance (#7777) * Update performance@f7N4pAp_jBlT8_8owAcbG.md * Update src/data/roadmaps/vue/content/performance@f7N4pAp_jBlT8_8owAcbG.md --------- Co-authored-by: Kamran Ahmed <[email protected]> * Update resources for Authentication (#7745) * Update [email protected] replaced a wrong article with one about biometrics * Update [email protected] link redirects to a Thai gambling game site * Add resource for rest-assured (#7737) ## Content I’ve added a beginner-friendly article, A Guide to REST-assured, from Baeldung to the REST Assured section. If there’s anything that doesn’t meet the format, please feel free to comment. Thanks😊. ## Issue Fixed #7736 * Add UX design resource (#7710) * Update conceptual-design@r6D07cN0Mg4YXsiRSrl1_.md I have added an article by Dan Nessler on How to apply a design thinking, HCD, UX or any creative process from scratch which is a how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up, frame, organise, structure, run or manage design challenges, and projects: The Double Diamond revamped. * Update conceptual-design@r6D07cN0Mg4YXsiRSrl1_.md I have added an article by Dan Nessler on How to apply a design thinking, HCD, UX or any creative process from scratch which is a how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up, frame, organise, structure, run or manage design challenges, and projects: The Double Diamond revamped. * Add user personas resource to UX design (#7709) Added more resources from IxD Foundation and NN group. Co-authored-by: Shivam Kumar <[email protected]> * Add linked in content (#7695) * Update [email protected] * Update src/data/roadmaps/devrel/content/[email protected] --------- Co-authored-by: Kamran Ahmed <[email protected]> * Added article on AuthN vs AuthZ (#7694) Added a guide on the difference between authentication and authorization, since these terms are often confused. * Add a video to the Decentralization section (#7692) * adding a video to the Decentralization section * adding a video to the Decentralization section * Fixes typo in 104-proc-priorities.md (#7684) Old: renice +5 New: renice -5 From my research, after reading the topic in the Linux roadmap, it didnt make sense that increasing the priority of a process was made by +5, the topic said that a negative number makes the priority higher, so do many articles on the internet. * Add bastion host and file integrity checker idea * Add pomodoro timer project idea * Add project idea for quiz app * chore: update roadmap content json (#7785) Co-authored-by: kamranahmedse <[email protected]> * fix typo in dockerhub alternatives (#7780) Co-authored-by: Fabio Stabile <[email protected]> * Add content to engineering manager roadmap (#7779) * Update system-design-and-architecture@iX4HPgoiEbc_gze1A01n4.md * Update src/data/roadmaps/engineering-manager/content/system-design-and-architecture@iX4HPgoiEbc_gze1A01n4.md * Update src/data/roadmaps/engineering-manager/content/system-design-and-architecture@iX4HPgoiEbc_gze1A01n4.md --------- Co-authored-by: Kamran Ahmed <[email protected]> * Add project idea for stories feature * Add weather app project idea * Update project ideas * Add engineering manager roadmap content * Update engineering manager roadmap content * Add DevOps best practices guide * Add AI Engineer introduction video (#7788) * Added Introduction Video * Changed formatting * Update src/data/roadmaps/ai-engineer/content/introduction@_hYN0gEi9BL24nptEtXWU.md --------- Co-authored-by: Kamran Ahmed <[email protected]> * chore: update roadmap content json (#7789) Co-authored-by: kamranahmedse <[email protected]> * Add devops automation tools * Add featuring functionality --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: kamranahmedse <[email protected]> Co-authored-by: Kamran Ahmed <[email protected]> Co-authored-by: Rogério Ferreira de Souza <[email protected]> Co-authored-by: Jawher Kl <[email protected]> Co-authored-by: garyellow <[email protected]> Co-authored-by: Nang <[email protected]> Co-authored-by: FormerlyWD <[email protected]> Co-authored-by: dudi vaichledere <[email protected]> Co-authored-by: Ed Lan <[email protected]> Co-authored-by: elias_sisay <[email protected]> Co-authored-by: feelsgoodfrog <[email protected]> Co-authored-by: Gustavo Martins Pereira <[email protected]> Co-authored-by: Maksymilian <[email protected]> Co-authored-by: b4haa7 <[email protected]> Co-authored-by: Wick Dynex <[email protected]> Co-authored-by: Shivam Kumar <[email protected]> Co-authored-by: Shivam Kumar <[email protected]> Co-authored-by: Yanbo Wang <[email protected]> Co-authored-by: Lisa Dziuba <[email protected]> Co-authored-by: Karamoko Israël Abdelaziz Axel <[email protected]> Co-authored-by: duds <[email protected]> Co-authored-by: Fabio Stabile <[email protected]> Co-authored-by: Fabio Stabile <[email protected]> Co-authored-by: Naresh Thakur <[email protected]> Co-authored-by: Gustaf <[email protected]>
kamranahmedse · Nov 27, 2024 · 43849e7 · 43849e7
1 parent ee95280
commit 43849e7
Show file tree

Hide file tree

Showing 13 changed files with 610 additions and 168 deletions.
diff --git a/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx b/src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx
@@ -23,11 +23,16 @@ export const allowedCustomRoadmapType = ['role', 'skill'] as const;
 export type AllowedCustomRoadmapType =
   (typeof allowedCustomRoadmapType)[number];
 
-export const allowedShowcaseStatus = ['visible', 'hidden'] as const;
+export const allowedShowcaseStatus = [
+  'submitted',
+  'approved',
+  'rejected',
+  'rejected_with_reason',
+] as const;
 export type AllowedShowcaseStatus = (typeof allowedShowcaseStatus)[number];
 
 export interface RoadmapDocument {
-  _id?: string;
+  _id: string;
   title: string;
   description?: string;
   slug?: string;
@@ -51,14 +56,22 @@ export interface RoadmapDocument {
   edges: any[];
 
   isDiscoverable?: boolean;
-  showcaseStatus?: AllowedShowcaseStatus;
   ratings: {
     average: number;
+    totalCount: number;
     breakdown: {
       [key: number]: number;
     };
   };
 
+  showcaseStatus?: AllowedShowcaseStatus;
+  showcaseRejectedReason?: string;
+  showcaseRejectedAt?: Date;
+  showcaseSubmittedAt?: Date;
+  showcaseApprovedAt?: Date;
+
+  hasMigratedContent?: boolean;
+
   createdAt: Date;
   updatedAt: Date;
 }

diff --git a/src/components/CustomRoadmap/CustomRoadmap.tsx b/src/components/CustomRoadmap/CustomRoadmap.tsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import { getUrlParams } from '../../lib/browser';
-import { type AppError, type FetchError, httpGet } from '../../lib/http';
 import { RoadmapHeader } from './RoadmapHeader';
 import { TopicDetail } from '../TopicDetail/TopicDetail';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import { currentRoadmap } from '../../stores/roadmap';
 import { RestrictedPage } from './RestrictedPage';
 import { FlowRoadmapRenderer } from './FlowRoadmapRenderer';
+import { useQuery } from '@tanstack/react-query';
+import { queryClient } from '../../stores/query-client';
+import { httpGet, type FetchError } from '../../lib/query-http';
+import { useCustomRoadmap } from '../../hooks/use-custom-roadmap';
 
 export const allowedLinkTypes = [
   'video',
@@ -71,43 +74,24 @@ export function CustomRoadmap(props: CustomRoadmapProps) {
 
   const [isLoading, setIsLoading] = useState(true);
   const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null);
-  const [error, setError] = useState<AppError | FetchError | undefined>();
 
-  async function getRoadmap() {
-    setIsLoading(true);
+  const { data, error } = useCustomRoadmap({
+    id,
+    secret,
+    slug,
+  });
 
-    const roadmapUrl = slug
-      ? new URL(
-          `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap-by-slug/${slug}`,
-        )
-      : new URL(`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`);
-
-    if (secret) {
-      roadmapUrl.searchParams.set('secret', secret);
-    }
-
-    const { response, error } = await httpGet<GetRoadmapResponse>(
-      roadmapUrl.toString(),
-    );
-
-    if (error || !response) {
-      setError(error);
-      setIsLoading(false);
+  useEffect(() => {
+    if (!data) {
       return;
     }
 
-    document.title = `${response.title} - roadmap.sh`;
-
-    setRoadmap(response);
-    currentRoadmap.set(response);
+    document.title = `${data.title} - roadmap.sh`;
+    setRoadmap(data);
+    currentRoadmap.set(data);
     setIsLoading(false);
-  }
-
-  useEffect(() => {
-    getRoadmap().finally(() => {
-      hideRoadmapLoader();
-    });
-  }, []);
+    hideRoadmapLoader();
+  }, [data]);
 
   if (isLoading) {
     return null;

diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx
@@ -11,6 +11,8 @@ import { RoadmapActionButton } from './RoadmapActionButton';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 import { CustomRoadmapAlert } from './CustomRoadmapAlert.tsx';
 import { CustomRoadmapRatings } from './CustomRoadmapRatings.tsx';
+import { ShowcaseStatus } from './Showcase/ShowcaseStatus.tsx';
+import { ShowcaseAlert } from './Showcase/ShowcaseAlert.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -73,122 +75,132 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     : '/images/default-avatar.png';
 
   return (
-    <div className="border-b">
-      <div className="container relative py-5 sm:py-12">
-        {!$canManageCurrentRoadmap && <CustomRoadmapAlert />}
-
-        {creator?.name && (
-          <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
-            <img
-              alt={creator.name}
-              src={avatarUrl}
-              className="h-5 w-5 rounded-full"
-            />
-            <span>
-              Created by&nbsp;
-              <span className="font-semibold text-gray-900">
-                {creator?.name}
-              </span>
-              {team && (
-                <>
-                  &nbsp;from&nbsp;
-                  <span className="font-semibold text-gray-900">
-                    {team?.name}
-                  </span>
-                </>
-              )}
-            </span>
-          </div>
+    <>
+      <div className="relative border-b">
+        {$currentRoadmap && $canManageCurrentRoadmap && (
+          <ShowcaseAlert currentRoadmap={$currentRoadmap} />
         )}
-        <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}
-          </p>
-        </div>
 
-        <div className="flex justify-between gap-2 sm:gap-0">
-          <div className="flex justify-stretch gap-1 sm:gap-2">
-            <a
-              href="/community"
-              className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
-              aria-label="Back to All Roadmaps"
-            >
-              &larr;
-              <span className="hidden sm:inline">&nbsp;Discover more</span>
-            </a>
-
-            <ShareRoadmapButton
-              roadmapId={roadmapId!}
-              description={description!}
-              pageUrl={`https://roadmap.sh/r/${roadmapSlug}`}
-              allowEmbed={true}
-            />
+        <div className="container relative py-5 sm:py-12">
+          {!$canManageCurrentRoadmap && <CustomRoadmapAlert />}
+
+          {creator?.name && (
+            <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
+              <img
+                alt={creator.name}
+                src={avatarUrl}
+                className="h-5 w-5 rounded-full"
+              />
+              <span>
+                Created by&nbsp;
+                <span className="font-semibold text-gray-900">
+                  {creator?.name}
+                </span>
+                {team && (
+                  <>
+                    &nbsp;from&nbsp;
+                    <span className="font-semibold text-gray-900">
+                      {team?.name}
+                    </span>
+                  </>
+                )}
+              </span>
+            </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}
+            </p>
           </div>
-          <div className="flex items-center gap-2">
-            {$canManageCurrentRoadmap && (
-              <>
-                {isSharing && $currentRoadmap && (
-                  <ShareOptionsModal
-                    roadmapSlug={$currentRoadmap?.slug}
-                    isDiscoverable={$currentRoadmap.isDiscoverable}
-                    description={$currentRoadmap?.description}
-                    visibility={$currentRoadmap?.visibility}
-                    teamId={$currentRoadmap?.teamId}
-                    roadmapId={$currentRoadmap?._id!}
-                    sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
-                    sharedTeamMemberIds={
-                      $currentRoadmap?.sharedTeamMemberIds || []
-                    }
-                    onClose={() => setIsSharing(false)}
-                    onShareSettingsUpdate={(settings) => {
-                      currentRoadmap.set({
-                        ...$currentRoadmap,
-                        ...settings,
-                      });
+
+          <div className="flex justify-between gap-2 sm:gap-0">
+            <div className="flex justify-stretch gap-1 sm:gap-2">
+              <a
+                href="/community"
+                className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
+                aria-label="Back to All Roadmaps"
+              >
+                &larr;
+                <span className="hidden sm:inline">&nbsp;Discover more</span>
+              </a>
+
+              <ShareRoadmapButton
+                roadmapId={roadmapId!}
+                description={description!}
+                pageUrl={`https://roadmap.sh/r/${roadmapSlug}`}
+                allowEmbed={true}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              {$canManageCurrentRoadmap && (
+                <>
+                  {isSharing && $currentRoadmap && (
+                    <ShareOptionsModal
+                      roadmapSlug={$currentRoadmap?.slug}
+                      isDiscoverable={$currentRoadmap.isDiscoverable}
+                      description={$currentRoadmap?.description}
+                      visibility={$currentRoadmap?.visibility}
+                      teamId={$currentRoadmap?.teamId}
+                      roadmapId={$currentRoadmap?._id!}
+                      sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
+                      sharedTeamMemberIds={
+                        $currentRoadmap?.sharedTeamMemberIds || []
+                      }
+                      onClose={() => setIsSharing(false)}
+                      onShareSettingsUpdate={(settings) => {
+                        currentRoadmap.set({
+                          ...$currentRoadmap,
+                          ...settings,
+                        });
+                      }}
+                    />
+                  )}
+
+                  {$currentRoadmap && (
+                    <ShowcaseStatus currentRoadmap={$currentRoadmap} />
+                  )}
+
+                  <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?',
+                      );
+
+                      if (!confirmation) {
+                        return;
+                      }
+
+                      deleteResource().finally(() => null);
                     }}
                   />
-                )}
+                </>
+              )}
 
-                <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?',
-                    );
-
-                    if (!confirmation) {
-                      return;
-                    }
-
-                    deleteResource().finally(() => null);
-                  }}
+              {showcaseStatus === 'approved' && (
+                <CustomRoadmapRatings
+                  roadmapSlug={roadmapSlug!}
+                  ratings={ratings!}
+                  canManage={$canManageCurrentRoadmap}
+                  unseenRatingCount={unseenRatingCount || 0}
                 />
-              </>
-            )}
-
-            {((ratings?.average || 0) > 0 || showcaseStatus === 'visible') && (
-              <CustomRoadmapRatings
-                roadmapSlug={roadmapSlug!}
-                ratings={ratings!}
-                canManage={$canManageCurrentRoadmap}
-                unseenRatingCount={unseenRatingCount || 0}
-              />
-            )}
+              )}
+            </div>
           </div>
-        </div>
 
-        <RoadmapHint
-          roadmapTitle={title!}
-          hasTNSBanner={false}
-          roadmapId={roadmapId!}
-        />
+          <RoadmapHint
+            roadmapTitle={title!}
+            hasTNSBanner={false}
+            roadmapId={roadmapId!}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 }