feat: add swr

Author: luannguyenQV

apps/web/@/messages/en.json

@@ -111,5 +111,11 @@
     "turn_publish": "Turn publish",
     "post_created": "Post created successfully",
     "post_updated": "Post updated successfully"
+  },
+  "upload": {
+    "asset_management": "Asset Management",
+    "upload_image": "Upload Image",
+    "select": "Select",
+    "upload": "Upload"
   }
 }

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

@@ -0,0 +1,98 @@
+import React, { createContext, useCallback, useContext, useReducer } from "react"
+
+import { OrderBy } from "database"
+
+// newest
+// oldest
+// name A-Z
+// name Z-A
+export const OrderField = {
+  newest: "createdAt",
+  oldest: "createdAt",
+  nameAsc: "name",
+  nameDesc: "name",
+}
+
+export type FileManagerState = {
+  selectedFiles: File[]
+  search: string
+  orderBy: OrderBy
+  order: (typeof OrderField)[keyof typeof OrderField]
+}
+export type FileManagerContextType = FileManagerState & {
+  setSelectedFiles: (files: File[]) => void
+  setSearch: (search: string) => void
+  setOrder: (order: "asc" | "desc") => void
+  setOrderBy: (orderBy: string) => void
+}
+
+const FileManagerContext = createContext<FileManagerContextType | null>(null)
+
+export const useFileManager = () => {
+  const context = useContext(FileManagerContext)
+  if (!context) {
+    throw new Error("useFileManager must be used within a FileManagerProvider")
+  }
+  return context
+}
+
+type FileManagerAction = {
+  type: "SET_SELECTED_FILES" | "SET_SEARCH" | "SET_ORDER" | "SET_ORDER_BY"
+  payload: any
+}
+
+function fileManagerReducer(state: FileManagerState, action: FileManagerAction): FileManagerState {
+  switch (action.type) {
+    case "SET_SELECTED_FILES":
+      return { ...state, selectedFiles: action.payload }
+    case "SET_SEARCH":
+      return { ...state, search: action.payload }
+    case "SET_ORDER":
+      return { ...state, order: action.payload }
+    case "SET_ORDER_BY":
+      return { ...state, orderBy: action.payload }
+    default:
+      return state
+  }
+}
+
+const FileManagerContainer = ({ children }: { children: React.ReactNode }) => {
+  const [state, dispatch] = useReducer(fileManagerReducer, {
+    selectedFiles: [],
+    search: "",
+    order: OrderField.newest,
+    orderBy: "asc",
+  })
+
+  const setSelectedFiles = useCallback((files: File[]) => {
+    dispatch({ type: "SET_SELECTED_FILES", payload: files })
+  }, [])
+
+  const setSearch = useCallback((search: string) => {
+    dispatch({ type: "SET_SEARCH", payload: search })
+  }, [])
+
+  const setOrder = useCallback((order: OrderBy) => {
+    dispatch({ type: "SET_ORDER", payload: order })
+  }, [])
+
+  const setOrderBy = useCallback((orderBy: string) => {
+    dispatch({ type: "SET_ORDER_BY", payload: orderBy })
+  }, [])
+
+  return (
+    <FileManagerContext.Provider
+      value={{
+        ...state,
+        setSelectedFiles,
+        setSearch,
+        setOrder,
+        setOrderBy,
+      }}
+    >
+      {children}
+    </FileManagerContext.Provider>
+  )
+}
+
+export default FileManagerContainer

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

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from "react"
 
+import { useTranslations } from "next-intl"
 import {
   Button,
   Dialog,
@@ -11,40 +12,36 @@ import {
 } from "ui"
 
 import AssetManagement from "./AssetsManagement"
+import FileManagerContainer from "./FileManagerContainer"
 import UploadImageButton from "./UploadImageButton"
 
 interface UploadProps {
   children: ReactNode
 }
 
 const Upload: React.FC<UploadProps> = ({ children }) => {
-  //   const [isOpen, setIsOpen] = useState(false)
-
-  //   const handleOpenChange = (open: boolean) => {
-  //     setIsOpen(open)
-  //   }
+  const t = useTranslations("common")
 
   return (
-    <Dialog
-    //   open={isOpen}
-    //   onOpenChange={handleOpenChange}
-    >
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="w-full max-w-[800px]">
-        <DialogHeader className="flex flex-row items-center gap-4">
-          <DialogTitle className="mb-0">Asset Management</DialogTitle>
-          <UploadImageButton />
-        </DialogHeader>
-
-        <div className="h-[300px] overflow-scroll">
-          <AssetManagement />
-        </div>
-
-        <DialogFooter>
-          <Button>Select</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <FileManagerContainer>
+      <Dialog>
+        <DialogTrigger asChild>{children}</DialogTrigger>
+        <DialogContent className="w-full max-w-[800px]">
+          <DialogHeader className="flex flex-row items-center gap-4">
+            <DialogTitle className="mb-0">Asset Management</DialogTitle>
+            <UploadImageButton />
+          </DialogHeader>
+
+          <div className="h-[300px] overflow-scroll">
+            <AssetManagement />
+          </div>
+
+          <DialogFooter>
+            <Button>Select</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </FileManagerContainer>
   )
 }
 

apps/web/package.json

@@ -69,6 +69,7 @@
     "slate-hyperscript": "^0.100.0",
     "slate-react": "^0.107.1",
     "slugify": "^1.6.6",
+    "swr": "^2.2.5",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.2.4",
     "tailwindcss-animate": "^1.0.7",

packages/database/src/index.ts

@@ -4,7 +4,14 @@ import { createPost, getPost, getPosts, updatePost, updatePostStatus } from "./p
 import { TCreatePostInput, TPostActionType, TPostItem } from "./posts/selects"
 import { TGetPostsRequest, TGetPostsResponse } from "./posts/type"
 import prisma from "./prisma"
-import { ActionReturnType } from "./shared/type"
+import {
+  ActionReturnType,
+  DEFAULT_LIMIT,
+  DEFAULT_PAGE,
+  OrderBy,
+  PeriodValues,
+  TGetListResponse,
+} from "./shared/type"
 import { createTag, getTag, getTags, getTopTags } from "./tags/queries"
 import type { TTagItem, TTagListItem } from "./tags/selects"
 
@@ -51,4 +58,9 @@ export type {
 
   // Shared
   ActionReturnType,
+  OrderBy,
+  TGetListResponse,
+  PeriodValues,
+  DEFAULT_LIMIT,
+  DEFAULT_PAGE,
 }