feat: on and on it goes 🥲

src/components/DeleteProjectModal.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { ModalComponent } from './ModalComponent'
+import { useAppDispatch } from './Store/hooks'
+import { deleteProject } from './Store/slices/projects'
+import { InfoboxComponent } from './InfoboxComponent';
+
+type Props = {
+  project: DBProject
+  callback?: (status: boolean) => void
+}
+
+const Component: FC<Props> = ({ project, callback }) => {
+  const dispatch = useAppDispatch();
+
+  const confirmCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    const rpcResult = await window.electron.deleteProject(project.name);
+    if (rpcResult.success) {
+      dispatch(deleteProject({ name: project.name }));
+      callback && callback(true);
+    }
+  };
+
+  const cancelCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    callback && callback(false);
+  };
+
+  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>
+    </>,
+    buttons: <>
+      <button className="button is-danger" onClick={confirmCallback}>Yes</button>
+      <button className="button is-primary" onClick={cancelCallback}>No</button>
+    </>
+  });
+}
+
+export const DeleteProjectModal = Component;

src/components/DeleteTaskDefinitionModal.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { ModalComponent } from './ModalComponent'
+import { useAppDispatch } from './Store/hooks'
+import { removeTaskDefinition } from './Store/slices/taskDefinitions'
+import { InfoboxComponent } from './InfoboxComponent';
+
+type Props = {
+  taskDefinition: DBTaskDefinition
+  callback?: (status: boolean) => void
+}
+
+const Component: FC<Props> = ({ taskDefinition, callback }) => {
+  const dispatch = useAppDispatch();
+
+  const confirmCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    const rpcResult = await window.electron.deleteTaskDefinition(taskDefinition);
+    if (rpcResult.success) {
+      dispatch(removeTaskDefinition(taskDefinition));
+      callback && callback(true);
+    }
+  };
+
+  const cancelCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    callback && callback(false);
+  };
+
+  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>
+    </>,
+    buttons: <>
+      <button className="button is-danger" onClick={confirmCallback}>Yes</button>
+      <button className="button is-primary" onClick={cancelCallback}>No</button>
+    </>
+  });
+}
+
+export const DeleteTaskDefinitionModal = Component;

src/components/DeleteTaskModal.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { ModalComponent } from './ModalComponent'
+import { useAppDispatch } from './Store/hooks'
+import { deleteTask } from './Store/slices/tasks'
+
+type Props = {
+  task: DBTask
+  callback?: (status: boolean) => void
+}
+
+const Component: FC<Props> = ({ task, callback }) => {
+  const dispatch = useAppDispatch();
+
+  const confirmCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    const rpcResult = await window.electron.deleteTask(task);
+    if (rpcResult.success) {
+      dispatch(deleteTask(task));
+      callback && callback(true);
+    }
+  };
+
+  const cancelCallback = async (evt: React.MouseEvent) => {
+    evt.preventDefault();
+    callback && callback(false);
+  };
+
+  return ModalComponent({
+    title: 'Delete Task',
+    children: <>
+      <p>Are you sure you want to delete this task</p>
+    </>,
+    buttons: <>
+      <button className="button is-danger" onClick={confirmCallback}>Yes</button>
+      <button className="button is-primary" onClick={cancelCallback}>No</button>
+    </>
+  });
+}
+
+export const DeleteTaskModal = Component;

src/components/EditProjectModal.tsx

@@ -1,41 +1,49 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useRef } from 'react';
+import { replaceProject } from './Store/slices/projects'
+import { useAppDispatch } from './Store/hooks'
 
 interface BaseLayoutProps {
   children?: ReactNode;
-  name: string;
-  useRef: React.RefObject<HTMLDivElement>;
+  project: DBProject;
   callback?: (status: boolean) => void;
 }
 
