delete project feature

himanshurajora · Jan 4, 2024 · 8947b85 · 8947b85
1 parent 0fa5420
commit 8947b85
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 59 deletions.
diff --git a/src/AddProjectDialog.tsx b/src/AddProjectDialog.tsx
@@ -6,7 +6,7 @@ import { InputText } from 'primereact/inputtext';
 import { Message } from 'primereact/message';
 import { MultiSelect } from 'primereact/multiselect';
 import { Slider } from 'primereact/slider';
-import { Dispatch, FC, SetStateAction, useContext } from 'react';
+import { Dispatch, FC, SetStateAction, useContext, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import {
   AddProjectDto,
@@ -27,23 +27,23 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
   const {
     register,
     setValue,
+    trigger,
     formState: { errors, isValid, isValidating, isLoading, isSubmitting },
     watch,
     getValues,
     reset,
+    handleSubmit,
   } = useForm<AddProjectDto>({
     mode: 'onChange',
     resolver: yupResolver<AddProjectDto>(validateAddProject),
-    defaultValues: {
-      description: '',
-      github_repository: '',
-      home_page: '',
-      languages: [],
-      name: '',
-      skill_level: 10,
-    },
   });
 
+  const values = watch();
+
+  useEffect(() => {
+    trigger();
+  }, [values]);
+
   const handleFormSubmit = async () => {
     try {
       const object = getValues();
@@ -80,7 +80,7 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
         type="submit"
         icon="pi pi-check"
         onClick={handleFormSubmit}
-        disabled={isLoading || isSubmitting || !isValid || isValidating}
+        disabled={isLoading || isSubmitting || isValidating || !isValid}
         autoFocus
       />
     </div>
@@ -95,7 +95,10 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
       footer={footerContent}
       maximizable
     >
-      <form className="flex flex-col gap-3">
+      <form
+        className="flex flex-col gap-3"
+        onSubmit={handleSubmit(handleFormSubmit)}
+      >
         <div className="flex flex-col flex-wrap align-items-center gap-2">
           <label htmlFor="name" className="p-sr-only">
             Name
@@ -104,6 +107,7 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
             placeholder="Name"
             className="flex-1"
             {...register('name')}
+            required
           />
           {errors.name && (
             <Message severity="error" text={errors.name.message} />
@@ -117,6 +121,7 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
             placeholder="Github URL"
             {...register('github_repository')}
             className="flex-1"
+            required
           />
           {errors.github_repository && (
             <Message severity="error" text={errors.github_repository.message} />
@@ -131,28 +136,38 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
             placeholder="Homepage"
             className="flex-1"
             {...register('home_page')}
+            required
           />
           {errors.home_page && (
             <Message severity="error" text={errors.home_page.message} />
           )}
         </div>
-        <MultiSelect
-          value={watch('languages')}
-          onChange={(e) => {
-            setValue('languages', e.value);
-          }}
-          options={_.map(ProjectsLanguagesOptions, (value, key) => {
-            return {
-              value,
-              label: key,
-            };
-          })}
-          filter
-          optionLabel="label"
-          placeholder="Select Languages"
-          maxSelectedLabels={3}
-          className="w-full md:w-20rem"
-        />
+        <div className="flex flex-col align-items-center gap-2">
+          <label htmlFor="languages" className="p-sr-only">
+            Languages
+          </label>
+          <MultiSelect
+            value={watch('languages')}
+            onChange={(e) => {
+              setValue('languages', e.value);
+            }}
+            options={_.map(ProjectsLanguagesOptions, (value, key) => {
+              return {
+                value,
+                label: key,
+              };
+            })}
+            filter
+            optionLabel="label"
+            placeholder="Select Languages"
+            maxSelectedLabels={3}
+            className="w-full md:w-20rem"
+            required
+          />
+          {errors.languages && (
+            <Message severity="error" text={errors.languages.message} />
+          )}
+        </div>
         <b className="ml-4">Skill Level:</b>
         <Slider
           className="mt-2 mx-6"
@@ -162,6 +177,7 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
               setValue('skill_level', event.value / 10);
           }}
           value={watch('skill_level') * 10}
+          required
         ></Slider>
         <div className="flex flex-row justify-between px-4 mt-1">
           <b>0</b>
@@ -175,6 +191,7 @@ export const AddProjectForm: FC<AddProjectFormProps> = ({
           onTextChange={(event) => {
             if (event.htmlValue) setValue('description', event.htmlValue);
           }}
+          required
         />
         <div className="flex flex-wrap flex-1 align-items-center gap-2">
           <label htmlFor="description" className="p-sr-only">

diff --git a/src/App.tsx b/src/App.tsx
@@ -14,17 +14,7 @@ function App() {
     loading: userLoading,
     setLoading: setUserLoading,
   } = useUserState();
-  const {
-    loading: projectsLoading,
-    projects,
-    setProjects,
-    setLoading: setProjectsLoading,
-    filters,
-    setFilters,
-    globalSearch,
-    setGlobalSearch,
-    addProject,
-  } = useProjects();
+  const projectFeatures = useProjects();
 
   return (
     <>
@@ -36,19 +26,7 @@ function App() {
           setLoading: setUserLoading,
         }}
       >
-        <StoreContext.Provider
-          value={{
-            filters,
-            loading: projectsLoading,
-            projects,
-            setProjects,
-            setFilters,
-            setLoading: setProjectsLoading,
-            globalSearch,
-            setGlobalSearch,
-            addProject,
-          }}
-        >
+        <StoreContext.Provider value={projectFeatures}>
           <Navbar></Navbar>
           <Dashboard></Dashboard>
         </StoreContext.Provider>

diff --git a/src/ProjectCard.tsx b/src/ProjectCard.tsx
@@ -1,21 +1,24 @@
+import _ from 'lodash';
+import moment from 'moment';
+import { Button } from 'primereact/button';
 import { Chip } from 'primereact/chip';
 import { Divider } from 'primereact/divider';
 import { Panel } from 'primereact/panel';
 import { ProgressBar } from 'primereact/progressbar';
-import { FC } from 'react';
+import { FC, useContext } from 'react';
+import { StoreContext } from './StoreContext';
+import { client } from './db';
 import { ProjectsResponse, UsersResponse } from './db.types';
 import { getGithubProfileUrl } from './utils';
-import _ from 'lodash';
-import moment from 'moment';
-import { Button } from 'primereact/button';
-import { client } from './db';
 
 export interface ProjectCardProps {
   project: ProjectsResponse<{ author: UsersResponse }>;
   key: string | number;
 }
 
 export const ProjectCard: FC<ProjectCardProps> = ({ project }) => {
+  const { deleteProject } = useContext(StoreContext);
+
   return (
     <Panel header={project.name} toggleable>
       <div className="w-full flex flex-wrap gap-2">
@@ -70,7 +73,12 @@ export const ProjectCard: FC<ProjectCardProps> = ({ project }) => {
           <>
             <Divider />
             <div className="flex justify-end">
-              <Button severity="danger">Delete</Button>
+              <Button
+                severity="danger"
+                onClick={() => deleteProject(project.id)}
+              >
+                Delete
+              </Button>
             </div>
           </>
         )}

diff --git a/src/StoreContext.ts b/src/StoreContext.ts
@@ -16,6 +16,7 @@ interface StoreContext {
   globalSearch: string | null;
   setGlobalSearch: (text: string) => void;
   addProject: (project: AddProjectDto) => Promise<ProjectsResponse | void>;
+  deleteProject: (projectId: string) => Promise<boolean>;
 }
 
 export const StoreContext = createContext<StoreContext>({
@@ -28,4 +29,5 @@ export const StoreContext = createContext<StoreContext>({
   globalSearch: null,
   setGlobalSearch: () => {},
   addProject: () => Promise.resolve(),
+  deleteProject: () => Promise.resolve(false),
 });
diff --git a/src/useProjects.ts b/src/useProjects.ts
@@ -86,8 +86,23 @@ export const useProjects = () => {
     if (client.authStore.model)
       return client
         .collection('projects')
-        .create({ ...project, author: client.authStore.model.id });
+        .create({ ...project, author: client.authStore.model.id })
+        .then((record) => {
+          fetch();
+          return record;
+        });
   };
+
+  const deleteProject = async (projectId: string) => {
+    return client
+      .collection('projects')
+      .delete(projectId)
+      .then((result) => {
+        fetch();
+        return result;
+      });
+  };
+
   const [loading, setLoading] = useState(false);
 
   return {
@@ -100,5 +115,6 @@ export const useProjects = () => {
     globalSearch,
     setGlobalSearch,
     addProject,
+    deleteProject,
   };
 };