style: add jsx expressions linter

valora-inc · May 23, 2024 · 228bb71 · 228bb71
1 parent 37e365e
commit 228bb71
Show file tree

Hide file tree

Showing 41 changed files with 141 additions and 99 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['@valora/eslint-config-typescript'],
-  plugins: ['@jambit/typed-redux-saga'],
+  plugins: ['@jambit/typed-redux-saga', 'jsx-expressions'],
   parserOptions: {
     project: './tsconfig.eslint.json',
   },
@@ -17,6 +17,7 @@ module.exports = {
       excludedFiles: ['./**/*.test.ts', './**/*.test.tsx'],
       rules: {
         '@jambit/typed-redux-saga/use-typed-effects': 'error',
+        'jsx-expressions/strict-logical-expressions': 'error',
       },
     },
   ],

diff --git a/package.json b/package.json
@@ -258,6 +258,7 @@
     "eslint": "^8.19.0",
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-expressions": "^1.3.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",

diff --git a/src/RevokePhoneNumber.tsx b/src/RevokePhoneNumber.tsx
@@ -73,7 +73,7 @@ export const RevokePhoneNumber = ({ forwardedRef }: Props) => {
         title={t('revokePhoneNumber.bottomSheetTitle')}
         testId="RevokePhoneNumberBottomSheet"
       >
-        {e164PhoneNumber && (
+        {!!e164PhoneNumber && (
           <PhoneNumberWithFlag
             e164PhoneNumber={e164PhoneNumber}
             defaultCountryCode={defaultCountryCode ?? undefined}

diff --git a/src/account/AccountErrorScreen.tsx b/src/account/AccountErrorScreen.tsx
@@ -33,7 +33,7 @@ function AccountErrorScreen({
       <TextButton onPress={onPress} testID={`${testID}Button`}>
         {buttonLabel}
       </TextButton>
-      {secondaryButtonLabel && onPressSecondary && (
+      {!!secondaryButtonLabel && onPressSecondary && (
         <TextButton
           style={styles.secondaryButton}
           onPress={onPressSecondary}

diff --git a/src/account/Education.tsx b/src/account/Education.tsx
@@ -144,7 +144,7 @@ const Education = (props: Props) => {
             >
               {step.isTopTitle && <Text style={styles.headingTop}>{step.title}</Text>}
               <View style={styles.swipedContentInner}>
-                {step.image && (
+                {!!step.image && (
                   <Image source={step.image} style={styles.bodyImage} resizeMode="contain" />
                 )}
                 {!step.isTopTitle && <Text style={styles.heading}>{step.title}</Text>}

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
@@ -39,13 +39,13 @@ export function Avatar(props: Props) {
       >
         {name}
       </Text>
-      {e164NumberToShow && (
+      {!!e164NumberToShow && (
         <PhoneNumberWithFlag
           e164PhoneNumber={e164NumberToShow}
           defaultCountryCode={defaultCountryCode}
         />
       )}
-      {!e164NumberToShow && address && recipient.name && (
+      {!e164NumberToShow && !!address && !!recipient.name && (
         <Text style={[fontStyles.small, styles.contactName]} numberOfLines={1} ellipsizeMode="tail">
           {formatShortenedAddress(address)}
         </Text>

diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
@@ -50,7 +50,7 @@ const BottomSheet = ({
       onOpen={onOpen}
       snapPoints={snapPoints}
     >
-      {hasStickyHeader && (
+      {!!hasStickyHeader && (
         <View style={[styles.stickyHeaderContainer, styles.headerContentSpacing]}>
           {stickyTitle && <Text style={titleStyle}>{title}</Text>}
           {stickyHeaderComponent}
@@ -61,10 +61,10 @@ const BottomSheet = ({
         containerStyle={hasStickyHeader ? { paddingTop: 0 } : undefined}
         testId={testId}
       >
-        {!stickyTitle && title && (
+        {!stickyTitle && !!title && (
           <Text style={[titleStyle, styles.headerContentSpacing]}>{title}</Text>
         )}
-        {description && <Text style={styles.description}>{description}</Text>}
+        {!!description && <Text style={styles.description}>{description}</Text>}
         {children}
       </BottomSheetScrollView>
     </BottomSheetBase>

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -54,17 +54,17 @@ export default function Dialog({
       onModalHide={onDialogHide}
     >
       <ScrollView contentContainerStyle={styles.root}>
-        {image && <Image style={styles.imageContainer} source={image} resizeMode="contain" />}
-        {title && <Text style={styles.title}>{title}</Text>}
+        {!!image && <Image style={styles.imageContainer} source={image} resizeMode="contain" />}
+        {!!title && <Text style={styles.title}>{title}</Text>}
         <Text style={styles.body}>{children}</Text>
       </ScrollView>
       <View style={styles.actions}>
-        {secondaryActionText && (
+        {!!secondaryActionText && (
           <TextButton
             style={styles.secondary}
             disabled={secondaryActionDisabled}
             onPress={secondaryActionPress}
-            testID={testID && `${testID}/SecondaryAction`}
+            testID={testID ? `${testID}/SecondaryAction` : undefined}
           >
             {secondaryActionText}
           </TextButton>
@@ -73,11 +73,11 @@ export default function Dialog({
           <ActivityIndicator style={styles.primary} size="small" color={colors.primary} />
         ) : (
           <>
-            {actionText && (
+            {!!actionText && (
               <TextButton
                 style={isActionHighlighted ? styles.primary : styles.secondary}
                 onPress={actionPress}
-                testID={testID && `${testID}/PrimaryAction`}
+                testID={testID ? `${testID}/PrimaryAction` : undefined}
               >
                 {actionText}
               </TextButton>

diff --git a/src/components/IconWithNetworkBadge.tsx b/src/components/IconWithNetworkBadge.tsx
@@ -17,7 +17,7 @@ export default function IconWithNetworkBadge({ networkId, children }: Props) {
   return (
     <View>
       {children}
-      {networkImageUrl && (
+      {!!networkImageUrl && (
         <FastImage
           source={{
             uri: networkImageUrl,

diff --git a/src/components/InLineNotification.tsx b/src/components/InLineNotification.tsx
@@ -78,12 +78,12 @@ export function InLineNotification({
           </View>
         )}
         <View style={styles.contentContainer}>
-          {title && <Text style={styles.titleText}>{title}</Text>}
+          {!!title && <Text style={styles.titleText}>{title}</Text>}
           <Text style={[styles.bodyText]}>{description}</Text>
         </View>
       </View>
 
-      {(ctaLabel || ctaLabel2) && (
+      {(!!ctaLabel || !!ctaLabel2) && (
         <View style={[styles.row, styles.ctaRow]}>
           {renderCtaLabel(ctaLabel, onPressCta, variantColor.primary)}
           {renderCtaLabel(ctaLabel2, onPressCta2, variantColor.primary)}

diff --git a/src/components/PercentageIndicator.tsx b/src/components/PercentageIndicator.tsx
@@ -58,7 +58,7 @@ function PercentageIndicator({
     <View style={styles.container} testID={testID}>
       <View style={styles.indicator}>{indicator}</View>
       <Text style={[percentageTextStyle, { color }]}>{percentageString}</Text>
-      {suffixText && <Text style={[suffixTextStyle, { color }]}>{suffixText}</Text>}
+      {!!suffixText && <Text style={[suffixTextStyle, { color }]}>{suffixText}</Text>}
     </View>
   )
 }

diff --git a/src/components/ReviewHeader.tsx b/src/components/ReviewHeader.tsx
@@ -14,7 +14,7 @@ class ReviewHeader extends React.PureComponent<Props> {
     return (
       <View style={styles.container}>
         <Text style={[fontStyles.h1, styles.heading]}>{title}</Text>
-        {subtitle && subtitle.length > 0 && <Text style={fontStyles.regular}>{subtitle}</Text>}
+        {!!subtitle && subtitle.length > 0 && <Text style={fontStyles.regular}>{subtitle}</Text>}
       </View>
     )
   }

diff --git a/src/components/SettingsItem.tsx b/src/components/SettingsItem.tsx
@@ -47,15 +47,15 @@ export function SettingsItemTextValue({
       <View style={styles.container}>
         <Title value={title} />
         <View style={styles.right}>
-          {value && (
+          {!!value && (
             <Text
               testID={testID ? `${testID}/value` : `${title}/value`}
               style={isValueActionable ? styles.valueActionable : styles.value}
             >
               {value}
             </Text>
           )}
-          {(value || showChevron) && (
+          {(!!value || showChevron) && (
             <ForwardChevron color={isValueActionable ? colors.primary : undefined} />
           )}
         </View>
@@ -83,7 +83,7 @@ export function SettingsItemSwitch({
         <Title value={title} />
         <Switch testID={testID} value={value} onValueChange={onValueChange} />
       </View>
-      {details && (
+      {!!details && (
         <View>
           <Text style={styles.details}>{details}</Text>
         </View>
@@ -107,7 +107,7 @@ export function SettingsExpandedItem({
       <View style={styles.container}>
         <Title value={title} />
       </View>
-      {details && (
+      {!!details && (
         <View>
           <Text style={styles.details}>{details}</Text>
         </View>

diff --git a/src/components/SimpleMessagingCard.tsx b/src/components/SimpleMessagingCard.tsx
@@ -42,7 +42,7 @@ export default function SimpleMessagingCard({
       <View style={styles.innerContainer}>
         <View style={styles.content}>
           <View>
-            {header && <Text style={styles.header}>{header}</Text>}
+            {!!header && <Text style={styles.header}>{header}</Text>}
             <Text style={styles.text} testID={`${testID}/Text`}>
               {text}
             </Text>

diff --git a/src/components/SmartTopAlert.tsx b/src/components/SmartTopAlert.tsx
@@ -125,7 +125,7 @@ function SmartTopAlert({ alert }: Props) {
             {!!title && <Text style={[fontStyles.small500, styles.text]}> {title} </Text>}
             {message}
           </Text>
-          {buttonMessage && (
+          {!!buttonMessage && (
             <SmallButton
               onPress={onPress}
               text={buttonMessage}

diff --git a/src/components/TokenIcon.tsx b/src/components/TokenIcon.tsx
@@ -91,7 +91,7 @@ export default function TokenIcon({ token, viewStyle, testID, size = IconSize.ME
         </View>
       )}
 
-      {token.networkIconUrl && (
+      {!!token.networkIconUrl && (
         <FastImage
           source={{ uri: token.networkIconUrl }}
           style={[

diff --git a/src/components/header/CustomHeader.tsx b/src/components/header/CustomHeader.tsx
@@ -14,9 +14,9 @@ function CustomHeader({ left, right, title, style }: Props) {
     typeof title === 'string' ? <Text style={headerStyles.headerTitle}>{title}</Text> : title
   return (
     <View style={style ? [styles.container, style] : styles.container}>
-      {title && <View style={styles.titleContainer}>{titleComponent}</View>}
-      {left && <View style={styles.buttonContainer}>{left}</View>}
-      {right && <View style={styles.buttonContainer}>{right}</View>}
+      {!!title && <View style={styles.titleContainer}>{titleComponent}</View>}
+      {!!left && <View style={styles.buttonContainer}>{left}</View>}
+      {!!right && <View style={styles.buttonContainer}>{right}</View>}
     </View>
   )
 }

diff --git a/src/dappsExplorer/NoResults.tsx b/src/dappsExplorer/NoResults.tsx
@@ -45,7 +45,7 @@ function NoResults({ selectedFilter, removeFilter, testID, searchTerm }: Props)
           </View>
         </View>
       )}
-      {selectedFilter?.id && (
+      {!!selectedFilter?.id && (
         <View style={styles.filterContainer}>
           <Text style={styles.filterAppliedText}>
             <Trans

diff --git a/src/dappsExplorer/TabDiscover.tsx b/src/dappsExplorer/TabDiscover.tsx
@@ -206,7 +206,7 @@ function TabDiscover({ navigation }: Props) {
   return (
     <SafeAreaView testID="DAppsExplorerScreen" style={styles.safeAreaContainer} edges={[]}>
       <>
-        {!loading && error && (
+        {!loading && !!error && (
           <View style={styles.centerContainer}>
             <Text style={fontStyles.regular}>{t('dappsScreen.errorMessage')}</Text>
           </View>

diff --git a/src/fiatExchanges/BidaliScreen.tsx b/src/fiatExchanges/BidaliScreen.tsx
@@ -141,7 +141,7 @@ function BidaliScreen({ route, navigation }: Props) {
 
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      {initialJavaScript && (
+      {!!initialJavaScript && (
         <WebView
           ref={webViewRef}
           source={{ uri: networkConfig.bidaliUrl }}

diff --git a/src/fiatExchanges/SelectProvider.tsx b/src/fiatExchanges/SelectProvider.tsx
@@ -479,7 +479,7 @@ function ExchangesSection({
             <Text style={styles.categoryText}>{text}</Text>
           </View>
 
-          {rightText && (
+          {!!rightText && (
             <View style={styles.right}>
               <Text style={styles.linkToOtherScreen}>{rightText}</Text>
             </View>

diff --git a/src/fiatExchanges/Spend.tsx b/src/fiatExchanges/Spend.tsx
@@ -66,7 +66,7 @@ function Spend(props: Props) {
                     <Text style={styles.optionTitle}>{merchant.name}</Text>
                     <LinkArrow />
                   </View>
-                  {merchant.subtitleKey && (
+                  {!!merchant.subtitleKey && (
                     <Text style={styles.optionSubtitle}>{t(merchant.subtitleKey)}</Text>
                   )}
                 </ListItem>

diff --git a/src/fiatconnect/FiatDetailsScreen.tsx b/src/fiatconnect/FiatDetailsScreen.tsx
@@ -296,7 +296,7 @@ function FormField({
   return (
     <View style={styles.inputView} key={`inputField-${field.name}`}>
       <View style={styles.row}>
-        {field.label && <Text style={styles.inputLabel}>{field.label}</Text>}
+        {!!field.label && <Text style={styles.inputLabel}>{field.label}</Text>}
         {field.infoDialog && (
           <TouchableOpacity
             testID={`infoIcon-${field.name}`}
@@ -355,7 +355,7 @@ function FormField({
           }}
         />
       )}
-      {errorMessage && showError && (
+      {!!errorMessage && showError && (
         <Text testID={`errorMessage-${field.name}`} style={styles.error}>
           {errorMessage}
         </Text>

diff --git a/src/home/HomeAction.tsx b/src/home/HomeAction.tsx
@@ -22,7 +22,7 @@ export class HomeAction extends React.Component<HomeActionProps> {
         <View style={styles.textContainer}>
           <Text style={[fonts.small600, styles.title]}>{title}</Text>
           <Text style={[fonts.small, styles.subtitle]}>{subtitle}</Text>
-          {cta && ctaOnPress && <SmallButton solid={true} text={cta} onPress={ctaOnPress} />}
+          {!!cta && ctaOnPress && <SmallButton solid={true} text={cta} onPress={ctaOnPress} />}
         </View>
       </View>
     )

diff --git a/src/home/celebration/ConfettiCelebration.tsx b/src/home/celebration/ConfettiCelebration.tsx
@@ -128,7 +128,7 @@ const ConfettiCelebration = ({
           onLayout={handleLayout}
         >
           <View style={styles.notification}>
-            {title && <Text style={styles.titleText}>{title}</Text>}
+            {!!title && <Text style={styles.titleText}>{title}</Text>}
             <Text style={styles.descriptionText}>{description}</Text>
           </View>
         </Animated.View>

diff --git a/src/icons/BackChevron.tsx b/src/icons/BackChevron.tsx
@@ -5,20 +5,14 @@ import Svg, { Path } from 'react-native-svg'
 import Colors from 'src/styles/colors'
 
 export interface Props {
-  height?: number
-  color?: ColorValue | Animated.Node<ColorValue | undefined>
+  height: number
+  color: ColorValue | Animated.Node<ColorValue | undefined>
 }
 const AnimatedPath = Animated.createAnimatedComponent(Path)
 
 function BackChevron({ color, height }: Props) {
   return (
-    <Svg
-      height={height}
-      width={height && height / 2}
-      viewBox="0 0 8 16"
-      fill="none"
-      testID="BackChevron"
-    >
+    <Svg height={height} width={height / 2} viewBox="0 0 8 16" fill="none" testID="BackChevron">
       <AnimatedPath
         fillRule="evenodd"
         clipRule="evenodd"

diff --git a/src/icons/ForwardChevron.tsx b/src/icons/ForwardChevron.tsx
@@ -3,15 +3,15 @@ import colors from 'src/styles/colors'
 import Svg, { Path } from 'svgs'
 
 interface Props {
-  height?: number
-  color?: string
+  height: number
+  color: string
 }
 
 function ForwardChevron({ color, height }: Props) {
   return (
     <Svg
       height={height}
-      width={height && height / 2}
+      width={height / 2}
       viewBox="0 0 8 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/navigator/Headers.tsx b/src/navigator/Headers.tsx
@@ -256,7 +256,7 @@ export function HeaderTitleWithSubtitle({
 }) {
   return (
     <View style={styles.header} testID={testID}>
-      {title && (
+      {!!title && (
         <Text
           testID="HeaderTitle"
           style={styles.headerTitle}
@@ -266,7 +266,7 @@ export function HeaderTitleWithSubtitle({
           {title}
         </Text>
       )}
-      {subTitle && (
+      {!!subTitle && (
         <Text
           testID="HeaderSubTitle"
           style={styles.headerSubTitle}

diff --git a/src/navigator/ProfileMenu.tsx b/src/navigator/ProfileMenu.tsx
@@ -49,7 +49,7 @@ export default function ProfileMenu({ route }: Props) {
                 {displayName}
               </Text>
             )}
-            {phoneNumberVerified && e164PhoneNumber && (
+            {phoneNumberVerified && !!e164PhoneNumber && (
               <PhoneNumberWithFlag
                 e164PhoneNumber={e164PhoneNumber}
                 defaultCountryCode={defaultCountryCode ? defaultCountryCode : undefined}