Add recoil-nexus package and related states and selectors

Author: codad5

package-lock.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recoil": "^0.7.7",
+    "recoil-nexus": "^0.5.0",
     "tauri-plugin-context-menu": "^0.5.0",
     "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1"

package.json

@@ -1,22 +1,21 @@
 import { useState , useEffect} from "react";
 import { Box, Button, Spinner, useToast  } from '@chakra-ui/react'
-import { fetchUserProfile,getUserProfileFromStorage,  getAccessToken, openAuthWindow, saveAccessToken, saveAuthCode, saveUserProfile, getAccessTokenFromStorage, deleteAccessToken } from "./helpers/auth";
+import { fetchUserProfile,getUserProfileFromStorage,  getAccessToken, openAuthWindow, saveAccessToken, saveAuthCode, saveUserProfile, getAccessTokenFromStorage, deleteAccessToken, handleInitialLogin, handleLoadFrom, handleLogin, handleLogout } from "./helpers/auth";
 import { UserProfile } from "./types/googleapis";
 import { loadContextmenu , pushNotification } from "./helpers/windowhelper";
 import TaskPage from "./components/TaskPage";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { accessTokenState, activeCategoryTasksState, activeTaskCategoryState, attemptLoginState, attemptLogoutState, loggedInSelector, messageState, userProfileState } from "./config/states";
+import { accessTokenState, activeCategoryTasksState, activeTaskCategoryState, attemptLoginState, attemptLogoutState, authLoadingState, loggedInSelector, messageState, userProfileState } from "./config/states";
 import Header from "./components/ui/Header";
 import { task } from "./types/taskapi";
 import { listen_for_auth_code } from "./helpers/eventlistner";
