style: views list page, chore: views favotire (#562)

apps/app/components/modules/single-module-card.tsx

@@ -55,29 +55,22 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
   };
 
   const handleAddToFavorites = () => {
-    if (!workspaceSlug && !projectId && !module) return;
+    if (!workspaceSlug || !projectId || !module) return;
+
+    mutate<IModule[]>(
+      MODULE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((m) => ({
+          ...m,
+          is_favorite: m.id === module.id ? true : m.is_favorite,
+        })),
+      false
+    );
 
     modulesService
       .addModuleToFavorites(workspaceSlug as string, projectId as string, {
         module: module.id,
       })
-      .then(() => {
-        mutate<IModule[]>(
-          MODULE_LIST(projectId as string),
-          (prevData) =>
-            (prevData ?? []).map((m) => ({
-              ...m,
-              is_favorite: m.id === module.id ? true : m.is_favorite,
-            })),
-          false
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Successfully added the module to favorites.",
-        });
-      })
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -88,26 +81,20 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
   };
 
   const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !module) return;
+    if (!workspaceSlug || !projectId || !module) return;
+
+    mutate<IModule[]>(
+      MODULE_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((m) => ({
+          ...m,
+          is_favorite: m.id === module.id ? false : m.is_favorite,
+        })),
+      false
+    );
 
     modulesService
       .removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id)
-      .then(() => {
-        mutate<IModule[]>(
-          MODULE_LIST(projectId as string),
-          (prevData) =>
-            (prevData ?? []).map((m) => ({
-              ...m,
-              is_favorite: m.id === module.id ? false : m.is_favorite,
-            })),
-          false
-        );
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Successfully removed the module from favorites.",
-        });
-      })
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -161,11 +148,11 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                   <span className="capitalize">{module?.status?.replace("-", " ")}</span>
                 </div>
                 {module.is_favorite ? (
-                  <button onClick={handleRemoveFromFavorites}>
+                  <button type="button" onClick={handleRemoveFromFavorites}>
                     <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                   </button>
                 ) : (
-                  <button onClick={handleAddToFavorites}>
+                  <button type="button" onClick={handleAddToFavorites}>
                     <StarIcon className="h-4 w-4 " color="#858E96" />
                   </button>
                 )}

apps/app/components/views/index.ts

@@ -2,3 +2,4 @@ export * from "./delete-view-modal";
 export * from "./form";
 export * from "./modal";
 export * from "./select-filters";
+export * from "./single-view-item"

apps/app/components/views/single-view-item.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { IView } from "types";
+
+// icons
+import { TrashIcon, StarIcon } from "@heroicons/react/24/outline";
+import { StackedLayersIcon } from "components/icons";
+
+//components
+import { CustomMenu } from "components/ui";
+
+import viewsService from "services/views.service";
+
+import { mutate } from "swr";
+
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+import useToast from "hooks/use-toast";
+
+type Props = {
+  view: IView,
+  setSelectedView: React.Dispatch<React.SetStateAction<IView | null>>,
+};
+
+
+export const SingleViewItem: React.FC<Props> = ({
+  view,
+  setSelectedView,
+}) => {
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId || !view) return;
+
+    mutate<IView[]>(
+      VIEWS_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((v) => ({
+          ...v,
+          is_favorite: v.id === view.id ? true : v.is_favorite,
+        })),
+      false
+    );
+
+    viewsService
+      .addViewToFavorites(workspaceSlug as string, projectId as string, {
+        view: view.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the view to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !view) return;
+
+    mutate<IView[]>(
+      VIEWS_LIST(projectId as string),
+      (prevData) =>
+        (prevData ?? []).map((v) => ({
+          ...v,
+          is_favorite: v.id === view.id ? false : v.is_favorite,
+        })),
+      false
+    );
+
+    viewsService
+      .removeViewFromFavorites(workspaceSlug as string, projectId as string, view.id)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the view from favorites. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <div
+      className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
+    >
+      <div className="flex flex-col w-full gap-3">
+        <div className="flex justify-between w-full">
+          <div className="flex items-center gap-2">
+            <StackedLayersIcon height={18} width={18} />
+            <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+              <a>{view.name}</a>
+            </Link>
+          </div>
+          <div className="flex">
+            {
+              view.is_favorite ? (
+                <button type="button" onClick={handleRemoveFromFavorites}>
+                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                </button>
+              ) : (
+                <button type="button" onClick={handleAddToFavorites}>
+                  <StarIcon className="h-4 w-4 " color="#858E96" />
+                </button>
+              )
+            }
+            <CustomMenu width="auto" verticalEllipsis>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setSelectedView(view);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2 text-gray-800">
+                  <TrashIcon className="h-4 w-4" />
+                  <span>Delete</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </div>
+        {view?.description && <p className="text-sm text-[#858E96] font-normal leading-5 px-[27px]">
+          {view.description}
+        </p>}
+      </div>
+    </div>
+  )
+}

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -16,19 +15,18 @@ import projectService from "services/project.service";
 import AppLayout from "layouts/app-layout";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
+
-import { TrashIcon } from "@heroicons/react/24/outline";
 // image
 import emptyView from "public/empty-state/empty-view.svg";
 // fetching keys
 import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
-import { CustomMenu, PrimaryButton, Loader, EmptyState } from "components/ui";
+import { PrimaryButton, Loader, EmptyState } from "components/ui";
-import { DeleteViewModal, CreateUpdateViewModal } from "components/views";
+import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
+
 // types
 import { IView, UserAuth } from "types";
 import type { NextPage, GetServerSidePropsContext } from "next";
-import { StackedLayersIcon } from "components/icons";
 
 const ProjectViews: NextPage<UserAuth> = (props) => {
   const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
@@ -52,6 +50,8 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
       : null
   );
 
+  console.log(views)
+
   return (
     <AppLayout
       meta={{
@@ -88,29 +88,11 @@ const ProjectViews: NextPage<UserAuth> = (props) => {
             <h3 className="text-3xl font-semibold text-black">Views</h3>
             <div className="rounded-[10px] border">
               {views.map((view) => (
-                <div
+                <SingleViewItem
-                  className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
                   key={view.id}
-                >
+                  view={view}
-                  <div className="flex items-center gap-2">
+                  setSelectedView={setSelectedView}
-                    <StackedLayersIcon height={18} width={18} />
+                />
-                    <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
-                      <a>{view.name}</a>
-                    </Link>
-                  </div>
-                  <CustomMenu width="auto" verticalEllipsis>
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        setSelectedView(view);
-                      }}
-                    >
-                      <span className="flex items-center justify-start gap-2 text-gray-800">
-                        <TrashIcon className="h-4 w-4" />
-                        <span>Delete</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                </div>
               ))}
             </div>
           </div>

apps/app/services/modules.service.ts

@@ -1,7 +1,7 @@
 // services
 import APIService from "services/api.service";
 // types
-import type { IIssueViewOptions, IModule, ModuleIssueResponse, IIssue } from "types";
+import type { IIssueViewOptions, IModule, IIssue } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 

apps/app/services/views.service.ts

@@ -80,6 +80,38 @@ class ViewServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async addViewToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeViewFromFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
 }
 
 export default new ViewServices();

apps/app/types/views.d.ts

@@ -3,6 +3,7 @@ export interface IView {
   access: string;
   created_at: Date;
   updated_at: Date;
+  is_favorite: boolean;
   created_by: string;
   updated_by: string;
   name: string;