[f] 091 - Infinite scroll for snippets page

package.json

@@ -58,6 +58,7 @@
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
+    "react-infinite-scroller": "^1.2.6",
     "react-router-dom": "6.21.1",
     "react-textarea-autosize": "^8.5.3",
     "react-toastify": "^9.1.3",
@@ -76,6 +77,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react-infinite-scroller": "^1.2.5",
     "@typescript-eslint/eslint-plugin": "6.17.0",
     "@typescript-eslint/parser": "6.17.0",
     "@vitejs/plugin-react": "^4.2.0",

src/App.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
@@ -8,44 +8,41 @@ import SearchInterface from './components/SearchInterface'
 import SnippetDetail from './components/SnippetDetail'
 import PrivateRoute from './components/PrivateRoute'
 import OnboardingPage from './components/OnboardingPage'
-import AuthenticatedLayout from './layouts/AuthenticatedLayout'
 import ForgetPassword from './components/ForgetPassword'
 import { AuthProvider } from './providers/auth'
 
 import { FORGET_PASSWORD_PATH, ONBOARDING_PATH, LOGIN_PATH, RESET_PASSWORD_PATH } from './constants/routes'
 import { ResetPassword } from './components/ResetPassword'
 import { FilterProvider } from './providers/filter'
+import { LiveblocksProvider, RoomProvider } from '@liveblocks/react'
 
 const queryClient = new QueryClient()
 
 export default function App(): ReactElement {
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider>
-        <FilterProvider>
-          <Router>
-            <Routes>
-              <Route path={ONBOARDING_PATH} element={<OnboardingPage />} />
-              <Route path={ONBOARDING_PATH} element={<OnboardingPage />} />
-              <Route path={LOGIN_PATH} element={<LoginPage />} />
-              <Route path={FORGET_PASSWORD_PATH} element={<ForgetPassword />} />
-              <Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
-              <Route element={<AuthenticatedLayout />}>
-                <Route path='/search' element={<SearchInterface />} />
-                <Route
-                  path='/snippet/:snippetId'
-                  element={
-                    <PrivateRoute>
-                      <SnippetDetail />
-                    </PrivateRoute>
-                  }
-                />
-              </Route>
-              <Route path='*' element={<LoginPage />} />
-            </Routes>
-          </Router>
-        </FilterProvider>
-      </AuthProvider>
+      <LiveblocksProvider publicApiKey={import.meta.env.VITE_LIVEBLOCKS_PUBKEY}>
+        <RoomProvider id={import.meta.env.VITE_LIVEBLOCKS_ROOM}>
+          <AuthProvider>
+            <FilterProvider>
+              <Router>
+                <Routes>
+                  <Route path={ONBOARDING_PATH} element={<OnboardingPage />} />
+                  <Route path={LOGIN_PATH} element={<LoginPage />} />
+                  <Route path={FORGET_PASSWORD_PATH} element={<ForgetPassword />} />
+                  <Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
+                  <Route element={<PrivateRoute />}>
+                    <Route path='/search' element={<SearchInterface />} />
+                    <Route path='/snippet/:snippetId' element={<SnippetDetail />} />
+                  </Route>
+                  <Route path='*' element={<LoginPage />} />
+                </Routes>
+              </Router>
+            </FilterProvider>
+          </AuthProvider>
+        </RoomProvider>
+      </LiveblocksProvider>
+
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   )

src/components/HeaderBar.tsx

@@ -1,19 +1,13 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Moon, Bell, LogOut } from 'lucide-react' // Add LogOut icon
+import { Moon, LogOut } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { useInboxNotifications } from '@liveblocks/react'
-import { InboxNotification } from '@liveblocks/react-ui'
-import { User } from '@supabase/supabase-js'
 import { InboxPopover } from './InboxPopover'
 import { useAuth } from '@/providers/auth'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' // Import dropdown components
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import supabase from '@/lib/supabase'
 
