feat: issues filter using views (#448)

* fix: made basic UI for views, binded services and logic for views

* feat: views list, delete view, and conditionally updating filters or my view props

apps/app/components/views/delete-view-modal.tsx

@@ -21,11 +21,12 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data?: IView;
+  data: IView | null;
+  onClose: () => void;
+  onSuccess?: () => void;
 };
 
-export const DeleteViewModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
+export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSuccess }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -36,19 +37,23 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
   const cancelButtonRef = useRef(null);
 
   const handleClose = () => {
-    setIsOpen(false);
     setIsDeleteLoading(false);
+    onClose();
   };
 
   const handleDeletion = async () => {
     setIsDeleteLoading(true);
 
-    if (!workspaceSlug || !data) return;
+    if (!workspaceSlug || !data || !projectId) return;
     await viewsService
-      .deleteView(projectId as string, data.id)
+      .deleteView(workspaceSlug as string, projectId as string, data.id)
       .then(() => {
-        mutate(VIEWS_LIST(projectId as string));
-        router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
+          views?.filter((view) => view.id !== data.id)
+        );
+
+        if (onSuccess) onSuccess();
+
         handleClose();
 
         setToastAlert({

apps/app/components/views/form.tsx

@@ -12,6 +12,7 @@ type Props = {
   handleClose: () => void;
   status: boolean;
   data?: IView;
+  preLoadedData?: Partial<IView> | null;
 };
 
 const defaultValues: Partial<IView> = {
@@ -19,7 +20,13 @@ const defaultValues: Partial<IView> = {
   description: "",
 };
 
-export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+export const ViewForm: React.FC<Props> = ({
+  handleFormSubmit,
+  handleClose,
+  status,
+  data,
+  preLoadedData,
+}) => {
   const {
     register,
     formState: { errors, isSubmitting },
@@ -44,6 +51,13 @@ export const ViewForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
     });
   }, [data, reset]);
 
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...preLoadedData,
+    });
+  }, [preLoadedData, reset]);
+
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">

apps/app/components/views/modal.tsx

@@ -4,8 +4,6 @@ import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
-// react-hook-form
-import { useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -23,14 +21,15 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IView;
+  preLoadedData?: Partial<IView> | null;
 };
 
-const defaultValues: Partial<IView> = {
-  name: "",
-  description: "",
-};
-
-export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+export const CreateUpdateViewModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  preLoadedData,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -38,14 +37,13 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
 
   const onClose = () => {
     handleClose();
-    reset(defaultValues);
   };
 
-  const { reset } = useForm<IView>({
-    defaultValues,
-  });
-
   const createView = async (payload: IView) => {
+    payload = {
+      ...payload,
+      query_data: payload.query,
+    };
     await viewsService
       .createView(workspaceSlug as string, projectId as string, payload)
       .then(() => {
@@ -137,6 +135,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
                   handleClose={handleClose}
                   status={data ? true : false}
                   data={data}
+                  preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>
             </Transition.Child>