feat: update filter image

Author: luannguyenQV

apps/web/@/hooks/useGetImages.ts

@@ -1,9 +1,9 @@
 import { useMemo } from "react"
 
-import { TImageFilter, TListImageResponse } from "database"
+import { IImageFilter, IListImageResponse } from "database"
 import useSWRInfinite from "swr/infinite"
 
-const getImages = async (url): Promise<TListImageResponse> => {
+const getImages = async (url): Promise<IListImageResponse> => {
   const response = await fetch(url, {
     method: "GET",
     headers: {
@@ -18,23 +18,24 @@ const getImages = async (url): Promise<TListImageResponse> => {
   return response.json()
 }
 
-export function useGetImages(filter: TImageFilter) {
+export function useGetImages(filter: IImageFilter) {
   const { data, mutate, size, setSize, isLoading, error } = useSWRInfinite(
     (index) => {
       const queryParams = new URLSearchParams()
 
       if (filter.search) queryParams.append("search", filter.search)
-      // if (filter.order) queryParams.append("order", filter.order)
-      // if (filter.orderBy) queryParams.append("orderBy", filter.orderBy)
+      if (filter.order) queryParams.append("order", filter.order)
+      if (filter.orderBy) queryParams.append("orderBy", filter.orderBy)
       queryParams.append("page", (index + 1).toString())
 
       return `/api/protected/images?${queryParams.toString()}`
     },
     (url) => getImages(url)
   )
 
-  const images = useMemo(() => (data || []).flatMap((page) => page.data.data.data), [data])
+  const images = useMemo(() => (data || []).flatMap((page) => page?.data?.data?.data), [data])
   const totalPages = useMemo(() => data?.[0]?.data?.data?.totalPages, [data])
+  const total = useMemo(() => data?.[0]?.data?.data?.total, [data])
 
   const fetchMore = () => {
     if (size >= totalPages) {
@@ -46,6 +47,7 @@ export function useGetImages(filter: TImageFilter) {
 
   return {
     images,
+    total,
     isLoading,
     isError: error,
     mutate,

apps/web/@/hooks/useInfinityScroll.ts

@@ -8,7 +8,6 @@ const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFet
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
       if (entries[0].isIntersecting && !isFetching) {
-        console.log("isIntersecting", entries[0])
         callback?.()
       }
     },

apps/web/@/messages/en.json

@@ -111,7 +111,15 @@
     "turn_draft": "Turn draft",
     "turn_publish": "Turn publish",
     "post_created": "Post created successfully",
-    "post_updated": "Post updated successfully"
+    "post_updated": "Post updated successfully",
+    "order_by": "Order by",
+    "order_by_asc": "Ascending",
+    "order_by_desc": "Descending",
+    "order_by_created_at": "Created at",
+    "order_by_name": "Name",
+    "order_by_size": "Size",
+    "order_by_type": "Type",
+    "order_by_uploaded_at": "Uploaded at"
   },
   "uploads": {
     "asset_management": "Asset Management",
@@ -120,6 +128,13 @@
     "upload": "Upload",
     "has_been_selected": "has been selected",
     "image_uploaded_successfully": "Image uploaded successfully",
-    "error_uploading_image": "Error uploading image"
+    "error_uploading_image": "Error uploading image",
+    "total_images": "{total, plural, =0 {No image found} =1 {Total 1 image} other {Total # images}}",
+    "order_by": {
+      "newest": "Newest",
+      "oldest": "Oldest",
+      "name_asc": "Name (A → Z)",
+      "name_desc": "Name (Z → A)"
+    }
   }
 }

apps/web/@/molecules/upload/AssetsManagement.tsx

@@ -1,14 +1,13 @@
-import { useMemo, useRef } from "react"
+import { useEffect, useMemo, useRef } from "react"
 
 import { useGetImages } from "@/hooks/useGetImages"
 import useInfiniteScroll from "@/hooks/useInfinityScroll"
 
 import { useFileManager } from "./FileManagerContainer"
 import ImageList from "./ImageList"
-import ImageSearchBar from "./ImageSearchBar"
 
 const AssetManagement = () => {
-  const { search } = useFileManager()
+  const { search, setTotal } = useFileManager()
   const imageListRef = useRef<HTMLDivElement>(null)
 
   const filterParams = useMemo(() => {
@@ -17,9 +16,13 @@ const AssetManagement = () => {
     }
   }, [search])
 
-  const { images, isLoading, fetchMore } = useGetImages(filterParams)
+  const { images, isLoading, total, fetchMore } = useGetImages(filterParams)
   const { setNode } = useInfiniteScroll(fetchMore, imageListRef.current, isLoading)
 
+  useEffect(() => {
+    setTotal(total)
+  }, [total, setTotal])
+
   return (
     <div
       ref={imageListRef}
@@ -30,9 +33,10 @@ const AssetManagement = () => {
         images={images}
       />
 
-      <div ref={setNode}>
-        <div className="h-10 w-full bg-transparent" />
-      </div>
+      <div
+        ref={setNode}
+        className="h-10 w-full bg-transparent"
+      />
     </div>
   )
 }

apps/web/@/molecules/upload/FileManagerContainer.tsx

@@ -2,24 +2,24 @@ import React, { createContext, useCallback, useContext, useReducer } from "react
 
 import { Image, OrderBy } from "database"
 
-export const OrderField = {
-  newest: "createdAt",
-  oldest: "createdAt",
-  nameAsc: "name",
-  nameDesc: "name",
+export const OrderByField = {
+  newest: "newest",
+  oldest: "oldest",
+  nameAsc: "name_asc",
+  nameDesc: "name_desc",
 }
 
 export type FileManagerState = {
   selectedFiles: Image[]
   search: string
-  orderBy: OrderBy
-  order: (typeof OrderField)[keyof typeof OrderField]
+  order: (typeof OrderByField)[keyof typeof OrderByField]
+  total: number
 }
 export type FileManagerContextType = FileManagerState & {
   setSelectedFiles: (files: Image[]) => void
   setSearch: (search: string) => void
-  setOrder: (order: "asc" | "desc") => void
-  setOrderBy: (orderBy: string) => void
+  setOrder: (order: (typeof OrderByField)[keyof typeof OrderByField]) => void
+  setTotal: (total: number) => void
 }
 
 const FileManagerContext = createContext<FileManagerContextType | null>(null)
@@ -33,7 +33,7 @@ export const useFileManager = () => {
 }
 
 type FileManagerAction = {
-  type: "SET_SELECTED_FILES" | "SET_SEARCH" | "SET_ORDER" | "SET_ORDER_BY"
+  type: "SET_SELECTED_FILES" | "SET_SEARCH" | "SET_ORDER" | "SET_TOTAL"
   payload: any
 }
 
@@ -45,8 +45,8 @@ function fileManagerReducer(state: FileManagerState, action: FileManagerAction):
       return { ...state, search: action.payload }
     case "SET_ORDER":
       return { ...state, order: action.payload }
-    case "SET_ORDER_BY":
-      return { ...state, orderBy: action.payload }
+    case "SET_TOTAL":
+      return { ...state, total: action.payload }
     default:
       return state
   }
@@ -56,8 +56,8 @@ const FileManagerContainer = ({ children }: { children: React.ReactNode }) => {
   const [state, dispatch] = useReducer(fileManagerReducer, {
     selectedFiles: [],
     search: "",
-    order: OrderField.newest,
-    orderBy: "asc",
+    order: OrderByField.newest,
+    total: 0,
   })
 
   const setSelectedFiles = useCallback((files: Image[]) => {
@@ -72,8 +72,8 @@ const FileManagerContainer = ({ children }: { children: React.ReactNode }) => {
     dispatch({ type: "SET_ORDER", payload: order })
   }, [])
 
-  const setOrderBy = useCallback((orderBy: string) => {
-    dispatch({ type: "SET_ORDER_BY", payload: orderBy })
+  const setTotal = useCallback((total: number) => {
+    dispatch({ type: "SET_TOTAL", payload: total })
   }, [])
 
   return (
@@ -83,7 +83,7 @@ const FileManagerContainer = ({ children }: { children: React.ReactNode }) => {
         setSelectedFiles,
         setSearch,
         setOrder,
-        setOrderBy,
+        setTotal,
       }}
     >
       {children}

apps/web/@/molecules/upload/ImageItem.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import Image from "next/image"
 
 import { Image as ImageType } from "database"
-import { Check, CheckCircle, Circle, CircleDot, TrashIcon } from "lucide-react"
+import { CheckCircle, Circle, TrashIcon } from "lucide-react"
 import { Button, cn } from "ui"
 
 import { useFileManager } from "./FileManagerContainer"
@@ -14,15 +14,16 @@ interface ImageItemProps {
 export default function ImageItem({ image }: ImageItemProps) {
   const { selectedFiles, setSelectedFiles } = useFileManager()
 
-  const handleSelect = (image: ImageType) => {
-    setSelectedFiles([image])
+  const handleSelect = () => {
+    setSelectedFiles(selectedFiles?.at(0)?.id === image.id ? [] : [image])
   }
 
   return (
-    <div
+    <button
       className={cn("group relative border-2", {
         "border-blue-500": selectedFiles?.at(0)?.id === image.id,
       })}
+      onClick={handleSelect}
     >
       <Image
         src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}${image.url}`}
@@ -42,20 +43,14 @@ export default function ImageItem({ image }: ImageItemProps) {
       <Button
         variant="outline"
         className="absolute right-1 top-1 h-7 w-7 rounded-full p-0"
-        onClick={() => {
-          if (selectedFiles?.at(0)?.id === image.id) {
-            setSelectedFiles([])
-          } else {
-            handleSelect(image)
-          }
-        }}
+        // onClick={() => handleSelect(image)}
       >
         {selectedFiles?.at(0)?.id === image.id ? (
           <CheckCircle className="h-6 w-6 text-blue-500" />
         ) : (
           <Circle className="h-6 w-6" />
         )}
       </Button>
-    </div>
+    </button>
   )
 }

apps/web/@/molecules/upload/ImageList.tsx

@@ -21,7 +21,7 @@ const ImageList: React.FC<ImageListProps> = ({ images, isLoading }) => {
   }
 
   return (
-    <div className="mt-2 flex flex-wrap gap-3 p-1">
+    <div className="flex flex-wrap gap-3 p-1">
       {images?.map((image) => (
         <ImageItem
           key={image.id}

apps/web/@/molecules/upload/ImageSearchBar.tsx

@@ -1,13 +1,29 @@
 "use client"
 
+import { ArrowDownWideNarrow } from "lucide-react"
 import { useTranslations } from "next-intl"
-import { Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "ui"
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "ui"
 
-import { useFileManager } from "./FileManagerContainer"
+import { OrderByField, useFileManager } from "./FileManagerContainer"
 
 export default function ImageSearchBar() {
   const t = useTranslations()
-  const { search, setSearch } = useFileManager()
+  const { search, order, setSearch, setOrder } = useFileManager()
 
   const onClearSearch = () => {
     setSearch("")
@@ -21,17 +37,31 @@ export default function ImageSearchBar() {
         className="max-w-[300px]"
       />
 
-      <Select>
-        <SelectTrigger className="w-[180px]">
-          <SelectValue placeholder={t("common.sort_by")} />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="apple">Name A → Z</SelectItem>
-          <SelectItem value="banana">Name Z → A</SelectItem>
-          <SelectItem value="blueberry">Recent created</SelectItem>
-          <SelectItem value="grapes">Last created</SelectItem>
-        </SelectContent>
-      </Select>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className="gap-1"
+          >
+            <ArrowDownWideNarrow size={16} />
+            {t(`uploads.order_by.${order}`)}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56">
+          <DropdownMenuLabel>Order by</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup
+            value={order}
+            onValueChange={setOrder}
+          >
+            {Object.values(OrderByField).map((order) => (
+              <DropdownMenuRadioItem value={order}>
+                {t(`uploads.order_by.${order}`)}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       {search && (
         <Button

apps/web/@/molecules/upload/Loading.tsx

@@ -4,7 +4,10 @@ export default function Loading() {
   return (
     <div className="mt-2 flex flex-wrap gap-3 p-1">
       {Array.from({ length: 10 }).map((_, i) => (
-        <Skeleton className="w-[160px h-[160px]	" />
+        <Skeleton
+          key={i}
+          className="h-[160px] w-[160px]"
+        />
       ))}
     </div>
   )