-export const EditProjectModal: FC<BaseLayoutProps> = ({ callback, name, useRef }) => {
-  const onEditButtonClick = (evt: React.MouseEvent) => {
+export const EditProjectModal: FC<BaseLayoutProps> = ({ callback, project }) => {
+  const ref = useRef<HTMLFormElement>(null);
+  const dispatch = useAppDispatch();
+
+  const onEditButtonClick = async (evt: React.MouseEvent) => {
     evt.preventDefault();
-    if (callback) {
-      callback(true);
+    const form = ref.current.querySelector('form') 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);
   }
 
   const onCancelButtonClick = (evt: React.MouseEvent) => {
     evt.preventDefault();
-    if (callback) {
-      callback(false);
-    }
+    callback && callback(false);
   }
 
   return <>
-    <div className="modal is-active" ref={useRef}>
+    <div className="modal is-active">
       <div className="modal-background"></div>
       <div className="modal-card">
-        <form>
+        <form ref={ref}>
           <header className="modal-card-head">
             <p className="modal-card-title">Edit Project</p>
           </header>
           <section className="modal-card-body">
             <div className="field">
               <label className="label">Project Name</label>
               <div className="control">
-                <input type="hidden" name="oldname" defaultValue={name} />
-                <input className="input" name="name" required defaultValue={name} type="text" placeholder="Project Name" />
+                <input type="hidden" name="oldname" defaultValue={project.name} />
+                <input className="input" name="name" required defaultValue={project.name} type="text" placeholder="Project Name" />
               </div>
             </div>
           </section>

src/components/ModalComponent.tsx

@@ -1,23 +1,29 @@
-import React, { FC, ReactNode } from 'react';
-import { clsx } from 'clsx';
+import { FC, ReactNode } from 'react';
 
 interface BaseLayoutProps {
-  title?: string;
+  title: string;
   children: ReactNode;
   buttons: ReactNode;
 }
 
-const Component: FC<BaseLayoutProps> = ({ children, buttons }) => {
+const Component: FC<BaseLayoutProps> = ({ title, children, buttons }) => {
   return <>
     <div className="modal is-active">
       <div className="modal-background"></div>
-      <div className="modal-content">
-        <div className="box">
-          {children ? children : null }
-          <div className="buttons">
-            { buttons ? buttons : null }
-          </div>
-        </div>
+      <div className="modal-card">
+        <form>
+          <header className="modal-card-head">
+            <p className="modal-card-title">{title}</p>
+          </header>
+          <section className="modal-card-body">
+            {children ? children : null }
+          </section>
+          <footer className="modal-card-foot">
+            <div className="buttons">
+              { buttons ? buttons : null }
+            </div>
+          </footer>
+        </form>
       </div>
     </div>
   </>;

src/components/Projects.tsx

@@ -14,7 +14,6 @@ export const Projects: FC = () => {
   const selectedProject = useAppSelector((state) => state.selectedProject.value)
   const [useModalConfirm, setModalConfirm] = useState(null)
   const [useModalEdit, setModalEdit] = useState(null)
-  const useModalEditRef = useRef(null)
 
   const onFormSubmit = async (evt: React.FormEvent) => {
     evt.preventDefault();
@@ -57,24 +56,17 @@ export const Projects: FC = () => {
     setModalConfirm(<ModalConfirm message="Are you sure you want to delete this project?" callback={onConfirmCallback} />)
   }
 
-  const onEditProjectCallback = async (status: boolean) => {
+  const onEditProjectCallback = async (status: boolean, project: DBProject) => {
     if (status) {
-      const form = useModalEditRef.current.querySelector('form') 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 }));
-        dispatch(setSelectedProject({ name: name }));
-      }
+      dispatch(setSelectedProject({ name: project.name }));
     }
     setModalEdit(null)
   }
 
-  const onEditButtonClick = async (evt: React.MouseEvent) => {
+  const onEditButtonClick = async (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
-    setModalEdit(<EditProjectModal useRef={useModalEditRef} name={selectedProject.name} callback={onEditProjectCallback} />)
+    const data = JSON.parse(evt.currentTarget.dataset.data as string) as DBProject
+    setModalEdit(<EditProjectModal  project={data} callback={(status) => onEditProjectCallback(status, data)} />)
   }
 
   const fetchProjects = async () => {
@@ -131,8 +123,8 @@ export const Projects: FC = () => {
               <form data-buttons className="p-4">
                 <div className="field">
                   <div className="control">
-                    <button className="button is-warning m-1" onClick={onEditButtonClick}>Edit</button>
-                    <button className="button is-danger m-1" onClick={onDeleteButtonClick}>Delete</button>
+                    <button className="button is-warning m-1" data-data={JSON.stringify(selectedProject)} onClick={onEditButtonClick}>Edit</button>
+                    <button className="button is-danger m-1" data-data={JSON.stringify(selectedProject)} onClick={onDeleteButtonClick}>Delete</button>
                   </div>
                 </div>
               </form>

src/components/Search.tsx

@@ -1,7 +1,9 @@
 import React, { FC, useRef, useState  } from 'react';
 import moment from 'moment';
 import { LoadingComponent } from './LoadingComponent';
+import { EditProjectModal } from './EditProjectModal'
 import { DeleteProjectModal } from './DeleteProjectModal'
+import { EditTaskModal } from './EditTaskModal'
 import { DeleteTaskModal } from './DeleteTaskModal'
 import { DeleteTaskDefinitionModal } from './DeleteTaskDefinitionModal'
 
@@ -36,6 +38,22 @@ const SearchResultsProjectsComponent: FC<Props> = ({ searchResult, setSearchResu
     setModal(<DeleteProjectModal project={data} callback={(status) => delModalCallback(status, data)} />);
   }
 
+  const editModalCallback = (status: boolean, data: DBProject) => {
+    if (status) {
+      const filteredProjects = searchResult.projects.filter((project: DBProject) => project.name !== data.name);
+      searchResult.projects = filteredProjects;
+      setSearchResults(searchResult);
+    }
+    setModal(null)
+  }
+
+  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)} />);
+  }
+
+
   return <>
     <div>
       <div className="field">
@@ -56,7 +74,7 @@ const SearchResultsProjectsComponent: FC<Props> = ({ searchResult, setSearchResu
             <div className="column">
               <div className="field">
                 <div className="control">
-                  <button className="button is-warning" data-data={JSON.stringify(project)} onClick={showDeleteConfirmModal}>Edit</button>
+                  <button className="button is-warning" data-data={JSON.stringify(project)} onClick={showEditModal}>Edit</button>
                   <button className="button is-danger" data-data={JSON.stringify(project)} onClick={showDeleteConfirmModal}>Delete</button>
                 </div>
               </div>

src/components/Store/slices/selectedProject.ts

@@ -1,9 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
 interface SelectedProjectState {
-  value: {
-    name: string | null
-  }
+  value: DBProject
 }
 
 // Define the initial state using that type