Update Recoil states and add network change event listeners

Author: codad5

src/App.tsx

@@ -3,8 +3,8 @@ import { Box, Button, Spinner, useToast  } from '@chakra-ui/react'
 import { getAccessToken, saveAuthCode, handleInitialLogin, handleLoadFrom, handleLogin, handleLogout } from "./helpers/auth";
 import { loadContextmenu } from "./helpers/windowhelper";
 import TaskPage from "./components/TaskPage";
-import { useRecoilState, useRecoilValue } from "recoil";
-import { attemptLoginState, attemptLogoutState, authLoadingState, loggedInSelector, messageState } from "./config/states";
+import { useRecoilRefresher_UNSTABLE, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { attemptLoginState, attemptLogoutState, authLoadingState, isOnlineSelector, loggedInSelector, messageState } from "./config/states";
 import Header from "./components/ui/Header";
 import { listen_for_auth_code } from "./helpers/eventlistner";
 
@@ -17,13 +17,16 @@ function App() {
   const [attemptedLogin, setAttemptedLogin] = useRecoilState<boolean>(attemptLoginState);
   const [attemptedLogout, setAttemptedLogout] = useRecoilState<boolean>(attemptLogoutState);
   const [toastMessage, setToastMessage] = useRecoilState(messageState)
+  const setIsOnline = useSetRecoilState(isOnlineSelector)
+  const refreshIsOnline = () => setIsOnline(() => navigator.onLine)
 
   // error message toast
   const toast = useToast()
 
 
   useEffect(() => {
     if (toastMessage) {
+      toast.closeAll()
       toast({
         title: toastMessage.title,
         description: toastMessage.body,
@@ -98,6 +101,27 @@ function App() {
   }, [])
 
 
+  // updating the isonline value every 5 mins
+  window.addEventListener('online', () => {
+    setToastMessage({
+      title: "Network Changed",
+      body: "Internet restored",
+      type : "success",
+    })
+    refreshIsOnline()
+  })
+
+  window.addEventListener('offline', () => {
+    setToastMessage({
+      title: "Network Changed",
+      body: "No internet",
+      type : "error",
+    })
+    refreshIsOnline()
+  })
+
+
+
 
 
 

src/components/TaskPage.tsx

@@ -2,7 +2,7 @@ import { useState , useEffect} from "react";
 import { Tabs, TabPanels, Box, Spinner} from '@chakra-ui/react'
 import { taskCategory, task } from "../types/taskapi";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { accessTokenSelector, activeCategoryTasksState, activeTaskCategoryState, taskObjectState, taskCategoriesListState, messageState } from "../config/states";
+import { accessTokenSelector, activeCategoryTasksState, activeTaskCategoryState, taskObjectState, taskCategoriesListState, messageState, isOnlineSelector } from "../config/states";
 import { Task } from "../helpers/task";
 import TaskList from "./ui/TaskList";
 import AddTaskForm from "./ui/AddTaskForm";
@@ -22,6 +22,7 @@ export default function TaskPage() {
   const setActiveCategoryTasks = useSetRecoilState<task[]>(activeCategoryTasksState)
   const [loading, setloading] = useState(true)
   const [toastMessage, setToastMessage] = useRecoilState(messageState)
+  const isOnline = useRecoilValue(isOnlineSelector)
 
   useEffect(() => {
     console.log('before task object', Taskobject, access_token)
@@ -50,13 +51,14 @@ export default function TaskPage() {
   }, [Taskobject])
 
   useEffect(() => {
+    console.log('a active task or online changed', navigator.onLine)
     setloading(true)
     if (activeTaskCategory < 0) return;
     Taskobject.getTasksByCategoryPosition(activeTaskCategory).then((data) => {
       setActiveCategoryTasks(data)
       setloading(false)
     })
-  }, [activeTaskCategory])
+  }, [activeTaskCategory, isOnline])
 
 
   return (

src/components/ui/AddTaskForm.tsx

@@ -58,6 +58,7 @@ const AddTaskForm = () => {
                     setActiveCategoryTasks(data)
                 }).finally(() => {
                     console.log('done adding')
+                    onClose()
                 })
             }).catch((err) => {
                 console.log('error adding task', err)

src/components/ui/TaskItem.tsx

@@ -1,5 +1,5 @@
 import { DeleteIcon } from "@chakra-ui/icons";
-import { Box, Checkbox, Flex, IconButton } from "@chakra-ui/react";
+import { Box, Checkbox, Flex, IconButton, Spinner } from "@chakra-ui/react";
 import { task, taskCategory } from "../../types/taskapi";
 import { useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
@@ -13,6 +13,7 @@ export default function TaskItem({ task }: { task: task }) {
     const activeTaskCategory = useRecoilValue<number>(activeTaskCategorySelector)
     const setActiveCategoryTasks = useSetRecoilState(activeCategoryTasksState)
     const setToastMessage = useSetRecoilState(messageState)
+    const [deleteIsClicked, setDeleteIsClicked] = useState(false)
 
 
     const handleTaskCheck = (task: task) => {
@@ -31,6 +32,7 @@ export default function TaskItem({ task }: { task: task }) {
     }
 
     const handleTaskDelete = (task: task) => {
+        setDeleteIsClicked(true)
         Taskobject.deleteTask(task, taskCategoryList[activeTaskCategory].id).then((d) => {
             if(!d) return  console.log('task deleted')
             Taskobject.getTasksByCategoryPosition(activeTaskCategory).then(() => {
@@ -40,7 +42,10 @@ export default function TaskItem({ task }: { task: task }) {
                     })
                 })
             })
-        }).finally(() => { Taskobject.clearPositionCache(activeTaskCategory) })
+        }).finally(() => {
+            Taskobject.clearPositionCache(activeTaskCategory)
+            setDeleteIsClicked(false)
+        })
     }
 
     return (
@@ -52,17 +57,15 @@ export default function TaskItem({ task }: { task: task }) {
                     </Box>
                 </Checkbox>
                 <Box w="10%" as="span">
-                    {isHovered && (
-                        <IconButton
+                    {deleteIsClicked ? <Spinner size={'sm'} /> : isHovered && (<IconButton
                         size='xs'
                         variant='outline'
                         ml="2"
                         aria-label="Delete task"
                         icon={<DeleteIcon />}
-                        
                         onClick={() => handleTaskDelete(task)}
-                        />
-                    )}
+                    />)
+                    }
                 </Box>
             </Flex> 
         </Box>

src/config/states.ts

@@ -58,6 +58,16 @@ const authLoadingState = atom<boolean>({
     default: false,
 });
 
+const isOnlineState = atom<boolean>({
+    key: 'isOnlineStae', 
+    default : navigator.onLine
+})
+
+const isOnlineSelector = selector({
+    key: 'isOnlineSelector',
+    get: () => navigator.onLine,
+    set : ({set}) => set(isOnlineState, navigator.onLine)
+})
 
 const authLoadingSelector = selector({
     key: 'authLoadingSelector',
@@ -176,5 +186,7 @@ export {
     messageState,
     messageSelector,
     authLoadingState, 
-    authLoadingSelector
+    authLoadingSelector,
+    isOnlineState,
+    isOnlineSelector,
 };

src/helpers/auth.ts

@@ -161,8 +161,6 @@ export async function saveAccessToken(accessToken: string|AccessToken) {
 
 export async function getAccessTokenFromStorage() {
     try {
-        // if file does not exist, return null
-        if(! await exists(STORAGE_PATHS.access_token, { dir: DEFAULT_DIRECTORY })) throw new Error("File does not exist");
         let accessToken = await get_access_token();
         console.log('new access token found')
         // check if the access token is expired

src/helpers/task.ts

@@ -194,7 +194,7 @@ export class Task {
             if (!tasks) tasks = []
             this.tasksCategoryList.set(tasks.map((taskCategory) => {
                 // if category with same id exists, merge them
-                const existingCategory = this.tasksCategoryList.get()?.find((category) => category.id === taskCategory.id);
+                const existingCategory = this.tasksCategoryList.get()?.find((category) => category?.id === taskCategory?.id);
                 if (existingCategory) {
                     taskCategory.tasks = [...existingCategory.tasks || [], ...taskCategory.tasks || []];
                 }