Add vl switching

BlueBrain · Apr 10, 2024 · 8fc2626 · 8fc2626
1 parent 0fc0247
commit 8fc2626
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(lab)/layout.tsx
@@ -6,12 +6,18 @@ import SimpleErrorComponent from '@/components/GenericErrorFallback';
 import VirtualLabTopMenu from '@/components/VirtualLab/VirtualLabTopMenu';
 import VirtualLabSidebar from '@/components/VirtualLab/VirtualLabSidebar';
 
-export default function VirtualLabPageLayout({ children }: { children: ReactNode }) {
+export default function VirtualLabPageLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { virtualLabId: string };
+}) {
   return (
     <div className="inset-0 z-0 grid h-screen grid-cols-[1fr_3fr] grid-rows-1 overflow-y-scroll bg-primary-9 p-10 text-white">
       <ErrorBoundary FallbackComponent={SimpleErrorComponent}>
         <div className="flex flex-row gap-4">
-          <VirtualLabSidebar />
+          <VirtualLabSidebar virtualLabId={params.virtualLabId} />
         </div>
       </ErrorBoundary>
       <ErrorBoundary FallbackComponent={SimpleErrorComponent}>

diff --git a/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx b/src/components/VirtualLab/VirtualLabSidebar/VirtualLabsSelect.tsx
@@ -1,11 +1,17 @@
+'use client';
+
 import { ConfigProvider, Select, Spin } from 'antd';
 import { LoadingOutlined, SwapOutlined } from '@ant-design/icons';
 import { useAtomValue } from 'jotai';
 import { loadable } from 'jotai/utils';
+import { usePathname, useRouter } from 'next/navigation';
 import { virtualLabOfUserAtom } from '@/state/virtual-lab/lab';
 
 export default function VirtualLabsSelect() {
   const virtualLabs = useAtomValue(loadable(virtualLabOfUserAtom));
+  const router = useRouter();
+  const path = usePathname();
+
   if (virtualLabs.state === 'loading') {
     return <Spin indicator={<LoadingOutlined />} />;
   }
@@ -35,8 +41,10 @@ export default function VirtualLabsSelect() {
     >
       <Select
         suffixIcon={<SwapOutlined style={{ color: '#40A9FF' }} />}
-        defaultValue="1"
-        onChange={() => {}}
+        defaultValue="Switch Virtual Lab"
+        onChange={(selected) => {
+          router.push(`/virtual-lab/lab/${selected}/${path.split('/').reverse()[0]}`);
+        }}
         options={virtualLabOptions}
       />
     </ConfigProvider>

diff --git a/src/components/VirtualLab/VirtualLabSidebar/index.tsx b/src/components/VirtualLab/VirtualLabSidebar/index.tsx
@@ -1,11 +1,34 @@
 'use client';
 
+import { Spin } from 'antd';
 import { usePathname } from 'next/navigation';
+import { loadable } from 'jotai/utils';
+import { useAtomValue } from 'jotai';
+import { LoadingOutlined } from '@ant-design/icons';
+
 import VirtualLabsSelect from './VirtualLabsSelect';
+import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
 import VerticalLinks, { LinkItem } from '@/components/VerticalLinks';
 
-export default function VirtualLabSidebar() {
+type Props = {
+  virtualLabId: string;
+};
+
+export default function VirtualLabSidebar({ virtualLabId }: Props) {
   const currentPage = usePathname().split('/').pop();
+  const virtualLab = useAtomValue(loadable(virtualLabDetailAtomFamily(virtualLabId)));
+
+  const renderVirtualLabTitle = () => {
+    if (virtualLab.state === 'loading') {
+      return <Spin indicator={<LoadingOutlined />} />;
+    }
+    if (virtualLab.state === 'hasData') {
+      return (
+        <div className="text-5xl font-bold uppercase text-primary-5">{virtualLab.data.name}</div>
+      );
+    }
+    return null;
+  };
 
   const linkItems: LinkItem[] = [
     { key: 'lab', content: 'The Virtual Lab', href: 'lab' },
@@ -32,8 +55,8 @@ export default function VirtualLabSidebar() {
     { key: 'admin', content: 'Admin', href: 'admin' },
   ];
   return (
-    <div className="mr-12 flex flex-col gap-5">
-      <div className="text-5xl font-bold uppercase text-primary-5">Institute of Neuroscience</div>
+    <div className="mr-12 flex w-full flex-col gap-5">
+      {renderVirtualLabTitle()}
       <VirtualLabsSelect />
       <VerticalLinks links={linkItems} currentPage={currentPage} />
     </div>