Merge pull request #2626 from KVV94/master

feat: added routing for selected episode
stakwork · Jan 23, 2025 · 8f1a8d7 · 8f1a8d7
2 parents 0950422 + 30ec3ec
commit 8f1a8d7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/src/components/AppContainer/index.tsx b/src/components/AppContainer/index.tsx
@@ -1,9 +1,10 @@
 import { lazy, Suspense } from 'react'
-import { Route, Routes } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 import { isE2E } from '~/constants'
 import { E2ETests } from '~/utils'
 import { AppProviders } from '../App/Providers'
 import { AuthGuard } from '../Auth'
+import { LandingPage } from '../mindset/components/LandingPage'
 
 // Lazy-loaded components
 const LazyApp = lazy(() => import('../App').then(({ App }) => ({ default: App })))
@@ -17,7 +18,13 @@ export const AppContainer = () => {
     <AppProviders>
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
-          {isMindSetHost && <Route element={<LazyMindSet />} path="/" />}
+          {isMindSetHost && (
+            <>
+              <Route element={<LandingPage />} path="/" />
+              <Route element={<LazyMindSet />} path="/episode/:episodeId" />
+              <Route element={<Navigate replace to="/" />} path="/episode" />
+            </>
+          )}
           <Route
             element={
               <AuthGuard>

diff --git a/src/components/Universe/Graph/Cubes/Text/index.tsx b/src/components/Universe/Graph/Cubes/Text/index.tsx
@@ -207,7 +207,7 @@ export const TextNode = memo(
               }}
               position={[-15, 15, 0]}
               scale={2}
-              src={`svg-icons/${iconName}.svg`}
+              src={`/svg-icons/${iconName}.svg`}
               userData={node}
             />
           )}

diff --git a/src/components/mindset/components/LandingPage/index.tsx b/src/components/mindset/components/LandingPage/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { FieldValues } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { NODE_ADD_ERROR } from '~/constants'
@@ -94,9 +95,11 @@ export const LandingPage = () => {
   const [error, setError] = useState(false)
   const [requestError, setRequestError] = useState<string>('')
   const { setRunningProjectId } = useDataStore((s) => s)
-  const { setSelectedEpisodeId, setSelectedEpisodeLink } = useMindsetStore((s) => s)
+  const { setSelectedEpisodeLink } = useMindsetStore((s) => s)
   const { setSchemas } = useSchemaStore((s) => s)
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     const fetchSchemaData = async () => {
       try {
@@ -130,7 +133,7 @@ export const LandingPage = () => {
         }
 
         if (res.data.ref_id) {
-          setSelectedEpisodeId(res.data.ref_id)
+          navigate(`/episode/${res.data.ref_id}`)
           setSelectedEpisodeLink(source)
         }
 
@@ -144,7 +147,7 @@ export const LandingPage = () => {
           errorMessage = res.errorCode || res?.status || NODE_ADD_ERROR
 
           if (res.data.ref_id) {
-            setSelectedEpisodeId(res.data.ref_id)
+            navigate(`/episode/${res.data.ref_id}`)
             setSelectedEpisodeLink(source)
           }
         } else if (err instanceof Error) {

diff --git a/src/components/mindset/index.tsx b/src/components/mindset/index.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 import { Socket } from 'socket.io-client'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
@@ -11,16 +12,14 @@ import { useMindsetStore } from '~/stores/useMindsetStore'
 import { usePlayerStore } from '~/stores/usePlayerStore'
 import { FetchDataResponse, Link, Node } from '~/types'
 import { Header } from './components/Header'
-import { LandingPage } from './components/LandingPage'
 import { PlayerControl } from './components/PlayerContols'
-import { Scene } from './components/Scene'
 import { SideBar } from './components/Sidebar'
 
 export const MindSet = () => {
   const { addNewNode, isFetching, runningProjectId } = useDataStore((s) => s)
   const [dataInitial, setDataInitial] = useState<FetchDataResponse | null>(null)
   const [showTwoD, setShowTwoD] = useState(false)
-  const { selectedEpisodeId, setSelectedEpisode } = useMindsetStore((s) => s)
+  const { setSelectedEpisode } = useMindsetStore((s) => s)
   const setClips = useMindsetStore((s) => s.setClips)
   const clips = useMindsetStore((s) => s.clips)
   const socket: Socket | undefined = useSocket()
@@ -31,38 +30,43 @@ export const MindSet = () => {
   const queueRef = useRef<FetchDataResponse | null>(null)
   const timerRef = useRef<NodeJS.Timeout | null>(null)
 
+  const navigate = useNavigate()
+
+  const { episodeId: selectedEpisodeId } = useParams()
+
   const { setPlayingNode } = usePlayerStore((s) => s)
 
   useEffect(() => {
-    const init = async () => {
+    const init = async (id: string) => {
       try {
-        const data = await getNode(selectedEpisodeId)
+        const data = await getNode(id)
 
         if (data) {
           setPlayingNode(data)
           setSelectedEpisode(data)
           addNewNode({ nodes: [data], edges: [] })
         }
       } catch (error) {
+        navigate('/')
         console.error(error)
       }
     }
 
     if (selectedEpisodeId) {
-      init()
+      init(selectedEpisodeId)
     }
-  }, [selectedEpisodeId, setPlayingNode, setSelectedEpisode, addNewNode])
+  }, [selectedEpisodeId, setPlayingNode, setSelectedEpisode, addNewNode, navigate])
 
   useEffect(() => {
     const fetchInitialData = async () => {
       try {
         // Fetch the initial set of edges and nodes for the episode
-        const starterNodes = await fetchNodeEdges(selectedEpisodeId, 0, 50, {
+        const starterNodes = await fetchNodeEdges(selectedEpisodeId || '', 0, 50, {
           nodeType: ['Show', 'Host', 'Guest'],
           useSubGraph: false,
         })
 
-        const clipNodes = await fetchNodeEdges(selectedEpisodeId, 0, 50, {
+        const clipNodes = await fetchNodeEdges(selectedEpisodeId || '', 0, 50, {
           nodeType: ['Clip'],
           useSubGraph: false,
         })
@@ -77,14 +81,15 @@ export const MindSet = () => {
           setClips(clipNodes?.nodes)
         }
       } catch (error) {
+        navigate('/')
         console.error('Error fetching initial data:', error)
       }
     }
 
     if (selectedEpisodeId) {
       fetchInitialData()
     }
-  }, [selectedEpisodeId, addNewNode, setClips])
+  }, [selectedEpisodeId, addNewNode, setClips, navigate])
 
   useEffect(() => {
     if (!clips) {
@@ -282,23 +287,19 @@ export const MindSet = () => {
   return (
     <MainContainer>
       <ContentWrapper direction="row">
-        {selectedEpisodeId ? (
-          <>
-            <Flex>
-              <Flex onClick={() => setShowTwoD(!showTwoD)}>
-                <Header />
-              </Flex>
-              <SideBar />
+        <>
+          <Flex>
+            <Flex onClick={() => setShowTwoD(!showTwoD)}>
+              <Header />
+            </Flex>
+            <SideBar />
+          </Flex>
+          <ContentContainer>
+            <Flex basis="100%" grow={1} shrink={1}>
+              <Universe />
             </Flex>
-            <ContentContainer>
-              <Flex basis="100%" grow={1} shrink={1}>
-                {showTwoD ? <Scene /> : <Universe />}
-              </Flex>
-            </ContentContainer>
-          </>
-        ) : (
-          <LandingPage />
-        )}
+          </ContentContainer>
+        </>
       </ContentWrapper>
       <PlayerControlWrapper>
         <PlayerControl markers={markers} />