Added eslint, removed react-query

client/.eslintrc.cjs

@@ -0,0 +1,84 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  parserOptions: { ecmaVersion: 8, sourceType: "module" },
+  ignorePatterns: ["node_modules/*"],
+  extends: ["eslint:recommended"],
+  overrides: [
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        react: { version: "detect" },
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+      env: {
+        browser: true,
+        node: true,
+        es6: true,
+      },
+      extends: [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:prettier/recommended",
+        "plugin:testing-library/react",
+        "plugin:jest-dom/recommended",
+      ],
+      rules: {
+        "react/display-name": "off",
+        "no-restricted-imports": [
+          "error",
+          {
+            patterns: ["@/features/*/*"],
+          },
+        ],
+        "linebreak-style": ["error", "unix"],
+        "react/prop-types": "off",
+
+        "import/order": [
+          "error",
+          {
+            groups: [
+              "builtin",
+              "external",
+              "internal",
+              "parent",
+              "sibling",
+              "index",
+              "object",
+            ],
+            "newlines-between": "always",
+            alphabetize: { order: "asc", caseInsensitive: true },
+          },
+        ],
+        "import/default": "off",
+        "import/no-named-as-default-member": "off",
+        "import/no-named-as-default": "off",
+
+        "react/react-in-jsx-scope": "off",
+
+        "jsx-a11y/anchor-is-valid": "off",
+
+        "@typescript-eslint/no-unused-vars": ["error"],
+
+        "@typescript-eslint/explicit-function-return-type": ["off"],
+        "@typescript-eslint/explicit-module-boundary-types": ["off"],
+        "@typescript-eslint/no-empty-function": ["off"],
+        "@typescript-eslint/no-explicit-any": ["off"],
+
+        "prettier/prettier": ["error", {}, { usePrettierrc: true }],
+      },
+    },
+  ],
+};

client/package.json

@@ -7,13 +7,13 @@
     "dev": "vite",
     "build": "tsc && vite build --outDir ../dist",
     "preview": "vite preview",
+    "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
     "cypress": "cypress"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.2",
     "@heroicons/react": "^2.0.11",
     "@hookform/resolvers": "^2.9.8",
-    "@tanstack/react-query": "^4.7.2",
     "axios": "^0.27.2",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
@@ -27,9 +27,22 @@
     "@testing-library/cypress": "^8.0.3",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
     "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.12",
     "cypress": "^10.9.0",
+    "eslint": "^8.24.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest-dom": "^4.0.2",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.7.2",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.1.8",

client/src/App.tsx

@@ -1,4 +1,5 @@
 import { Routes, Route } from "react-router-dom";
+
 import BrowseLayout from "./components/BrowseLayout";
 import CategoryPage from "./pages/CategoryPage";
 import ChannelPage from "./pages/ChannelPage";

client/src/components/BrowseLayout.tsx

@@ -1,10 +1,10 @@
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { Outlet, NavLink } from "react-router-dom";
+
 import Button from "../components/Button";
 import NavBar from "../components/NavBar";
 import SideNavChannel from "../components/SideNavChannel";
-import { Outlet } from "react-router-dom";
 import streamData from "../placeholder/GetStreams";
