Merge pull request #133 from weaponsforge/fix/viky-132

changes:

client/package.json

@@ -29,6 +29,6 @@
     "next": "13.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "use-sync-v": "^2.0.19"
+    "use-sync-v": "^2.2.0"
   }
 }

client/src/common/layout/page/index.js

@@ -6,6 +6,7 @@ import { Sidebar } from '../sidebar'
 import { updateSyncV, useSyncV } from 'use-sync-v'
 import { Divider, useMediaQuery } from '@mui/material'
 import { useEffect } from 'react'
+import { LoadingLinear } from '@/common/ui/loadingLinear'
 
 const Background = () => {
   const activeTheme = useSyncLocalStorage('activeTheme')
@@ -71,18 +72,23 @@ function Page({ children }) {
   const animate = useSyncLocalStorage('animate')
   const showSidebar = useSyncV('show.sidebar')
   const isMobile = useMediaQuery('(max-width:900px)')
+  const loading = useSyncV('show.loading')
+
+
   useEffect(() => {
     if (isMobile) {
       updateSyncV('show.sidebar', false)
     } else {
       updateSyncV('show.sidebar', true)
     }
   }, [isMobile])
+
   useEffect(() => {
     if (typeof animate === 'undefined') {
       setSyncLocalStorage('animate', true)
     }
-  },[animate])
+  }, [animate])
+
   return (
     <>
       {animate && <Background />}
@@ -98,14 +104,15 @@ function Page({ children }) {
         }}
       >
         <Header />
+        <LoadingLinear/>
         <Box
           sx={{
             flex: 1,
             display: 'flex',
             overflowY: 'scroll'
           }}
         >
-          {showSidebar && auth.authStatus === 'signedIn' && <Sidebar />}
+          {(!loading && showSidebar && auth.authStatus === 'signedIn' && !auth.authLoading) && <Sidebar />}
           <Divider orientation="vertical" variant="middle" flexItem />
 
           <Section>{children}</Section>

client/src/common/ui/loadingLinear/index.js

@@ -1,12 +1,39 @@
-import { LinearProgress } from '@mui/material'
+import { Box, LinearProgress } from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { updateSyncV, useSyncV } from 'use-sync-v'
 
 export const LoadingLinear = () => {
+  const authLoading = useSyncV('auth.authLoading')
+  const loadingContacts = useSyncV('contacts.loading')
+  const loading = useSyncV('show.loading')
+
+  const router = useRouter()
+  useEffect(() => {
+    const changeStartHandler = () => {
+      updateSyncV('show.loading', true)
+    }
+    const changeCompleteHandler = () => {
+      updateSyncV('show.loading', false)
+    }
+    router.events.on('routeChangeStart', changeStartHandler)
+    router.events.on('routeChangeComplete', changeCompleteHandler)
+    // If the component is unmounted, unsubscribe
+    // from the event with the `off` method:
+    return () => {
+      router.events.off('routeChangeStart', changeStartHandler)
+      router.events.off('routeChangeComplete', changeCompleteHandler)
+    }
+  }, [router])
   return (
-    <LinearProgress
-      sx={{
-        position: 'fixed',
-        width: '100%',
-      }}
-    />
+    <Box sx={{ zIndex: 100 }}>
+      {(loadingContacts || authLoading || loading) && <LinearProgress
+        sx={{
+          position: 'fixed',
+          width: '100%',
+        }}
+      />}
+    </Box>
+
   )
 }

client/src/components/contacts/index.js

@@ -1,15 +1,10 @@
 import Page from '@/common/layout/page'
-import { LoadingLinear } from '@/common/ui/loadingLinear'
 import { Box } from '@mui/material'
