Add inbox tab (aeharding#6)

* Add start of inbox tab

* Commit progress

* Add more of messenger page

* dd more inbox

* Add auto refreshing inbox counts

* Add progress for inbox page

* Fix login/logout edge cases

* Fix ci

* Adjust roadmap

.eslintrc

@@ -37,7 +37,8 @@
     "@typescript-eslint/no-unused-vars": [
       "warn",
       { "destructuredArrayIgnorePattern": "^_" }
-    ]
+    ],
+    "react/prop-types": 0
   },
   "overrides": [
     {

README.md

@@ -39,10 +39,9 @@ wefwef is an [Apollo-like](https://apolloapp.io/) open source web client for [Le
 **What is on the roadmap?**
 
 - Multi account support
+- Creating posts
 - Android theme
-- Inbox tab, private messaging
-- Notifications and badging
-- Search tab
+- Native notifications and badging
 - ...and more!
 
 ## 💪 Mobile webapps are awesome

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "express": "^4.18.2",
     "http-proxy-middleware": "^2.0.6",
+    "react-textarea-autosize": "^8.5.0",
     "vite-express": "^0.9.1"
   },
   "devDependencies": {
@@ -23,16 +24,16 @@
     "@emotion/eslint-plugin": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@ionic/core": "^7.0.14",
-    "@ionic/react": "^7.0.14",
-    "@ionic/react-router": "^7.0.0",
+    "@ionic/core": "^7.1.0",
+    "@ionic/react": "^7.1.0",
+    "@ionic/react-router": "^7.1.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/js-cookie": "^3.0.3",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
@@ -49,7 +50,7 @@
     "ionicons": "^7.1.2",
     "js-cookie": "^3.0.5",
     "jsdom": "^22.1.0",
-    "lemmy-js-client": "0.18.0-rc.1",
+    "lemmy-js-client": "0.18.0",
     "lodash": "^4.17.21",
     "photoswipe": "^5.3.7",
     "prettier": "^2.8.8",
@@ -58,14 +59,15 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
     "react-photoswipe-gallery": "^2.2.7",
-    "react-redux": "^8.1.0",
+    "react-redux": "^8.1.1",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-virtuoso": "^4.3.10",
+    "react-virtuoso": "^4.3.11",
     "remark-gfm": "^3.0.1",
     "terser": "^5.18.1",
     "typescript": "^5.1.3",
     "ua-parser-js": "^1.0.35",
+    "usehooks-ts": "^2.9.1",
     "vite": "^4.3.9",
     "vite-plugin-pwa": "^0.16.4",
     "vite-plugin-svgr": "^3.2.0",

src/Auth.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "./store";
 import {
   getSite,
@@ -7,6 +7,9 @@ import {
 } from "./features/auth/authSlice";
 import { useLocation } from "react-router";
 import { DEFAULT_ACTOR } from "./TabbedRoutes";
+import { getInboxCounts, syncMessages } from "./features/inbox/inboxSlice";
+import { useInterval } from "usehooks-ts";
+import usePageVisibility from "./helpers/usePageVisibility";
 
 interface AuthProps {
   children: React.ReactNode;
@@ -20,6 +23,7 @@ export default function Auth({ children }: AuthProps) {
     (state) => state.auth.connectedInstance
   );
   const location = useLocation();
+  const pageVisibility = usePageVisibility();
 
   useEffect(() => {
     if (!location.pathname.startsWith("/posts")) {
@@ -39,9 +43,45 @@ export default function Auth({ children }: AuthProps) {
 
   useEffect(() => {
     dispatch(getSite());
+    dispatch(getInboxCounts());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [jwt]);
 
+  const shouldSyncMessages = useCallback(() => {
+    return jwt && location.pathname.startsWith("/inbox/messages");
+  }, [jwt, location]);
+
+  useInterval(
+    () => {
+      if (!pageVisibility) return;
+      if (!shouldSyncMessages()) return;
+
+      dispatch(syncMessages());
+    },
+    shouldSyncMessages() ? 1_000 * 15 : null
+  );
+
+  useInterval(() => {
+    if (!pageVisibility) return;
+    if (!jwt) return;
+
+    dispatch(getInboxCounts());
+  }, 1_000 * 60);
+
+  useEffect(() => {
+    if (!pageVisibility) return;
+
+    dispatch(getInboxCounts());
+  }, [pageVisibility, dispatch]);
+
+  useEffect(() => {
+    if (!pageVisibility) return;
+    if (!shouldSyncMessages()) return;
+
+    dispatch(syncMessages());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageVisibility]);
+
   if (!connectedInstance) return;
 
   return <>{children}</>;