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
This commit is contained in:
Paul Frazee
GitHub
parent
3a90114f3a
commit
f36c956536
60 changed files with 478 additions and 482 deletions
|
|
@ -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
|
||||
}) => (
|
||||
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={`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}
|
||||
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>
|
||||
</View>
|
||||
<Text
|
||||
type="title"
|
||||
style={[
|
||||
pal.text,
|
||||
bold ? styles.menuItemLabelBold : styles.menuItemLabel,
|
||||
]}
|
||||
numberOfLines={1}>
|
||||
{label}
|
||||
</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>
|
||||
)
|
||||
|
||||
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>
|
||||
</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
|
||||
</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>
|
||||
</View>
|
||||
<View style={s.footerSpacer} />
|
||||
</ScrollView>
|
||||
)
|
||||
},
|
||||
)
|
||||
<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: {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ import {Text} from '../../com/util/text/Text'
|
|||
import {ErrorBoundary} from '../../com/util/ErrorBoundary'
|
||||
import {TabsSelector} from './TabsSelector'
|
||||
import {Composer} from './Composer'
|
||||
import {colors} from '../../lib/styles'
|
||||
import {s, colors} from '../../lib/styles'
|
||||
import {clamp} from '../../../lib/numbers'
|
||||
import {
|
||||
GridIcon,
|
||||
|
|
@ -385,7 +385,7 @@ export const MobileShell: React.FC = observer(() => {
|
|||
/>
|
||||
<Animated.View
|
||||
style={[
|
||||
{height: '100%'},
|
||||
s.h100pct,
|
||||
screenBg,
|
||||
current
|
||||
? [
|
||||
|
|
@ -486,7 +486,7 @@ export const MobileShell: React.FC = observer(() => {
|
|||
*/
|
||||
type ScreenRenderDesc = MatchResult & {
|
||||
key: string
|
||||
navIdx: [number, number]
|
||||
navIdx: string
|
||||
current: boolean
|
||||
previous: boolean
|
||||
isNewTab: boolean
|
||||
|
|
@ -514,7 +514,7 @@ function constructScreenRenderDesc(nav: NavigationModel): {
|
|||
hasNewTab = hasNewTab || tab.isNewTab
|
||||
return Object.assign(matchRes, {
|
||||
key: `t${tab.id}-s${screen.index}`,
|
||||
navIdx: [tab.id, screen.id],
|
||||
navIdx: `${tab.id}-${screen.id}`,
|
||||
current: isCurrent,
|
||||
previous: isPrevious,
|
||||
isNewTab: tab.isNewTab,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue