Add functionality to load your own version

src/components/CreateVersion/CreateVersion.tsx

@@ -1,9 +1,10 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import { httpPost } from '../../lib/http';
+import { httpGet, httpPost } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
 import { isLoggedIn } from '../../lib/jwt';
-import { GitFork, Layers2, Loader2 } from 'lucide-react';
+import { GitFork, Layers2, Loader2, Map } from 'lucide-react';
 import { showLoginPopup } from '../../lib/popup';
+import type { RoadmapDocument } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
 
 type CreateVersionProps = {
   roadmapId: string;
@@ -13,11 +14,39 @@ export function CreateVersion(props: CreateVersionProps) {
   const { roadmapId } = props;
 
   const toast = useToast();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
+  const [userVersion, setUserVersion] = useState<RoadmapDocument>();
+
+  async function loadMyVersion() {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpGet<RoadmapDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-my-version/${roadmapId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(false);
+    setUserVersion(response);
+  }
+
+  useEffect(() => {
+    loadMyVersion().finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
 
   async function createVersion() {
-    if (isLoading || !roadmapId) {
+    if (isCreating || !roadmapId) {
       return;
     }
 
@@ -26,14 +55,14 @@ export function CreateVersion(props: CreateVersionProps) {
       return;
     }
 
-    setIsLoading(true);
+    setIsCreating(true);
     const { response, error } = await httpPost<{ roadmapId: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-create-version/${roadmapId}`,
       {},
     );
 
     if (error || !response) {
-      setIsLoading(false);
+      setIsCreating(false);
       toast.error(error?.message || 'Failed to create version');
       return;
     }
@@ -42,10 +71,30 @@ export function CreateVersion(props: CreateVersionProps) {
       import.meta.env.PUBLIC_EDITOR_APP_URL
     }/${response?.roadmapId}`;
 
-    setIsLoading(false);
+    setIsCreating(false);
     window.open(roadmapEditorUrl, '_blank');
   }
 
+  if (isLoading) {
+    return (
+      <div className="h-[30px] w-[206px] animate-pulse rounded-md bg-gray-300"></div>
+    );
+  }
+
+  if (!isLoading && userVersion) {
+    return (
+      <div className={'flex items-center'}>
+        <a
+          href={`/r?id=${userVersion._id}`}
+          className="flex items-center rounded-md border border-blue-400 bg-gray-50 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
+        >
+          <Map size="15px" className="mr-1.5" />
+          Visit your own version
+        </a>
+      </div>
+    );
+  }
+
   if (isConfirming) {
     return (
       <p className="flex h-[30px] items-center text-sm text-red-500">
@@ -72,11 +121,18 @@ export function CreateVersion(props: CreateVersionProps) {
 
   return (
     <button
-      disabled={isLoading}
+      disabled={isCreating}
       className="flex items-center justify-center rounded-md border bg-gray-50 px-2.5 py-1 text-xs font-medium text-black hover:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
-      onClick={() => setIsConfirming(true)}
+      onClick={() => {
+        if (!isLoggedIn()) {
+          showLoginPopup();
+          return;
+        }
+
+        setIsConfirming(true);
+      }}
     >
-      {isLoading ? (
+      {isCreating ? (
         <>
           <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5]" />
           Please wait ..