fix: better config loading err msg and pointer (#23)

mmta · Apr 9, 2024 · 6aac575 · 6aac575
1 parent 9b0374c
commit 6aac575
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 38 deletions.
diff --git a/client/components/appctx.ts b/client/components/appctx.ts
@@ -18,6 +18,8 @@ export type AppContextType = {
   setShowLoginPrompt: (value: boolean) => void;
   loading: boolean;
   setLoading: (value: boolean) => void;
+  configLoaded: boolean;
+  setConfigLoaded: (value: boolean) => void;
 };
 
 export const AppContext = createContext<AppContextType | null>(null)
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
@@ -42,20 +42,18 @@ export default function App ({ Component, pageProps }: AppProps) {
         if (success) {
           config.setPushPubkey((data as any).push_pubkey_base64)
           setConfigLoaded(true)
-        } else {
-          alert('cannot connect to API server ' + apiUrl + '. Please make sure the server is running and reachable')
         }
       } else {
+        // popup if we can't even get the runtime config from the UI server
+        // it should've been bundled with the UI
         alert(data)
       }
     }
     f()
   }, [])
 
   return (
-    !configLoaded
-      ? <></>
-      : <>
+    <>
     <Head><title>Ywinby</title></Head>
     <GoogleOAuthProvider clientId="806452214643-l366imhlc0c64coebiik6t3otfjatis3.apps.googleusercontent.com"
         onScriptLoadError={async () => {
@@ -82,7 +80,9 @@ export default function App ({ Component, pageProps }: AppProps) {
         showLoginPrompt,
         setShowLoginPrompt,
         loading,
-        setLoading
+        setLoading,
+        configLoaded,
+        setConfigLoaded
       }}>
       <ToastContainer />
       <Component {...pageProps} />

diff --git a/client/pages/index.tsx b/client/pages/index.tsx
@@ -1,14 +1,17 @@
-import { useEffect, useContext } from 'react'
+import { useEffect, useContext, useState } from 'react'
 import { Auth } from '../components/auth'
 import Login from '../components/Login'
 import NewMessage from '../components/NewMessage'
 import MessageList from '../components/MessagesList'
 import { AppContext, AppContextType } from '../components/appctx'
 import WebPush from '../components/WebPush'
 import Owner from '../components/Owner'
+import { config } from '../components/config'
 
 export default function Home () {
-  const { loggedIn, setLoggedIn, showNewMessage, setShowNewMessage, setMyEmail, myEmail, showOwner, setShowOwner, setLoading } = useContext(AppContext) as AppContextType
+  const { loggedIn, setLoggedIn, showNewMessage, setShowNewMessage, setMyEmail, myEmail, showOwner, setShowOwner, setLoading, configLoaded } = useContext(AppContext) as AppContextType
+
+  const [apiUrl, setApiUrl] = useState('')
 
   useEffect(() => {
     window.navigator?.serviceWorker?.addEventListener('message', event => {
@@ -41,41 +44,56 @@ export default function Home () {
     setLoggedIn(false)
   }
 
+  useEffect(() => {
+    setApiUrl(config.getAPIUrl() || '')
+  }, [])
+
   return (
     <>
-      {showOwner ? <Owner /> : <></>}
-      {
-      !loggedIn
-        ? <><Login /></>
+      {!configLoaded
+        ? <main className="container has-text-centered">
+            <div className="notification is-danger is-light">
+              Cannot connect to API server {apiUrl}. Please make sure the server is running and reachable.
+              Refer to the <a href="https://github.com/mmta/ywinby/blob/master/docs/quick-start.md">quick start guide</a> for
+              more information.
+            </div>
+        </main>
         : <>
-          <nav className="navbar is-fixed-top container" role="navigation" aria-label="main navigation">
-            <div id="navbar-menu" className="navbar-menu is-active has-background-link-light">
-              <div className="navbar-start">
-                <div className="navbar-item">
-                  <div className="buttons">
-                      <button className='button is-light is-outlined is-warning' onClick={() => logout()}>&nbsp;&nbsp;<span className="gg-log-out"></span>&nbsp;&nbsp;
-                        <span className="icon">
-                          <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" /><path d="M1 1h22v22H1z" fill="none" /></svg>
-                        </span>
-                      </button>
-                    <button className='button is-info' onClick={() => setShowNewMessage(!showNewMessage)}>{showNewMessage ? 'Cancel' : 'New ✉'}</button>
-                    <WebPush />
+          {showOwner ? <Owner /> : <></>}
+          {
+          !loggedIn
+            ? <><Login /></>
+            : <>
+              <nav className="navbar is-fixed-top container" role="navigation" aria-label="main navigation">
+                <div id="navbar-menu" className="navbar-menu is-active has-background-link-light">
+                  <div className="navbar-start">
+                    <div className="navbar-item">
+                      <div className="buttons">
+                          <button className='button is-light is-outlined is-warning' onClick={() => logout()}>&nbsp;&nbsp;<span className="gg-log-out"></span>&nbsp;&nbsp;
+                            <span className="icon">
+                              <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" /><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" /><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" /><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" /><path d="M1 1h22v22H1z" fill="none" /></svg>
+                            </span>
+                          </button>
+                        <button className='button is-info' onClick={() => setShowNewMessage(!showNewMessage)}>{showNewMessage ? 'Cancel' : 'New ✉'}</button>
+                        <WebPush />
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          </nav>
-          <main className='container'>
-            {
-            showNewMessage
-              ? <div className="m-1">
-                  <NewMessage />
-                </div>
-              : <></>
-            }
-            <MessageList />
-      </main>
-      </>
+              </nav>
+              <main className='container'>
+                {
+                showNewMessage
+                  ? <div className="m-1">
+                      <NewMessage />
+                    </div>
+                  : <></>
+                }
+                <MessageList />
+          </main>
+          </>
+          }
+        </>
       }
       <footer className="footer container">
         <div className="content has-text-centered">