refactor: clear localStorage during sign in and out.

packages/ui/src/components/profile.tsx

@@ -77,7 +77,7 @@ const Profile: FC = () => {
 
       dispatch({ type: 'page', value: 'locate' })
       dispatch({ type: 'user', value: undefined })
-      dispatchStorage({ type: 'favoriteStore' })
+      dispatchStorage({ type: 'favoriteReset' })
       toast({ type: 'info', message: `Goodbye ${result.user.givenName ?? ''}.` })
     } catch {
       toast({ type: 'error', message: 'Error signing out!' })

packages/ui/src/components/signIn.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
 import { toast } from '@busmap/components/toast'
 
 import { login } from '@core/api/authn.js'
@@ -14,9 +13,6 @@ import { Dots } from './dots.js'
 import type { FC } from 'react'
 import type { RiderFavoriteItem } from '@busmap/common/types/favorites'
 
-const Note = styled.em`
-  font-size: 12px;
-`
 const SignIn: FC = () => {
   const ref = useRef<HTMLDivElement>(null)
   const { dispatch } = useGlobals()
@@ -44,6 +40,7 @@ const SignIn: FC = () => {
             dispatch({ type: 'user', value: user })
             dispatch({ type: 'page', value: 'profile' })
             storageDispatch({ type: 'settingsChanged', value: user.settings })
+            storageDispatch({ type: 'favoriteReset' })
             setRiderFavorites(riderFavs)
           } catch (err) {
             toast({ type: 'error', message: 'Error signing in.' })
@@ -82,11 +79,12 @@ const SignIn: FC = () => {
         </p>
       ) : (
         <>
+          <p>Sign in with Google to save your favorite stops and settings.</p>
           <p>
-            Sign in to save your favorite stops and settings across devices. After signing
-            in, you can <strong>save up to {MAX_USER_FAVORITES} favorite stops</strong>.
+            You will also be able to{' '}
+            <strong>save up to {MAX_USER_FAVORITES} favorite stops</strong> after signing
+            in.
           </p>
-          <Note>Requires email verification</Note>
         </>
       )}
       <div ref={ref} />

packages/ui/src/contexts/storage.tsx

@@ -48,8 +48,8 @@ interface FavoriteSet {
   type: 'favoriteSet'
   value: Favorite[]
 }
-interface FavoriteStore {
-  type: 'favoriteStore'
+interface FavoriteReset {
+  type: 'favoriteReset'
 }
 interface StorageSettingsChanged {
   type: 'settingsChanged'
@@ -62,7 +62,7 @@ type StorageAction =
   | VehicleColorPredictedUpdate
   | ThemeModeUpdate
   | FavoriteSet
-  | FavoriteStore
+  | FavoriteReset
   | FavoriteAdded
   | FavoriteRemoved
   | StorageSettingsChanged
@@ -73,8 +73,8 @@ const reducer = (state: StorageState, action: StorageAction) => {
       return { ...state, themeMode: action.value }
     case 'favoriteSet':
       return { ...state, favorites: action.value }
-    case 'favoriteStore':
-      return { ...state, favorites: [...state.favorites.slice(0, MAX_FAVORITES)] }
+    case 'favoriteReset':
+      return { ...state, favorites: [] }
     case 'favoriteAdd': {
       if (Array.isArray(state.favorites)) {
         return {

packages/ui/src/modules/favorites/components/favorites.tsx

@@ -27,7 +27,7 @@ import {
   RouteSection,
   StopArticle
 } from '@module/components.js'
-import { groupBy } from '@module/util.js'
+import { groupBy, isAPage } from '@module/util.js'
 
 import { getPredsKey } from '../util.js'
 import { MAX_FAVORITES, MAX_USER_FAVORITES } from '../common.js'
@@ -57,10 +57,14 @@ const Section = styled(Page)`
     background: none;
     border: none;
     cursor: pointer;
+
+    &.link {
+      font-weight: 700;
+    }
   }
 `
 const Favorites = memo(function Favorites() {
-  const { user } = useGlobals()
+  const { user, dispatch } = useGlobals()
   const map = useMap()
   const workerRef = useRef<Worker>()
   const homeStop = useHomeStop()
@@ -113,6 +117,16 @@ const Favorites = memo(function Favorites() {
     },
     [storageDispatch, user]
   )
+  const onClickTab = useCallback(
+    (evt: MouseEvent<HTMLButtonElement>) => {
+      const tab = evt.currentTarget.dataset.tab
+
+      if (isAPage(tab)) {
+        dispatch({ type: 'page', value: tab })
+      }
+    },
+    [dispatch]
+  )
   const maximum = user ? MAX_USER_FAVORITES : MAX_FAVORITES
   const PredFormat = format === 'minutes' ? Minutes : Time
 
@@ -154,20 +168,41 @@ const Favorites = memo(function Favorites() {
       {!favorites.length ? (
         <Empty>
           <span>⭐⭐⭐</span>
-          <p>
-            {user ? (
-              <>
-                You can select up to {MAX_USER_FAVORITES} favorite stops from the Selector
-                tab.
-              </>
-            ) : (
-              <>
-                You can select up to {MAX_FAVORITES} favorite stops from the Selector tab.
-                After you sign in you can select up to {MAX_USER_FAVORITES} stops.
-              </>
-            )}{' '}
-            The predicted arrival or departure times will be displayed here.
-          </p>
+          {user ? (
+            <p>
+              {user.givenName}, you can select up to {MAX_USER_FAVORITES} favorite stops
+              across any number of transit agencies from the{' '}
+              <button onClick={onClickTab} data-tab="select" className="link">
+                Selector
+              </button>{' '}
+              or{' '}
+              <button onClick={onClickTab} data-tab="locate" className="link">
+                Nearby
+              </button>{' '}
+              tabs.
+            </p>
+          ) : (
+            <>
+              <p>
+                You can select up to {MAX_FAVORITES} favorite stops from the{' '}
+                <button onClick={onClickTab} data-tab="select" className="link">
+                  Selector
+                </button>{' '}
+                or{' '}
+                <button onClick={onClickTab} data-tab="locate" className="link">
+                  Nearby
+                </button>{' '}
+                tabs. They will be stored by this device.
+              </p>
+              <p>
+                <button onClick={onClickTab} data-tab="signin" className="link">
+                  Sign in with Google
+                </button>{' '}
+                to save more favorite stops.
+              </p>
+            </>
+          )}
+          <p>The predicted arrival or departure times will be displayed here.</p>
           <span>⭐⭐⭐</span>
         </Empty>
       ) : (

packages/ui/src/modules/util.ts

@@ -1,4 +1,4 @@
-import { Agency, RouteName, DirectionName, Stop } from '@core/types.js'
+import { Agency, RouteName, DirectionName, Stop, Page } from '@core/types.js'
 
 interface Selection {
   agency: Agency
@@ -31,5 +31,26 @@ const same = (a: Selection, b: Selection): boolean => {
   return comboA === comboB
 }
 
-export { groupBy, same }
+const isAPage = (x: unknown): x is Page => {
+  if (
+    x &&
+    typeof x === 'string' &&
+    [
+      'locate',
+      'favorites',
+      'select',
+      'settings',
+      'info',
+      'signin',
+      'profile',
+      'busmap'
+    ].includes(x)
+  ) {
+    return true
+  }
+
+  return false
+}
+
+export { groupBy, same, isAPage }
 export type { Selection }