zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Give explicit names to MobX observer components (#1413)

Browse source 
* Consider observer(...) as components

* Add display names to MobX observers

* Temporarily suppress nested components

* Suppress new false positives for react/prop-types
This commit is contained in:
dan 2023-09-08 01:36:08 +01:00 • committed by GitHub
parent 69209c988f
commit 8a93321fb1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 2868 additions and 2836 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/view/com/pager/FeedsTabBar.web.tsx
View file

@ -9,59 +9,55 @@ import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {FeedsTabBar as FeedsTabBarMobile} from './FeedsTabBarMobile'
export const FeedsTabBar = observer(
(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
const {isMobile} = useWebMediaQueries()
if (isMobile) {
return <FeedsTabBarMobile {...props} />
} else {
return <FeedsTabBarDesktop {...props} />
}
},
)
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) {
const {isMobile} = useWebMediaQueries()
if (isMobile) {
return <FeedsTabBarMobile {...props} />
} else {
return <FeedsTabBarDesktop {...props} />
}
})
const FeedsTabBarDesktop = observer(
(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
const store = useStores()
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
const pal = usePalette('default')
const interp = useAnimatedValue(0)
const FeedsTabBarDesktop = observer(function FeedsTabBarDesktopImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) {
const store = useStores()
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
const pal = usePalette('default')
const interp = useAnimatedValue(0)
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
const transform = {
transform: [
{translateX: '-50%'},
{translateY: Animated.multiply(interp, -100)},
],
}
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
const transform = {
transform: [
{translateX: '-50%'},
{translateY: Animated.multiply(interp, -100)},
],
}
return (
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
<Animated.View style={[pal.view, styles.tabBar, transform]}>
<TabBar
key={items.join(',')}
{...props}
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>
)
},
)
return (
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
<Animated.View style={[pal.view, styles.tabBar, transform]}>
<TabBar
key={items.join(',')}
{...props}
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>
)
})
const styles = StyleSheet.create({
tabBar: {

132
src/view/com/pager/FeedsTabBarMobile.tsx
View file

@ -14,79 +14,77 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {s} from 'lib/styles'
import {HITSLOP_10} from 'lib/constants'
export const FeedsTabBar = observer(
(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) => {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
export const FeedsTabBar = observer(function FeedsTabBarImpl(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) {
const store = useStores()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
const transform = {
transform: [{translateY: Animated.multiply(interp, -100)}],
}
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
const transform = {
transform: [{translateY: Animated.multiply(interp, -100)}],
}
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
}, [store])
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
}, [store])
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
return (
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
<View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links"
hitSlop={HITSLOP_10}>
<FontAwesomeIcon
icon="bars"
size={18}
color={pal.colors.textLight}
/>
</TouchableOpacity>
</View>
<Text style={[brandBlue, s.bold, styles.title]}>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
</Text>
<View style={[pal.view]}>
<Link
href="/settings/saved-feeds"
hitSlop={HITSLOP_10}
accessibilityRole="button"
accessibilityLabel="Edit Saved Feeds"
accessibilityHint="Opens screen to edit Saved Feeds">
<CogIcon size={21} strokeWidth={2} style={pal.textLight} />
</Link>
</View>
return (
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
<View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links"
hitSlop={HITSLOP_10}>
<FontAwesomeIcon
icon="bars"
size={18}
color={pal.colors.textLight}
/>
</TouchableOpacity>
</View>
<TabBar
key={items.join(',')}
{...props}
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>
)
},
)
<Text style={[brandBlue, s.bold, styles.title]}>
{store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
</Text>
<View style={[pal.view]}>
<Link
href="/settings/saved-feeds"
hitSlop={HITSLOP_10}
accessibilityRole="button"
accessibilityLabel="Edit Saved Feeds"
accessibilityHint="Opens screen to edit Saved Feeds">
<CogIcon size={21} strokeWidth={2} style={pal.textLight} />
</Link>
</View>
</View>
<TabBar
key={items.join(',')}
{...props}
items={items}
indicatorColor={pal.colors.link}
/>
</Animated.View>
)
})
const styles = StyleSheet.create({
tabBar: {