Paginate the logs in Sidebar

.vscode/launch.json

@@ -0,0 +1,36 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Next.js: debug server-side",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "npm run dev"
+        },
+        {
+            "name": "Next.js: debug client-side",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:3000"
+        },
+        {
+            "name": "Next.js: debug full stack",
+            "type": "node",
+            "request": "launch",
+            "program": "${workspaceFolder}/node_modules/.bin/next",
+            "runtimeArgs": [
+                "--inspect"
+            ],
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "serverReadyAction": {
+                "action": "debugWithEdge",
+                "killOnServerStop": true,
+                "pattern": "- Local:.+(https?://.+)",
+                "uriFormat": "%s",
+                "webRoot": "${workspaceFolder}"
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -3,13 +3,14 @@
    "editor.formatOnSave": true,
    "files.exclude": {
       //  "build":true,
-      "test": true,
+      // "test": true,
       //    ".vscode":false,
       //    ".*":true,
-      "web": false,
-      "build": false,
-      "windows": true,
-      "macos": true,
+      // "web": false,
+      // "build": false,
+      // "windows": true,
+      // "macos": true,
+      // ".next": true
    },
    "dart.flutterSdkPath": "/Users/mahesh/Documents/flutter",
    "dart.debugExternalLibraries": true,

.vscode/tasks.json

@@ -1,34 +1,10 @@
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "flutter",
-			"command": "flutter",
-			"args": [
-				"pub",
-				"get"
-			],
-			"problemMatcher": [],
-			"label": "flutter: flutter pub get",
-			"detail": "",
-			"runOptions": {
-				"runOn": "folderOpen"
-			}
-		},
-		// {
-		// 	"type": "flutter",
-		// 	"command": "flutter",
-		// 	"args": [
-		// 		"build",
-		// 		"web"
-		// 	],
-		// 	"group": "build",
-		// 	"problemMatcher": [],
-		// 	"label": "flutter: flutter build web",
-		// 	"detail": "",
-		// 	"runOptions": {
-		//         "runOn": "folderOpen"
-		//     }
-		// }
-	]
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "echo",
+            "type": "shell",
+            "command": "echo ${workspaceFolder}"
+        }
+    ]
 }

firebase.json

