Manual Refresh Option On Splash Screen (#401)

#401
workduck-io · Mar 21, 2023 · d9d5b31 · d9d5b31
1 parent 860dca9
commit d9d5b31
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 14 deletions.
diff --git a/.changeset/orange-rings-film.md b/.changeset/orange-rings-film.md
@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Manual Refresh on Splash Screen
diff --git a/apps/webapp/src/Components/SplashScreen.tsx b/apps/webapp/src/Components/SplashScreen.tsx
@@ -1,8 +1,8 @@
 import Lottie from 'lottie-react'
 import styled from 'styled-components'
 
-import { hintsData } from '@mexit/core'
-import { fadeIn, Hints } from '@mexit/shared'
+import { hintsData, useAppStore } from '@mexit/core'
+import { BodyFont, fadeIn, Group, Hints } from '@mexit/shared'
 
 import { loader } from '../Data/loader'
 
@@ -26,6 +26,36 @@ const OverlayLoader = styled.div`
   }
 `
 
+const RefreshLink = styled.span`
+  font-weight: bolder;
+  border-radius: ${({ theme }) => theme.spacing.tiny};
+
+  :hover {
+    transition: background 0.2s ease;
+    cursor: pointer;
+    color: ${({ theme }) => theme.tokens.colors.primary.hover};
+    background: ${({ theme }) => theme.tokens.surfaces.s[3]};
+  }
+
+  padding: ${({ theme }) => theme.spacing.tiny};
+  color: ${({ theme }) => theme.tokens.colors.primary.default};
+`
+
+const RefreshGroup = styled(Group)`
+  display: flex;
+  ${BodyFont}
+  animation: ${fadeIn} 0.5s;
+  color: ${({ theme }) => theme.tokens.text.fade};
+  padding: ${({ theme }) => theme.spacing.small};
+`
+
+const CenteredGroup = styled.section`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.medium};
+`
+
 const VerticallyCenter = styled.div`
   display: flex;
   position: relative;
@@ -50,15 +80,31 @@ type SplashScreenProps = {
 }
 
 const SplashScreen: React.FC<SplashScreenProps> = ({ showHints = false }) => {
+  const manualReload = useAppStore((s) => s.manualReload)
+  const setManualReload = useAppStore((s) => s.setManualReload)
+
+  const onManualReload = () => {
+    setManualReload(false)
+    window.location.reload()
+  }
+
   return (
     <OverlayLoader>
       <VerticallyCenter>
         <Lottie autoplay loop animationData={loader} />
       </VerticallyCenter>
       {showHints && (
-        <HintsContainer>
-          <Hints hints={hintsData} show />
-        </HintsContainer>
+        <CenteredGroup>
+          {manualReload && (
+            <RefreshGroup>
+              Taking too long...
+              <RefreshLink onClick={onManualReload}>Refresh</RefreshLink>
+            </RefreshGroup>
+          )}
+          <HintsContainer>
+            <Hints hints={hintsData} show />
+          </HintsContainer>
+        </CenteredGroup>
       )}
     </OverlayLoader>
   )

diff --git a/apps/webapp/src/Hooks/useInitLoader.ts b/apps/webapp/src/Hooks/useInitLoader.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
 
-import { API, AppInitStatus, mog, runBatch, useLinkStore } from '@mexit/core'
+import { API, AppInitStatus, mog, runBatch, useAppStore, useLinkStore, withTimeout } from '@mexit/core'
 
 import { useAuthentication, useAuthStore } from '../Stores/useAuth'
 import { useContentStore } from '../Stores/useContentStore'
@@ -25,6 +25,7 @@ import { useUserPreferences } from './useSyncUserPreferences'
 import { useURLsAPI } from './useURLs'
 
 export const useInitLoader = () => {
+  const setManualReload = useAppStore((store) => store.setManualReload)
   const initalizeApp = useAuthStore((store) => store.appInitStatus)
 
   const setIsUserAuthenticated = useAuthStore((store) => store.setIsUserAuthenticated)
@@ -122,7 +123,11 @@ export const useInitLoader = () => {
 
           if (initalizeApp === AppInitStatus.RUNNING) {
             backgroundFetch()
-            await fetchAll()
+            try {
+              await withTimeout(fetchAll(), 60 * 1000, 'Oops, something went wrong while fetching workspace')
+            } catch (err) {
+              setManualReload(true)
+            }
           }
         })
         .catch((error) => {

diff --git a/apps/webapp/src/Hooks/useSearch.ts b/apps/webapp/src/Hooks/useSearch.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ELEMENT_MENTION } from '@udecode/plate'
 
-import { Indexes, ISearchQuery, IUpdateDoc, SearchX } from '@workduck-io/mex-search'
+import { Indexes, ISearchQuery, IUpdateDoc } from '@workduck-io/mex-search'
 
 import {
   ELEMENT_ILINK,
@@ -27,8 +27,6 @@ import {
 
 import { useLinks } from './useLinks'
 
-export const searchX = new SearchX()
-
 export const useSearchExtra = () => {
   const ilinks = useDataStore((s) => s.ilinks)
   const mentionable = useMentionStore((s) => s.mentionable)

diff --git a/apps/webapp/src/Stores/useAuth.ts b/apps/webapp/src/Stores/useAuth.ts
@@ -4,10 +4,10 @@ import { toast } from 'react-hot-toast'
 import create from 'zustand'
 import { persist } from 'zustand/middleware'
 
-import { useAuth, useAuthStore as useDwindleAuthStore } from '@workduck-io/dwindle'
+import { useAuth } from '@workduck-io/dwindle'
 import { UserCred } from '@workduck-io/dwindle/lib/esm/AuthStore/useAuthStore'
 
-import { API, authStoreConstructor, AuthStoreState, mog, RegisterFormData } from '@mexit/core'
+import { API, authStoreConstructor, AuthStoreState, mog, RegisterFormData, useAppStore } from '@mexit/core'
 
 import { getEmailStart } from '../Utils/constants'
 import { terminateAllWorkers } from '../Workers/controller'
@@ -38,7 +38,6 @@ type LoginResult = { loginData: UserCred; loginStatus: string }
 export const useAuthentication = () => {
   const setUnAuthenticated = useAuthStore((store) => store.setUnAuthenticated)
   const { signIn, signOut, signUp, verifySignUp, googleSignIn } = useAuth()
-  const clearRequestsCacheFromDwindle = useDwindleAuthStore((s) => s.clearStore)
 
   const setRegistered = useAuthStore((store) => store.setRegistered)
   const [sensitiveData, setSensitiveData] = useState<RegisterFormData | undefined>()
@@ -52,6 +51,7 @@ export const useAuthentication = () => {
   const clearRecents = useRecentsStore((s) => s.clear)
   const clearMentions = useMentionStore((m) => m.reset)
   const clearComments = useCommentStore((s) => s.clear)
+  const clearAppStore = useAppStore((s) => s.clear)
   const clearReactions = useReactionStore((s) => s.clear)
   const clearViews = useViewStore((s) => s.clear)
   const clearRoutesInformation = useRouteStore((s) => s.clear)
@@ -121,6 +121,7 @@ export const useAuthentication = () => {
     clearReminders()
     clearSnippets()
     resetShortcuts()
+    clearAppStore()
     clearTodos()
     clearViews()
     clearUsersCache()

diff --git a/libs/core/src/Stores/useAppStore.ts b/libs/core/src/Stores/useAppStore.ts
@@ -10,6 +10,9 @@ interface AppStoreType {
   setFeatureFlags: (featureFlags: FeatureFlagsType) => void
   version?: string
   setVersion: (version: string) => void
+  manualReload: boolean
+  setManualReload: (manualReload: boolean) => void
+  clear: () => void
 }
 
 const defaultFeatureFlags: FeatureFlagsType = {
@@ -29,7 +32,13 @@ export const useAppStore = create<AppStoreType>(
       version: undefined,
       setVersion: (version: string) => {
         set({ version: version })
-      }
+      },
+      clear: () =>
+        set({
+          manualReload: false
+        }),
+      manualReload: false,
+      setManualReload: (manualReload: boolean) => set({ manualReload })
     }),
     {
       name: 'mexit-version-webapp',