Merge pull request #137 from CodeForStartup/feat/add-loading-skeleton-comp

feat: add loading infinity skeleton component

Author: luannguyenQV

README.md

@@ -1,11 +1,11 @@
 <p align="center">
     <a href="https://codeforstartup.com/">
         <img src="./images/home-screen.png">
-        <h1 align="center" style="color: red">TOPLIST</h1>
+        <h1 align="center" style="color: red">NEXT FORUM</h1>
     </a>
 </p>
 
-# About TOPLIST
+# About next-forum
 
 # Installation
 

apps/admin/@/molecules/nav/logo.tsx

@@ -16,7 +16,7 @@ const Logo: React.FC = () => {
           bebasNeue.className
         )}
       >
-        TOPLIST
+        NEXT-FORUM
       </h1>
     </Link>
   )

apps/web/@/hooks/useInfinityScroll.ts

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 
-const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFetching: boolean) => {
-  // const [isFetching, setIsFetching] = useState(false)
+const useInfiniteScroll = (callback: Function, root: HTMLElement | null, isFetching: boolean) => {
   const observer = useRef<IntersectionObserver | null>(null)
   const [node, setNode] = useState<HTMLElement | null>(null)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
-      console.log("entries", entries)
       if (entries[0].isIntersecting && !isFetching) {
         callback?.()
       }
@@ -22,7 +20,6 @@ const useInfiniteScroll = (callback: () => void, root: HTMLElement | null, isFet
       observer.current.disconnect()
     }
 
-    console.log("observer.current", observer.current)
     observer.current = new IntersectionObserver(handleIntersection, {
       root,
       rootMargin: "100px",

apps/web/@/messages/en.json

@@ -119,7 +119,8 @@
     "order_by_name": "Name",
     "order_by_size": "Size",
     "order_by_type": "Type",
-    "order_by_uploaded_at": "Uploaded at"
+    "order_by_uploaded_at": "Uploaded at",
+    "search_results_for": "Search results for"
   },
   "uploads": {
     "asset_management": "Asset Management",

apps/web/@/molecules/follower/user-profile/index.tsx

@@ -14,18 +14,18 @@ export type UserProfileProps = {
 }
 
 export async function UserProfile({ authorId }: UserProfileProps) {
-  const rawAuthor = await fetch(
-    `${process.env.NEXT_PUBLIC_FRONTEND_URL}${generatePath(APP_APIS.protected.user.GET, {
-      userId: authorId,
-    })}`,
-    {
-      method: "GET",
-      cache: "no-cache",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }
-  )
+  // const rawAuthor = await fetch(
+  //   `${process.env.NEXT_PUBLIC_FRONTEND_URL}${generatePath(APP_APIS.protected.user.GET, {
+  //     userId: authorId,
+  //   })}`,
+  //   {
+  //     method: "GET",
+  //     cache: "no-cache",
+  //     headers: {
+  //       "Content-Type": "application/json",
+  //     },
+  //   }
+  // )
   const author: TUserItem = await rawAuthor?.json()
   const t = await getTranslations()
 

apps/web/@/molecules/infinite-scroll/index.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { Loader } from "lucide-react"
+
+import useInfiniteScroll from "@/hooks/useInfinityScroll"
+
+interface InfiniteScrollProps {
+  containerClassName?: string
+  children: React.ReactNode
+  hasMore?: boolean
+  root?: HTMLElement | null
+  loading: boolean
+  nextPage: (params: Record<string, any>) => Promise<any>
+}
+
+export default function InfiniteScroll({
+  containerClassName,
+  children,
+  hasMore,
+  root,
+  nextPage,
+  loading,
+}: InfiniteScrollProps) {
+  const { setNode } = useInfiniteScroll(nextPage, root, loading)
+
+  return (
+    <div className={containerClassName}>
+      {children}
+
+      <div
+        ref={setNode}
+        className="flex h-10 w-full items-center justify-center"
+      >
+        {loading && <Loader className="animate-spin" />}
+      </div>
+    </div>
+  )
+}

apps/web/@/molecules/nav/logo.tsx

@@ -16,7 +16,7 @@ const Logo: React.FC = () => {
           bebasNeue.className
         )}
       >
-        TOPLIST
+        NEXT-FORUM
       </h1>
     </Link>
   )

apps/web/@/molecules/post-list/index.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link"
 
+import { TPostItem } from "database"
 import { Typography } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
 import TagList from "@/molecules/tag/tag-list"
 import PostMeta from "@/molecules/user/posts/post-meta"
-import { TPostItem } from "@/types/posts"
 import { generatePath } from "@/utils/generatePath"
 
 import EditPostButton from "./edit-post-button"

apps/web/@/molecules/posts/post-detail/index.tsx

@@ -1,11 +1,10 @@
 "use client"
 
-import { PostOnUserType } from "database"
+import { PostOnUserType, TPostItem } from "database"
 import { useTranslations } from "next-intl"
 import { Button, cn, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui"
 
 import { addRelation, removeRelation } from "@/actions/protect/postAction"
-import { TPostItem } from "@/types/posts"
 
 type LikeButtonProps = {
   post: TPostItem