From f36c9565362b741c58672204fe0c155252affe28 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 24 Jan 2023 13:00:11 -0600
Subject: Resolve all remaining lint issues (#88)

* Rework 'navIdx' variables from number arrays to strings to avoid equality-check failures in react hooks

* Resolve all remaining lint issues

* Fix tests

* Use node v18 in gh action test
---
 src/view/shell/mobile/Menu.tsx | 288 ++++++++++++++++++++---------------------
 1 file changed, 141 insertions(+), 147 deletions(-)

(limited to 'src/view/shell/mobile/Menu.tsx')

diff --git a/src/view/shell/mobile/Menu.tsx b/src/view/shell/mobile/Menu.tsx
index 26cb5b9bd..a7d3e2142 100644
--- a/src/view/shell/mobile/Menu.tsx
+++ b/src/view/shell/mobile/Menu.tsx
@@ -23,163 +23,157 @@ import {Text} from '../../com/util/text/Text'
 import {ToggleButton} from '../../com/util/forms/ToggleButton'
 import {usePalette} from '../../lib/hooks/usePalette'
 
-export const Menu = observer(
-  ({visible, onClose}: {visible: boolean; onClose: () => void}) => {
-    const pal = usePalette('default')
-    const store = useStores()
+export const Menu = observer(({onClose}: {onClose: () => void}) => {
+  const pal = usePalette('default')
+  const store = useStores()
 
-    // events
-    // =
+  // events
+  // =
 
-    const onNavigate = (url: string) => {
-      onClose()
-      if (url === '/notifications') {
-        store.nav.switchTo(1, true)
-      } else {
-        store.nav.switchTo(0, true)
-        if (url !== '/') {
-          store.nav.navigate(url)
-        }
+  const onNavigate = (url: string) => {
+    onClose()
+    if (url === '/notifications') {
+      store.nav.switchTo(1, true)
+    } else {
+      store.nav.switchTo(0, true)
+      if (url !== '/') {
+        store.nav.navigate(url)
       }
     }
+  }
 
-    // rendering
-    // =
+  // rendering
+  // =
 
-    const MenuItem = ({
-      icon,
-      label,
-      count,
-      url,
-      bold,
-      onPress,
-    }: {
-      icon: JSX.Element
-      label: string
-      count?: number
-      url?: string
-      bold?: boolean
-      onPress?: () => void
-    }) => (
-      <TouchableOpacity
-        testID={`menuItemButton-${label}`}
-        style={styles.menuItem}
-        onPress={onPress ? onPress : () => onNavigate(url || '/')}>
-        <View style={[styles.menuItemIconWrapper]}>
-          {icon}
-          {count ? (
-            <View style={styles.menuItemCount}>
-              <Text style={styles.menuItemCountLabel}>{count}</Text>
-            </View>
-          ) : undefined}
-        </View>
-        <Text
-          type="title"
-          style={[
-            pal.text,
-            bold ? styles.menuItemLabelBold : styles.menuItemLabel,
-          ]}
-          numberOfLines={1}>
-          {label}
-        </Text>
-      </TouchableOpacity>
-    )
-
-    return (
-      <ScrollView testID="menuView" style={[styles.view, pal.view]}>
-        <TouchableOpacity
-          testID="profileCardButton"
-          onPress={() => onNavigate(`/profile/${store.me.handle}`)}
-          style={styles.profileCard}>
-          <UserAvatar
-            size={60}
-            displayName={store.me.displayName}
-            handle={store.me.handle}
-            avatar={store.me.avatar}
-          />
-          <View style={s.flex1}>
-            <Text
-              type="title-lg"
-              style={[pal.text, styles.profileCardDisplayName]}
-              numberOfLines={1}>
-              {store.me.displayName || store.me.handle}
-            </Text>
-            <Text
-              style={[pal.textLight, styles.profileCardHandle]}
-              numberOfLines={1}>
-              @{store.me.handle}
-            </Text>
+  const MenuItem = ({
+    icon,
+    label,
+    count,
+    url,
+    bold,
+    onPress,
+  }: {
+    icon: JSX.Element
+    label: string
+    count?: number
+    url?: string
+    bold?: boolean
+    onPress?: () => void
+  }) => (
+    <TouchableOpacity
+      testID={`menuItemButton-${label}`}
+      style={styles.menuItem}
+      onPress={onPress ? onPress : () => onNavigate(url || '/')}>
+      <View style={[styles.menuItemIconWrapper]}>
+        {icon}
+        {count ? (
+          <View style={styles.menuItemCount}>
+            <Text style={styles.menuItemCountLabel}>{count}</Text>
           </View>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="searchBtn"
-          style={[styles.searchBtn, pal.btn]}
-          onPress={() => onNavigate('/search')}>
-          <MagnifyingGlassIcon
-            style={pal.text as StyleProp<ViewStyle>}
-            size={25}
-          />
-          <Text type="title" style={[pal.text, styles.searchBtnLabel]}>
-            Search
+        ) : undefined}
+      </View>
+      <Text
+        type="title"
+        style={[
+          pal.text,
+          bold ? styles.menuItemLabelBold : styles.menuItemLabel,
+        ]}
+        numberOfLines={1}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  )
+
+  return (
+    <ScrollView testID="menuView" style={[styles.view, pal.view]}>
+      <TouchableOpacity
+        testID="profileCardButton"
+        onPress={() => onNavigate(`/profile/${store.me.handle}`)}
+        style={styles.profileCard}>
+        <UserAvatar
+          size={60}
+          displayName={store.me.displayName}
+          handle={store.me.handle}
+          avatar={store.me.avatar}
+        />
+        <View style={s.flex1}>
+          <Text
+            type="title-lg"
+            style={[pal.text, styles.profileCardDisplayName]}
+            numberOfLines={1}>
+            {store.me.displayName || store.me.handle}
           </Text>
-        </TouchableOpacity>
-        <View style={[styles.section, pal.border, {paddingTop: 5}]}>
-          <MenuItem
-            icon={
-              <HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />
-            }
-            label="Home"
-            url="/"
-          />
-          <MenuItem
-            icon={
-              <BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />
-            }
-            label="Notifications"
-            url="/notifications"
-            count={store.me.notificationCount}
-          />
-          <MenuItem
-            icon={
-              <UserIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="30"
-                strokeWidth={2}
-              />
-            }
-            label="Profile"
-            url={`/profile/${store.me.handle}`}
-          />
-          <MenuItem
-            icon={
-              <CogIcon
-                style={pal.text as StyleProp<ViewStyle>}
-                size="30"
-                strokeWidth={2}
-              />
-            }
-            label="Settings"
-            url="/settings"
-          />
-        </View>
-        <View style={[styles.section, pal.border]}>
-          <ToggleButton
-            label="Dark mode"
-            isSelected={store.shell.darkMode}
-            onPress={() => store.shell.setDarkMode(!store.shell.darkMode)}
-          />
-        </View>
-        <View style={styles.footer}>
-          <Text style={[pal.textLight]}>
-            Build version {VersionNumber.appVersion} (
-            {VersionNumber.buildVersion})
+          <Text
+            style={[pal.textLight, styles.profileCardHandle]}
+            numberOfLines={1}>
+            @{store.me.handle}
           </Text>
         </View>
-        <View style={s.footerSpacer} />
-      </ScrollView>
-    )
-  },
-)
+      </TouchableOpacity>
+      <TouchableOpacity
+        testID="searchBtn"
+        style={[styles.searchBtn, pal.btn]}
+        onPress={() => onNavigate('/search')}>
+        <MagnifyingGlassIcon
+          style={pal.text as StyleProp<ViewStyle>}
+          size={25}
+        />
+        <Text type="title" style={[pal.text, styles.searchBtnLabel]}>
+          Search
+        </Text>
+      </TouchableOpacity>
+      <View style={[styles.section, pal.border, s.pt5]}>
+        <MenuItem
+          icon={<HomeIcon style={pal.text as StyleProp<ViewStyle>} size="26" />}
+          label="Home"
+          url="/"
+        />
+        <MenuItem
+          icon={<BellIcon style={pal.text as StyleProp<ViewStyle>} size="28" />}
+          label="Notifications"
+          url="/notifications"
+          count={store.me.notificationCount}
+        />
+        <MenuItem
+          icon={
+            <UserIcon
+              style={pal.text as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Profile"
+          url={`/profile/${store.me.handle}`}
+        />
+        <MenuItem
+          icon={
+            <CogIcon
+              style={pal.text as StyleProp<ViewStyle>}
+              size="30"
+              strokeWidth={2}
+            />
+          }
+          label="Settings"
+          url="/settings"
+        />
+      </View>
+      <View style={[styles.section, pal.border]}>
+        <ToggleButton
+          label="Dark mode"
+          isSelected={store.shell.darkMode}
+          onPress={() => store.shell.setDarkMode(!store.shell.darkMode)}
+        />
+      </View>
+      <View style={styles.footer}>
+        <Text style={[pal.textLight]}>
+          Build version {VersionNumber.appVersion} ({VersionNumber.buildVersion}
+          )
+        </Text>
+      </View>
+      <View style={s.footerSpacer} />
+    </ScrollView>
+  )
+})
 
 const styles = StyleSheet.create({
   view: {
-- 
cgit 1.4.1