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

Resolve all remaining lint issues (#88)

Browse source 
* 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 2023-01-24 13:00:11 -06:00 • committed by GitHub
parent 3a90114f3a
commit f36c956536
60 changed files with 478 additions and 482 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/view/com/util/Link.tsx
View file

@ -57,7 +57,7 @@ export const Link = observer(function Link({
)
})
export const TextLink = observer(function Link({
export const TextLink = observer(function TextLink({
type = 'md',
style,
href,

17
src/view/com/util/LoadingPlaceholder.tsx
View file

@ -19,23 +19,15 @@ export function LoadingPlaceholder({
return (
<View
style={[
styles.loadingPlaceholder,
{
width,
height,
backgroundColor: theme.palette.default.backgroundLight,
borderRadius: 6,
overflow: 'hidden',
},
style,
]}>
<View
style={{
width,
height,
backgroundColor: theme.palette.default.backgroundLight,
}}
/>
</View>
]}
/>
)
}
@ -137,6 +129,9 @@ export function NotificationFeedLoadingPlaceholder() {
}
const styles = StyleSheet.create({
loadingPlaceholder: {
borderRadius: 6,
},
post: {
flexDirection: 'row',
padding: 10,

13
src/view/com/util/PostCtrls.tsx
View file

@ -128,10 +128,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
hitSlop={HITSLOP}
onPress={opts.onPressReply}>
<CommentBottomArrow
style={[
defaultCtrlColor,
opts.big ? {marginTop: 2} : {marginTop: 1},
]}
style={[defaultCtrlColor, opts.big ? s.mt2 : styles.mt1]}
strokeWidth={3}
size={opts.big ? 20 : 15}
/>
@ -181,10 +178,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
/>
) : (
<HeartIcon
style={[
defaultCtrlColor,
opts.big ? {marginTop: 1} : undefined,
]}
style={[defaultCtrlColor, opts.big ? styles.mt1 : undefined]}
strokeWidth={3}
size={opts.big ? 20 : 16}
/>
@ -244,4 +238,7 @@ const styles = StyleSheet.create({
ctrlIconUpvoted: {
color: colors.red3,
},
mt1: {
marginTop: 1,
},
})

5
src/view/com/util/PostEmbeds.tsx
View file

@ -67,7 +67,7 @@ export function PostEmbeds({
<AutoSizedImage
uri={embed.images[0].thumb}
onPress={() => openLightbox(0)}
containerStyle={{borderRadius: 8}}
containerStyle={styles.singleImage}
/>
</View>
)
@ -120,6 +120,9 @@ const styles = StyleSheet.create({
imagesContainer: {
marginTop: 4,
},
singleImage: {
borderRadius: 8,
},
extOuter: {
borderWidth: 1,
borderRadius: 8,

2
src/view/com/util/Selector.tsx
View file

@ -41,7 +41,7 @@ export function Selector({
width: middle.width,
}
return [left, middle, right]
}, [selectedIndex, items, itemLayouts])
}, [selectedIndex, itemLayouts])
const underlineStyle = {
backgroundColor: pal.colors.text,

14
src/view/com/util/UserAvatar.tsx
View file

@ -62,8 +62,8 @@ export function UserAvatar({
])
}, [onSelectNewAvatar])
const renderSvg = (size: number, initials: string) => (
<Svg width={size} height={size} viewBox="0 0 100 100">
const renderSvg = (svgSize: number, svgInitials: string) => (
<Svg width={svgSize} height={svgSize} viewBox="0 0 100 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" />
@ -78,7 +78,7 @@ export function UserAvatar({
x="50"
y="67"
textAnchor="middle">
{initials}
{svgInitials}
</Text>
</Svg>
)
@ -88,7 +88,11 @@ export function UserAvatar({
<TouchableOpacity onPress={handleEditAvatar}>
{avatar ? (
<Image
style={{width: size, height: size, borderRadius: (size / 2) | 0}}
style={{
width: size,
height: size,
borderRadius: Math.floor(size / 2),
}}
source={{uri: avatar}}
/>
) : (
@ -104,7 +108,7 @@ export function UserAvatar({
</TouchableOpacity>
) : avatar ? (
<Image
style={{width: size, height: size, borderRadius: (size / 2) | 0}}
style={{width: size, height: size, borderRadius: Math.floor(size / 2)}}
resizeMode="stretch"
source={{uri: avatar}}
/>

10
src/view/com/util/UserInfoText.tsx
View file

@ -1,6 +1,6 @@
import React, {useState, useEffect} from 'react'
import {AppBskyActorGetProfile as GetProfile} from '@atproto/api'
import {StyleProp, TextStyle} from 'react-native'
import {StyleProp, StyleSheet, TextStyle} from 'react-native'
import {Link} from './Link'
import {Text} from './text/Text'
import {LoadingPlaceholder} from './LoadingPlaceholder'
@ -53,7 +53,7 @@ export function UserInfoText({
return () => {
aborted = true
}
}, [did, store.api.app.bsky])
}, [did, store.profiles])
let inner
if (didFail) {
@ -73,7 +73,7 @@ export function UserInfoText({
<LoadingPlaceholder
width={80}
height={8}
style={{position: 'relative', top: 1, left: 2}}
style={styles.loadingPlaceholder}
/>
)
}
@ -91,3 +91,7 @@ export function UserInfoText({
return inner
}
const styles = StyleSheet.create({
loadingPlaceholder: {position: 'relative', top: 1, left: 2},
})

31
src/view/com/util/ViewHeader.tsx
View file

@ -11,8 +11,8 @@ import {UserAvatar} from './UserAvatar'
import {Text} from './text/Text'
import {MagnifyingGlassIcon} from '../../lib/icons'
import {useStores} from '../../../state'
import {useTheme} from '../../lib/ThemeContext'
import {usePalette} from '../../lib/hooks/usePalette'
import {colors} from '../../lib/styles'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
@ -26,7 +26,6 @@ export const ViewHeader = observer(function ViewHeader({
subtitle?: string
canGoBack?: boolean
}) {
const theme = useTheme()
const pal = usePalette('default')
const store = useStores()
const onPressBack = () => {
@ -52,12 +51,12 @@ export const ViewHeader = observer(function ViewHeader({
testID="viewHeaderBackOrMenuBtn"
onPress={canGoBack ? onPressBack : onPressMenu}
hitSlop={BACK_HITSLOP}
style={canGoBack ? styles.backIcon : styles.backIconWide}>
style={canGoBack ? styles.backBtn : styles.backBtnWide}>
{canGoBack ? (
<FontAwesomeIcon
size={18}
icon="angle-left"
style={[{marginTop: 6}, pal.text]}
style={[styles.backIcon, pal.text]}
/>
) : (
<UserAvatar
@ -96,13 +95,10 @@ export const ViewHeader = observer(function ViewHeader({
<FontAwesomeIcon icon="signal" style={pal.text} size={16} />
<FontAwesomeIcon
icon="x"
style={{
backgroundColor: pal.colors.background,
color: theme.palette.error.background,
position: 'absolute',
right: 7,
bottom: 7,
}}
style={[
styles.littleXIcon,
{backgroundColor: pal.colors.background},
]}
size={8}
/>
</>
@ -136,15 +132,18 @@ const styles = StyleSheet.create({
fontWeight: 'normal',
},
backIcon: {
backBtn: {
width: 30,
height: 30,
},
backIconWide: {
backBtnWide: {
width: 40,
height: 30,
marginLeft: 6,
},
backIcon: {
marginTop: 6,
},
btn: {
flexDirection: 'row',
alignItems: 'center',
@ -154,4 +153,10 @@ const styles = StyleSheet.create({
borderRadius: 20,
marginLeft: 4,
},
littleXIcon: {
color: colors.red3,
position: 'absolute',
right: 7,
bottom: 7,
},
})

5
src/view/com/util/ViewSelector.tsx
View file

@ -5,6 +5,7 @@ import {HorzSwipe} from './gestures/HorzSwipe'
import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
import {OnScrollCb} from '../../lib/hooks/useOnMainScroll'
import {clamp} from '../../../lib/numbers'
import {s} from '../../lib/styles'
const HEADER_ITEM = {_reactKey: '__header__'}
const SELECTOR_ITEM = {_reactKey: '__selector__'}
@ -54,7 +55,7 @@ export function ViewSelector({
setSelectedIndex(clamp(index, 0, sections.length))
useEffect(() => {
onSelectView?.(selectedIndex)
}, [selectedIndex])
}, [selectedIndex, onSelectView])
// rendering
// =
@ -98,7 +99,7 @@ export function ViewSelector({
onScroll={onScroll}
onRefresh={onRefresh}
onEndReached={onEndReached}
contentContainerStyle={{paddingBottom: 200}}
contentContainerStyle={s.contentContainer}
/>
</HorzSwipe>
)

3
src/view/com/util/forms/RadioGroup.tsx
View file

@ -2,6 +2,7 @@ import React, {useState} from 'react'
import {View} from 'react-native'
import {RadioButton} from './RadioButton'
import {ButtonType} from './Button'
import {s} from '../../../lib/styles'
export interface RadioGroupItem {
label: string
@ -29,7 +30,7 @@ export function RadioGroup({
{items.map((item, i) => (
<RadioButton
key={item.key}
style={i !== 0 ? {marginTop: 2} : undefined}
style={i !== 0 ? s.mt2 : undefined}
type={type}
label={item.label}
isSelected={item.key === selection}

7
src/view/com/util/gestures/HorzSwipe.tsx
View file

@ -9,6 +9,7 @@ import {
View,
} from 'react-native'
import {clamp} from 'lodash'
import {s} from '../../../lib/styles'
interface Props {
panX: Animated.Value
@ -111,7 +112,9 @@ export function HorzSwipe({
(Math.abs(gestureState.dx) > swipeDistanceThreshold / 4 ||
Math.abs(gestureState.vx) > swipeVelocityThreshold)
) {
const final = ((gestureState.dx / Math.abs(gestureState.dx)) * -1) | 0
const final = Math.floor(
(gestureState.dx / Math.abs(gestureState.dx)) * -1,
)
Animated.timing(panX, {
toValue: final,
duration: 100,
@ -144,7 +147,7 @@ export function HorzSwipe({
})
return (
<View {...panResponder.panHandlers} style={{flex: 1}}>
<View {...panResponder.panHandlers} style={s.h100pct}>
{children}
</View>
)

3
src/view/com/util/gestures/SwipeAndZoom.tsx
View file

@ -9,6 +9,7 @@ import {
View,
} from 'react-native'
import {clamp} from 'lodash'
import {s} from '../../../lib/styles'
export enum Dir {
None,
@ -294,7 +295,7 @@ export function SwipeAndZoom({
})
return (
<View {...panResponder.panHandlers} style={{flex: 1}}>
<View {...panResponder.panHandlers} style={s.h100pct}>
{children}
</View>
)

4
src/view/com/util/images/AutoSizedImage.tsx
View file

@ -47,9 +47,9 @@ export function AutoSizedImage({
setImgInfo({width, height})
}
},
(error: any) => {
(err: any) => {
if (!aborted) {
setError(String(error))
setError(String(err))
}
},
)

2
src/view/com/util/images/ImageLayoutGrid.tsx
View file

@ -105,7 +105,7 @@ function ImageLayoutGridInner({
<TouchableWithoutFeedback onPress={() => onPress?.(1)}>
<Image source={{uri: uris[1]}} style={size1} />
</TouchableWithoutFeedback>
<View style={{height: 5}} />
<View style={styles.hSpace} />
<TouchableWithoutFeedback onPress={() => onPress?.(2)}>
<Image source={{uri: uris[2]}} style={size1} />
</TouchableWithoutFeedback>