feat: rework ongoing 🚧

src/components/DeleteProjectModal.tsx

@@ -29,12 +29,12 @@ const Component: FC<Props> = ({ project, callback }) => {
   return ModalComponent({
     title: 'Delete Project',
     children: <>
-      <p>Are you sure you want to delete this project?</p>
       <InfoboxComponent type="danger" title="Warning">
         <p>Deleting a project is a hazardious action.</p>
         <p>If you delete a project, it'll also delete all its tasks and task-definitions.</p>
         <p>Maybe consider marking it as inactive?</p>
       </InfoboxComponent>
+      <p>Are you sure you want to delete this project ({project.name})?</p>
     </>,
     buttons: <>
       <button className="button is-danger" onClick={confirmCallback}>Yes</button>

src/components/DeleteTaskDefinitionModal.tsx

@@ -29,12 +29,12 @@ const Component: FC<Props> = ({ taskDefinition, callback }) => {
   return ModalComponent({
     title: 'Delete Task Definition',
     children: <>
-      <p>Are you sure you want to delete this task definition?</p>
       <InfoboxComponent type="danger" title="Warning">
         <p>Deleting a task definition is a hazardious action.</p>
         <p>If you delete a task definition, it'll also delete all its tasks.</p>
         <p>Maybe consider marking it as inactive?</p>
       </InfoboxComponent>
+      <p>Are you sure you want to delete this task definition?</p>
     </>,
     buttons: <>
       <button className="button is-danger" onClick={confirmCallback}>Yes</button>

src/components/EditProjectModal.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch } from './Store/hooks'
 interface BaseLayoutProps {
   children?: ReactNode;
   project: DBProject;
-  callback?: (status: boolean) => void;
+  callback?: (status: boolean, project?: DBProject) => void;
 }
 
 export const EditProjectModal: FC<BaseLayoutProps> = ({ callback, project }) => {
@@ -14,15 +14,15 @@ export const EditProjectModal: FC<BaseLayoutProps> = ({ callback, project }) =>
 
   const onEditButtonClick = async (evt: React.MouseEvent) => {
     evt.preventDefault();
-    const form = ref.current.querySelector('form') as HTMLFormElement;
+    const form = ref.current as HTMLFormElement;
     const formData = new FormData(form);
     const oldname = formData.get("oldname") as string
     const name = formData.get("name") as string
     const rpcResult = await window.electron.editProject({ oldname, name })
     if (rpcResult.success) {
       dispatch(replaceProject({ name, oldname }));
     }
-    callback && callback(true);
+    callback && callback(true, { name });
   }
 
   const onCancelButtonClick = (evt: React.MouseEvent) => {

src/components/Projects.tsx

@@ -6,6 +6,7 @@ import { removeSelectedTaskDefinition } from './Store/slices/selectedTaskDefinit
 import { Datafetcher } from './../lib/Datafetcher';
 import { removeActiveClassnameProjects, removeActiveClassnameTaskDefinitions } from './../lib/Utils';
 import { ModalConfirm } from './ModalConfirm';
+import { DeleteProjectModal } from './DeleteProjectModal';
 import { EditProjectModal } from './EditProjectModal';
 
 export const Projects: FC = () => {
@@ -41,32 +42,28 @@ export const Projects: FC = () => {
     if (status) {
       const project = projects.find((p) => p.name === selectedProject.name)
       if (project) {
-        const rpcResult = await window.electron.deleteProject(project.name)
-        if (rpcResult.success) {
-          dispatch(deleteProject({ name: selectedProject.name }));
-          dispatch(removeSelectedProject());
-        }
+        dispatch(removeSelectedProject());
       }
     }
     setModalConfirm(null)
   }
 
   const onDeleteButtonClick = async (evt: React.MouseEvent) => {
     evt.preventDefault();
-    setModalConfirm(<ModalConfirm message="Are you sure you want to delete this project?" callback={onConfirmCallback} />)
+    setModalConfirm(<DeleteProjectModal project={selectedProject} callback={onConfirmCallback} />)
   }
 
-  const onEditProjectCallback = async (status: boolean, project: DBProject) => {
+  const onEditProjectCallback = async (status: boolean, editedProjectData: DBProject) => {
     if (status) {
-      dispatch(setSelectedProject({ name: project.name }));
+      dispatch(setSelectedProject({ name: editedProjectData.name }));
     }
     setModalEdit(null)
   }
 
   const onEditButtonClick = async (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
     const data = JSON.parse(evt.currentTarget.dataset.data as string) as DBProject
-    setModalEdit(<EditProjectModal  project={data} callback={(status) => onEditProjectCallback(status, data)} />)
+    setModalEdit(<EditProjectModal  project={data} callback={(status, data) => onEditProjectCallback(status, data)} />)
   }
 
   const fetchProjects = async () => {

src/components/Search.tsx

@@ -38,9 +38,15 @@ const SearchResultsProjectsComponent: FC<Props> = ({ searchResult, setSearchResu
     setModal(<DeleteProjectModal project={data} callback={(status) => delModalCallback(status, data)} />);
   }
 
-  const editModalCallback = (status: boolean, data: DBProject) => {
+  const editModalCallback = (status: boolean, data: DBProject, editedData: DBProject) => {
     if (status) {
-      const filteredProjects = searchResult.projects.filter((project: DBProject) => project.name !== data.name);
+      const filteredProjects = searchResult.projects.map((project: DBProject) => {
+        if (project.name === data.name) {
+          data.name = editedData.name;
+          return data;
+        }
+        return project;
+      });
       searchResult.projects = filteredProjects;
       setSearchResults(searchResult);
     }
@@ -50,7 +56,7 @@ const SearchResultsProjectsComponent: FC<Props> = ({ searchResult, setSearchResu
   const showEditModal = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
     const data = JSON.parse(evt.currentTarget.dataset.data) as DBProject;
-    setModal(<EditProjectModal project={data} callback={(status: boolean) => editModalCallback(status, data)} />);
+    setModal(<EditProjectModal project={data} callback={(status: boolean, editedData: DBProject) => editModalCallback(status, data, editedData)} />);
   }