fix(prerelase): fix minor issues

ARAFarm-Lab · Apr 3, 2024 · 39ee93a · 39ee93a
1 parent bb834ff
commit 39ee93a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git a/src/pages/home/admin/index.tsx b/src/pages/home/admin/index.tsx
@@ -153,7 +153,7 @@ const Admin = () => {
                         label: 'Save',
                         variant: 'solid',
                         color: 'primary',
-                        loading: false,
+                        loading: userMutation.isPending || actuatorMutation.isPending,
                         onClick: handleUpdateItem,
                     },
                     {

diff --git a/src/pages/home/dashboard/index.tsx b/src/pages/home/dashboard/index.tsx
@@ -30,6 +30,8 @@ const actionSourceNameMap: ({ [key in ActionSource]: string }) = {
     [ActionSource.Dispatcher]: "Otomatis oleh Sistem"
 }
 
+const refetchInterval = 60 * 1000 // 1 minute
+
 const Dashboard = () => {
     const queryClient = useQueryClient()
     const [reportData, setReportData] = useState<{ [key in SensorType]: SensorReport }>(initialReportState)
@@ -40,7 +42,8 @@ const Dashboard = () => {
 
     const userInfoQuery = useQuery({
         queryFn: userAPI.getUserInfo,
-        queryKey: [userAPI.QUERY_KEY_GET_USER_INFO]
+        queryKey: [userAPI.QUERY_KEY_GET_USER_INFO],
+        refetchInterval
     })
 
     const actions = useQuery<Action[]>({
@@ -51,24 +54,12 @@ const Dashboard = () => {
     const actionStates = useQueries({
         queries: actions.data?.map(action => ({
             queryKey: [actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, action.id],
-            queryFn: () => actionAPI.getActionValue(1, action.id)
+            queryFn: () => actionAPI.getActionValue(1, action.id),
+            refetchInterval,
+            refetchIntervalInBackground: true
         })) || []
     })
 
-    const actionMutation = useMutation({
-        mutationFn: (request: DispatchActionRequest) => actionAPI.dispatchAction(request),
-        onMutate: async (request) => {
-            setMutationLoading(prev => ({ ...prev, [request.actuator_id]: true }))
-            await queryClient.cancelQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id] })
-            return !queryClient.getQueryData([actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id])
-        },
-        onSuccess: (_, request) => {
-            queryClient.invalidateQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id] })
-            queryClient.invalidateQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_HISTORIES] })
-            setMutationLoading(prev => ({ ...prev, [request.actuator_id]: false }))
-        }
-    })
-
     const soilMoistureSensorReportQuery = useQuery<SensorReport>({
         queryKey: [reportAPI.QUERY_GET_SENSOR_REPORT, reportStartTime.format()],
         queryFn: () => reportAPI.getSensorReport({
@@ -81,9 +72,24 @@ const Dashboard = () => {
 
     const actionHistoriesQuery = useQuery<ActionHistory[]>({
         queryKey: [actionAPI.QUERY_KEY_GET_ACTION_HISTORIES],
-        queryFn: () => actionAPI.getActionHistories(1)
+        queryFn: () => actionAPI.getActionHistories(1),
+        refetchInterval,
+        refetchIntervalInBackground: true
     })
 
+    const actionMutation = useMutation({
+        mutationFn: (request: DispatchActionRequest) => actionAPI.dispatchAction(request),
+        onMutate: async (request) => {
+            setMutationLoading(prev => ({ ...prev, [request.actuator_id]: true }))
+            await queryClient.cancelQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id] })
+            return !queryClient.getQueryData([actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id])
+        },
+        onSuccess: (_, request) => {
+            queryClient.invalidateQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_VALUE, 1, request.actuator_id] })
+            queryClient.invalidateQueries({ queryKey: [actionAPI.QUERY_KEY_GET_ACTION_HISTORIES] })
+            setMutationLoading(prev => ({ ...prev, [request.actuator_id]: false }))
+        }
+    })
 
     const mutateState = (actuator_id: number, value: boolean) => {
         if (mutationLoading[actuator_id]) {

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -44,7 +44,8 @@ const BottomNavigation = () => {
     const navigate = useNavigate()
     const userInfo = useQuery<UserInfo>({
         queryFn: userAPI.getUserInfo,
-        queryKey: [userAPI.QUERY_KEY_GET_USER_INFO]
+        queryKey: [userAPI.QUERY_KEY_GET_USER_INFO],
+        refetchOnWindowFocus: true
     })
     const currentLocation = useRouterState({
         select: state => state.location

diff --git a/src/pages/home/setting/index.tsx b/src/pages/home/setting/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import settingAPI from '@/apis/setting';
 import { Actuator } from '@/apis/setting.types';
@@ -18,6 +18,7 @@ import { createLazyRoute, useNavigate } from '@tanstack/react-router';
 const Setting = () => {
     const [selectedPanel, setSelectedPanel] = useState<Actuator | null>()
     const [isLogoutModalOpened, setLogoutModalOpened] = useState(false)
+    const [isEditPanelModalOpened, setEditPanelModalOpened] = useState(false)
     const auth = useAuthStore()
     const navigate = useNavigate()
     const notification = useNotification()
@@ -43,12 +44,16 @@ const Setting = () => {
 
     const handleLogout = () => {
         auth.clearAuth()
-        queryClient.removeQueries({queryKey: [userAPI.QUERY_KEY_GET_USER_INFO]})
+        queryClient.removeQueries({ queryKey: [userAPI.QUERY_KEY_GET_USER_INFO] })
         setLogoutModalOpened(false)
         navigate({ to: '/auth', replace: true })
         notification.fire('Berhasil Keluar Akun')
     }
 
+    useEffect(() => {
+        setEditPanelModalOpened(!!selectedPanel)
+    }, [selectedPanel])
+
     return <>
         <Box sx={{ px: 2 }} className="fade">
             <Typography sx={{ mt: 4 }} level="h2" fontWeight='500'>Pengaturan</Typography>
@@ -87,8 +92,8 @@ const Setting = () => {
         />
         <Modal
             title="Edit Panel"
-            isOpen={selectedPanel != null}
-            onClose={() => { setSelectedPanel(null) }}
+            isOpen={isEditPanelModalOpened}
+            onClose={() => { setEditPanelModalOpened(false) }}
             buttonActions={[
                 {
                     label: 'Simpan',
@@ -101,7 +106,7 @@ const Setting = () => {
                     label: 'Batal',
                     variant: 'outlined',
                     color: 'danger',
-                    onClick: () => setSelectedPanel(null)
+                    onClick: () => setEditPanelModalOpened(false)
                 }
             ]}
         >