Updated prettier config

client/.prettierrc

@@ -1,4 +1,7 @@
 {
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false
-}
+}

client/cypress.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress';
 
 export default defineConfig({
   component: {
     devServer: {
-      framework: "react",
-      bundler: "vite",
+      framework: 'react',
+      bundler: 'vite',
     },
   },
 

client/cypress/support/component.ts

@@ -14,12 +14,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from 'cypress/react18';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -28,12 +28,12 @@ import { mount } from 'cypress/react18'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mount', mount);
 
 // Example use:
-// cy.mount(<MyComponent />)
+// cy.mount(<MyComponent />)

client/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

client/cypress/tsconfig.json

@@ -3,4 +3,4 @@
   "compilerOptions": {
     "isolatedModules": false
   }
-}
+}

client/package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build --outDir ../dist",
     "preview": "vite preview",
     "lint": "eslint --fix --ext .js,.ts,.tsx ./src --ignore-path .gitignore",
+    "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
     "cypress": "cypress"
   },
   "dependencies": {
@@ -50,4 +51,4 @@
     "vite": "^3.1.0"
   },
   "proxy": "http://localhost:5000"
-}
+}

client/src/App.tsx

@@ -1,10 +1,10 @@
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route } from 'react-router-dom';
 
-import BrowseLayout from "./components/BrowseLayout";
-import CategoryPage from "./pages/CategoryPage";
-import ChannelPage from "./pages/ChannelPage";
-import LoginPage from "./pages/LoginPage";
-import SignupPage from "./pages/SignupPage";
+import BrowseLayout from './components/BrowseLayout';
+import CategoryPage from './pages/CategoryPage';
+import ChannelPage from './pages/ChannelPage';
+import LoginPage from './pages/LoginPage';
+import SignupPage from './pages/SignupPage';
 
 function App() {
   return (

client/src/components/BrowseLayout.tsx

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

client/src/components/Button.tsx

@@ -1,30 +1,25 @@
-import clsx from "clsx";
-import { FC } from "react";
+import clsx from 'clsx';
+import { FC } from 'react';
 
-type ButtonVariants = "filled" | "subtle";
+type ButtonVariants = 'filled' | 'subtle';
 
-interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
   variant?: ButtonVariants;
 }
 
 const getStyling = (variant?: ButtonVariants) => {
   switch (variant) {
-    case "filled":
-      return "bg-neutral-700";
-    case "subtle":
-      return "hover:bg-neutral-500";
+    case 'filled':
+      return 'bg-neutral-700';
+    case 'subtle':
+      return 'hover:bg-neutral-500';
     default:
-      return "bg-neutral-700";
+      return 'bg-neutral-700';
   }
 };
 
 const Button: FC<ButtonProps> = ({ className, variant, ...rest }) => {
-  return (
-    <button
-      className={clsx("rounded-md", getStyling(variant), className)}
-      {...rest}
-    />
-  );
+  return <button className={clsx('rounded-md', getStyling(variant), className)} {...rest} />;
 };
 
 export default Button;

client/src/components/ChatBadge.tsx

@@ -1,9 +1,7 @@
-import { FC } from "react";
+import { FC } from 'react';
 
 const ChatBadge: FC = () => {
-  return (
-    <span className="w-5 h-5 rounded-sm bg-pink-300 inline-block align-middle" />
-  );
+  return <span className="w-5 h-5 rounded-sm bg-pink-300 inline-block align-middle" />;
 };
 
 export default ChatBadge;

client/src/components/ChatMessage.tsx

@@ -1,6 +1,6 @@
-import { FC } from "react";
+import { FC } from 'react';
 
-import ChatBadge from "./ChatBadge";
+import ChatBadge from './ChatBadge';
 
 const ChatMessage: FC = () => {
   return (

client/src/components/FormField.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from 'react';
 
-import Input from "./Input";
+import Input from './Input';
 
-interface FormFieldProps extends React.ComponentPropsWithoutRef<"input"> {
+interface FormFieldProps extends React.ComponentPropsWithoutRef<'input'> {
   label: string;
   bottomElement?: ReactNode;
 }

client/src/components/InlineLink.tsx

@@ -1,36 +1,24 @@
-import clsx from "clsx";
-import { FC } from "react";
-import { NavLink } from "react-router-dom";
+import clsx from 'clsx';
+import { FC } from 'react';
+import { NavLink } from 'react-router-dom';
 
-export interface InlineLinkProps
-  extends React.ComponentPropsWithoutRef<"span"> {
+export interface InlineLinkProps extends React.ComponentPropsWithoutRef<'span'> {
   to: string;
   external?: boolean;
 }
 
-const InlineLink: FC<InlineLinkProps> = ({
-  to,
-  external,
-  className,
-  ...rest
-}) => {
+const InlineLink: FC<InlineLinkProps> = ({ to, external, className, ...rest }) => {
   if (external === true) {
     return (
       <a href={to}>
-        <span
-          className={clsx("text-violet-400 cursor-pointer text-sm", className)}
-          {...rest}
-        />
+        <span className={clsx('text-violet-400 cursor-pointer text-sm', className)} {...rest} />
       </a>
     );
   }
 
   return (
     <NavLink to={to}>
-      <span
-        className={clsx("text-violet-400 cursor-pointer text-sm", className)}
-        {...rest}
-      />
+      <span className={clsx('text-violet-400 cursor-pointer text-sm', className)} {...rest} />
     </NavLink>
   );
 };

client/src/components/Input.tsx

@@ -1,21 +1,19 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-type InputProps = React.ComponentPropsWithoutRef<"input">;
+type InputProps = React.ComponentPropsWithoutRef<'input'>;
 
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...rest }, ref) => {
-    return (
-      <input
-        className={clsx(
-          "bg-zinc-700 rounded-md box-border focus:outline outline-violet-400 text-sm",
-          className
-        )}
-        {...rest}
-        ref={ref}
-      />
-    );
-  }
-);
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...rest }, ref) => {
+  return (
+    <input
+      className={clsx(
+        'bg-zinc-700 rounded-md box-border focus:outline outline-violet-400 text-sm',
+        className
+      )}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
 
 export default Input;

client/src/components/LoginForm.tsx

@@ -1,9 +1,9 @@
-import { FC } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
+import { FC } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 
-import FormField from "./FormField";
-import InlineLink from "./InlineLink";
-import SubmitButton from "./SubmitButton";
+import FormField from './FormField';
+import InlineLink from './InlineLink';
+import SubmitButton from './SubmitButton';
 
 interface LoginFormValues {
   username: string;
@@ -19,12 +19,12 @@ const LoginForm: FC = () => {
       <FormField
         label="Username"
         className="py-2 px-2 outline-2 w-full"
-        {...register("username")}
+        {...register('username')}
       />
       <FormField
         label="Password"
         type="password"
-        {...register("password")}
+        {...register('password')}
         className="py-2 px-2 outline-2 w-full"
         bottomElement={
           <InlineLink to="#" className="block mt-2">

client/src/components/LoginModal.tsx

@@ -1,12 +1,12 @@
-import { Dialog, Tab } from "@headlessui/react";
-import { FC } from "react";
-import { createPortal } from "react-dom";
+import { Dialog, Tab } from '@headlessui/react';
+import { FC } from 'react';
+import { createPortal } from 'react-dom';
 
-import logo from "../assets/images/logo.png";
+import logo from '../assets/images/logo.png';
 
-import LoginForm from "./LoginForm";
-import LoginModalTab from "./LoginModalTab";
-import SignupForm from "./SignupForm";
+import LoginForm from './LoginForm';
+import LoginModalTab from './LoginModalTab';
+import SignupForm from './SignupForm';
 
 export interface LoginModelProps {
   isOpen: boolean;
@@ -21,21 +21,16 @@ 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" alt="logo" /> 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}>
             <Tab.List className="space-x-4 border-b border-b-neutral-100/40 mt-4">
               <Tab>
-                {({ selected }) => (
-                  <LoginModalTab selected={selected}>Log In</LoginModalTab>
-                )}
+                {({ selected }) => <LoginModalTab selected={selected}>Log In</LoginModalTab>}
               </Tab>
               <Tab>
-                {({ selected }) => (
-                  <LoginModalTab selected={selected}>Sign Up</LoginModalTab>
-                )}
+                {({ selected }) => <LoginModalTab selected={selected}>Sign Up</LoginModalTab>}
               </Tab>
             </Tab.List>
             <Tab.Panels className="mt-4">

client/src/components/LoginModalTab.tsx

@@ -1,7 +1,7 @@
-import clsx from "clsx";
-import { FC } from "react";
+import clsx from 'clsx';
+import { FC } from 'react';
 
-interface LoginModalTabProps extends React.ComponentPropsWithoutRef<"p"> {
+interface LoginModalTabProps extends React.ComponentPropsWithoutRef<'p'> {
   selected: boolean;
 }
 
@@ -9,8 +9,8 @@ const LoginModalTab: FC<LoginModalTabProps> = ({ selected, ...rest }) => {
   return (
     <p
       className={clsx(
-        "font-semibold p-1",
-        selected && "text-violet-400 border-b-2 border-b-violet-400"
+        'font-semibold p-1',
+        selected && 'text-violet-400 border-b-2 border-b-violet-400'
       )}
       {...rest}
     />

client/src/components/NavBar.tsx

@@ -1,11 +1,11 @@
-import { UserIcon } from "@heroicons/react/24/outline";
-import { FC, useState } from "react";
+import { UserIcon } from '@heroicons/react/24/outline';
+import { FC, useState } from 'react';
 
-import logo from "../assets/images/logo.png";
+import logo from '../assets/images/logo.png';
 
-import Button from "./Button";
-import Input from "./Input";
-import LoginModal from "./LoginModal";
+import Button from './Button';
+import Input from './Input';
+import LoginModal from './LoginModal';
 
 const NavBar: FC = () => {
   const [showLogin, setShowLogin] = useState(false);
@@ -42,18 +42,12 @@ const NavBar: FC = () => {
         <div className="basis-1/4">
           <ul className="justify-end flex flex-row space-x-3 items-center">
             <li>
-              <Button
-                className="text-sm px-3 py-2 bg-neutral-700"
-                onClick={showLoginTab}
-              >
+              <Button className="text-sm px-3 py-2 bg-neutral-700" onClick={showLoginTab}>
                 Log In
               </Button>
             </li>
             <li>
-              <Button
-                className="text-sm px-3 py-2 bg-violet-500"
-                onClick={showSignupTab}
-              >
+              <Button className="text-sm px-3 py-2 bg-violet-500" onClick={showSignupTab}>
                 Sign Up
               </Button>
             </li>
@@ -65,11 +59,7 @@ const NavBar: FC = () => {
           </ul>
         </div>
       </div>
-      <LoginModal
-        isOpen={showLogin}
-        defaultPage={showTab}
-        onClose={() => setShowLogin(false)}
-      />
+      <LoginModal isOpen={showLogin} defaultPage={showTab} onClose={() => setShowLogin(false)} />
     </nav>
   );
 };

client/src/components/SideNavChannel.tsx

@@ -1,7 +1,7 @@
-import { FC } from "react";
+import { FC } from 'react';
 
-import { numFormatter } from "../lib/format";
-import { Stream } from "../types";
+import { numFormatter } from '../lib/format';
+import { Stream } from '../types';
 
 interface SideNavChannelProps {
   stream: Stream;
@@ -10,11 +10,7 @@ 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}
-        alt="avatar"
-      />
+      <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,14 +1,13 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { FC } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { z } from "zod";
+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 FormField from './FormField';
+import InlineLink from './InlineLink';
+import SubmitButton from './SubmitButton';
 
-const PASSWORD_REGEX =
-  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/;
+const PASSWORD_REGEX = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$ %^&*-]).{8,64}$/;
 
 const SignupFormSchema = z
   .object({
@@ -19,7 +18,7 @@ const SignupFormSchema = z
   })
   .refine((data) => data.password === data.passwordRepeat, {
     message: "Passwords don't match",
-    path: ["passwordRepeat"],
+    path: ['passwordRepeat'],
   });
 
 type SignupFormValues = z.infer<typeof SignupFormSchema>;
@@ -36,34 +35,34 @@ const SignupForm: FC = () => {
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <p className="text-sm">
-        Creating an account allows you to participate in chat, follow your
-        favorite channels, and broadcast from your own channel.
+        Creating an account allows you to participate in chat, follow your favorite channels, and
+        broadcast from your own channel.
       </p>
       <FormField
         label="Username"
-        {...register("username")}
+        {...register('username')}
         className="py-2 px-2 outline-2 w-full"
       />
       <FormField
         label="Password"
-        {...register("password")}
+        {...register('password')}
         type="password"
         className="py-2 px-2 outline-2 w-full"
       />
       <FormField
         label="Confirm Password"
-        {...register("passwordRepeat")}
+        {...register('passwordRepeat')}
         type="password"
         className="py-2 px-2 outline-2 w-full"
       />
       <FormField
         label="Email"
-        {...register("email")}
+        {...register('email')}
         type="email"
         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&apos;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,16 +1,13 @@
-import clsx from "clsx";
-import { FC } from "react";
+import clsx from 'clsx';
+import { FC } from 'react';
 
-type ButtonProps = React.ComponentPropsWithoutRef<"input">;
+type ButtonProps = React.ComponentPropsWithoutRef<'input'>;
 
 const SubmitButton: FC<ButtonProps> = ({ className, ...rest }) => {
   return (
     <input
       type="submit"
-      className={clsx(
-        "rounded-md bg-violet-500 font-semibold py-2 text-sm",
-        className
-      )}
+      className={clsx('rounded-md bg-violet-500 font-semibold py-2 text-sm', className)}
       {...rest}
     />
   );

client/src/lib/format.ts

@@ -1 +1 @@
-export const numFormatter = Intl.NumberFormat("en", { notation: "compact" });
+export const numFormatter = Intl.NumberFormat('en', { notation: 'compact' });

client/src/main.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
-import App from "./App";
-import "./styles/global.css";
+import App from './App';
+import './styles/global.css';
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />

client/src/pages/CategoryPage.tsx

@@ -1,4 +1,4 @@
-import { categories } from "../placeholder/SearchCategories";
+import { categories } from '../placeholder/SearchCategories';
 
 function ChannelPage() {
   const category = categories.data[0];

client/src/pages/ChannelPage.tsx

@@ -1,14 +1,10 @@
-import {
-  ArrowRightIcon,
-  HeartIcon,
-  UserIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowRightIcon, HeartIcon, UserIcon } from '@heroicons/react/24/outline';
 
-import Button from "../components/Button";
-import ChatMessage from "../components/ChatMessage";
-import Input from "../components/Input";
-import { numFormatter } from "../lib/format";
-import streams from "../placeholder/GetStreams";
+import Button from '../components/Button';
+import ChatMessage from '../components/ChatMessage';
+import Input from '../components/Input';
+import { numFormatter } from '../lib/format';
+import streams from '../placeholder/GetStreams';
 
 function ChannelPage() {
   const stream = streams.data[1];

client/src/pages/LoginPage.tsx

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

client/src/pages/SignupPage.tsx

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

client/src/placeholder/GetStreams.ts

@@ -1,45 +1,43 @@
-import { FollowedStreams } from "../types";
+import { FollowedStreams } from '../types';
 
 const streams: FollowedStreams = {
   data: [
     {
-      id: "41375541868",
-      user_id: "459331509",
-      user_login: "auronplay",
-      user_name: "auronplay",
-      game_id: "494131",
-      game_name: "Little Nightmares",
-      type: "live",
-      title: "hablamos y le damos a Little Nightmares 1",
+      id: '41375541868',
+      user_id: '459331509',
+      user_login: 'auronplay',
+      user_name: 'auronplay',
+      game_id: '494131',
+      game_name: 'Little Nightmares',
+      type: 'live',
+      title: 'hablamos y le damos a Little Nightmares 1',
       viewer_count: 78365,
-      started_at: "2021-03-10T15:04:21Z",
-      language: "es",
-      thumbnail_url:
-        "https://static-cdn.jtvnw.net/previews-ttv/live_user_auronplay-250x250.jpg",
+      started_at: '2021-03-10T15:04:21Z',
+      language: 'es',
+      thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_auronplay-250x250.jpg',
       tag_ids: [],
       is_mature: false,
     },
     {
-      id: "41375541869",
-      user_id: "459331510",
-      user_login: "xqcow",
-      user_name: "xqcow",
-      game_id: "494131",
-      game_name: "Just Chatting",
-      type: "live",
-      title: "slam",
+      id: '41375541869',
+      user_id: '459331510',
+      user_login: 'xqcow',
+      user_name: 'xqcow',
+      game_id: '494131',
+      game_name: 'Just Chatting',
+      type: 'live',
+      title: 'slam',
       viewer_count: 56230,
-      started_at: "2022-09-29T14:04:21Z",
-      language: "en",
-      thumbnail_url:
-        "https://static-cdn.jtvnw.net/previews-ttv/live_user_xqcow-250x250.jpg",
+      started_at: '2022-09-29T14:04:21Z',
+      language: 'en',
+      thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_xqcow-250x250.jpg',
       tag_ids: [],
       is_mature: false,
     },
   ],
   pagination: {
     cursor:
-      "eyJiIjp7IkN1cnNvciI6ImV5SnpJam8zT0RNMk5TNDBORFF4TlRjMU1UY3hOU3dpWkNJNlptRnNjMlVzSW5RaU9uUnlkV1Y5In0sImEiOnsiQ3Vyc29yIjoiZXlKeklqb3hOVGs0TkM0MU56RXhNekExTVRZNU1ESXNJbVFpT21aaGJITmxMQ0owSWpwMGNuVmxmUT09In19",
+      'eyJiIjp7IkN1cnNvciI6ImV5SnpJam8zT0RNMk5TNDBORFF4TlRjMU1UY3hOU3dpWkNJNlptRnNjMlVzSW5RaU9uUnlkV1Y5In0sImEiOnsiQ3Vyc29yIjoiZXlKeklqb3hOVGs0TkM0MU56RXhNekExTVRZNU1ESXNJbVFpT21aaGJITmxMQ0owSWpwMGNuVmxmUT09In19',
   },
 };
 

client/src/placeholder/GetUserFollows.ts

@@ -1,28 +1,28 @@
-import { UserFollows } from "../types";
+import { UserFollows } from '../types';
 
 export const following: UserFollows = {
   total: 4,
   data: [
     {
-      from_id: "171003792",
-      from_login: "niku",
-      from_name: "niku",
-      to_id: "23161357",
-      to_name: "LIRIK",
-      to_login: "lirik",
-      followed_at: "2017-08-22T22:55:24Z",
+      from_id: '171003792',
+      from_login: 'niku',
+      from_name: 'niku',
+      to_id: '23161357',
+      to_name: 'LIRIK',
+      to_login: 'lirik',
+      followed_at: '2017-08-22T22:55:24Z',
     },
     {
-      from_id: "171003792",
-      from_login: "niku",
-      from_name: "niku",
-      to_id: "23161358",
-      to_name: "Cowser",
-      to_login: "cowser",
-      followed_at: "2017-08-22T22:55:24Z",
+      from_id: '171003792',
+      from_login: 'niku',
+      from_name: 'niku',
+      to_id: '23161358',
+      to_name: 'Cowser',
+      to_login: 'cowser',
+      followed_at: '2017-08-22T22:55:24Z',
     },
   ],
   pagination: {
-    cursor: "eyJiIjpudWxsLCJhIjoiMTUwMzQ0MTc3NjQyNDQyMjAwMCJ9",
+    cursor: 'eyJiIjpudWxsLCJhIjoiMTUwMzQ0MTc3NjQyNDQyMjAwMCJ9',
   },
 };

client/src/placeholder/SearchCategories.ts

@@ -1,12 +1,12 @@
 export const categories = {
   data: [
     {
-      id: "33214",
-      name: "Just Chatting",
-      box_art_url: "https://static-cdn.jtvnw.net/ttv-boxart/509658-144x192.jpg",
+      id: '33214',
+      name: 'Just Chatting',
+      box_art_url: 'https://static-cdn.jtvnw.net/ttv-boxart/509658-144x192.jpg',
     },
   ],
   pagination: {
-    cursor: "eyJiIjpudWxsLCJhIjp7IkN",
+    cursor: 'eyJiIjpudWxsLCJhIjp7IkN',
   },
 };

client/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});