feat: page tab context (#845)

* feat: page list tab context added

* fix: build fix

apps/app/hooks/use-local-storage.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 
 const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  if (typeof window === undefined || typeof window === "undefined") return defaultValue;
   try {
     const item = window.localStorage.getItem(key);
     return item ? JSON.parse(item) : defaultValue;

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -14,6 +14,7 @@ import projectService from "services/project.service";
 import pagesService from "services/pages.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useLocalStorage from "hooks/use-local-storage";
 // icons
 import { PlusIcon } from "components/icons";
 // layouts
@@ -74,6 +75,8 @@ const ProjectPages: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
+  const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
+
   const {
     handleSubmit,
     register,
@@ -145,6 +148,25 @@ const ProjectPages: NextPage = () => {
       });
   };
 
+
+  const currentTabValue = (tab: string | null) => {
+    switch (tab) {
+      case "Recent":
+        return 0;
+      case "All":
+        return 1;
+      case "Favorites":
+        return 2;
+      case "Created by me":
+        return 3;
+      case "Created by others":
+        return 4;
+
+      default:
+        return 0;
+    }
+  };
+
   return (
     <>
       <CreateUpdatePageModal
@@ -193,7 +215,26 @@ const ProjectPages: NextPage = () => {
             )}
           </form>
           <div>
-            <Tab.Group>
+            <Tab.Group
+              defaultIndex={currentTabValue(pageTab)}
+              onChange={(i) => {
+                switch (i) {
+                  case 0:
+                    return setPageTab("Recent");
+                  case 1:
+                    return setPageTab("All");
+                  case 2:
+                    return setPageTab("Favorites");
+                  case 3:
+                    return setPageTab("Created by me");
+                  case 4:
+                    return setPageTab("Created by others");
+
+                  default:
+                    return setPageTab("Recent");
+                }
+              }}
+            >
               <Tab.List as="div" className="flex items-center justify-between mb-6">
                 <div className="flex gap-4">
                   {["Recent", "All", "Favorites", "Created by me", "Created by others"].map(