Optymalization

.gitignore

@@ -22,4 +22,4 @@ dist/
 # environment variables
 .env
 dfx.json
-.astro
+.astro/

src/atlas_frontend/src/canisters/atlasMain/api.ts

@@ -9,10 +9,19 @@ import type { Dispatch } from "react";
 import type { UnknownAction } from "@reduxjs/toolkit";
 import { setUserBlockchainData } from "../../store/slices/userSlice.js";
 import { unwrapCall } from "../delegatedCall.js";
-import { setConfig } from "../../store/slices/appSlice.js";
+import { setConfig, setLastFetchTime } from "../../store/slices/appSlice.js";
 import { setSpaces } from "../../store/slices/spacesSlice.js";
 import type { ExternalLinks } from "../atlasSpace/types.js";
 
+const shouldFetchSpaces = (lastFetchTime: string | null): boolean => {
+  if (!lastFetchTime) return true;
+  const lastFetch = new Date(lastFetchTime);
+  const now = new Date();
+  const diffMinutes = (now.getTime() - lastFetch.getTime()) / (1000 * 60);
+  return diffMinutes >= 5;
+};
+
+export { shouldFetchSpaces };
 interface CreateNewSpaceArgs {
   authAtlasMain: ActorSubclass<_SERVICE_MAIN>;
   name: string;
@@ -84,6 +93,9 @@ export const getAllSpaces = async ({
   unAuthAtlasMain,
   dispatch,
 }: GetAtlasData) => {
+  const now = new Date().toISOString();
+  dispatch(setLastFetchTime(now));
+
   let spacesCount = 0n;
   let start = 0n;
   const count = 200n;

src/atlas_frontend/src/canisters/atlasSpace/api.ts

@@ -48,24 +48,26 @@ export const getAtlasSpace = async ({
   }
   const externalLinksObj = Object.fromEntries(state.external_links);
 
-  dispatch(
-    setSpace({
-      spaceId,
-      state: {
-        ...state,
-        version,
-        space_symbol: state.space_symbol.pop() ?? null,
-        space_background: state.space_background.pop() ?? null,
-        space_logo: state.space_logo.pop() ?? null,
-        external_links: {
-          x: externalLinksObj?.x ?? null,
-          telegram: externalLinksObj?.telegram ?? null,
-          discord: externalLinksObj?.discord ?? null,
-          linkedIn: externalLinksObj?.linkedIn ?? null,
-        },
+  const spaceData = {
+    spaceId,
+    state: {
+      ...state,
+      version,
+      space_symbol: state.space_symbol.pop() ?? null,
+      space_background: state.space_background.pop() ?? null,
+      space_logo: state.space_logo.pop() ?? null,
+      external_links: {
+        x: externalLinksObj?.x ?? null,
+        telegram: externalLinksObj?.telegram ?? null,
+        discord: externalLinksObj?.discord ?? null,
+        linkedIn: externalLinksObj?.linkedIn ?? null,
       },
-    })
-  );
+    },
+  };
+
+  dispatch(setSpace(spaceData));
+
+  return spaceData;
 };
 
 interface CreateNewSpaceTaskArgs {

src/atlas_frontend/src/components/Space/SpacesList/index.tsx

@@ -5,58 +5,128 @@ import {
   useUnAuthAgent,
   useUnAuthAtlasMainActor,
 } from "../../../hooks/identityKit";
-import { getAllSpaces } from "../../../canisters/atlasMain/api";
-import { deserialize, type RootState } from "../../../store/store";
+import {
+  getAllSpaces,
+  shouldFetchSpaces,
+} from "../../../canisters/atlasMain/api";
+import {
+  customSerify,
+  deserialize,
+  type RootState,
+} from "../../../store/store";
 import { Principal } from "@dfinity/principal";
 import { getAtlasSpace } from "../../../canisters/atlasSpace/api";
 import SpaceItem from "./SpaceItem";
-import { useNavigate } from "react-router-dom";
 import type { Spaces } from "../../../store/slices/spacesSlice";
 import LocalBlurOverlay from "../../Shared/LocalBlurOverlay";
+import { serify } from "@karmaniverous/serify-deserify";
+import { setSpaces } from "../../../store/slices/spacesSlice";
+import type { StorableState } from "../../../canisters/atlasSpace/types";
+
+const syncSpacesWithLocalStorage = (reduxSpaces: Spaces) => {
+  try {
+    const savedData = localStorage.getItem("atlasSpaces");
+    const localSpaces = savedData ? JSON.parse(savedData) : {};
+    const reduxKeys = Object.keys(reduxSpaces || {});
+    const localKeys = Object.keys(localSpaces || {});
+
+    if (reduxKeys.length !== localKeys.length) {
+      const serializedData = JSON.stringify(
+        serify(reduxSpaces, customSerify)
+      );
+      localStorage.setItem("atlasSpaces", serializedData);
+    }
+  } catch (err) {
+    console.error("Failed to sync Redux spaces with localStorage:", err);
+  }
+};
 
 const SpacesList = () => {
   const dispatch = useDispatch();
   const unAuthAtlasMain = useUnAuthAtlasMainActor();
-  const spaces = deserialize<Spaces>(useSelector((state: RootState) => state.spaces.spaces));
-  const [fetchedSpacesData, setFetchedSpacesData] = useState(false);
-  const [fetchingInProgress, setFetchingInProgress] = useState(true);
+  const spaces = deserialize<Spaces>(
+    useSelector((state: RootState) => state.spaces.spaces)
+  );
+  const lastFetchTime = useSelector((state: RootState) => state.app.lastFetchTime);
+
+  const [, setFetchingInProgress] = useState(true);
   const agent = useUnAuthAgent();
-  const navigate = useNavigate();
 
   useEffect(() => {
-    const fetchSpaces = async () => {
-      if (unAuthAtlasMain && !spaces) {
-        await getAllSpaces({
+    const loadAndFetchSpaces = async () => {
+      if (spaces && Object.keys(spaces).length > 1) {
+        setFetchingInProgress(false);
+        return;
+      }
+
+      setFetchingInProgress(true);
+      try {
+        const savedData = localStorage.getItem("atlasSpaces");
+        if (savedData) {
+          const loadedSpaces = JSON.parse(savedData);
+          if (loadedSpaces && Object.keys(loadedSpaces).length > 0) {
+            dispatch(setSpaces(loadedSpaces));
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load spaces data from localStorage:", error);
+      }
+      if (unAuthAtlasMain && agent && shouldFetchSpaces(lastFetchTime)) {
+        const spacesIDs = await getAllSpaces({
           dispatch,
           unAuthAtlasMain,
         });
-        setFetchingInProgress(false);
+        const updatedSpacesData: {
+          [key: string]: { state: StorableState | null; tasks: null };
+        } = {};
+        const spaceIds = Object.keys(spacesIDs);
+
+        for (const spaceId of spaceIds) {
+          const spacePrincipal = Principal.from(spaceId);
+          const unAuthAtlasSpace = getUnAuthAtlasSpaceActor(
+            agent,
+            spacePrincipal
+          );
+          if (!unAuthAtlasSpace) continue;
+
+          const spaceData = await getAtlasSpace({
+            spaceId,
+            unAuthAtlasSpace,
+            dispatch,
+          });
+
+          if (spaceData) {
+            updatedSpacesData[spaceId] = {
+              state: spaceData.state,
+              tasks: null,
+            };
+          }
+        }
+
+        if (Object.keys(updatedSpacesData).length > 0) {
+          dispatch(setSpaces(updatedSpacesData));
+          try {
+            const serializedData = JSON.stringify(
+              serify(updatedSpacesData, customSerify)
+            );
+            localStorage.setItem("atlasSpaces", serializedData);
+          } catch (error) {
+            console.error("Failed to save spaces data to localStorage:", error);
+          }
+        }
       }
+      setFetchingInProgress(false);
     };
-    fetchSpaces();
-  }, [dispatch, unAuthAtlasMain]);
 
-  useEffect(() => {
-    if (!spaces || fetchedSpacesData || !agent) return;
-    Object.keys(spaces).map(async (spaceId) => {
-      const spacePrincipal = Principal.from(spaceId);
-      getUnAuthAtlasSpaceActor(agent, spacePrincipal);
-      const unAuthAtlasSpace = getUnAuthAtlasSpaceActor(agent, spacePrincipal);
-      if (!unAuthAtlasSpace) return;
-      await getAtlasSpace({
-        spaceId,
-        unAuthAtlasSpace,
-        dispatch,
-      });
-    });
-    setFetchedSpacesData(true);
-  }, [dispatch, spaces, fetchedSpacesData]);
+    loadAndFetchSpaces();
+
+    if (spaces && Object.keys(spaces).length > 0) {
+        syncSpacesWithLocalStorage(spaces);
+    }
+  }, [dispatch, unAuthAtlasMain, agent, lastFetchTime]);
 
   if (!spaces) {
-    if (!fetchingInProgress) navigate("/");
-    return (
-      <LocalBlurOverlay isLoading={true} />
-    )
+    return <LocalBlurOverlay isLoading={true} />;
   }
 
   const spacesEntries = Object.entries(spaces);
@@ -89,4 +159,4 @@ const SpacesList = () => {
   }
 };
 
-export default SpacesList;
+export default SpacesList;

src/atlas_frontend/src/store/slices/appSlice.ts

@@ -10,12 +10,14 @@ interface AppState {
   blockchainConfig: null | StorableConfig;
   isScreenBlur: boolean;
   isLoading: boolean;
+  lastFetchTime: string | null;
 }
 
 const initialState: AppState = {
   blockchainConfig: null,
   isScreenBlur: false,
   isLoading: false,
+  lastFetchTime: null,
 };
 
 export const appSlice = createSlice({
@@ -31,6 +33,9 @@ export const appSlice = createSlice({
     setConfig: (state, action: PayloadAction<StorableConfig>) => {
       state.blockchainConfig = action.payload;
     },
+    setLastFetchTime: (state, action: PayloadAction<string>) => {
+      state.lastFetchTime = action.payload;
+    },
   },
   selectors: {
     selectBlockchainConfig: (state: AppState) => {
@@ -40,7 +45,7 @@ export const appSlice = createSlice({
   }
 });
 
-export const { setScreenBlur, setConfig, setLoading } =
+export const { setScreenBlur, setConfig, setLoading, setLastFetchTime } =
   appSlice.actions;
   export const { selectBlockchainConfig } = appSlice.selectors;