remove userLoading in favor of undefined + null

sspenst · Dec 17, 2023 · 93658c6 · 93658c6
1 parent db22817
commit 93658c6
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 60 deletions.
diff --git a/components/header/dropdown.tsx b/components/header/dropdown.tsx
@@ -16,7 +16,7 @@ import DismissToast from '../toasts/dismissToast';
 import MusicIcon from './musicIcon';
 
 export default function Dropdown() {
-  const { forceUpdate, mutateUser, setShouldAttemptAuth, user, userLoading } = useContext(AppContext);
+  const { forceUpdate, mutateUser, setShouldAttemptAuth, user } = useContext(AppContext);
   const [isMusicModalOpen, setIsMusicModalOpen] = useState(false);
   const [isThemeOpen, setIsThemeOpen] = useState(false);
   const router = useRouter();
@@ -56,8 +56,6 @@ export default function Dropdown() {
     });
   }
 
-  const isLoggedIn = !userLoading && user;
-
   function Divider() {
     return <div className='opacity-30 m-1 h-px bg-4' />;
   }
@@ -88,7 +86,7 @@ export default function Dropdown() {
           top: Dimensions.MenuHeight,
         }}>
           <div className='px-1 py-1'>
-            {isLoggedIn && <>
+            {user && <>
               <div className='flex justify-center gap-2 items-center sm:hidden py-1.5 px-3'>
                 <Link
                   className='flex justify-center'
@@ -172,7 +170,7 @@ export default function Dropdown() {
                 )}
               </Menu.Item>
             </div>
-            {isLoggedIn ?
+            {user ?
               <>
                 <Menu.Item>
                   {({ active }) => (

diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -7,6 +7,7 @@ import Dimensions from '../../constants/dimensions';
 import { AppContext } from '../../contexts/appContext';
 import LinkInfo from '../formatted/linkInfo';
 import Nav from '../nav';
+import LoadingSpinner from '../page/loadingSpinner';
 import StyledTooltip from '../page/styledTooltip';
 import Directory from './directory';
 import Dropdown from './dropdown';
@@ -26,7 +27,7 @@ export default function Header({
   title,
 }: HeaderProps) {
   const [background, setBackground] = useState('var(--bg-color-2)');
-  const { deviceInfo, game, setShowNav, user, userLoading } = useContext(AppContext);
+  const { deviceInfo, game, setShowNav, user } = useContext(AppContext);
   const isNavDropdown = deviceInfo.screenSize < ScreenSize.XL || isFullScreen;
 
   useEffect(() => {
@@ -91,50 +92,56 @@ export default function Header({
           <Directory folders={folders} subtitle={subtitle} title={title} />
         </div>
       </div>
-      <div className='flex gap-4 items-center z-20'>
-        <HeaderControls />
-        {user && <div className='hidden sm:block h-6 w-px bg-neutral-500' />}
-        <div className='flex gap-3 items-center'>
-          {user && !game.disableGames && <>
-            <Link
-              className='hidden sm:block'
-              data-tooltip-content='Ranked Solves'
-              data-tooltip-id='ranked-solves-header'
-              href='/ranked'
-            >
-              <span className='font-bold leading-none'>{user.config.calcRankedSolves} 🏅</span>
-              <StyledTooltip id='ranked-solves-header' />
-            </Link>
-            <div className='hidden sm:block h-6 w-px bg-neutral-500' />
-            <Link
-              className='hidden sm:block ml-1'
-              data-tooltip-content='Levels Solved'
-              data-tooltip-id='levels-solved-header'
-              href='/users'
-            >
-              <span className='font-bold'>{user.config.calcLevelsSolvedCount}</span>
-              <StyledTooltip id='levels-solved-header' />
-            </Link>
-          </>}
-          {!userLoading && !user &&
-            <div className='hidden sm:flex gap-3'>
+      {user === undefined ?
+        <div className='flex items-center'>
+          <LoadingSpinner />
+        </div>
+        :
+        <div className='flex gap-4 items-center z-20'>
+          <HeaderControls />
+          {user && <div className='hidden sm:block h-6 w-px bg-neutral-500' />}
+          <div className='flex gap-3 items-center'>
+            {user && !game.disableGames && <>
               <Link
-                className='hover:underline'
-                href='/login'
-                onClick={() => {
-                  sessionStorage.clear();
-                }}
+                className='hidden sm:block'
+                data-tooltip-content='Ranked Solves'
+                data-tooltip-id='ranked-solves-header'
+                href='/ranked'
               >
-                Log In
+                <span className='font-bold leading-none'>{user.config.calcRankedSolves} 🏅</span>
+                <StyledTooltip id='ranked-solves-header' />
               </Link>
-              <Link href='/signup' className='hover:underline'>
-                Sign Up
+              <div className='hidden sm:block h-6 w-px bg-neutral-500' />
+              <Link
+                className='hidden sm:block ml-1'
+                data-tooltip-content='Levels Solved'
+                data-tooltip-id='levels-solved-header'
+                href='/users'
+              >
+                <span className='font-bold'>{user.config.calcLevelsSolvedCount}</span>
+                <StyledTooltip id='levels-solved-header' />
               </Link>
-            </div>
-          }
-          <Dropdown />
+            </>}
+            {user === null &&
+              <div className='hidden sm:flex gap-3'>
+                <Link
+                  className='hover:underline'
+                  href='/login'
+                  onClick={() => {
+                    sessionStorage.clear();
+                  }}
+                >
+                  Log In
+                </Link>
+                <Link href='/signup' className='hover:underline'>
+                  Sign Up
+                </Link>
+              </div>
+            }
+            <Dropdown />
+          </div>
         </div>
-      </div>
+      }
     </header>
   );
 }
diff --git a/components/home/index.tsx b/components/home/index.tsx
@@ -56,7 +56,7 @@ export default function Home({
     }
     <div className='flex flex-col items-center gap-6 m-6'>
       <div className='flex flex-wrap justify-center items-center gap-4 max-w-full'>
-        {!userConfig?.tutorialCompletedAt &&
+        {userConfig !== undefined && !userConfig?.tutorialCompletedAt &&
           <Card id='tutorial' title='Tutorial'>
             <SelectCard option={{
               height: Dimensions.OptionHeightLarge,

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -120,8 +120,7 @@ interface NavProps {
 }
 
 export default function Nav({ isDropdown }: NavProps) {
-  const { game, multiplayerSocket, playLater, user, userLoading } = useContext(AppContext);
-  const isLoggedIn = !userLoading && user;
+  const { game, multiplayerSocket, playLater, user } = useContext(AppContext);
   const { connectedPlayersCount, matches, socket } = multiplayerSocket;
 
   const proNavLink = <NavLink
@@ -306,15 +305,15 @@ export default function Nav({ isDropdown }: NavProps) {
       }}
     >
       {homeNavLink}
-      {isLoggedIn && <>
+      {user && <>
         {playNavLink}
         {rankedNavLink}
         {multiplayerNavLink}
       </>}
       <NavDivider />
       <NavGameMenu />
       <NavDivider />
-      {isLoggedIn && <>
+      {user && <>
         {profileNavLink}
         {playLaterNavLink}
         {createNavLinked}
@@ -327,7 +326,7 @@ export default function Nav({ isDropdown }: NavProps) {
       {leaderboardNavLink}
       {tutorialNavLink}
       <NavDivider />
-      {isLoggedIn && !isPro(user) && <>
+      {user && !isPro(user) && <>
         {proNavLink}
       </>}
       {discordNavLink}

diff --git a/components/settings/settingsPro.tsx b/components/settings/settingsPro.tsx
@@ -45,7 +45,7 @@ interface SettingsProProps {
 }
 
 export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLink, stripePaymentYearlyLink }: SettingsProProps) {
-  const { game, mutateUser, user, userLoading } = useContext(AppContext);
+  const { game, mutateUser, user } = useContext(AppContext);
   const [plan, setPlan] = useState('year');
   const [shouldContinouslyFetch, setShouldContinouslyFetch] = useState(false);
   const { data: subscriptions, isLoading: subscriptionsLoading, mutate: refreshGifts } = useSWRHelper<SubscriptionData[]>('/api/subscription');
@@ -257,7 +257,7 @@ export default function SettingsPro({ stripeCustomerPortalLink, stripePaymentLin
         </div>
       )}
       {subscriptionsLoading ? <LoadingSpinner /> : null}
-      {!userLoading && !isPro(user) &&
+      {user !== undefined && !isPro(user) &&
         <div className='flex flex-col items-center justify-center gap-4'>
           <div className='flex flex-col gap-3 w-fit items-center mt-3'>
             <RadioGroup value={plan} onChange={setPlan} className='flex flex-wrap justify-center gap-3'>

diff --git a/contexts/appContext.ts b/contexts/appContext.ts
@@ -28,9 +28,8 @@ interface AppContextInterface {
   showNav: boolean;
   sounds: { [key: string]: HTMLAudioElement };
   tempCollection?: Collection;
-  user?: ReqUser;
-  userConfig?: UserConfig;
-  userLoading: boolean;
+  user: ReqUser | undefined | null;
+  userConfig: UserConfig | undefined | null;
 }
 
 export const AppContext = createContext<AppContextInterface>({
@@ -67,5 +66,6 @@ export const AppContext = createContext<AppContextInterface>({
   showNav: true,
   sounds: {},
   tempCollection: undefined,
-  userLoading: true,
+  user: undefined,
+  userConfig: undefined,
 });
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -461,9 +461,8 @@ export default function MyApp({ Component, pageProps, userAgent, initGame }: App
           showNav: showNav,
           sounds: sounds,
           tempCollection,
-          user: user,
-          userConfig: user?.config,
-          userLoading: isLoading,
+          user: isLoading ? undefined : !user ? null : user,
+          userConfig: isLoading ? undefined : !user?.config ? null : user.config,
         }}>
           <div className={getFontFromGameId(selectedGame.id)} style={{
             backgroundColor: 'var(--bg-color)',