feat: refactor the cache

src/routes/chat/ChannelChat/index.js

@@ -27,9 +27,9 @@ export default function ChannelChat({
   const dispatch = useDispatch();
   const { msgs, users, pendingMsgs } = useSelector((store) => {
     return {
-      msgs: store.channelMsg[cid] || {},
+      msgs: store.channelMessage[cid] || {},
       users: store.contacts,
-      pendingMsgs: store.pendingMsg.channel[cid] || {},
+      pendingMsgs: store.pendingMessage.channel[cid] || {},
     };
   });
   const handleClearUnreads = () => {

src/routes/chat/DMChat/index.js

@@ -13,8 +13,8 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   const contacts = useSelector((store) => store.contacts);
   const { msgs, pendingMsgs } = useSelector((store) => {
     return {
-      msgs: store.userMsg[uid] || {},
-      pendingMsgs: store.pendingMsg.user[uid] || {},
+      msgs: store.userMessage[uid] || {},
+      pendingMsgs: store.pendingMessage.user[uid] || {},
     };
   });
   const [currUser, setCurrUser] = useState(null);
@@ -31,7 +31,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
   }, [dropFiles]);
 
   if (!currUser) return null;
-  console.log("user msgs", msgs);
+  // console.log("user msgs", msgs);
   return (
     <Layout
       setDragFiles={setDragFiles}
@@ -75,7 +75,7 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
             })
             .map(([mid, msg]) => {
               if (!msg) return null;
-              console.log("user msg", msg);
+              // console.log("user msg", msg);
               const {
                 from_uid,
                 content,

src/routes/chat/index.js

@@ -20,17 +20,19 @@ import DMList from "./DMList";
 export default function ChatPage() {
   const [channelDropFiles, setChannelDropFiles] = useState([]);
   const [userDropFiles, setUserDropFiles] = useState([]);
-  const { channels, UserMsgData, ChannelMsgData } = useSelector((store) => {
-    return {
-      channels: store.channels,
-      UserMsgData: store.userMsg,
-      ChannelMsgData: store.channelMsg,
-    };
-  });
+  const { contacts, channels, UserMsgData, ChannelMsgData } = useSelector(
+    (store) => {
+      return {
+        contacts: store.contacts,
+        channels: store.channels,
+        UserMsgData: store.userMessage,
+        ChannelMsgData: store.channelMessage,
+      };
+    }
+  );
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [contactsModalVisible, setContactsModalVisible] = useState(false);
   const { channel_id, user_id } = useParams();
-  const contacts = useSelector((store) => store.contacts);
   const toggleContactsModalVisible = () => {
     setContactsModalVisible((prev) => !prev);
   };

src/routes/home/index.js

@@ -19,22 +19,14 @@ export default function HomePage() {
   const dispatch = useDispatch();
   const {
     ui: { menuExpand, setting, channelSetting },
-    authData: { usersVersion, afterMid },
+    visitMark: { usersVersion, afterMid },
   } = useSelector((store) => {
     return {
-      authData: store.authData,
+      visitMark: store.visitMark,
       ui: store.ui,
-      contacts: store.contacts,
     };
   });
   const { data, loading, error, success } = usePreload();
-
-  // useEffect(() => {
-  //   if (authData) {
-  //     dispatch(setAuthData(data));
-  //   }
-  // }, [authData]);
-
   const toggleExpand = () => {
     dispatch(toggleMenuExpand());
   };

src/routes/home/usePreload.js

@@ -1,38 +1,54 @@
 import { useEffect, useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { useGetContactsQuery } from "../../app/services/contact";
-import { clearAuthData } from "../../app/slices/auth.data";
+import initCache, { useRehydrate } from "../../app/cache";
+import { useLazyGetContactsQuery } from "../../app/services/contact";
+import { clearAuthData, setUserData } from "../../app/slices/auth.data";
 import { setContacts } from "../../app/slices/contacts";
 
 // import { useGetChannelsQuery } from "../../app/services/channel";
-import { useGetServerQuery } from "../../app/services/server";
+import { useLazyGetServerQuery } from "../../app/services/server";
+import { KEY_UID } from "../../app/config";
 // pollingInterval: 0,
-const querySetting = {
-  refetchOnMountOrArgChange: true,
-};
+// const querySetting = {
+//   refetchOnMountOrArgChange: true,
+// };
 export default function usePreload() {
+  const { rehydrate, cacheFirst } = useRehydrate();
   const [checked, setChecked] = useState(false);
-  const loginedUser = useSelector((store) => {
-    return store.authData.user;
-  });
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const {
-    isLoading: contactsLoading,
-    isSuccess: contactsSuccess,
-    isError: contactsError,
-    data: contacts,
-  } = useGetContactsQuery(undefined, querySetting);
-  const {
-    isLoading: serverLoading,
-    isSuccess: serverSuccess,
-    isError: serverError,
-    data: server,
-  } = useGetServerQuery(undefined, querySetting);
+  const [
+    getContacts,
+    {
+      isLoading: contactsLoading,
+      isSuccess: contactsSuccess,
+      isError: contactsError,
+      data: contacts,
+    },
+  ] = useLazyGetContactsQuery();
+  const [
+    getServer,
+    {
+      isLoading: serverLoading,
+      isSuccess: serverSuccess,
+      isError: serverError,
+      data: server,
+    },
+  ] = useLazyGetServerQuery();
   useEffect(() => {
+    initCache();
+    rehydrate();
+  }, []);
+  useEffect(() => {
+    getContacts();
+    getServer();
+  }, []);
+
+  useEffect(() => {
+    const local_uid = localStorage.getItem(KEY_UID);
     if (contacts) {
-      const matchedUser = contacts.find((c) => c.uid == loginedUser.uid);
+      const matchedUser = contacts.find((c) => c.uid == local_uid);
       if (!matchedUser) {
         console.log("no matched user, redirect to login");
         dispatch(clearAuthData());
@@ -41,13 +57,14 @@ export default function usePreload() {
         const markedContacts = contacts.map((u) => {
           return u.uid == matchedUser.uid ? { ...u, online: true } : u;
         });
+        dispatch(setUserData(matchedUser));
         dispatch(setContacts(markedContacts));
         setChecked(true);
       }
     }
   }, [contacts]);
   return {
-    loading: contactsLoading || serverLoading || !checked,
+    loading: contactsLoading || serverLoading || !checked || !cacheFirst,
     error: contactsError && serverError,
     success: contactsSuccess && serverSuccess,
     data: {

src/routes/index.js

@@ -1,72 +1,64 @@
 // import { useState } from "react";
-import { Route, Routes, HashRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
+import { Route, Routes, HashRouter } from "react-router-dom";
+import { Provider } from "react-redux";
 
-import { persistStore } from 'redux-persist';
-import { PersistGate } from 'redux-persist/integration/react';
+// import { persistStore } from 'redux-persist';
+// import { PersistGate } from 'redux-persist/integration/react';
 // import Welcome from './Welcome'
-import NotFoundPage from './404';
-import LoginPage from './login';
-import HomePage from './home';
-import ChatPage from './chat';
-import ContactsPage from './contacts';
-import RequireAuth from '../common/component/RequireAuth';
+import NotFoundPage from "./404";
+import LoginPage from "./login";
+import HomePage from "./home";
+import ChatPage from "./chat";
+import ContactsPage from "./contacts";
+import RequireAuth from "../common/component/RequireAuth";
 
-import store from '../app/store.with.persist';
-import InvitePage from './invite';
-// import getStore from "../app/store";
+import store from "../app/store";
+import InvitePage from "./invite";
 
 const PageRoutes = () => {
- return (
-  <HashRouter>
-   <Routes>
-    <Route path="/login" element={<LoginPage />} />
-    <Route path="/invite" element={<InvitePage />} />
-    <Route
-     path="/"
-     element={
-      <RequireAuth>
-       <HomePage />
-      </RequireAuth>
-     }
-    >
-     <Route index element={<ChatPage />} />
-     <Route path="chat">
-      <Route index element={<ChatPage />} />
-      <Route path="channel/:channel_id" element={<ChatPage />} />
-      <Route path="dm/:user_id" element={<ChatPage />} />
-     </Route>
-     <Route path="contacts">
-      <Route index element={<ContactsPage />} />
-      <Route path=":user_id" element={<ContactsPage />} />
-     </Route>
-    </Route>
-    <Route path="*" element={<NotFoundPage />} />
-   </Routes>
-  </HashRouter>
- );
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/invite" element={<InvitePage />} />
+        <Route
+          path="/"
+          element={
+            <RequireAuth>
+              <HomePage />
+            </RequireAuth>
+          }
+        >
+          <Route index element={<ChatPage />} />
+          <Route path="chat">
+            <Route index element={<ChatPage />} />
+            <Route path="channel/:channel_id" element={<ChatPage />} />
+            <Route path="dm/:user_id" element={<ChatPage />} />
+          </Route>
+          <Route path="contacts">
+            <Route index element={<ContactsPage />} />
+            <Route path=":user_id" element={<ContactsPage />} />
+          </Route>
+        </Route>
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </HashRouter>
+  );
 };
 // const local_key = "AUTH_DATA";
 export default function ReduxRoutes() {
- // const [authData, setAuthData] = useState(
- //   JSON.parse(localStorage.getItem(local_key))
- // );
- // const updateAuthData = (data) => {
- //   localStorage.setItem(local_key, JSON.stringify(data));
- //   setAuthData(data);
- // };
- return (
-  <Provider store={store}>
-   <PersistGate loading={null} persistor={persistStore(store)}>
-    <PageRoutes />
-   </PersistGate>
-   {/* {authData ? (
-        <PersistGate loading={null} persistor={persistStore(getPersistStore())}>
-          <PageRoutes authData={authData} updateAuthData={updateAuthData} />
-        </PersistGate>
-      ) : (
-        <PageRoutes authData={authData} updateAuthData={updateAuthData} />
-      )} */}
-  </Provider>
- );
+  // const [authData, setAuthData] = useState(
+  //   JSON.parse(localStorage.getItem(local_key))
+  // );
+  // const updateAuthData = (data) => {
+  //   localStorage.setItem(local_key, JSON.stringify(data));
+  //   setAuthData(data);
+  // };
+  return (
+    <Provider store={store}>
+      {/* <PersistGate loading={null} persistor={persistStore(store)}> */}
+      <PageRoutes />
+      {/* </PersistGate> */}
+    </Provider>
+  );
 }

src/routes/login/SolidLoginButton.js

@@ -6,7 +6,8 @@ export default function SolidLoginButton() {
 
   const handleSolidLogin = () => {
     getOpenId({
-      issuer_url: "https://solidweb.org",
+      // issuer: "solidweb.org",
+      issuer: "broker.pod.inrupt.com",
       redirect_uri: `${location.origin}/#/login`,
     });
   };