fix(ui): project create or delete handling

frontend/app/components/Client/Projects/ProjectForm.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, FormEvent, useEffect } from 'react';
 import { Icon } from 'UI';
 import Project from '@/mstore/types/project';
 import { projectStore, useStore } from '@/mstore';
-import { Modal, Segmented, Form, Input, Button, Tooltip } from 'antd';
+import { App, Segmented, Form, Input, Button, Tooltip } from 'antd';
 import { toast } from 'react-toastify';
 import { observer } from 'mobx-react-lite';
 
@@ -20,6 +20,7 @@ function ProjectForm(props: Props) {
   const canDelete = projectsStore.list.length > 1;
   // const pathname = window.location.pathname;
   const mstore = useStore();
+  const { modal } = App.useApp();
 
   const handleEdit = ({ target: { name, value } }: ChangeEvent<HTMLInputElement>) => {
     setProject((prev: Project) => (new Project({ ...prev, [name]: value })));
@@ -42,7 +43,7 @@ function ProjectForm(props: Props) {
         .save(project!)
         .then((resp: Project) => {
           toast.success('Project created successfully');
-          onClose?.(null);
+          onClose?.(resp);
 
           // mstore.searchStore.clearSearch();
           // mstore.searchStoreLive.clearSearch();
@@ -57,7 +58,7 @@ function ProjectForm(props: Props) {
   };
 
   const handleRemove = async () => {
-    Modal.confirm({
+    modal.confirm({
       title: 'Project Deletion Alert',
       content: 'Are you sure you want to delete this project? Deleting it will permanently remove the project, along with all associated sessions and data.',
       onOk: () => {
@@ -65,10 +66,6 @@ function ProjectForm(props: Props) {
           if (onClose) {
             onClose(null);
           }
-          projectsStore.setConfigProject(parseInt(projectStore.list[0].id!));
-          if (project.id === projectsStore.active?.id) {
-            projectsStore.setSiteId(projectStore.list[0].id!);
-          }
         }).catch((error: Error) => {
           toast.error(error.message || 'An error occurred while deleting the project');
         });
@@ -83,8 +80,6 @@ function ProjectForm(props: Props) {
     }
   };
 
-  console.log('ProjectForm', project);
-
   return (
     <Form
       form={form}

frontend/app/components/shared/ProjectDropdown/ProjectDropdown.tsx

@@ -13,6 +13,7 @@ import NewSiteForm from 'Components/Client/Sites/NewSiteForm';
 import { Icon } from 'UI';
 import { useModal } from 'Components/ModalContext';
 import ProjectForm from 'Components/Client/Projects/ProjectForm';
+import Project from '@/mstore/types/project';
 
 const { Text } = Typography;
 
@@ -42,9 +43,17 @@ function ProjectDropdown(props: { location: any }) {
     // await searchStore.fetchSavedSearchList()
   };
 
+  const onClose = (pro: Project) => {
+    console.log('onClose', pro);
+    closeModal();
+    if (pro.projectId) {
+      void handleSiteChange(pro.projectId.toString());
+    }
+  };
+
   const addProjectClickHandler = () => {
     initProject({});
-    openModal(<ProjectForm onClose={closeModal} />, { title: 'New Project' });
+    openModal(<ProjectForm onClose={onClose} />, { title: 'New Project' });
   };
 
   const menuItems: MenuProps['items'] = sites.map((site) => ({

frontend/app/mstore/projectsStore.ts

@@ -191,7 +191,8 @@ export default class ProjectsStore {
       await projectsService.removeProject(projectId);
       runInAction(() => {
         this.list = this.list.filter(site => site.id !== projectId);
-        if (this.siteId === projectId) {
+        this.setConfigProject();
+        if (this.active?.id === projectId) {
           this.setSiteId(this.list[0].id!);
         }
       });
@@ -232,8 +233,13 @@ export default class ProjectsStore {
     }
 
     const project = this.list.find(site => site.projectId === pid);
-    this.config.pid = project?.projectId ?? undefined;
-    this.config.project = project ?? null;
+    if(!project) {
+      // set the first project as active
+      this.setConfigProject();
+    } else {
+      this.config.pid = project?.projectId ?? undefined;
+      this.config.project = project ?? null;
+    }
   };
 
   setConfigTab = (tab: string | null) => {

frontend/app/mstore/types/project.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, runInAction } from 'mobx';
+import { makeAutoObservable } from 'mobx';
 import GDPR from './gdpr';
 
 export default class Project {
@@ -20,7 +20,7 @@ export default class Project {
   constructor(data: Partial<Project> = {}) {
     Object.assign(this, data);
     this.gdpr = data.gdpr ? new GDPR(data.gdpr) : new GDPR();
-    this.id = data.projectId?.toString();
+    this.id = data.projectId?.toString() || data.id;
     this.host = data.name || '';
     makeAutoObservable(this);
   }

frontend/app/services/ProjectsService.ts

@@ -3,19 +3,16 @@ import BaseService from './BaseService';
 export default class ProjectsService extends BaseService {
   fetchGDPR = async (siteId: string) => {
     const r = await this.client.get(`/${siteId}/gdpr`);
-
     return await r.json();
   };
 
   saveGDPR = async (siteId: string, gdprData: any) => {
     const r = await this.client.post(`/${siteId}/gdpr`, gdprData);
-
     return await r.json();
   };
 
   fetchList = async () => {
     const r = await this.client.get('/projects');
-
     return await r.json();
   };
 
@@ -26,7 +23,6 @@ export default class ProjectsService extends BaseService {
 
   removeProject = async (projectId: string) => {
     const r = await this.client.delete(`/projects/${projectId}`);
-
     return await r.json();
   };