@@ -11,7 +11,6 @@
     "rewrites": [
       {
         "source": "**",
-        "destination": "/index.html",
         "run": {
           "serviceId": "pastelog",
           "region": "us-central1"

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "debug": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -57,4 +58,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

src/app/(main)/_components/Pastelog.tsx

@@ -118,6 +118,7 @@ export default function Pastelog({ id }: { id?: string }) {
                 type: LogType.TEXT,
                 title: title,
                 createdDate: new Date(),
+                lastUpdatedAt: new Date(),
                 isExpired: false,
                 summary: '',
                 isPublic: false,
@@ -141,7 +142,6 @@ export default function Pastelog({ id }: { id?: string }) {
     }
 
 
-
     async function handleImport(url: string) {
         setImportLoading(true);
         try {

src/app/(main)/_components/PreviewPage.tsx

@@ -75,6 +75,8 @@ const PreviewPage = ({ logId }: { logId: string }) => {
     const handleOnEdit = async (hasUpdated: boolean) => {
         setLoading(true);
         if (hasUpdated) {
+            // update last updated date
+            editedLog!.lastUpdatedAt = new Date();
             await logService.updateLog(logId, editedLog!);
             setpreviewLog(new Log({ ...editedLog! }));
         } else {

src/app/(main)/_components/Sidebar.tsx

@@ -1,8 +1,7 @@
 "use client";
 import PencilSquareIcon from '@heroicons/react/24/solid/PencilSquareIcon';
 import { useRouter } from 'next/navigation';
-import React, { useCallback, useEffect, useState } from 'react';
-import useSmallScreen from '../_hooks/useSmallScreen';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Log from "../_models/Log";
 import Analytics from '../_services/Analytics';
 import { AuthService } from '../_services/AuthService';
@@ -18,11 +17,16 @@ const Sidebar: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(true);
     const [logs, setLogs] = useState<Log[]>([]);
     const [refresh, setRefresh] = useState<boolean>(false);
+    const [isFetching, setIsFetching] = useState<boolean>(false);
     const router = useRouter();
-    const isSmallScreen = useSmallScreen();
+    const [hasMore, setHasMore] = useState<boolean>(true);
     const authService = new AuthService();
     const logService = new LogService();
     const [isFirstLogin, setIsFirstLogin] = useState<boolean>(false);
+    const [page, setPage] = useState<number>(1);
+    const logsEndRef = useRef<HTMLDivElement>(null);
+    const initialFetchDone = useRef<boolean>(false);
+
     const onLogClick = useCallback((log: Log | null) => {
         if (log) {
             setSelected(log);
@@ -45,41 +49,91 @@ const Sidebar: React.FC = () => {
         setLoading(false);
     };
 
-    const fetchLogs = useCallback(async () => {
+    const fetchLogs = useCallback(async (pageNumber: number = 1, isRefresh: boolean = false) => {
+        console.log("fetching logs:");
+        if (isFetching) return;
+        setIsFetching(true);
         setLoading(true);
         try {
             await logService.deleteExpiredLogs();
+            let fetchedLogs: Log[] = [];
             if (user && user.uid) {
                 const isFirstLogin = await authService.isFirstTimeLogin(user.uid);
                 if (isFirstLogin) {
-                    const logs = await logService.fetchLogsFromLocal();
-                    setLogs(logs);
+                    fetchedLogs = await logService.fetchLogsFromLocal();
                 } else {
-                    const fetchedLogs = await logService.getLogsByUserId(user.uid)
-                    setLogs(fetchedLogs);
+                    fetchedLogs = await logService.getLogsByUserId(user.uid, pageNumber); // Add pagination to this method
                 }
             } else {
-                const logs = await logService.fetchLogsFromLocal();
-                setLogs(logs);
+                fetchedLogs = await logService.fetchLogsFromLocal();
+            }
+
+            if (isRefresh) {
+                setLogs(fetchedLogs);
+            } else {
+                setLogs(prevLogs => [...prevLogs, ...fetchedLogs]);
             }
+
+            setHasMore(fetchedLogs.length > 0); // Update hasMore based on fetched results
             setLoading(false);
         } catch (_) {
             setLoading(false);
+        } finally {
+            setIsFetching(false);
         }
     }, [user]);
 
     useEffect(() => {
-        const unsubscribe = authService.onAuthStateChanged((user) => {
-            setUser(user);
-            if (user) {
-                fetchLogs();
+        const unsubscribe = authService.onAuthStateChanged((newUser) => {
+            setUser(newUser);
+            if (newUser && !initialFetchDone.current) {
+                fetchLogs(1, true);
+                setPage(1);
+                initialFetchDone.current = true;
             }
         });
-        fetchLogs();
+
+        if (!initialFetchDone.current) {
+            fetchLogs(1, true);
+            initialFetchDone.current = true;
+        }
+
         return () => unsubscribe();
-    }, [fetchLogs, refresh]);
+    }, [fetchLogs, setUser]);
 
-    const handleRefresh = () => setRefresh(prev => !prev);
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            entries => {
+                if (entries[0].isIntersecting && hasMore && !loading && (user && user.uid)) {
+                    setPage(prevPage => prevPage + 1);
+                }
+            },
+            { threshold: 1.0 }
+        );
+
+        if (logsEndRef.current) {
+            observer.observe(logsEndRef.current);
+        }
+
+        return () => {
+            if (logsEndRef.current) {
+                observer.unobserve(logsEndRef.current);
+            }
+        };
+    }, [hasMore, loading]);
+
+
+    useEffect(() => {
+        if (page > 1) {
+            fetchLogs(page);
+        }
+    }, [page, fetchLogs]);
+
+    const handleRefresh = useCallback(() => {
+        setRefresh(prev => !prev);
+        setPage(1);
+        fetchLogs(1, true);
+    }, [fetchLogs]);
 
     const handleLogin = async () => {
         try {
@@ -94,9 +148,7 @@ const Sidebar: React.FC = () => {
         try {
             await authService.signOut();
             setUser(null);
-            // Clear the logs state immediately
             setLogs([]);
-            // Fetch logs from local storage after logout
             const localLogs = await logService.fetchLogsFromLocal();
             setLogs(localLogs);
             router.push('/logs');
@@ -120,11 +172,13 @@ const Sidebar: React.FC = () => {
                     </div>
                 </div>
                 {/* Scrollable logs list */}
-                {loading ? (
-                    <div className={`flex items-center justify-center flex-grow ${showSideBar ? 'w-64' : 'w-0'}`}>
-                        <div className="loader" />
-                    </div>
-                ) :
+                {
+                    // loading ? (
+                    //     <div className={`flex items-center justify-center flex-grow ${showSideBar ? 'w-64' : 'w-0'}`}>
+                    //         <div className="loader" />
+                    //     </div>
+                    // ) :
+
                     (<div className='overflow-y-auto flex-grow pb-2'>
                         {logs.map((log: Log) => (
                             <SidebarItem
@@ -137,6 +191,10 @@ const Sidebar: React.FC = () => {
                                 onRefresh={handleRefresh} // Pass the refresh function
                             />
                         ))}
+                        {loading && <div className="flex justify-center items-center">
+                            <p> Loading...</p>
+                        </div>}
+                        <div ref={logsEndRef} style={{ height: '20px' }} />
                     </div>
                     )}
                 {/* <SettingsDialog /> */}

src/app/(main)/_models/Log.ts

@@ -10,6 +10,7 @@ export interface ILog {
     expiryDate: Date | null;
     data: string;
     createdDate: Date;
+    lastUpdatedAt: Date;
     title?: string | '';
     type: LogType;
     isMarkDown: boolean;
@@ -25,6 +26,7 @@ export class Log implements ILog {
     data: string;
     title?: string | '';
     createdDate: Date;
+    lastUpdatedAt: Date;
     type: LogType;
     isMarkDown: boolean;
     isExpired?: boolean | false;
@@ -37,6 +39,7 @@ export class Log implements ILog {
         expiryDate = null,
         data,
         createdDate = new Date(),
+        lastUpdatedAt = new Date(),
         type,
         isMarkDown,
         title = '',
@@ -49,6 +52,7 @@ export class Log implements ILog {
         expiryDate?: Date | null,
         data: string,
         createdDate?: Date,
+        lastUpdatedAt?: Date,
         type: LogType,
         isMarkDown: boolean,
         title?: string,
@@ -59,6 +63,7 @@ export class Log implements ILog {
         id?: string
     }) {
         this.expiryDate = expiryDate;
+        this.lastUpdatedAt = new Date(createdDate);
         this.data = data;
         this.title = title;
         this.isExpired = isExpired;
@@ -75,6 +80,7 @@ export class Log implements ILog {
         const data = doc.data();
         return new Log({
             expiryDate: data.expiryDate ? new Date(data.expiryDate) : null,
+            lastUpdatedAt: new Date(data.lastUpdatedAt),
             data: data.data,
             createdDate: new Date(data.createdDate),
             type: data.type as LogType,
@@ -92,6 +98,7 @@ export class Log implements ILog {
     toFirestore(): any {
         const doc: any = {
             expiryDate: this.expiryDate ? this.expiryDate.toISOString() : null,
+            lastUpdatedAt: this.lastUpdatedAt ? this.lastUpdatedAt.toISOString() : null,
             data: this.data,
             createdDate: this.createdDate.toISOString(),
             title: this.title ? this.title : '',