From 6c6f50444ebcf4494b24c10980ed5d266f973176 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Mon, 14 Aug 2023 09:34:38 +0700
Subject: [PATCH] polish splash screen

---
 src/app.tsx                                   | 46 ++++++++++---------
 src/app/auth/unlock.tsx                       | 26 ++++-------
 src/app/auth/welcome.tsx                      | 25 +++++-----
 .../components/{blocks => widgets}/feed.tsx   |  0
 .../{blocks => widgets}/hashtag.tsx           |  0
 .../components/{blocks => widgets}/image.tsx  |  0
 .../{blocks => widgets}/network.tsx           |  0
 .../components/{blocks => widgets}/thread.tsx |  0
 .../components/{blocks => widgets}/user.tsx   |  0
 src/app/space/index.tsx                       | 12 ++---
 src/app/splash.tsx                            | 36 +++++++++------
 src/utils/hooks/useAccount.tsx                |  2 +-
 12 files changed, 75 insertions(+), 72 deletions(-)
 rename src/app/space/components/{blocks => widgets}/feed.tsx (100%)
 rename src/app/space/components/{blocks => widgets}/hashtag.tsx (100%)
 rename src/app/space/components/{blocks => widgets}/image.tsx (100%)
 rename src/app/space/components/{blocks => widgets}/network.tsx (100%)
 rename src/app/space/components/{blocks => widgets}/thread.tsx (100%)
 rename src/app/space/components/{blocks => widgets}/user.tsx (100%)