-import { test_command } from "./helpers/invoker";
 import { AccessToken } from "./helpers/commands";
 
 // disable default context menu on build
 loadContextmenu();
 
 function App() {
-  const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useRecoilState<boolean>(authLoadingState);
   const loggedIn = useRecoilValue(loggedInSelector);
   const setProfile = useSetRecoilState<UserProfile | null>(userProfileState);
   const setAccessToken = useSetRecoilState<string | null>(accessTokenState);
@@ -92,7 +91,7 @@ function App() {
   // check the offline data for access token
   useEffect(() => {
     setLoading(true)
-    handleInitialLogin ().catch((err) => {
+    handleInitialLogin().catch((err) => {
         console.log(err); 
         setLoading(false)
         setToastMessage({
@@ -106,77 +105,8 @@ function App() {
   }, [])
 
 
-  async function handleInitialLogin() {
-    // get access token from storage
-    const accessToken = await getAccessTokenFromStorage();
-    if (!accessToken) throw new Error("Signin required");
-    pushNotification("Login Successful")
-    const profile = navigator.onLine ? await fetchUserProfile(accessToken.access_token) : await getUserProfileFromStorage();
-    if(!profile || !profile?.email) throw new Error("Something went wrong, please try again");
-    setProfile(profile);
-    setAccessToken(accessToken.access_token);
-    pushNotification(`welcome back ${profile.name}`)
-  }
-
-
-  async function handleLoadFrom(accessTokenBody: AccessToken) {
-    try {
-      await saveAccessToken(JSON.stringify(accessTokenBody, null, 2))
-      setAccessToken(accessTokenBody.access_token);
-      const userProfile = await fetchUserProfile(accessTokenBody.access_token);
-      await saveUserProfile(userProfile)
-      setProfile(userProfile);
-    }
-    catch (err) {
-      console.log(err);
-      setLoading(false)
-      await handleLogout();
-      setToastMessage({
-        title: "Error",
-        body: "Error signing in",
-        type: "error"
-      })
-    }
-  }
 
- 
- 
-
-  async function handleLogout() {
-    setLoading(true)
-    setAccessToken(null);
-    setProfile(null);
-    setActiveTaskCategory(-1)
-    setActiveCategoryTasksState([])
-    await deleteAccessToken();
-    setLoading(false)
-  }
-
-  
 
-  
-
-  async function handleLogin() {
-    setLoading(true)
-    try {
-      const storedAccessToken = await getAccessTokenFromStorage();
-      if (storedAccessToken) {
-        handleLoadFrom(storedAccessToken);
-        pushNotification('Login Successful')
-        return;
-      }
-      pushNotification('login required')
-      await openAuthWindow();
-    } catch (error) {
-      console.log(error);
-      setLoading(false)
-      setToastMessage({
-        title: "Error",
-        body: "Error signing in",
-        type: "error"
-      })
-    }
-  }
 
 
   return (

src/App.tsx

@@ -53,7 +53,19 @@ const messageState = atom<{ title: string, body?: string , type: "info" | "warni
     default: null,
 });
 
+const authLoadingState = atom<boolean>({
+    key: 'authLoading',
+    default: false,
+});
+
 
+const authLoadingSelector = selector({
+    key: 'authLoadingSelector',
+    get: ({ get }) => {
+        const loading = get(authLoadingState);
+        return loading;
+    },
+});
 
 
 const loggedInSelector = selector({
@@ -163,4 +175,6 @@ export {
     attemptLogoutSelector,
     messageState,
     messageSelector,
+    authLoadingState, 
+    authLoadingSelector
 };

src/config/states.ts

@@ -6,6 +6,9 @@ import { CLIENT_ID, CLIENT_SECRET } from "../config/credentials";
 import settings from "../config/settings";
 import { generate_oauth_port, get_access_token, get_auth_code, save_access_token, save_auth_code } from "./invoker";
 import { AccessToken } from "./commands";
+import { getRecoil, setRecoil } from "recoil-nexus";
+import { accessTokenState, activeCategoryTasksState, activeTaskCategoryState, authLoadingState, messageState, userProfileState } from "../config/states";
+import { pushNotification } from "./windowhelper";
 
 
 const DEFAULT_DIRECTORY = settings.fs.DEFAULT_DIRECTORY;
@@ -206,6 +209,79 @@ export async function getUserProfileFromStorage() {
 }
 
 
+export async function handleLogin() {
+    setRecoil(authLoadingState, true)
+    try {
+      const storedAccessToken = await getAccessTokenFromStorage();
+      if (storedAccessToken) {
+        handleLoadFrom(storedAccessToken);
+        pushNotification('Login Successful')
+        return;
+      }
+      pushNotification('login required')
+      await openAuthWindow();
+    } catch (error) {
+      console.log(error);
+      setRecoil(authLoadingState, false)
+      setRecoil(messageState, {
+        title: "Error",
+        body: "Error signing in",
+        type: "error"
+      })
+    }
+}
+  
+
+export async function handleLoadFrom(accessTokenBody: AccessToken) {
+    try {
+      await saveAccessToken(JSON.stringify(accessTokenBody, null, 2))
+      setRecoil(accessTokenState, accessTokenBody.access_token);
+        //   setAccessToken(accessTokenBody.access_token);
+      const userProfile = await fetchUserProfile(accessTokenBody.access_token);
+      await saveUserProfile(userProfile)
+      setRecoil(userProfileState, userProfile);
+    }
+    catch (err) {
+      console.log(err);
+      setRecoil(authLoadingState, false)
+      await handleLogout();
+      setRecoil(messageState, {
+        title: "Error",
+        body: "Error signing in",
+        type: "error"
+      })
+    }
+}
+  
+export async function handleLogout() {
+    setRecoil(authLoadingState, true)
+    setRecoil(accessTokenState, null);
+    // setAccessToken(null);
+    setRecoil(userProfileState, null);
+    // setProfile(null);
+    // setActiveTaskCategory(-1)
+    setRecoil(activeTaskCategoryState, -1)
+    // setActiveCategoryTasksState([])
+    setRecoil(activeCategoryTasksState, [])
+    await deleteAccessToken();
+    setRecoil(authLoadingState, false)
+  }
+
+
+export async function handleInitialLogin() {
+    // get access token from storage
+    const accessToken = await getAccessTokenFromStorage();
+    if (!accessToken) throw new Error("Signin required");
+    pushNotification("Login Successful")
+    const profile = navigator.onLine ? await fetchUserProfile(accessToken.access_token) : await getUserProfileFromStorage();
+    if(!profile || !profile?.email) throw new Error("Something went wrong, please try again");
+    // setProfile(profile);
+    setRecoil(userProfileState, profile);
+    // setAccessToken(accessToken.access_token);
+    setRecoil(accessTokenState, accessToken.access_token);
+    pushNotification(`welcome back ${profile.name}`)
+  }
+
 
 
 

src/helpers/auth.ts

@@ -22,6 +22,9 @@ export function loadContextmenu() {
   }, { capture: true })
 }
 
+
+//  TODO: Remove the counter 
+let notificationCount = 0;
 export function pushNotification(options: string | Options) {
     isPermissionGranted().then((granted) => {
         if (!granted) {
@@ -32,8 +35,11 @@ export function pushNotification(options: string | Options) {
                 }
             });
         }
-        console.log("permission granted");
-        sendNotification(options);
+      console.log("permission granted");
+      if (typeof options === 'object') options.body = `${options.body} ${notificationCount}`;
+      if (typeof options === 'string') options = `${options} ${notificationCount}`;
+      sendNotification(options);
+      notificationCount++;
     });
 }