From c2b84d18b5f2ab2970568178b423ba47478283ef Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 11 Feb 2025 15:23:37 +0100 Subject: [PATCH] fix(ui): project create or delete handling --- .../app/components/Client/Projects/ProjectForm.tsx | 13 ++++--------- .../shared/ProjectDropdown/ProjectDropdown.tsx | 11 ++++++++++- frontend/app/mstore/projectsStore.ts | 12 +++++++++--- frontend/app/mstore/types/project.ts | 4 ++-- frontend/app/services/ProjectsService.ts | 4 ---- 5 files changed, 25 insertions(+), 19 deletions(-) diff --git a/frontend/app/components/Client/Projects/ProjectForm.tsx b/frontend/app/components/Client/Projects/ProjectForm.tsx index 62bc2a77e..879260022 100644 --- a/frontend/app/components/Client/Projects/ProjectForm.tsx +++ b/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) => { 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 (
{ + console.log('onClose', pro); + closeModal(); + if (pro.projectId) { + void handleSiteChange(pro.projectId.toString()); + } + }; + const addProjectClickHandler = () => { initProject({}); - openModal(, { title: 'New Project' }); + openModal(, { title: 'New Project' }); }; const menuItems: MenuProps['items'] = sites.map((site) => ({ diff --git a/frontend/app/mstore/projectsStore.ts b/frontend/app/mstore/projectsStore.ts index 85db5fa90..6d11ca7e7 100644 --- a/frontend/app/mstore/projectsStore.ts +++ b/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) => { diff --git a/frontend/app/mstore/types/project.ts b/frontend/app/mstore/types/project.ts index f3dc75f95..da55ad1b6 100644 --- a/frontend/app/mstore/types/project.ts +++ b/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 = {}) { 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); } diff --git a/frontend/app/services/ProjectsService.ts b/frontend/app/services/ProjectsService.ts index b661ba141..688bca401 100644 --- a/frontend/app/services/ProjectsService.ts +++ b/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(); };