-// ... NotificationsList component remains the same ...
-
 const HeaderBar: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false)
   const { user } = useAuth()
 
   const getInitials = (email: string) => {

src/components/LiveblocksComments.tsx

@@ -49,10 +49,6 @@ const LiveblocksComments: React.FC<LiveblocksCommentsProps> = ({ snippetId, show
     <div className='mt-8'>
       {showFullComments ? (
         <div className='mx-6'>
-          <h3 className='font-inter mb-4 flex items-center font-normal leading-5 tracking-[0.14px] text-text-secondary'>
-            <Chat size={16} className='mr-2' />
-            {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
-          </h3>
           {threads.length > 0 ? (
             threads.map(thread => <Thread key={thread.id} thread={thread} showComposer={showFullComments} />)
           ) : (

src/components/PrivateRoute.tsx

@@ -1,25 +1,37 @@
-import type { FC, ReactNode } from 'react'
-import { useContext, useEffect, useState } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
+import type { FC } from 'react'
+import { useContext, useEffect } from 'react'
+import { useNavigate, useLocation, Outlet } from 'react-router-dom'
 import { AuthContext } from '../providers/auth'
 
-interface PrivateRouteProps {
-  children: ReactNode
-}
-
-const PrivateRoute: FC<PrivateRouteProps> = ({ children }) => {
-  const { user } = useContext(AuthContext)
+interface PrivateRouteProps {}
 
+const PrivateRoute: FC<PrivateRouteProps> = () => {
+  const { user, isLoading } = useContext(AuthContext)
   const navigate = useNavigate()
   const location = useLocation()
 
+  // Only run once on mount
+  useEffect(() => {
+    if (!isLoading && user === null) {
+      navigate('/login', {
+        state: { from: location.pathname + location.search },
+        replace: true
+      })
+    }
+  }, []) // Empty dependency array - only runs once on mount
+
+  // Handle subsequent auth changes in a separate effect if needed
   useEffect(() => {
-    if (user === null) {
-      navigate('/login', { state: { from: location.pathname + location.search } })
+    if (!isLoading && user === null) {
+      navigate('/login', { replace: true })
     }
-  }, [user, navigate, location])
+  }, [user]) // Only depend on user changes
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
 
-  return <>{children}</>
+  return user ? <Outlet /> : null
 }
 
 export default PrivateRoute

src/components/SearchInterface.tsx

@@ -1,36 +1,27 @@
 'use client'
 
-import type React from 'react'
-import { useState } from 'react'
+import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import xor from 'lodash/xor'
-import { Filter } from 'lucide-react'
+import { Filter, Loader } from 'lucide-react'
 import { useFilter } from '@/providers/filter'
 
 import RoundedToggleButton from './RoundedToggleButton'
 import SnippetCard from './SnippetCard'
 import ResponsiveSidebar from './Sidebar'
 import { useSnippets } from '@/hooks/useSnippets'
 
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious
-} from '@/components/ui/pagination'
+import InfiniteScroll from 'react-infinite-scroller'
 
 const STARRED_BY_RESULTS = ['Starred by Me', 'Starred by Others']
 const PAGE_SIZE = 5
 
 const SearchInterface: React.FC = () => {
-  const [currentPage, setCurrentPage] = useState(0)
   const { showSidebar, starredByFilter, setShowSidebar, setStarredByFilter } = useFilter()
 
-  const { data, isLoading } = useSnippets(currentPage, PAGE_SIZE)
+  const { data, error, fetchNextPage, hasNextPage, status } = useSnippets(PAGE_SIZE)
+
   const navigate = useNavigate()
-  const snippets = data?.data
 
   const handleSnippetClick = (snippetId: string) => {
     navigate(`/snippet/${snippetId}`)
@@ -44,6 +35,8 @@ const SearchInterface: React.FC = () => {
     setStarredByFilter(xor(starredByFilter, [starred]))
   }
 
+  const snippets = data?.pages.flatMap(page => page.snippets) || []
+
   return (
     <div className='flex flex-grow overflow-hidden'>
       {showSidebar && <ResponsiveSidebar />}
@@ -67,55 +60,28 @@ const SearchInterface: React.FC = () => {
           </div>
         </div>
         <div className='mx-4 flex-grow overflow-y-auto'>
-          {isLoading ? (
+          {status === 'loading' ? (
             <div>Loading...</div>
+          ) : status === 'error' ? (
+            <div>Error: {error.message}</div>
           ) : (
-            <>
-              {snippets?.map(snippet => (
-                <SnippetCard key={snippet.id} snippet={snippet} onSnippetClick={handleSnippetClick} />
-              ))}
-              <div className='my-6'>
-                <Pagination className='mt-8'>
-                  <PaginationContent className='flex items-center gap-6 rounded-xl border bg-white p-2 shadow-sm'>
-                    <PaginationItem>
-                      <PaginationPrevious
-                        className={`flex items-center gap-2 rounded-lg px-4 py-2 transition-all duration-200
-                          ${
-                            currentPage === 0
-                              ? 'cursor-not-allowed text-gray-300'
-                              : 'text-blue-600 hover:bg-blue-50 hover:text-blue-700'
-                          }`}
-                        onClick={() => setCurrentPage(prev => Math.max(0, prev - 1))}
-                        disabled={currentPage === 0}
-                      />
-                    </PaginationItem>
-
-                    <PaginationItem>
-                      <PaginationLink
-                        className='rounded-lg bg-blue-50 px-6 py-2 font-semibold text-blue-700'
-                        isActive={true}>
-                        <span className='text-sm'>
-                          {currentPage + 1} / {data?.total_page}
-                        </span>
-                      </PaginationLink>
-                    </PaginationItem>
-
-                    <PaginationItem>
-                      <PaginationNext
-                        className={`flex items-center gap-2 rounded-lg px-4 py-2 transition-all duration-200
-                          ${
-                            currentPage >= (data?.total_page || 0) - 1
-                              ? 'cursor-not-allowed text-gray-300'
-                              : 'text-blue-600 hover:bg-blue-50 hover:text-blue-700'
-                          }`}
-                        onClick={() => setCurrentPage(prev => prev + 1)}
-                        disabled={currentPage >= (data?.total_page || 0) - 1}
-                      />
-                    </PaginationItem>
-                  </PaginationContent>
-                </Pagination>
-              </div>
-            </>
+            <div className='h-full overflow-auto'>
+              <InfiniteScroll
+                pageStart={0}
+                loadMore={fetchNextPage}
+                hasMore={hasNextPage}
+                loader={
+                  <div className='mt-2 flex w-full justify-center'>
+                    <Loader />
+                  </div>
+                }
+                useWindow={false} // Change to false to use the parent container
+                getScrollParent={() => document.querySelector('.overflow-auto')}>
+                {snippets.map(snippet => (
+                  <SnippetCard key={snippet.id} snippet={snippet} onSnippetClick={handleSnippetClick} />
+                ))}
+              </InfiniteScroll>
+            </div>
           )}
         </div>
       </div>