Merge pull request #131 from CodeForStartup/feat/upload-image

feat: add image banner for post

Author: luannguyenQV

apps/web/.gitignore

@@ -5,6 +5,8 @@
 /.pnp
 .pnp.js
 
+/public/uploads/
+
 # testing
 /coverage
 

apps/web/@/actions/public/posts.ts

@@ -0,0 +1,6 @@
+export const OrderByField = {
+  newest: "newest",
+  oldest: "oldest",
+  nameAsc: "name_asc",
+  nameDesc: "name_desc",
+}

apps/web/@/actions/public/tags/index.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from "react"
+
+import { IImageFilter, IListImageResponse } from "database"
+import useSWRInfinite from "swr/infinite"
+
+const getImages = async (url): Promise<IListImageResponse> => {
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+
+  if (!response.ok) {
+    throw new Error("Failed to fetch images")
+  }
+
+  return response.json()
+}
+
+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)
+      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 totalPages = useMemo(() => data?.[0]?.data?.data?.totalPages, [data])
+  const total = useMemo(() => data?.[0]?.data?.data?.total, [data])
+
+  const fetchMore = () => {
+    if (size >= totalPages) {
+      return
+    }
+
+    setSize(size + 1)
+  }
+
+  return {
+    images,
+    total,
+    isLoading,
+    isError: error,
+    mutate,
+    fetchMore,
+  }
+}

apps/web/@/actions/user/user.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFetching: boolean) => {
+  // const [isFetching, setIsFetching] = useState(false)
+  const observer = useRef<IntersectionObserver | null>(null)
+  const [node, setNode] = useState<HTMLElement | null>(null)
+
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (entries[0].isIntersecting && !isFetching) {
+        callback?.()
+      }
+    },
+    [callback, isFetching]
+  )
+
+  useEffect(() => {
+    if (!root || !node || isFetching) return
+
+    if (observer.current) {
+      observer.current.disconnect()
+    }
+
+    observer.current = new IntersectionObserver(handleIntersection, {
+      root,
+      rootMargin: "100px",
+      threshold: 0.1,
+    })
+
+    observer.current.observe(node)
+
+    return () => {
+      if (observer.current) {
+        observer.current.disconnect()
+      }
+    }
+  }, [handleIntersection, root, node])
+
+  return { setNode }
+}
+
+export default useInfiniteScroll

apps/web/@/constants/upload.ts

@@ -0,0 +1,47 @@
+import { useState } from "react"
+
+import { toast } from "react-toastify"
+import { useSWRConfig } from "swr"
+import useSWRMutation from "swr/mutation"
+import useSWRImmutable from "swr/mutation"
+
+// upload image to server API
+const uploadImage = async (file: File) => {
+  try {
+    const formData = new FormData()
+
+    formData.append("file", file)
+
+    // Todo: replace with hook
+    const response = await fetch("/api/protected/images", {
+      method: "POST",
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    })
+
+    toast.success("Image uploaded successfully")
+
+    return response.json()
+  } catch (error) {
+    toast.error("Error uploading image")
+    // throw error
+  }
+}
+
+// upload image hook
+export const useUploadImage = () => {
+  const { mutate } = useSWRConfig()
+
+  const { trigger, isMutating, error, data } = useSWRMutation(
+    "/api/protected/images",
+    async (url, { arg }: { arg: File }) => {
+      const result = await uploadImage(arg)
+      mutate(["/api/protected/images"])
+      return result
+    }
+  )
+
+  return { uploadImage: trigger, isMutating, error, data }
+}

apps/web/@/hooks/useGetImages.ts

@@ -28,6 +28,7 @@
     "register": "Register",
     "profile": "Profile",
     "search": "Search",
+    "clear": "Clear",
     "searchPlaceholder": "Enter your search here...",
     "searchResults": "Search Results",
     "searchNoResults": "No results found",
@@ -110,6 +111,30 @@
     "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",
+    "upload_image": "Upload Image",
+    "select": "Select",
+    "upload": "Upload",
+    "has_been_selected": "has been selected",
+    "image_uploaded_successfully": "Image uploaded successfully",
+    "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/@/hooks/useInfinityScroll.ts

@@ -6,7 +6,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { cn } from "ui"
 
 import { FilterValues, PeriodValues } from "@/types/filter"
-import { capitalizeFirstLetter } from "@/utils/capitalize"
+import { capitalizeFirstLetter } from "@/utils/text"
 
 import { FilterItem } from "./filter-item"