-import { NavLink } from "react-router-dom";
 
 function BrowseLayout() {
   return (

client/src/components/Button.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import clsx from "clsx";
+import { FC } from "react";
 
 type ButtonVariants = "filled" | "subtle";
 

client/src/components/ChatMessage.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+
 import ChatBadge from "./ChatBadge";
 
 const ChatMessage: FC = () => {
@@ -13,6 +14,7 @@ const ChatMessage: FC = () => {
       <span className="break-all align-middle">
         <img
           src="https://cdn.7tv.app/emote/60afbe0599923bbe7fe9bae1/2x"
+          alt="Poggies"
           className="inline w-7 h-7"
         />
       </span>

client/src/components/FormField.tsx

@@ -1,4 +1,5 @@
-import { FC, forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
+
 import Input from "./Input";
 
 interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {

client/src/components/InlineLink.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import clsx from "clsx";
+import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
 export interface InlineLinkProps

client/src/components/Input.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { forwardRef } from "react";
 
-interface InputProps extends React.ComponentPropsWithoutRef<"input"> {}
+type InputProps = React.ComponentPropsWithoutRef<"input">;
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ className, ...rest }, ref) => {

client/src/components/LoginForm.tsx

@@ -20,7 +20,6 @@ const LoginForm: FC = () => {
         label="Username"
         className="py-2 px-2 outline-2 w-full"
         {...register("username")}
-        autoFocus
       />
       <FormField
         label="Password"

client/src/components/LoginModal.tsx

@@ -1,8 +1,9 @@
+import { Dialog, Tab } from "@headlessui/react";
 import { FC } from "react";
-import { Dialog } from "@headlessui/react";
 import { createPortal } from "react-dom";
-import { Tab } from "@headlessui/react";
+
 import logo from "../assets/images/logo.png";
+
 import LoginForm from "./LoginForm";
 import LoginModalTab from "./LoginModalTab";
 import SignupForm from "./SignupForm";
@@ -20,8 +21,8 @@ const LoginModal: FC<LoginModelProps> = ({ defaultPage, isOpen, onClose }) => {
         <Dialog.Panel className="bg-zinc-900 text-gray-100 w-[420px] rounded-md py-12 px-6">
           <div className="flex flex-row items-center justify-center">
             <Dialog.Title className="text-xl">
-              <img src={logo} className="inline w-12 h-12" /> Log in to
-              twitch-clone
+              <img src={logo} className="inline w-12 h-12" alt="logo" /> Log in
+              to twitch-clone
             </Dialog.Title>
           </div>
           <Tab.Group defaultIndex={defaultPage}>

client/src/components/LoginModalTab.tsx

@@ -1,5 +1,5 @@
-import { FC } from "react";
 import clsx from "clsx";
+import { FC } from "react";
 
 interface LoginModalTabProps extends React.ComponentPropsWithoutRef<"p"> {
   selected: boolean;

client/src/components/NavBar.tsx

@@ -1,9 +1,11 @@
-import { TvIcon, UserIcon } from "@heroicons/react/24/outline";
+import { UserIcon } from "@heroicons/react/24/outline";
 import { FC, useState } from "react";
+
+import logo from "../assets/images/logo.png";
+
 import Button from "./Button";
 import Input from "./Input";
 import LoginModal from "./LoginModal";
-import logo from "../assets/images/logo.png";
 
 const NavBar: FC = () => {
   const [showLogin, setShowLogin] = useState(false);
@@ -25,7 +27,7 @@ const NavBar: FC = () => {
         <div className="basis-1/4">
           <ul className="flex flex-row space-x-8 items-center">
             <li>
-              <img src={logo} className="w-8 h-8" />
+              <img src={logo} className="w-8 h-8" alt="logo" />
             </li>
             <li>
               <p className="text-lg">Browse</p>

client/src/components/SideNavChannel.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+
 import { numFormatter } from "../lib/format";
 import { Stream } from "../types";
 
@@ -9,7 +10,11 @@ interface SideNavChannelProps {
 const SideNavChannel: FC<SideNavChannelProps> = ({ stream }) => {
   return (
     <div className="flex flex-row px-3 py-2 text-sm leading-4 space-x-2 hover:bg-neutral-700/40 cursor-pointer">
-      <img className="rounded-full w-8 h-8" src={stream.thumbnail_url} />
+      <img
+        className="rounded-full w-8 h-8"
+        src={stream.thumbnail_url}
+        alt="avatar"
+      />
       <div className="flex flex-col flex-1">
         <div className="flex flex-row justify-between">
           <div className="font-bold">{stream.user_name}</div>

client/src/components/SignupForm.tsx

@@ -1,12 +1,11 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { FC } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+
 import FormField from "./FormField";
 import InlineLink from "./InlineLink";
 import SubmitButton from "./SubmitButton";
-import axios from "axios";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
 
 const PASSWORD_REGEX =
   /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/;
@@ -26,28 +25,12 @@ const SignupFormSchema = z
 type SignupFormValues = z.infer<typeof SignupFormSchema>;
 
 const SignupForm: FC = () => {
-  const queryClient = useQueryClient();
-  const signUp = useMutation(
-    ({ username, password, email }: SignupFormValues) => {
-      return axios.post<{ access_token: string }>("/auth/signup", {
-        username,
-        password,
-        email,
-      });
-    },
-    {
-      onSuccess: (resp) => {
-        // TODO: store access token as HTTP-Only cookie
-      },
-    }
-  );
-
   const { register, handleSubmit } = useForm<SignupFormValues>({
     resolver: zodResolver(SignupFormSchema),
   });
 
   const onSubmit: SubmitHandler<SignupFormValues> = (data) => {
-    signUp.mutate(data);
+    console.log({ data });
   };
 
   return (
@@ -60,7 +43,6 @@ const SignupForm: FC = () => {
         label="Username"
         {...register("username")}
         className="py-2 px-2 outline-2 w-full"
-        autoFocus
       />
       <FormField
         label="Password"
@@ -81,7 +63,7 @@ const SignupForm: FC = () => {
         className="py-2 px-2 outline-2 w-full"
       />
       <p className="text-sm text-center">
-        By clicking Sign Up, you are agreeing to twitch-clone's{" "}
+        By clicking Sign Up, you are agreeing to twitch-clone&apos;s{" "}
         <InlineLink to="https://tosdr.org/en/service/200" external>
           Terms of Service
         </InlineLink>

client/src/components/SubmitButton.tsx

@@ -1,7 +1,7 @@
-import { FC } from "react";
 import clsx from "clsx";
+import { FC } from "react";
 
-interface ButtonProps extends React.ComponentPropsWithoutRef<"input"> {}
+type ButtonProps = React.ComponentPropsWithoutRef<"input">;
 
 const SubmitButton: FC<ButtonProps> = ({ className, ...rest }) => {
   return (

client/src/main.tsx

@@ -1,18 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import App from "./App";
 import "./styles/global.css";
 
-const queryClient = new QueryClient();
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
-      <QueryClientProvider client={queryClient}>
-        <App />
-      </QueryClientProvider>
+      <App />
     </BrowserRouter>
   </React.StrictMode>
 );

client/src/pages/CategoryPage.tsx

@@ -7,7 +7,7 @@ function ChannelPage() {
       <div className="bg-neutral-900 flex-1 text-gray-100">
         <div className="max-w-[200rem] mx-12 mt-12">
           <div className="flex flex-row items-center space-x-4">
-            <img src={category.box_art_url} />
+            <img src={category.box_art_url} alt={category.name} />
             <div className="">
               <h1>{category.name}</h1>
               <div>

client/src/pages/ChannelPage.tsx

@@ -3,6 +3,7 @@ import {
   HeartIcon,
   UserIcon,
 } from "@heroicons/react/24/outline";
+
 import Button from "../components/Button";
 import ChatMessage from "../components/ChatMessage";
 import Input from "../components/Input";

client/src/pages/LoginPage.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+
 import LoginModal from "../components/LoginModal";
 
 const LoginPage: FC = () => {

client/src/pages/SignupPage.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+
 import LoginModal from "../components/LoginModal";
 
 const SignupPage: FC = () => {