Add CI checks for web workspace

.github/workflows/ci-web.yml

@@ -0,0 +1,60 @@
+name: CI checks for web workspace
+
+on:
+  push:
+    branches: ['main']
+    paths: ['web/**/*', '!**/*.{txt,md}']
+  pull_request:
+    branches: ['main']
+    paths: ['web/**/*', '!**/*.{txt,md}']
+
+defaults:
+  run:
+    working-directory: 'web'
+
+jobs:
+  Prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*' # TODO: determine version used in production server
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
+      - name: Install yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Run prettier
+        run: yarn prettier . --check --ignore-unknown
+  ESLint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
+      - name: Install yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Run ESLint
+        run: yarn eslint .
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
+      - name: Install yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Compile with tsc
+        run: yarn tsc --noEmit --strict

web/components/answers/compatibility-questions-display.tsx

@@ -407,7 +407,7 @@ function CompatibilityAnswerBlock(props: {
       <Row className="bg-canvas-50 w-fit gap-1 rounded px-2 py-1 text-sm">
         {answerText}
       </Row>
-      <Row className="px-2 -mt-4">
+      <Row className="-mt-4 px-2">
         {answer.explanation && (
           <Linkify className="" text={answer.explanation} />
         )}
@@ -419,7 +419,7 @@ function CompatibilityAnswerBlock(props: {
               ? 'Acceptable'
               : 'Also acceptable'}
           </div>
-          <Row className="flex-wrap gap-2 -mt-2">
+          <Row className="-mt-2 flex-wrap gap-2">
             {distinctPreferredAnswersText.map((text) => (
               <Row
                 key={text}
@@ -432,7 +432,6 @@ function CompatibilityAnswerBlock(props: {
         </Col>
       )}
       <Col>
-
         {comparedLover && (
           <Row className="w-full justify-end sm:hidden">
             <CompatibilityDisplay

web/components/answers/free-response-add-question.tsx

@@ -22,7 +22,7 @@ export function AddQuestionButton(props: {
   user: User
   refreshAnswers: () => void
 }) {
-  const { isFirstQuestion, questions, user, refreshAnswers } = props
+  const { /*isFirstQuestion,*/ questions, user, refreshAnswers } = props
   const [openModal, setOpenModal] = usePersistentInMemoryState(
     false,
     `add-question-${user.id}`

web/components/browse-matches-button.tsx

@@ -38,11 +38,11 @@ export const BrowseMatchesButton = (props: {
     placeholder: 'Write your introduction...',
   })
 
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSubmitting /*, setIsSubmitting*/] = useState(false)
 
   const submit = async () => {
-    const introduction =
-      (editor?.getCharacterCount() ?? 0) > 0 ? editor?.getJSON() : undefined
+    //const introduction =
+    ;(editor?.getCharacterCount() ?? 0) > 0 ? editor?.getJSON() : undefined
 
     // setIsSubmitting(true)
     // const result = await createMatch({
@@ -107,14 +107,14 @@ const BrowseMatchesDialog = (props: {
     lover,
     potentialLovers,
     compatibilityScores,
-    isSubmitting,
+    //isSubmitting,
     setOpen,
-    submit,
-    editor,
+    //submit,
+    //editor,
   } = props
 
   const [query, setQuery] = useState('')
-  const [error, setError] = useState<string | undefined>(undefined)
+  //const [error, setError] = useState<string | undefined>(undefined)
 
   const currentUser = useUser()
   const isCurrentUser = currentUser?.id === lover.user_id

web/components/filters/location-filter.tsx

@@ -28,7 +28,7 @@ export function LocationFilterText(props: {
   radius: number
   highlightedClass?: string
 }) {
-  const { location, youLover, radius, highlightedClass } = props
+  const { location, /*youLover,*/ radius, highlightedClass } = props
 
   if (!location) {
     return (

web/components/layout/tabs.tsx

@@ -157,8 +157,9 @@ export function ControlledTabs(props: TabProps & { activeIndex: number }) {
             aria-current={activeIndex === i ? 'page' : undefined}
           >
             <Col
-              className={clsx()
-              // tab.stackedTabIcon && (activeIndex !== i) && 'opacity-85'
+              className={
+                clsx()
+                // tab.stackedTabIcon && (activeIndex !== i) && 'opacity-85'
               }
             >
               <Tooltip text={tab.tooltip}>

web/components/love-page.tsx

@@ -45,7 +45,7 @@ export function LovePage(props: {
   const bottomNavOptions = user
     ? getBottomNavigation(user, lover)
     : signedOutNavigation()
-  const [isModalOpen, setIsModalOpen] = useState(false)
+  //const [isModalOpen, setIsModalOpen] = useState(false)
   const desktopSidebarOptions = getDesktopNav(user)
 
   const mobileSidebarOptions = user
@@ -55,7 +55,7 @@ export function LovePage(props: {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   trackPageView && useTracking(`view love ${trackPageView}`, trackPageProps)
   useOnline()
-  const [isAddFundsModalOpen, setIsAddFundsModalOpen] = useState(false)
+  const [, /*isAddFundsModalOpen*/ setIsAddFundsModalOpen] = useState(false)
 
   return (
     <>

web/components/required-lover-form.tsx

@@ -47,7 +47,10 @@ export const RequiredLoveUserForm = (props: {
   setEditUsername?: (name: string) => unknown
   setEditDisplayName?: (name: string) => unknown
   lover: LoverRow
-  setLover: <K extends Column<'lovers'>>(key: K, value: LoverRow[K] | undefined) => void
+  setLover: <K extends Column<'lovers'>>(
+    key: K,
+    value: LoverRow[K] | undefined
+  ) => void
   isSubmitting: boolean
   onSubmit?: () => void
   loverCreatedAlready?: boolean

web/components/widgets/choices-toggle-group.tsx

@@ -13,8 +13,9 @@ const colorClasses = {
 
 export type ColorType = keyof typeof colorClasses
 
-export function ChoicesToggleGroup<T extends Record<string, string | number | boolean>>(
-  props: {
+export function ChoicesToggleGroup<
+  T extends Record<string, string | number | boolean>
+>(props: {
   currentChoice: T[keyof T] | undefined
   choicesMap: T
   disabled?: boolean

web/components/widgets/searchable-select.tsx

@@ -52,7 +52,7 @@ export function SearchableSelect(props: {
 
   return (
     <Popover className={clsx('relative', parentClassName)}>
-      {({ open, close }) => (
+      {({ close, ..._ }) => (
         <>
           <Popover.Button
             ref={setReferenceElement}

web/components/widgets/user-link.tsx

@@ -98,13 +98,13 @@ export function UserLink(props: {
   )
 }
 
-function BotBadge() {
+/*function BotBadge() {
   return (
     <span className="bg-ink-100 text-ink-800 ml-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-medium">
       Bot
     </span>
   )
-}
+}*/
 
 export function BannedBadge() {
   return (

web/pages/profile.tsx

@@ -30,7 +30,10 @@ function ProfilePageInner(props: { user: User; lover: Lover }) {
     user,
   })
 
-  const setLoverState = <K extends Column<'lovers'>> (key: K, value: LoverRow[K] | undefined) => {
+  const setLoverState = <K extends Column<'lovers'>>(
+    key: K,
+    value: LoverRow[K] | undefined
+  ) => {
     setLover((prevState) => ({ ...prevState, [key]: value }))
   }