redirect to project

BlueBrain · Oct 3, 2024 · dae54c1 · dae54c1
1 parent e54c0da
commit dae54c1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 30 deletions.
diff --git a/src/components/VirtualLab/VirtualLabCTABanner/NewProjectCTABanner.tsx b/src/components/VirtualLab/VirtualLabCTABanner/NewProjectCTABanner.tsx
@@ -3,7 +3,6 @@
 import { NewProjectModal } from '../projects/VirtualLabProjectList';
 import VirtualLabCTABanner from '.';
 import { useAtom } from '@/state/state';
-import { basePath } from '@/config';
 
 type Props = {
   id: string;
@@ -13,7 +12,6 @@ type Props = {
 
 export default function NewProjectCTABanner({ title, subtitle, id }: Props) {
   const [, setNewProjectModalOpenAtom] = useAtom<boolean>('new-project-modal-open');
-  const href = (projectId: string) => `${basePath}/virtual-lab/lab/${id}/project/${projectId}/home`;
 
   return (
     <>
@@ -22,12 +20,7 @@ export default function NewProjectCTABanner({ title, subtitle, id }: Props) {
         subtitle={subtitle}
         onClick={() => setNewProjectModalOpenAtom(true)}
       />
-      <NewProjectModal
-        virtualLabId={id}
-        onSuccess={(project) => {
-          window.location.href = href(project.id);
-        }}
-      />
+      <NewProjectModal virtualLabId={id} />
     </>
   );
 }
diff --git a/src/components/VirtualLab/VirtualLabDashboard/index.tsx b/src/components/VirtualLab/VirtualLabDashboard/index.tsx
@@ -2,7 +2,6 @@
 
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Modal, Select, Switch } from 'antd';
-import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 
@@ -11,7 +10,6 @@ import { NewProjectModal } from '../projects/VirtualLabProjectList';
 import VirtualLabAndProject from './VirtualLabAndProject';
 import DashboardTotals from './DashboardTotals';
 
-import { virtualLabProjectsAtomFamily } from '@/state/virtual-lab/projects';
 import { VirtualLab } from '@/types/virtual-lab/lab';
 import { useAtom } from '@/state/state';
 
@@ -22,8 +20,6 @@ function VirtualLabDashboard({ virtualLabs }: { virtualLabs: VirtualLab[] }) {
   const [projectLocationModalOpen, setProjectLocationModalOpen] = useState(false);
   const [virtualLabId, setVirtualLabId] = useState('');
 
-  const refreshVirtualLabProjects = useSetAtom(virtualLabProjectsAtomFamily(virtualLabId));
-
   return (
     <>
       <div className="inset-0 z-0 grid grid-cols-[1fr_4fr] grid-rows-1 bg-primary-9 text-white">
@@ -99,12 +95,7 @@ function VirtualLabDashboard({ virtualLabs }: { virtualLabs: VirtualLab[] }) {
           onChange={(v) => setVirtualLabId(v)}
         />
       </Modal>
-      {!!virtualLabId && (
-        <NewProjectModal
-          onSuccess={(_) => refreshVirtualLabProjects()}
-          virtualLabId={virtualLabId}
-        />
-      )}
+      {!!virtualLabId && <NewProjectModal virtualLabId={virtualLabId} />}
     </>
   );
 }

diff --git a/src/components/VirtualLab/projects/VirtualLabProjectList/index.tsx b/src/components/VirtualLab/projects/VirtualLabProjectList/index.tsx
@@ -1,8 +1,9 @@
 import { Button, ConfigProvider, Modal, Spin, Form } from 'antd';
 import { useState, useEffect } from 'react';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { unwrap } from 'jotai/utils';
 import { PlusOutlined, LoadingOutlined, SearchOutlined } from '@ant-design/icons';
+import { useRouter } from 'next/navigation';
 import VirtualLabProjectItem from './VirtualLabProjectItem';
 import NewProjectModalForm from './NewProjectModalForm';
 import { selectedMembersAtom } from './shared';
@@ -13,7 +14,7 @@ import { virtualLabMembersAtomFamily } from '@/state/virtual-lab/lab';
 import { useUnwrappedValue } from '@/hooks/hooks';
 import { useAtom } from '@/state/state';
 import { assertErrorMessage, classNames } from '@/util/utils';
-import { Project } from '@/types/virtual-lab/projects';
+import { basePath } from '@/config';
 
 function NewProjectModalFooter({
   close,
@@ -57,17 +58,15 @@ function NewProjectModalFooter({
   );
 }
 
-export function NewProjectModal({
-  onSuccess,
-  virtualLabId,
-}: {
-  onSuccess?: (newProject: Project) => void;
-  virtualLabId: string;
-}) {
+export function NewProjectModal({ virtualLabId }: { virtualLabId: string }) {
   const [open, setOpen] = useAtom<boolean>('new-project-modal-open');
   const [loading, setLoading] = useState(false);
   const members = useUnwrappedValue(virtualLabMembersAtomFamily(virtualLabId));
   const includeMembers = useAtomValue(selectedMembersAtom);
+  const redirectUrl = (projectId: string) =>
+    `${basePath}/virtual-lab/lab/${virtualLabId}/project/${projectId}/home`;
+
+  const router = useRouter();
 
   const [isFormValid, setIsFormValid] = useState(false);
 
@@ -80,8 +79,8 @@ export function NewProjectModal({
       const res = await createProject({ name, description, includeMembers }, virtualLabId);
       form.resetFields();
       setOpen(false);
-      if (onSuccess) onSuccess(res.data.project);
       notification.success(`${res.data.project.name} has been created.`);
+      router.push(redirectUrl(res.data.project.id));
     } catch (e: any) {
       if ('errorFields' in e) return; // Input errors.
       notification.error(`Project creation failed: ${assertErrorMessage(e)}`); // Request Errors
@@ -150,7 +149,6 @@ function SearchProjects() {
 
 export default function VirtualLabProjectList({ id }: { id: string }) {
   const virtualLabProjects = useAtomValue(unwrap(virtualLabProjectsAtomFamily(id)));
-  const setVirtualLabProjects = useSetAtom(virtualLabProjectsAtomFamily(id));
   const [, setNewProjectModalOpen] = useAtom<boolean>('new-project-modal-open');
 
   if (!virtualLabProjects) {
@@ -173,7 +171,7 @@ export default function VirtualLabProjectList({ id }: { id: string }) {
               </div>
               <SearchProjects />
             </div>
-            <NewProjectModal onSuccess={setVirtualLabProjects} virtualLabId={id} />
+            <NewProjectModal virtualLabId={id} />
           </div>
           <div className="flex flex-col gap-4">
             {virtualLabProjects.results.map((project) => (