[admin ] Gab/list collections

apps/admin/api/collection/index.ts

@@ -0,0 +1,48 @@
+/**
+ * @example How to use fetch client
+ */
+
+import {useMutation, useQuery} from '@tanstack/react-query'
+import {fetchClient, getQueryParams} from '@/lib'
+import {QUERY_KEYS} from '@/constants/misc'
+
+/**
+ * GET all collections based on a query.
+ *
+ * @throws {Error} - Throws an error if there's a problem with the API response.
+ *
+ * @returns {Promise<object>} - The collections data.
+ */
+
+const getCollections = async (
+  props: FetchMultipleDataInputParams<FetchCollectionFilter>,
+) => {
+  try {
+    const removeAllNullableValues = getQueryParams<FetchCollectionFilter>(props)
+    const params = new URLSearchParams(removeAllNullableValues)
+
+    const response: APIResponse<Collection> = await fetchClient(
+      `/v1/collections?${params.toString()}`,
+    )
+
+    return response.parsedBody.data
+  } 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 useGetCollections = (
+  query: FetchMultipleDataInputParams<FetchCollectionFilter>,
+) =>
+  useQuery({
+    queryKey: [QUERY_KEYS.COLLECTIONS,JSON.stringify(query)],
+    queryFn: () => getCollections(query),
+  })

apps/admin/api/index.ts

@@ -9,4 +9,5 @@ export * from './user'
 export * from './admin'
 export * from './wallet-transaction'
 export * from './content'
-export * from './tag'
+export * from './tag'
+export * from './collection'

apps/admin/app/collections/page.tsx

@@ -0,0 +1,19 @@
+import { Header } from "@/components/header";
+import { ListCollections } from "@/modules";
+
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Collections - mfoni admin",
+};
+
+export default function Users() {
+  return (
+    <>
+      <Header />
+      <div className="mt-10">
+        <ListCollections />
+      </div>
+    </>
+  );
+}

apps/admin/components/header.tsx

@@ -45,6 +45,10 @@ const links = [
         name: "Tags",
         href: "/tags"
     },