-import { useAsyncV } from 'use-sync-v'
 import { ContactListDisplay } from './display'
 
 function ContactsComponent() {
-  const { loading } = useAsyncV('contacts')
-
   return (
     <Page>
-      {loading && <LoadingLinear />}
       <Box
         sx={{
           flex: 1,

client/src/pages/_app.js

@@ -1,18 +1,19 @@
-import PropTypes from 'prop-types'
-import Head from 'next/head'
-import { ThemeProvider } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
-import { CacheProvider } from '@emotion/react'
 import '@/styles/globals.css'
+import { CacheProvider } from '@emotion/react'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider } from '@mui/material/styles'
+import Head from 'next/head'
+import PropTypes from 'prop-types'
 
 // MUI
-import createEmotionCache from '@/lib/mui/createEmotionCache'
-import { lightTheme, darkTheme } from '@/lib/mui/theme'
+import useInitAuth from '@/hooks/useInitAuth'
 import { setSyncLocalStorage, useSyncLocalStorage } from '@/lib/hooks/useSync'
+import createEmotionCache from '@/lib/mui/createEmotionCache'
+import { darkTheme, lightTheme } from '@/lib/mui/theme'
 import { init } from '@/lib/store'
-import useInitAuth from '@/hooks/useInitAuth'
 import { useEffect } from 'react'
 
+
 init()
 // Source: https://github.com/mui/material-ui/tree/master/examples/material-next
 // Date: 20230225 @v5.11.10
@@ -22,12 +23,14 @@ const clientSideEmotionCache = createEmotionCache()
 export default function MyApp(props) {
   const activeTheme = useSyncLocalStorage('activeTheme')
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
+
   useInitAuth()
   useEffect(()=>{
     if (typeof activeTheme === 'undefined') {
       setSyncLocalStorage('activeTheme', 'light')
     }
   }, [activeTheme])
+
   return (
     <CacheProvider value={emotionCache}>
       <Head>

client/src/pages/contacts/edit/[doc_id].js

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import { deleteSyncV, updateSyncV, useAsyncV, useSyncV } from 'use-sync-v'
+import { deleteSyncV, useAsyncV, useSyncV } from 'use-sync-v'
 
 import { FirebaseFirestore } from '@/lib/utils/firebase/firestore'
 import { deleteFileFromStorage, uploadFileToStorage } from '@/lib/utils/firebase/storageutils'
@@ -87,7 +87,7 @@ const EditContact = () => {
       setIsFormChanged(true)
     }
   }
-  updateSyncV('contacts.loading', true)
+
   const saveHandler = async () => {
     const createdContact = {
       ...form,

client/src/pages/contacts/index.js

@@ -7,12 +7,12 @@ import { useEffect } from 'react'
 import { updateAsyncV, useSyncV } from 'use-sync-v'
 
 function Contacts() {
-  const user = useSyncV('auth')
   const showExportPopup = useSyncV('show.exportPopup')
+  const auth = useSyncV('auth')
 
   useEffect(() => {
     FirebaseFirestore.subscribeCol(
-      `users/${user.authUser.uid}/contacts`,
+      `users/${auth.authUser.uid}/contacts`,
       (querySnapshot) => {
         const data = []
         querySnapshot.forEach((doc) => {
@@ -24,8 +24,7 @@ function Contacts() {
       },
       orderBy('sorting')
     )
-  }, [user.authUser.uid])
-
+  }, [auth.authUser.uid])
   return (
     <>
       {showExportPopup && <ExportPopup/>}

client/src/pages/index.js

@@ -1,7 +1,9 @@
 import HomeComponent from '@/components/home'
 import { useSyncLocalStorage } from '@/lib/hooks/useSync'
 import { getRandomJoke } from '@/lib/services/random'
+import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import { useSyncV } from 'use-sync-v'
 
 const defaultState = {
   joke:undefined,
@@ -11,7 +13,17 @@ const defaultState = {
 function Index() {
   const [state, setState] = useState(defaultState)
   const activeTheme = useSyncLocalStorage('activeTheme')
+  const auth = useSyncV('auth')
+  const router = useRouter()
 
+  useEffect(()=>{
+    if (auth.authLoading) return
+    if (auth.authStatus === 'signedIn') {
+      router.push('/contacts')
+    } else {
+      router.push('/login')
+    }
+  },[auth.authLoading, auth.authStatus, router])
   useEffect(()=>{
     (async()=>{
       const randomJoke = await getRandomJoke()

client/src/pages/login/index.js

@@ -27,7 +27,7 @@ function Login () {
   const [state, setState] = useState(defaultState)
   const { username, password } = state
   const router = useRouter()
-  const { authUser, authLoading } = useSyncV('auth')
+  const auth = useSyncV('auth')
 
   class eventsHandler {
     static usernameHandler = (e) => {
@@ -84,10 +84,11 @@ function Login () {
   },[])
 
   useEffect(() => {
-    if (!authLoading && authUser) {
+    if (auth.authLoading) return
+    if (auth.authStatus === 'signedIn') {
       router.push('/contacts')
     }
-  }, [router, authUser, authLoading])
+  }, [auth.authStatus, auth.authLoading, router])
 
   const resetError = () => {
     updateSyncV('auth', (p) => ({ ...p, authError: '' }))