ESLint

.eslintignore

@@ -0,0 +1,2 @@
+playwright-hars/
+playwright-fixtures/

.eslintrc.js

@@ -0,0 +1,19 @@
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: 'expo',
+  ignorePatterns: ['/dist/*'],
+  rules: {
+    "@typescript-eslint/no-empty-object-type": "off",
+    "@typescript-eslint/no-redeclare": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_$",
+        "varsIgnorePattern": "^_$",
+        "caughtErrorsIgnorePattern": "^_$"
+      }
+    ],
+    "react-hooks/exhaustive-deps": "off",
+    "react/display-name": "off",
+  }
+};

.github/workflows/eslint.yml

@@ -0,0 +1,24 @@
+name: ESLint
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: |
+        npm ci
+        npx patch-package
+    - name: Run type checks
+      run: |
+        npm run lint

App.tsx

@@ -3,19 +3,16 @@ import {
   Platform,
   StatusBar,
   UIManager,
-  View,
 } from 'react-native';
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
 import {
   DefaultTheme,
   NavigationContainer,
-  NavigationContainerRef,
   createNavigationContainerRef,
 } from '@react-navigation/native';
 
@@ -338,7 +335,7 @@ const App = () => {
     let response: Response | null = null
     try {
       response = await fetch(STATUS_URL, {cache: 'no-cache'});
-    } catch (e) {};
+    } catch (_) {};
 
     if (response === null || !response.ok) {
       // If even the status server is down, things are *very* not-okay. But odds
@@ -428,6 +425,7 @@ const App = () => {
   }, [inboxStats, setNumUnreadTitle]);
 
   if (Platform.OS === 'web') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const handlePopstate = (ev) => {
         ev.preventDefault();
@@ -442,6 +440,7 @@ const App = () => {
       window.addEventListener('popstate', handlePopstate);
     }, []);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       return listen<Inbox | null>('inbox', onChangeInbox, true);
     }, [onChangeInbox]);

README.md

@@ -9,8 +9,8 @@ The frontend of the world's most popular open-source dating app.</p>
 <a href="https://github.com/duolicious/duolicious-frontend/actions/workflows/jest.yml"><img src="https://img.shields.io/github/actions/workflow/status/duolicious/duolicious-frontend/.github%2Fworkflows%2Fjest.yml?label=Jest" alt="Build status"/></a>
 <a href="https://github.com/duolicious/duolicious-frontend/actions/workflows/playwright.yml"><img src="https://img.shields.io/github/actions/workflow/status/duolicious/duolicious-frontend/.github%2Fworkflows%2Fplaywright.yml?label=Playwright" alt="Build status"/></a>
 <a href="https://github.com/duolicious/duolicious-frontend/actions/workflows/type-checks.yml"><img src="https://img.shields.io/github/actions/workflow/status/duolicious/duolicious-frontend/.github%2Fworkflows%2Ftype-checks.yml?label=Type Checks" alt="Build status"/></a>
+<a href="https://github.com/duolicious/duolicious-frontend/actions/workflows/eslint.yml"><img src="https://img.shields.io/github/actions/workflow/status/duolicious/duolicious-frontend/.github%2Fworkflows%2Feslint.yml?label=ESLint" alt="Build status"/></a>
 <a href="https://github.com/duolicious/duolicious-frontend/actions/workflows/publish.yml"><img src="https://img.shields.io/github/actions/workflow/status/duolicious/duolicious-frontend/.github%2Fworkflows%2Fpublish.yml?label=Publish" alt="Build status"/></a>
-<a href="https://duolicious.app/"><img src="https://img.shields.io/badge/Based-True--love_pilled-7700ff" alt="Based and true-love pilled"/></a>
 </p>
 
 <p align="center">

api/api.tsx

@@ -1,13 +1,8 @@
-import {
-  Platform,
-} from 'react-native';
 import {
   API_URL,
 } from '../env/env';
 import * as _ from "lodash";
 import { sessionToken } from '../kv-storage/session-token';
-import { Buffer } from "buffer";
-import { NonNullImageCropperOutput } from '../components/image-cropper';
 import { delay } from '../util/util';
 import { notify } from '../events/events';
 import { ValidationErrorToast, SOMETHING_WENT_WRONG } from '../components/toast';

components/audio-bio.tsx

