Revert "initial cleanup steps"

Author: jasonlong

.eslintrc.json

@@ -1,12 +1,3 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "plugins": ["@typescript-eslint"],
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  "rules": {
-    "@typescript-eslint/consistent-type-imports": "warn",
-    "@typescript-eslint/no-non-null-assertion": "off"
-  }
+  "extends": "next/core-web-vitals"
 }

.github/workflows/codeql.yml

@@ -1,10 +1,10 @@
-name: 'CodeQL'
+name: "CodeQL"
 
 on:
   push:
-    branches: ['main']
+    branches: [ "main" ]
   pull_request:
-    branches: ['main']
+    branches: [ "main" ]
 
 jobs:
   analyze:
@@ -18,21 +18,21 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ['javascript']
+        language: [ 'javascript' ]
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
+    - name: Checkout repository
+      uses: actions/checkout@v3
 
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
 
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
 
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
-        with:
-          category: '/language:${{matrix.language}}'
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged

components/avatar.tsx

@@ -32,6 +32,7 @@ export function Avatar({ size = 'md', name, src }: AvatarProps) {
           <Image
             src={src}
             alt={name}
+            layout="fixed"
             width={dimension[size]}
             height={dimension[size]}
             className="object-cover rounded-full"
@@ -41,7 +42,8 @@ export function Avatar({ size = 'md', name, src }: AvatarProps) {
       ) : (
         <div className="grid">
           <div className="flex col-start-1 col-end-1 row-start-1 row-end-1">
-            <Image
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
               src={`/api/avatar?name=${encodeURIComponent(name)}`}
               alt={name}
               width={dimension[size]}
@@ -50,7 +52,8 @@ export function Avatar({ size = 'md', name, src }: AvatarProps) {
           </div>
           {isCharacterALetter(initial) && (
             <div className="relative flex items-center justify-center col-start-1 col-end-1 row-start-1 row-end-1">
-              <Image
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
                 src={`/images/letters/${initial}.svg`}
                 className={initialSize[size]}
                 alt=""

components/button-link.tsx

@@ -1,6 +1,5 @@
-import type { ButtonVariant } from '@/components/button'
-import { buttonClasses } from '@/components/button'
-import Link, { type LinkProps } from 'next/link'
+import { buttonClasses, ButtonVariant } from '@/components/button'
+import Link, { LinkProps } from 'next/link'
 import * as React from 'react'
 
 type ButtonLinkProps = {

components/icon-button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonVariant } from '@/components/button'
+import { ButtonVariant } from '@/components/button'
 import { classNames } from '@/lib/classnames'
 import * as React from 'react'
 

components/markdown-editor.tsx

@@ -1,25 +1,24 @@
 import { HtmlView } from '@/components/html-view'
 import { BoldIcon, ItalicIcon, LinkIcon, ListIcon } from '@/components/icons'
 import { browserEnv } from '@/env/browser'
-import { api } from '@/lib/api'
 import { classNames } from '@/lib/classnames'
 import {
   getSuggestionData,
   uploadImageCommandHandler,
   markdownToHtml,
 } from '@/lib/editor'
+import { trpc } from '@/lib/trpc'
 import { Switch } from '@headlessui/react'
 import { matchSorter } from 'match-sorter'
 import * as React from 'react'
 import { useDetectClickOutside } from 'react-detect-click-outside'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery } from 'react-query'
 import TextareaAutosize, {
-  type TextareaAutosizeProps,
+  TextareaAutosizeProps,
 } from 'react-textarea-autosize'
 import getCaretCoordinates from 'textarea-caret'
-import type { TextareaMarkdownRef } from 'textarea-markdown-editor'
-import TextareaMarkdown from 'textarea-markdown-editor'
-import { useItemList, type ItemOptions } from 'use-item-list'
+import TextareaMarkdown, { TextareaMarkdownRef } from 'textarea-markdown-editor'
+import { ItemOptions, useItemList } from 'use-item-list'
 
 type MarkdownEditorProps = {
   label?: string
@@ -358,7 +357,7 @@ function Suggestion({
   const isEmojiType = state.type === 'emoji'
 
   const emojiListQuery = useQuery(
-    ['emojiList'],
+    'emojiList',
     async () => {
       const gemoji = (await import('gemoji')).gemoji
       return gemoji
@@ -369,7 +368,7 @@ function Suggestion({
     }
   )
 
-  const mentionListQuery = api.user.mentionList.useQuery(undefined, {
+  const mentionListQuery = trpc.useQuery(['user.mentionList'], {
     enabled: state.isOpen && isMentionType,
     staleTime: 5 * 60 * 1000,
   })
@@ -381,10 +380,7 @@ function Suggestion({
       keys: ['name'],
     })
       .slice(0, 5)
-      .map((item) => ({
-        label: item.name,
-        value: item.id,
-      })) as SuggestionResult[]
+      .map((item) => ({ label: item.name!, value: item.id }))
   }
 
   if (isEmojiType && emojiListQuery.data) {
@@ -491,13 +487,13 @@ function SuggestionResult({
     index: number
     highlight: () => void
     select: () => void
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    selected: any
     useHighlighted: () => Boolean
   }
   suggestionResult: SuggestionResult
 }) {
   const ref = React.useRef<HTMLLIElement>(null)
-  const { id, highlight, select, useHighlighted } = useItem({
+  const { id, index, highlight, select, useHighlighted } = useItem({
     ref,
     value: suggestionResult,
   })

components/menu.tsx

@@ -1,6 +1,6 @@
 import { classNames } from '@/lib/classnames'
 import { Menu as HeadlessMenu, Transition } from '@headlessui/react'
-import Link, { type LinkProps } from 'next/link'
+import Link, { LinkProps } from 'next/link'
 import * as React from 'react'
 
 export function Menu({ children }: { children: React.ReactNode }) {

components/post-form.tsx

@@ -5,7 +5,7 @@ import { MarkdownEditor } from '@/components/markdown-editor'
 import { TextField } from '@/components/text-field'
 import { useLeaveConfirm } from '@/lib/form'
 import * as React from 'react'
-import { Controller, type SubmitHandler, useForm } from 'react-hook-form'
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 
 type FormData = {
   title: string

components/post-summary.tsx

@@ -9,16 +9,16 @@ import {
 } from '@/components/icons'
 import { MAX_LIKED_BY_SHOWN } from '@/components/like-button'
 import { classNames } from '@/lib/classnames'
+import { InferQueryOutput } from '@/lib/trpc'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import { useSession } from 'next-auth/react'
 import { summarize } from '@/lib/text'
 import Link from 'next/link'
 import * as React from 'react'
-import type { RouterOutputs } from '@/lib/api'
 
 export type PostSummaryProps = {
-  post: RouterOutputs['post']['feed']['posts'][number]
+  post: InferQueryOutput<'post.feed'>['posts'][number]
   hideAuthor?: boolean
   onLike: () => void
   onUnlike: () => void

components/search-dialog.tsx

@@ -1,12 +1,12 @@
 import { SearchIcon, SpinnerIcon } from '@/components/icons'
-import { api, type RouterOutputs } from '@/lib/api'
 import { classNames } from '@/lib/classnames'
+import { InferQueryOutput, trpc } from '@/lib/trpc'
 import { Dialog, Transition } from '@headlessui/react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import * as React from 'react'
 import { useDebounce } from 'use-debounce'
-import { type ItemOptions, useItemList } from 'use-item-list'
+import { ItemOptions, useItemList } from 'use-item-list'
 
 type SearchDialogProps = {
   isOpen: boolean
@@ -22,13 +22,13 @@ function SearchResult({
     index: number
     highlight: () => void
     select: () => void
-    // eslint-disable-next-line @typescript-eslint/ban-types
+    selected: any
     useHighlighted: () => Boolean
   }
-  result: RouterOutputs['post']['search'][number]
+  result: InferQueryOutput<'post.search'>[number]
 }) {
   const ref = React.useRef<HTMLLIElement>(null)
-  const { id, highlight, select, useHighlighted } = useItem({
+  const { id, index, highlight, select, useHighlighted } = useItem({
     ref,
     value: result,
   })
@@ -55,10 +55,13 @@ function SearchField({ onSelect }: { onSelect: () => void }) {
   const [debouncedValue] = useDebounce(value, 1000)
   const router = useRouter()
 
-  const feedQuery = api.post.search.useQuery(
-    {
-      query: debouncedValue,
-    },
+  const feedQuery = trpc.useQuery(
+    [
+      'post.search',
+      {
+        query: debouncedValue,
+      },
+    ],
     {
       enabled: debouncedValue.trim().length > 0,
     }

env/browser.ts

@@ -3,5 +3,6 @@ import { bool, envsafe } from 'envsafe'
 export const browserEnv = envsafe({
   NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD: bool({
     input: process.env.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD,
+    default: false,
   }),
 })

env/server.ts

@@ -1,7 +1,14 @@
-import { bool, envsafe, invalidEnvError, makeValidator, str } from 'envsafe'
+import {
+  bool,
+  envsafe,
+  invalidEnvError,
+  makeValidator,
+  str,
+  url,
+} from 'envsafe'
 import { browserEnv } from './browser'
 
-if (typeof window === 'undefined') {
+if (process.browser) {
   throw new Error(
     'This should only be included on the client (but the env vars wont be exposed)'
   )