+    {
+        name: "Collections",
+        href: "/collections"
+    },
     {
         name: "Settings",
         href: "/settings"

apps/admin/constants/misc.ts

@@ -7,9 +7,10 @@ export const USER_CIPHER = '@mfoni-admin-account'
 export const QUERY_KEYS = {
   ADMINISTRATORS: 'administrators',
   CREATOR_APPLICATIONS: 'creator-applications',
+  CONTENTS: 'contents',
+  COLLECTIONS: 'collections',
   USERS: 'users',
   WALLET_TRANSACTIONS: 'wallet-transactions',
   WALLET: 'wallet',
-  CONTENTS: 'contents',
   TAGS: 'tags',
 } as const

apps/admin/modules/collection/index.tsx

@@ -0,0 +1,185 @@
+"use client";
+import { ColumnDef } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { DataTable } from "@/components/table";
+import {
+  StarIcon,
+  StarOffIcon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { useGetCollections } from "@/api";
+import { useSearchParams } from "next/navigation";
+import { localizedDayjs } from "@/lib/date";
+import { DataTableColumnHeader } from "@/components/table/components";
+import { createDataTableError } from "@/lib/utils";
+
+const COLLECTIONS_PER_PAGE = 50;
+
+const filterFields: DataTableFilterField<Collection>[] = [
+  {
+    id: "title",
+    label: "Title",
+    placeholder: "Filter titles...",
+  },
+]
+
+
+export const ListCollections = () => {
+  const [openFeaturedModal, setOpenFeaturedModal] = useState(false);
+  const [openUnFeaturedModal, setOpenUnFeaturedModal] = useState(false);
+  const [selectedCollection, setSelectedCollection] = useState<Collection>();
+  const searchParams = useSearchParams();
+
+  // Retrieve query parameters
+  const page = searchParams.get("page");
+  const search = searchParams.get("search");
+  const contentFilter = searchParams.get("visibility");
+
+  const currentPage = parseInt(page ? (page as string) : "1", 10);
+
+  const {
+    data,
+    isPending: isDataLoading,
+    refetch,
+    error,
+  } = useGetCollections({
+    pagination: {
+      page: currentPage,
+      per: COLLECTIONS_PER_PAGE,
+    },
+    search: {
+      fields: [""],
+      query: search || undefined,
+    },
+    sorter: {
+      sort: "asc",
+      sortBy: "createdAt",
+    },
+    populate: [],
+    filters: {},
+  });
+
+  const dataTableError = createDataTableError(error, "Can't fetch collections");
+
+  const columns = useMemo((): ColumnDef<Collection>[] => {
+    return [
+      {
+        accessorKey: "name",
+        header: ({ column }) => <DataTableColumnHeader column={column} title={"Name"} />,
+        cell: ({ row }) => (<div className="capitalize flex flex-row justify-start align-middle">
+        {row.original.isFeatured ? <StarIcon className="mr-2 h-4 w-4" color="gold"/> : <span className="mr-2 h-4 w-4"/> } {row.original.name}
+        </div>),
+      },
+      {
+        accessorKey: "slug",
+        header: ({ column }) => <DataTableColumnHeader column={column} title={"Code"} />,
+        cell: ({ row }) => (<div className="capitalize">
+        {row.original.slug}
+        </div>),
+      },
+      {
+        accessorKey: "description",
+        header: ({ column }) => <DataTableColumnHeader column={column} title={"Description"} />,
+        cell: ({ row }) =>
+          row.original.description ? (
+            <div className="normal-case">{row.original.description}</div>
+          ) : (
+            "N/A"
+          ),
+      },
+      {
+        accessorKey: "contentsCount",
+        header: ({ column }) => <DataTableColumnHeader column={column} title={"No. of Contents"} />,
+        cell: ({ row }) => (
+          row.original.contentsCount
+        ),
+      },
+      {
+        accessorKey: "createdAt",
+        header: "Created At",
+        cell: ({ row }) => (
+          localizedDayjs(row.getValue("createdAt")).format("DD/MM/YYYY")
+        ),
+      },
+      {
+        id: "actions",
+        enableHiding: false,
+        cell: ({ row }) => {
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <DotsHorizontalIcon className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Options</DropdownMenuLabel>
+                {row.original.isFeatured ?
+                (
+                <DropdownMenuItem
+                  onClick={() => {
+                    setSelectedCollection(row.original);
+                    setOpenUnFeaturedModal(true)
+                  }}
+                >
+                  <StarOffIcon className="mr-2 h-4 w-4" />
+                  UnFeature
+                </DropdownMenuItem>
+              ):( <DropdownMenuItem
+              onClick={() => {
+                setSelectedCollection(row.original);
+                setOpenFeaturedModal(true)
+              }}
+            >
+              <StarIcon className="mr-2 h-4 w-4" />
+              Feature
+            </DropdownMenuItem>)}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        },
+      },
+    ];
+  }, []);
+
+  return (
+    <>
+      <div className="px-7 mx-auto">
+        <div className="flex flex-row justify-start pb-8">
+          <div>
+            <h2 className="text-4xl font-bold">Collections</h2>
+            <p className="text-lg text-gray-500">Here’s a list of collections!</p>
+          </div>
+        </div>
+
+        <DataTable
+        boxHeight={75}
+          columns={columns}
+          data={data?.rows ?? []}
+          isDataLoading={isDataLoading}
+          error={dataTableError}
+          refetch={refetch}
+          filterFields={filterFields}
+          dataMeta={{
+            total: data?.total ?? 0,
+            page: currentPage,
+            pageSize: COLLECTIONS_PER_PAGE,
+            totalPages: data?.totalPages ?? 1,
+          }}
+        >
+
+        </DataTable>
+      </div>
+
+    </>
+  );
+};

apps/admin/modules/index.ts

@@ -6,3 +6,4 @@ export * from './admin'
 export * from './wallet-transaction'
 export * from './content'
 export * from './tag'
+export * from './collection'

apps/admin/types/collection/index.ts

@@ -0,0 +1,19 @@
+interface Collection {
+  id: string
+  name: string
+  slug: string
+  contentsCount: number
+  description: string
+  isFeatured: boolean
+  createdByRole: string
+  visibility: string
+  createdById: string
+  createdAt: Date
+  updatedAt: NullableDate
+  deletedBy: string
+  deletedAt: NullableDate
+}
+
+interface FetchCollectionFilter {
+  visibility?: string
+}