diff --git a/src/app.tsx b/src/app.tsx
index eaed5b40..58b152f0 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -15,29 +15,33 @@ import { SettingsLayout } from '@shared/settingsLayout';
 import './index.css';
 
 const appLoader = async () => {
-  const account = await getActiveAccount();
-  const stronghold = sessionStorage.getItem('stronghold');
-  const privkey = JSON.parse(stronghold).state.privkey || null;
-  const onboarding = localStorage.getItem('onboarding');
-  const step = JSON.parse(onboarding).state.step || null;
+  try {
+    const account = await getActiveAccount();
+    const stronghold = sessionStorage.getItem('stronghold');
+    const privkey = JSON.parse(stronghold).state.privkey || null;
+    const onboarding = localStorage.getItem('onboarding');
+    const step = JSON.parse(onboarding).state.step || null;
 
-  if (step) {
-    return redirect(step);
+    if (step) {
+      return redirect(step);
+    }
+
+    if (!account) {
+      return redirect('/auth/welcome');
+    } else {
+      if (account.privkey.length > 35) {
+        return redirect('/auth/migrate');
+      }
+
+      if (!privkey) {
+        return redirect('/auth/unlock');
+      }
+    }
+
+    return null;
+  } catch (e) {
+    throw new Error('App failed to load');
   }
-
-  if (!account) {
-    return redirect('/auth/welcome');
-  }
-
-  if (account && account.privkey.length > 35) {
-    return redirect('/auth/migrate');
-  }
-
-  if (account && !privkey) {
-    return redirect('/auth/unlock');
-  }
-
-  return null;
 };
 
 const router = createBrowserRouter([
diff --git a/src/app/auth/unlock.tsx b/src/app/auth/unlock.tsx
index 0dd45ad3..2306256a 100644
--- a/src/app/auth/unlock.tsx
+++ b/src/app/auth/unlock.tsx
@@ -31,21 +31,12 @@ export function UnlockScreen() {
   const navigate = useNavigate();
   const setPrivkey = useStronghold((state) => state.setPrivkey);
 
-  const [passwordInput, setPasswordInput] = useState('password');
-  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const { account } = useAccount();
   const { load } = useSecureStorage();
 
-  // toggle private key
-  const showPassword = () => {
-    if (passwordInput === 'password') {
-      setPasswordInput('text');
-    } else {
-      setPasswordInput('password');
-    }
-  };
-
   const {
     register,
     setError,
@@ -62,20 +53,19 @@ export function UnlockScreen() {
         setPrivkey(privkey);
         // redirect to home
         navigate('/', { replace: true });
-      } catch {
-        setLoading(false);
+      } catch (e) {
         setError('password', {
           type: 'custom',
-          message: 'Wrong password',
+          message: e,
         });
       }
     } else {
-      setLoading(false);
       setError('password', {
         type: 'custom',
         message: 'Password is required and must be greater than 3',
       });
     }
+    setLoading(false);
   };
 
   return (
@@ -89,15 +79,15 @@ export function UnlockScreen() {
             <div className="relative">
               <input
                 {...register('password', { required: true })}
-                type={passwordInput}
+                type={showPassword ? 'text' : 'password'}
                 className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/10"
               />
               <button
                 type="button"
-                onClick={() => showPassword()}
+                onClick={() => setShowPassword((prev) => !prev)}
                 className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-white/10"
               >
-                {passwordInput === 'password' ? (
+                {showPassword ? (
                   <EyeOffIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
                 ) : (
                   <EyeOnIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
diff --git a/src/app/auth/welcome.tsx b/src/app/auth/welcome.tsx
index f741251e..c623c628 100644
--- a/src/app/auth/welcome.tsx
+++ b/src/app/auth/welcome.tsx
@@ -5,27 +5,30 @@ import { Link } from 'react-router-dom';
 import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 export function WelcomeScreen() {
-  useEffect(() => {
-    async function setWindow() {
-      await appWindow.setSize(new LogicalSize(400, 500));
-      await appWindow.setResizable(false);
-      await appWindow.center();
-    }
+  async function setWindow() {
+    await appWindow.setSize(new LogicalSize(400, 500));
+    await appWindow.setResizable(false);
+    await appWindow.center();
+  }
 
+  async function resetWindow() {
+    await appWindow.setSize(new LogicalSize(1080, 800));
+    await appWindow.setResizable(false);
+    await appWindow.center();
+  }
+
+  useEffect(() => {
     setWindow();
 
     return () => {
-      appWindow.setSize(new LogicalSize(1080, 800)).then(() => {
-        appWindow.setResizable(false);
-        appWindow.center();
-      });
+      resetWindow();
     };
   }, []);
 
   return (
     <div className="flex h-screen w-full flex-col justify-between bg-white/10">
       <div className="flex flex-col gap-10 pt-16">
-        <div className="flex flex-col gap-2 text-center">
+        <div className="sflex flex-col gap-2 text-center">
           <h1 className="text-3xl font-medium text-white">Welcome to Lume</h1>
           <h3 className="mx-auto w-2/3 text-white/50">
             Let&apos;s get you up and connecting with all peoples around the world on
diff --git a/src/app/space/components/blocks/feed.tsx b/src/app/space/components/widgets/feed.tsx
similarity index 100%
rename from src/app/space/components/blocks/feed.tsx
rename to src/app/space/components/widgets/feed.tsx
diff --git a/src/app/space/components/blocks/hashtag.tsx b/src/app/space/components/widgets/hashtag.tsx
similarity index 100%
rename from src/app/space/components/blocks/hashtag.tsx
rename to src/app/space/components/widgets/hashtag.tsx
diff --git a/src/app/space/components/blocks/image.tsx b/src/app/space/components/widgets/image.tsx
similarity index 100%
rename from src/app/space/components/blocks/image.tsx
rename to src/app/space/components/widgets/image.tsx
diff --git a/src/app/space/components/blocks/network.tsx b/src/app/space/components/widgets/network.tsx
similarity index 100%
rename from src/app/space/components/blocks/network.tsx
rename to src/app/space/components/widgets/network.tsx
diff --git a/src/app/space/components/blocks/thread.tsx b/src/app/space/components/widgets/thread.tsx
similarity index 100%
rename from src/app/space/components/blocks/thread.tsx
rename to src/app/space/components/widgets/thread.tsx
diff --git a/src/app/space/components/blocks/user.tsx b/src/app/space/components/widgets/user.tsx
similarity index 100%
rename from src/app/space/components/blocks/user.tsx
rename to src/app/space/components/widgets/user.tsx
diff --git a/src/app/space/index.tsx b/src/app/space/index.tsx
index e1b3580d..70783fb8 100644
--- a/src/app/space/index.tsx
+++ b/src/app/space/index.tsx
@@ -1,14 +1,14 @@
 import { useCallback, useEffect } from 'react';
 
-import { FeedBlock } from '@app/space/components/blocks/feed';
-import { HashtagBlock } from '@app/space/components/blocks/hashtag';
-import { ImageBlock } from '@app/space/components/blocks/image';
-import { NetworkBlock } from '@app/space/components/blocks/network';
-import { ThreadBlock } from '@app/space/components/blocks/thread';
-import { UserBlock } from '@app/space/components/blocks/user';
 import { FeedModal } from '@app/space/components/modals/feed';
 import { HashtagModal } from '@app/space/components/modals/hashtag';
 import { ImageModal } from '@app/space/components/modals/image';
+import { FeedBlock } from '@app/space/components/widgets/feed';
+import { HashtagBlock } from '@app/space/components/widgets/hashtag';
+import { ImageBlock } from '@app/space/components/widgets/image';
+import { NetworkBlock } from '@app/space/components/widgets/network';
+import { ThreadBlock } from '@app/space/components/widgets/thread';
+import { UserBlock } from '@app/space/components/widgets/user';
 
 import { LoaderIcon } from '@shared/icons';
 
diff --git a/src/app/splash.tsx b/src/app/splash.tsx
index 3e45d749..df0bcbdb 100644
--- a/src/app/splash.tsx
+++ b/src/app/splash.tsx
@@ -14,8 +14,8 @@ export function SplashScreen() {
   const { status, account } = useAccount();
   const { fetchChats, fetchNotes } = useNostr();
 
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<null | string>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [errorMessage, setErrorMessage] = useState<null | string>(null);
 
   const skip = async () => {
     await invoke('close_splashscreen');
@@ -26,18 +26,24 @@ export function SplashScreen() {
     const step = JSON.parse(onboarding).state.step || null;
     if (step) await invoke('close_splashscreen');
 
-    const notes = await fetchNotes();
-    const chats = await fetchChats();
+    try {
+      const notes = await fetchNotes();
+      const chats = await fetchChats();
 
-    if (notes.status === 'ok' && chats.status === 'ok') {
-      const now = Math.floor(Date.now() / 1000);
-      await updateLastLogin(now);
-      invoke('close_splashscreen');
-    } else {
-      setLoading(false);
-      setError(notes.message || chats.message);
-      console.log('fetch notes failed, error: ', notes.message);
-      console.log('fetch chats failed, error: ', chats.message);
+      if (notes.status === 'ok' && chats.status === 'ok') {
+        const now = Math.floor(Date.now() / 1000);
+        await updateLastLogin(now);
+        invoke('close_splashscreen');
+      } else {
+        setIsLoading(false);
+        setErrorMessage(notes.message || chats.message);
+        console.log('fetch notes failed, error: ', notes.message);
+        console.log('fetch chats failed, error: ', chats.message);
+      }
+    } catch (e) {
+      setIsLoading(false);
+      setErrorMessage(e);
+      console.log('prefetch failed, error: ', e);
     }
   };
 
@@ -58,7 +64,7 @@ export function SplashScreen() {
       <div className="flex min-h-0 w-full flex-1 items-center justify-center">
         <div className="flex flex-col items-center justify-center gap-4">
           <LoaderIcon className="h-6 w-6 animate-spin text-white" />
-          {loading ? (
+          {isLoading ? (
             <div className="mt-2 flex flex-col gap-1 text-center">
               <h3 className="text-lg font-semibold leading-none text-white">
                 {!ndk
@@ -74,7 +80,7 @@ export function SplashScreen() {
               <h3 className="text-lg font-semibold leading-none text-white">
                 Something wrong!
               </h3>
-              <p className="text-sm text-white/50">{error}</p>
+              <p className="text-sm text-white/50">{errorMessage}</p>
               <button
                 type="button"
                 onClick={skip}
diff --git a/src/utils/hooks/useAccount.tsx b/src/utils/hooks/useAccount.tsx
index 9e961ef1..eb25eefe 100644
--- a/src/utils/hooks/useAccount.tsx
+++ b/src/utils/hooks/useAccount.tsx
@@ -9,7 +9,7 @@ export function useAccount() {
     ['currentAccount'],
     async () => {
       const account = await getActiveAccount();
-      console.log('active account: ', account);
+      console.log('account: ', account);
       if (account?.pubkey) {
         const user = ndk.getUser({ hexpubkey: account?.pubkey });
         await user.fetchProfile();