Added eslint, removed react-query

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 = () => {