Fix linting

Author: MartinBraquet

.prettierrc

@@ -4,6 +4,7 @@
   "semi": false,
   "trailingComma": "es5",
   "singleQuote": true,
+  "bracketSpacing": false,
   "plugins": ["prettier-plugin-sql"],
   "overrides": [
     {

backend/shared/src/supabase/init.ts

@@ -1,10 +1,10 @@
 import pgPromise, {IDatabase, ITask} from 'pg-promise'
 import {log, metrics} from '../utils'
-import {IClient, type IConnectionParameters} from 'pg-promise/typescript/pg-subset'
+import {IClient, type IConnectionParameters,} from 'pg-promise/typescript/pg-subset'
 import {HOUR_MS} from 'common/util/time'
 import {METRICS_INTERVAL_MS} from 'shared/monitoring/metric-writer'
 import {getMonitoringContext} from 'shared/monitoring/context'
-import {ENV_CONFIG} from "common/envs/constants";
+import {ENV_CONFIG} from 'common/envs/constants'
 
 export {SupabaseClient} from 'common/supabase/utils'
 
@@ -32,8 +32,10 @@ export const pgp = pgPromise({
 pgp.pg.types.setTypeParser(20, (value: any) => parseInt(value, 10))
 pgp.pg.types.setTypeParser(1700, parseFloat) // Type Id 1700 = NUMERIC
 
-export type SupabaseTransaction = ITask<{}>
-export type SupabaseDirectClient = IDatabase<{}, IClient> | SupabaseTransaction
+export type SupabaseTransaction = ITask<object>
+export type SupabaseDirectClient =
+  | IDatabase<object, IClient>
+  | SupabaseTransaction
 
 export function getInstanceId() {
   return ENV_CONFIG.supabaseInstanceId
@@ -87,7 +89,7 @@ const newClient = (
 }
 
 // Use one connection to avoid WARNING: Creating a duplicate database object for the same connection.
-let pgpDirect: IDatabase<{}, IClient> | null = null
+let pgpDirect: IDatabase<object, IClient> | null = null
 
 export function createSupabaseDirectClient(
   instanceId?: string,
@@ -128,7 +130,7 @@ export function createSupabaseDirectClient(
   return (pgpDirect = client)
 }
 
-let shortTimeoutPgpClient: IDatabase<{}, IClient> | null = null
+let shortTimeoutPgpClient: IDatabase<object, IClient> | null = null
 export const createShortTimeoutDirectClient = () => {
   if (shortTimeoutPgpClient) return shortTimeoutPgpClient
   shortTimeoutPgpClient = newClient({

common/src/envs/is-prod.ts

@@ -7,7 +7,7 @@ export const isProd = () => {
     return process.env.NEXT_PUBLIC_FIREBASE_ENV?.toUpperCase() == 'PROD'
   } else {
     // For local scripts and cloud functions
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
     const admin = require('firebase-admin')
     return admin.app().options.projectId === 'compass-130ba'
   }

common/src/util/json.ts

@@ -1,7 +1,7 @@
 export const safeJsonParse = (json: string | undefined | null) => {
   try {
-    return JSON.parse(json ?? '') 
-  } catch (e) {
+    return JSON.parse(json ?? '')
+  } catch {
     return null
   }
 }

package.json

@@ -45,7 +45,19 @@
     "prepare": "npx husky"
   },
   "lint-staged": {
-    "*.{ts,tsx,js,jsx}": [
+    "web/**/*.{ts,tsx,js,jsx}": [
+      "next lint --fix --file",
+      "next lint --max-warnings 0 --file"
+    ],
+    "common/**/*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "eslint --max-warnings 0"
+    ],
+    "backend/api/**/*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "eslint --max-warnings 0"
+    ],
+    "backend/shared/**/*.{ts,tsx,js,jsx}": [
       "eslint --fix",
       "eslint --max-warnings 0"
     ]

web/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'prettier',
   ],
   rules: {
+    "react/prop-types": "off",
     'react/display-name': 'off',
     'react/no-unescaped-entities': 'off',
     'react/jsx-no-target-blank': 'off',

web/components/answers/add-compatibility-question-button.tsx

@@ -29,11 +29,7 @@ export function AddCompatibilityQuestionButton(props: {
   if (!user) return null
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className="text-sm"
-      >
+      <button type="button" onClick={() => setOpen(true)} className="text-sm">
         {t('answers.add.submit_own', 'submit your own!')}
       </button>
       <AddCompatibilityQuestionModal
@@ -55,9 +51,8 @@ function AddCompatibilityQuestionModal(props: {
   onClose?: () => void
 }) {
   const {open, setOpen, user, onClose} = props
-  const [dbQuestion, setDbQuestion] = useState<rowFor<'compatibility_prompts'> | null>(
-    null
-  )
+  const [dbQuestion, setDbQuestion] =
+    useState<rowFor<'compatibility_prompts'> | null>(null)
   const afterAddQuestion = (newQuestion: rowFor<'compatibility_prompts'>) => {
     setDbQuestion(newQuestion)
     console.debug('setDbQuestion', newQuestion)
@@ -125,29 +120,37 @@ function CreateCompatibilityModalContent(props: {
 
   const generateJson = () => {
     // Note the change in the generic type
-    return options.reduce((obj, item, index) => {
-      if (item.trim() !== '') {
-        obj[item] = index // Mapping each option to its index
-      }
-      return obj
-    }, {} as Record<string, number>)
+    return options.reduce(
+      (obj, item, index) => {
+        if (item.trim() !== '') {
+          obj[item] = index // Mapping each option to its index
+        }
+        return obj
+      },
+      {} as Record<string, number>
+    )
   }
 
   const onAddQuestion = useEvent(async () => {
     try {
       const data = {
         question: question,
         options: generateJson(),
-      };
+      }
       const newQuestion = await api('create-compatibility-question', data)
       console.debug('create-compatibility-question', newQuestion, data)
       const q = newQuestion?.question
       if (q) {
         afterAddQuestion(q as rowFor<'compatibility_prompts'>)
       }
       track('create compatibility question')
-    } catch (e) {
-      toast.error(t('answers.add.error_create', 'Error creating compatibility question. Try again?'))
+    } catch (_e) {
+      toast.error(
+        t(
+          'answers.add.error_create',
+          'Error creating compatibility question. Try again?'
+        )
+      )
     }
   })
 
@@ -176,7 +179,9 @@ function CreateCompatibilityModalContent(props: {
                 value={options[index]}
                 onChange={(e) => onOptionChange(index, e.target.value)}
                 className="w-full"
-                placeholder={t('answers.add.option_placeholder', 'Option {n}', {n: String(index + 1)})}
+                placeholder={t('answers.add.option_placeholder', 'Option {n}', {
+                  n: String(index + 1),
+                })}
                 rows={1}
                 maxLength={MAX_ANSWER_LENGTH}
               />

web/components/answers/answer-compatibility-question-content.tsx

@@ -67,7 +67,7 @@ export const submitCompatibilityAnswer = async (
       explanation: input.explanation ?? null,
     })
 
-    // Track only if the upsert succeeds
+    // Track only if upsert succeeds
     track('answer compatibility question', {
       ...newAnswer,
     })
@@ -179,7 +179,7 @@ export function AnswerCompatibilityQuestionContent(props: {
         {shortenedPopularity && (
           <Row className="text-ink-500 select-none items-center text-sm">
             <Tooltip
-              text={t('answers.content.people_answered', '{count} people have answered this question', { count: String(shortenedPopularity) })}
+              text={t('answers.content.people_answered', '{count} people have answered this question', {count: String(shortenedPopularity)})}
             >
               {shortenedPopularity}
             </Tooltip>
@@ -204,7 +204,8 @@ export function AnswerCompatibilityQuestionContent(props: {
           />
         </Col>
         <Col className="gap-2">
-          <span className="text-ink-500 text-sm">{t('answers.content.answers_you_accept', "Answers you'll accept")}</span>
+          <span
+            className="text-ink-500 text-sm">{t('answers.content.answers_you_accept', "Answers you'll accept")}</span>
           <MultiSelectAnswers
             values={answer.pref_choices ?? []}
             setValue={(choice) =>

web/components/editor/floating-format-menu.tsx

@@ -1,12 +1,10 @@
-import { LinkIcon, CheckIcon, TrashIcon } from '@heroicons/react/solid'
-import { Editor } from '@tiptap/core'
-import { BubbleMenu } from '@tiptap/react'
+import {CheckIcon, LinkIcon, TrashIcon} from '@heroicons/react/solid'
+import {Editor} from '@tiptap/core'
+import {BubbleMenu} from '@tiptap/react'
 import clsx from 'clsx'
-import { getUrl } from 'common/util/parse'
-import { useState } from 'react'
-import BoldIcon from 'web/lib/icons/bold-icon.svg'
-import ItalicIcon from 'web/lib/icons/italic-icon.svg'
-import TypeIcon from 'web/lib/icons/type-icon.svg'
+import {getUrl} from 'common/util/parse'
+import {useState} from 'react'
+import {Bold, Italic, Type} from 'lucide-react'
 
 // see https://tiptap.dev/guide/menus
 
@@ -40,14 +38,14 @@ export function FloatingFormatMenu(props: {
           {advanced && (
             <>
               <IconButton
-                icon={TypeIcon}
+                icon={Type}
                 onClick={() =>
                   editor.chain().focus().toggleHeading({ level: 1 }).run()
                 }
                 isActive={editor.isActive('heading', { level: 1 })}
               />
               <IconButton
-                icon={TypeIcon}
+                icon={Type}
                 onClick={() =>
                   editor.chain().focus().toggleHeading({ level: 2 }).run()
                 }
@@ -58,12 +56,12 @@ export function FloatingFormatMenu(props: {
             </>
           )}
           <IconButton
-            icon={BoldIcon}
+            icon={Bold}
             onClick={() => editor.chain().focus().toggleBold().run()}
             isActive={editor.isActive('bold')}
           />
           <IconButton
-            icon={ItalicIcon}
+            icon={Italic}
             onClick={() => editor.chain().focus().toggleItalic().run()}
             isActive={editor.isActive('italic')}
           />

web/components/multi-checkbox.tsx

@@ -4,8 +4,8 @@ import {Input} from 'web/components/widgets/input'
 import {Button} from 'web/components/buttons/button'
 import clsx from 'clsx'
 import {useEffect, useMemo, useState} from 'react'
-import {useT} from "web/lib/locale";
-import {toKey} from "common/parsing";
+import {useT} from 'web/lib/locale'
+import {toKey} from 'common/parsing'
 
 export const MultiCheckbox = (props: {
   // Map of label -> value
@@ -20,14 +20,27 @@ export const MultiCheckbox = (props: {
   //  - string: the stored value for the new option; label will be the input text
   //  - { key, value }: explicit label (key) and stored value
   //  - null/undefined to indicate failure/cancellation
-  addOption?: (label: string) => string | { key: string; value: string } | null | undefined
+  addOption?: (
+    label: string
+  ) => string | { key: string; value: string } | null | undefined
   addPlaceholder?: string
   translationPrefix?: string
 }) => {
-  const {choices, selected, onChange, className, optionsClassName, addOption, addPlaceholder, translationPrefix} = props
+  const {
+    choices,
+    selected,
+    onChange,
+    className,
+    optionsClassName,
+    addOption,
+    addPlaceholder,
+    translationPrefix,
+  } = props
 
   // Keep a local merged copy to allow optimistic adds while remaining in sync with props
-  const [localChoices, setLocalChoices] = useState<{ [key: string]: string }>(choices)
+  const [localChoices, setLocalChoices] = useState<{ [key: string]: string }>(
+    choices
+  )
   useEffect(() => {
     setLocalChoices((prev) => {
       // If incoming choices changed, merge them with any locally added that still don't collide
@@ -56,7 +69,9 @@ export const MultiCheckbox = (props: {
     let q = newLabel.trim()
     q = translateOption(q, q).toLowerCase()
     if (!q) return entries
-    return entries.filter(([key, value]) => translateOption(key, value).toLowerCase().includes(q))
+    return entries.filter(([key, value]) =>
+      translateOption(key, value).toLowerCase().includes(q)
+    )
   }, [addOption, entries, newLabel])
 
   const submitAdd = async () => {
@@ -68,8 +83,10 @@ export const MultiCheckbox = (props: {
       return
     }
     // prevent duplicate by label or by value already selected
-    const existingEntry = Object.entries(localChoices).find(([key, value]) =>
-      translateOption(key, value).toLowerCase() === translateOption(label, label).toLowerCase()
+    const existingEntry = Object.entries(localChoices).find(
+      ([key, value]) =>
+        translateOption(key, value).toLowerCase() ===
+        translateOption(label, label).toLowerCase()
     )
 
     if (existingEntry) {
@@ -88,12 +105,13 @@ export const MultiCheckbox = (props: {
         setAdding(false)
         return
       }
-      const {key, value} = typeof result === 'string' ? {key: label, value: result} : result
+      const {key, value} =
+        typeof result === 'string' ? {key: label, value: result} : result
       setLocalChoices((prev) => ({...prev, [key]: value}))
       // auto-select newly added option if not already selected
       if (!selected.includes(value)) onChange([...selected, value])
       setNewLabel('')
-    } catch (e) {
+    } catch (_e) {
       setError(t('multi-checkbox.add_failed', 'Failed to add option.'))
     } finally {
       setAdding(false)
@@ -106,7 +124,10 @@ export const MultiCheckbox = (props: {
         <Row className="items-center gap-2">
           <Input
             value={newLabel}
-            placeholder={addPlaceholder ?? t('multi-checkbox.search_or_add', 'Search or add')}
+            placeholder={
+              addPlaceholder ??
+              t('multi-checkbox.search_or_add', 'Search or add')
+            }
             onChange={(e) => {
               setNewLabel(e.target.value)
               setError(null)
@@ -119,7 +140,12 @@ export const MultiCheckbox = (props: {
             }}
             className="h-10"
           />
-          <Button size="sm" onClick={submitAdd} loading={adding} disabled={adding}>
+          <Button
+            size="sm"
+            onClick={submitAdd}
+            loading={adding}
+            disabled={adding}
+          >
             {t('common.add', 'Add')}
           </Button>
           {error && <span className="text-sm text-error">{error}</span>}
@@ -144,9 +170,12 @@ export const MultiCheckbox = (props: {
       </Row>
       {addOption && newLabel.trim() && filteredEntries.length === 0 && (
         <div className="px-2 text-sm text-ink-500">
-          {t('multi-checkbox.no_matching_options', 'No matching options, feel free to add it.')}
+          {t(
+            'multi-checkbox.no_matching_options',
+            'No matching options, feel free to add it.'
+          )}
         </div>
       )}
     </div>
   )
-}
+}