[Admin ] - Gab/unfeature collection (#165)

* add api * add modal * fix page number * format
Bendomey · Jan 9, 2025 · 278ec39 · 278ec39
1 parent 6456e7f
commit 278ec39
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 21 deletions.
diff --git a/apps/admin/api/collection/index.ts b/apps/admin/api/collection/index.ts
@@ -75,3 +75,32 @@ const featureCollection = async (id: string) => {
 }
 
 export const useFeatureCollection = () => useMutation({mutationFn: featureCollection})
+
+
+/**
+ * Unfeature collection
+ *
+ * @throws {Error} - Throws an error if there's a problem with the API response.
+ *
+ *  @returns {Promise<object>} - boolean
+ */
+
+const unfeatureCollection = async (id: string) => {
+  try {
+    await fetchClient<boolean>(`/v1/collections/${id}/unfeature`, {
+      method: 'PATCH',
+    })
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error
+    }
+
+    // Error from server.
+    if (error instanceof Response) {
+      const response = await error.json()
+      throw new Error(response.message)
+    }
+  }
+}
+
+export const useUnfeatureCollection = () => useMutation({mutationFn: unfeatureCollection})
diff --git a/apps/admin/api/content/index.ts b/apps/admin/api/content/index.ts
@@ -22,7 +22,7 @@ const getContents = async (
     const params = new URLSearchParams(removeAllNullableValues)
 
     const response: APIResponse<Content> = await fetchClient(
-      `/v1/contents/search/textual?${params.toString()}`,
+      `/v1/contents?${params.toString()}`,
     )
 
     return response.parsedBody.data

diff --git a/apps/admin/modules/admin/index.tsx b/apps/admin/modules/admin/index.tsx
@@ -44,7 +44,7 @@ export const ListAdmins = () => {
   const search = searchParams.get("search");
   const adminFilter = searchParams.get("status");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,

diff --git a/apps/admin/modules/collection/index.tsx b/apps/admin/modules/collection/index.tsx
@@ -21,6 +21,7 @@ import { localizedDayjs } from "@/lib/date";
 import { DataTableColumnHeader } from "@/components/table/components";
 import { createDataTableError } from "@/lib/utils";
 import { FeatureCollectionModal } from "./feature";
+import { UnfeatureCollectionModal } from "./unfeature";
 
 const COLLECTIONS_PER_PAGE = 50;
 
@@ -44,7 +45,7 @@ export const ListCollections = () => {
   const search = searchParams.get("search");
   const contentFilter = searchParams.get("visibility");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,
@@ -187,6 +188,13 @@ export const ListCollections = () => {
         data={selectedCollection}
         refetch={refetch}
       />
+
+      <UnfeatureCollectionModal
+        opened={openUnFeaturedModal}
+        setOpened={setOpenUnFeaturedModal}
+        data={selectedCollection}
+        refetch={refetch}
+      />
     </>
   );
 };
diff --git a/apps/admin/modules/collection/unfeature/index.tsx b/apps/admin/modules/collection/unfeature/index.tsx
@@ -0,0 +1,85 @@
+import { Button } from "@/components/ui/button";
+import { Dispatch, SetStateAction } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogOverlay,
+} from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import { useUnfeatureCollection } from "@/api";
+import { Loader2Icon } from "lucide-react";
+
+interface UnfeatureCollectionModalProps {
+  data?: Collection;
+  refetch: VoidFunction;
+  opened: boolean;
+  setOpened: Dispatch<SetStateAction<boolean>>;
+}
+
+export const UnfeatureCollectionModal = ({
+  data,
+  refetch,
+  opened,
+  setOpened,
+}: UnfeatureCollectionModalProps) => {
+  const { toast } = useToast();
+  const { mutate, isPending: isLoading } = useUnfeatureCollection();
+
+  const handleSubmit = () => {
+    if (!data) {
+      toast({
+        title: "Collection data not found",
+        variant: "destructive",
+      })
+      return;
+    }
+
+      mutate(
+        data.id,
+        {
+          onError: () => {
+            toast({
+              title: "We couldn't process your request",
+              variant: "destructive",
+            })   
+
+          }, onSuccess: () => {
+          refetch()
+          toast({
+            title: "Collection unfeatured successfully",
+            variant: "success",
+          });
+          setOpened(false);
+        }
+      }
+      )
+  };
+
+  const name = <span className="capitalize">{data?.name.endsWith("s") ? data?.name : `${data?.name}'s`} </span> 
+
+  return (
+    <Dialog open={opened} onOpenChange={() => setOpened(false)}>
+      <DialogOverlay className="bg-black/10" />
+      <DialogContent className="sm:max-w-[425px] bg-white dark:bg-black top-32">
+        <DialogHeader>
+          <DialogTitle className="leading-normal">
+          Stop featuring {data?.name ? name : "this"} collection
+          </DialogTitle>
+          <DialogDescription className="text-gray-600 dark:text-gray-400">
+            Are you sure you want to stop featuring{" "}
+            {data?.name ? name : "this"} collection?
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button className="bg-red-600 hover:bg-red-400" disabled={isLoading} type="button" onClick={() => handleSubmit()}>
+          { isLoading ? <Loader2Icon className="animate-spin" /> : null} Yes, stop featuring
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/admin/modules/content/index.tsx b/apps/admin/modules/content/index.tsx
@@ -42,13 +42,10 @@ export const ListContents = () => {
 
   // Retrieve query parameters
   const page = searchParams.get("page");
-
-  // TODO :Uncomment when contents api is created
-  // const search = searchParams.get("search");
-  const search = 'Search=name';
+  const search = searchParams.get("search");
   const contentFilter = searchParams.get("status");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,
@@ -80,7 +77,7 @@ export const ListContents = () => {
         accessorKey: "title",
         header: ({ column }) => <DataTableColumnHeader column={column} title={"Title"} />,
         cell: ({ row }) => (<div className="capitalize flex flex-row justify-start align-middle">
-        <StarIcon className="mr-2 h-4 w-4" color="gold"/> {row.original.title}
+        {row.original.isFeatured ? <StarIcon className="mr-2 h-4 w-4" color="gold"/> : <span className="mr-2 h-4 w-4"/> } {row.original.title}
         </div>),
       },
       {
@@ -138,24 +135,26 @@ export const ListContents = () => {
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuLabel>Options</DropdownMenuLabel>
+                {row.original.isFeatured ?
+                (
                 <DropdownMenuItem
                   onClick={() => {
                     setSelectedContent(row.original);
-                    setOpenFeaturedModal(true)
+                    setOpenUnFeaturedModal(true)
                   }}
                 >
-                  <StarIcon className="mr-2 h-4 w-4" />
-                  Feature
-                </DropdownMenuItem>
+                  <StarOffIcon className="mr-2 h-4 w-4" />
+                  UnFeature
+                </DropdownMenuItem>):(
                 <DropdownMenuItem
                   onClick={() => {
                     setSelectedContent(row.original);
-                    setOpenUnFeaturedModal(true)
+                    setOpenFeaturedModal(true)
                   }}
                 >
-                  <StarOffIcon className="mr-2 h-4 w-4" />
-                  UnFeature
-                </DropdownMenuItem>
+                  <StarIcon className="mr-2 h-4 w-4" />
+                  Feature
+                </DropdownMenuItem>)}
               </DropdownMenuContent>
             </DropdownMenu>
           );

diff --git a/apps/admin/modules/creator-application/index.tsx b/apps/admin/modules/creator-application/index.tsx
@@ -76,7 +76,7 @@ export const CreatorApplication = () => {
   const search = searchParams.get("search");
   const creatorApplicationFilter = searchParams.get("status");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,

diff --git a/apps/admin/modules/tag/index.tsx b/apps/admin/modules/tag/index.tsx
@@ -44,7 +44,7 @@ export const ListTags = () => {
   const page = searchParams.get("page");
   const search = searchParams.get("search");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,

diff --git a/apps/admin/modules/user/index.tsx b/apps/admin/modules/user/index.tsx
@@ -67,7 +67,7 @@ export const ListUsers = () => {
   const search = searchParams.get("search");
   const userFilter = searchParams.get("status");
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,

diff --git a/apps/admin/modules/wallet-transaction/index.tsx b/apps/admin/modules/wallet-transaction/index.tsx
@@ -41,7 +41,7 @@ export const WalletTransaction = () => {
   const search = searchParams.get("search");
   const walletTransactionFilter = searchParams.get("type")?.toUpperCase();
 
-  const currentPage = parseInt(page ? (page as string) : "1", 10);
+  const currentPage = parseInt(page ? (page as string) : "0", 10);
 
   const {
     data,

diff --git a/apps/admin/types/content/index.ts b/apps/admin/types/content/index.ts
@@ -7,6 +7,7 @@ interface Content {
   rejectedAt: NullableDate
   doneAt: NullableDate
   meta: ContentMeta
+  isFeatured: boolean
   tags: Tag[]
   createdById: string
   amount: number