@@ -1,12 +1,8 @@
 import {
   View,
-  StyleSheet,
-  SafeAreaView,
 } from 'react-native';
 import {
-  useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';

components/avatar.tsx

@@ -16,7 +16,6 @@ import { X } from "react-native-feather";
 import { ImageBackground } from "expo-image";
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 import { faLock } from '@fortawesome/free-solid-svg-icons/faLock'
-import { verificationOptionGroups } from '../data/option-groups';
 
 const Avatar = ({percentage, ...props}) => {
   const {
@@ -25,8 +24,6 @@ const Avatar = ({percentage, ...props}) => {
     imageUuid,
     imageBlurhash,
     navigation,
-    size,
-    shadow = false,
     isSkipped = false,
     verificationRequired = null,
   } = props;

components/base-quiz-card.tsx

@@ -16,7 +16,6 @@ import {
   PanResponder,
   Platform,
   RegisteredStyle,
-  View,
   ViewStyle,
 } from 'react-native';
 import Animated, {
@@ -30,8 +29,6 @@ import Animated, {
 type Direction = 'left' | 'right' | 'up' | 'down' | 'none'
 type SwipeHandler = (direction: Direction) => void
 type CardLeftScreenHandler = (direction: Direction) => void
-type SwipeRequirementFufillUpdate = (direction: Direction) => void
-type SwipeRequirementUnfufillUpdate = () => void
 
 interface API {
   /**
@@ -372,26 +369,26 @@ const BaseQuizCard = forwardRef(
       PanResponder.create({
         // Ask to be the responder:
         onStartShouldSetPanResponder:
-          (evt, gestureState) => false,
+          () => false,
         onStartShouldSetPanResponderCapture:
-          (evt, gestureState) => false,
+          () => false,
         onMoveShouldSetPanResponder:
-          (evt, gestureState) => {
+          () => {
             if (!isAtStartPosition.current) {
               return false;
             }
             isAtStartPosition.current = false;
             return true;
           },
         onMoveShouldSetPanResponderCapture:
-          (evt, gestureState) => {
+          () => {
             if (!isAtStartPosition.current) {
               return false;
             }
             isAtStartPosition.current = false;
             return true;
           },
-        onPanResponderGrant: (evt, gestureState) => {
+        onPanResponderGrant: (evt) => {
           if (Platform.OS === 'web') {
             evt.preventDefault?.();
           }
@@ -410,7 +407,7 @@ const BaseQuizCard = forwardRef(
             immediate: true,
           })
         },
-        onPanResponderTerminationRequest: (evt, gestureState) => {
+        onPanResponderTerminationRequest: () => {
           return true;
         },
         onPanResponderRelease: (evt, gestureState) => {

components/button-group.tsx

@@ -1,16 +1,3 @@
-import {
-  Animated,
-  Pressable,
-  View,
-} from 'react-native';
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  memo,
-} from 'react';
-import { DefaultText } from './default-text';
-
 import { ButtonGroup as ButtonGroup_ } from '@rneui/themed';
 
 const ButtonGroup = (props) => {

components/button/centered-text.tsx

@@ -2,7 +2,6 @@ import {
   ActivityIndicator,
   Animated,
   Pressable,
-  View,
 } from 'react-native';
 import {
   useRef,

components/button/option.tsx

@@ -2,7 +2,6 @@ import {
   ActivityIndicator,
   Animated,
   Pressable,
-  View,
 } from 'react-native';
 import {
   useCallback,

components/chart.tsx

@@ -7,7 +7,6 @@ import {
 } from 'react-native';
 import {
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -26,8 +25,8 @@ const Chart = ({name1, percentage1, name2, percentage2, ...props}) => {
 
   const [expanded, setExpanded] = useState(false);
 
-  const { opacity, scaleXY } = LayoutAnimation.Properties;
-  const { easeInEaseOut, linear } = LayoutAnimation.Types;
+  const { scaleXY } = LayoutAnimation.Properties;
+  const { easeInEaseOut } = LayoutAnimation.Types;
 
   const animatedBackgroundColor = useRef(new Animated.Value(1)).current;
 

components/club-selector.tsx

@@ -1,7 +1,6 @@
 import {
   ActivityIndicator,
   Animated,
-  Easing,
   Pressable,
   SafeAreaView,
   ScrollView,
@@ -19,7 +18,7 @@ import { TopNavBar } from './top-nav-bar';
 import { Title } from './title';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { DefaultTextInput } from './default-text-input';
-import { api, japi } from '../api/api';
+import { api } from '../api/api';
 import * as _ from "lodash";
 import { Basic } from './basic';
 import { listen, lastEvent  } from '../events/events';

components/color-picker-modal/color-picker-modal.tsx

@@ -21,9 +21,6 @@ import {
   HsvColorPicker,
   HsvColorPickerRef,
 } from './hsv-color-picker';
-import {
-  hsvToHex,
-} from './util';
 import {
   DefaultText,
 } from './../default-text';

components/color-picker-modal/hue-picker.tsx

@@ -1,10 +1,8 @@
 import React, {
   forwardRef,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 import {
   Animated,

components/color-picker-modal/saturation-value-picker.tsx

@@ -1,15 +1,12 @@
 import React, {
   forwardRef,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react';
 import {
   Animated,
   View,
-  TouchableWithoutFeedback,
   PanResponder,
   StyleSheet,
   ViewStyle,
@@ -19,7 +16,6 @@ import {
 } from 'expo-linear-gradient';
 import {
   clamp,
-  hsvToHex,
 } from './util';
 
 type SaturationValuePickerRef = {
@@ -94,16 +90,6 @@ const SaturationValuePicker = forwardRef<
     outputRange: ['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 1)'],
   });
 
-  const computeSatVal = (locationX: number, locationY: number) => ({
-    saturation: clamp(locationX / size),
-    value: 1 - clamp(locationY / size),
-  });
-
-  const getCurrentColor = useCallback(
-    () => hsvToHex(hue.current, baseSliderXY.current.x, baseSliderXY.current.y),
-    [hue, baseSliderXY]
-  );
-
   const getHue = useCallback(
     () => hue.current, [hue]);
   const getSaturation = useCallback(

components/color-picker-modal/util.tsx

@@ -35,21 +35,27 @@ const hsvToRgb = (h: number, s: number, v: number) => {
 
   switch (i % 6) {
     case 0:
+      // eslint-disable-next-line no-unused-expressions
       r = v, g = t, b = p;
       break;
     case 1:
+      // eslint-disable-next-line no-unused-expressions
       r = q, g = v, b = p;
       break;
     case 2:
+      // eslint-disable-next-line no-unused-expressions
       r = p, g = v, b = t;
       break;
     case 3:
+      // eslint-disable-next-line no-unused-expressions
       r = p, g = q, b = v;
       break;
     case 4:
+      // eslint-disable-next-line no-unused-expressions
       r = t, g = p, b = v;
       break;
     case 5:
+      // eslint-disable-next-line no-unused-expressions
       r = v, g = p, b = q;
       break;
   }