Fix linter warnings

website/.eslintrc.json

@@ -6,6 +6,9 @@
     "next/core-web-vitals"
   ],
   "rules": {
-    "sort-imports": "warn"
-  }
+    "unused-imports/no-unused-imports": "warn",
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  },
+  "plugins": ["simple-import-sort", "unused-imports"]
 }

website/package.json

@@ -12,7 +12,10 @@
     "build-storybook": "build-storybook",
     "cypress": "cypress open",
     "cypress:run": "cypress run",
-    "cypress:image-baseline": "cypress-image-diff -u"
+    "cypress:image-baseline": "cypress-image-diff -u",
+    "fix:lint": "eslint --fix src/ --ext .js,.jsx,.ts,.tsx",
+    "fix:format": "prettier --write ./src",
+    "fix": "npm run fix:format && npm run fix:lint"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.4.4",
@@ -31,6 +34,7 @@
     "clsx": "^1.2.1",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^6.5.1",
     "next": "13.0.6",
@@ -64,6 +68,7 @@
     "cypress": "^12.2.0",
     "cypress-image-diff-js": "^1.23.0",
     "eslint-plugin-storybook": "^0.6.8",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "2.8.1",
     "prisma": "^4.7.1",
     "typescript": "4.9.4"

website/src/components/Container.cy.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Container } from "./Container";
 
 describe("<Container />", () => {

website/src/components/Faq.tsx

@@ -1,5 +1,3 @@
-import Link from "next/link";
-
 import { Container } from "./Container";
 
 const faqs = [

website/src/components/Footer.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+
 import { Container } from "./Container";
 
 export function Footer() {

website/src/components/Header/Header.stories.jsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import { Header } from "./Header";
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: "Header/Header",
   component: Header,

website/src/components/Header/Header.tsx

@@ -1,14 +1,13 @@
 import { Button } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
+import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-
-import { signOut, useSession } from "next-auth/react";
-import { FaUser, FaSignOutAlt } from "react-icons/fa";
-import clsx from "clsx";
-
+import { useSession } from "next-auth/react";
+import { FaUser } from "react-icons/fa";
 import { Container } from "src/components/Container";
+
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
 

website/src/components/Header/NavLinks.stories.jsx

@@ -1,5 +1,6 @@
 import { NavLinks } from "./NavLinks";
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: "Header/NavLinks",
   component: NavLinks,

website/src/components/Header/NavLinks.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import Link from "next/link";
 import { AnimatePresence, motion } from "framer-motion";
+import Link from "next/link";
+import { useState } from "react";
 
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);

website/src/components/Header/UserMenu.stories.jsx

@@ -3,6 +3,7 @@ import React from "react";
 
 import UserMenu from "./UserMenu";
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: "Header/UserMenu",
   component: UserMenu,

website/src/components/Header/UserMenu.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { signOut, useSession } from "next-auth/react";
-import Image from "next/image";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
+import Image from "next/image";
+import { signOut, useSession } from "next-auth/react";
+import React from "react";
 import { FaCog, FaSignOutAlt } from "react-icons/fa";
 
 export function UserMenu() {
@@ -12,7 +12,6 @@ export function UserMenu() {
     return <></>;
   }
   if (session && session.user) {
-    const email = session.user.email;
     const accountOptions = [
       {
         name: "Account Settings",

website/src/components/Header/index.ts

@@ -1,3 +1,3 @@
 export { Header } from "./Header";
-export { UserMenu } from "./UserMenu";
 export { NavLinks } from "./NavLinks";
+export { UserMenu } from "./UserMenu";

website/src/components/Hero.tsx

@@ -1,5 +1,5 @@
-import { useId } from "react";
 import Image from "next/image";
+import { useId } from "react";
 
 import { Container } from "./Container";
 

website/src/components/Layout.tsx

@@ -1,9 +1,9 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import type { NextPage } from "next";
+import { Header } from "src/components/Header";
 
 import { Footer } from "./Footer";
-import { Header } from "src/components/Header";
 
 export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;

website/src/components/Loading/Loading.stories.jsx

@@ -1,5 +1,6 @@
 import { LoadingScreen } from "./LoadingScreen";
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: "Example/LoadingScreen",
   component: LoadingScreen,

website/src/components/RankItem.tsx

@@ -2,8 +2,8 @@ const RankItem = ({ username, score }) => {
   return (
     <div className="flex flex-row justify-between p-6 border-2 border-slate-100 text-left font-semibold hover:bg-sky-50">
       <div>1</div>
-      <div>@username</div>
-      <div>20.5</div>
+      <div>{username}</div>
+      <div>{score}</div>
       <div>gold</div>
     </div>
   );

website/src/components/RatingRadioGroup.tsx

@@ -1,7 +1,7 @@
 import { Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react";
 
 const RatingRadioButton = (props) => {
-  const { state, getInputProps, getCheckboxProps } = useRadio(props);
+  const { getInputProps, getCheckboxProps } = useRadio(props);
 
   const input = getInputProps();
   const checkbox = getCheckboxProps();

website/src/components/Sortable/Sortable.tsx

@@ -1,8 +1,9 @@
-import { DndContext, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
-import { ReactNode, useEffect, useState } from "react";
-import { SortableContext, arrayMove, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
 import { Flex } from "@chakra-ui/react";
+import { closestCenter, DndContext, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+import type { DragEndEvent } from "@dnd-kit/core/dist/types/events";
+import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { ReactNode, useEffect, useState } from "react";
+
 import { SortableItem } from "./SortableItem";
 
 export interface SortableProps {

website/src/components/Sortable/SortableItem.tsx

@@ -1,6 +1,6 @@
+import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { PropsWithChildren } from "react";
-import { useSortable } from "@dnd-kit/sortable";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

website/src/components/TaskInfo/TaskInfo.tsx

@@ -1,4 +1,4 @@
-export const TaskInfo = ({ id, output }: { id: string; output: any }) => {
+export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
   return (
     <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
       <b>Prompt</b>

website/src/components/TaskSelection/TaskSelection.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { TaskOptions } from "./TaskOptions";
 import { Flex } from "@chakra-ui/react";
+import React from "react";
+
 import { TaskOption } from "./TaskOption";
+import { TaskOptions } from "./TaskOptions";
 
 export const TaskSelection = () => {
   return (

website/src/components/TaskSelection/index.ts

@@ -1,3 +1,3 @@
-export { TaskSelection } from "./TaskSelection";
-export { TaskOptions } from "./TaskOptions";
 export { TaskOption } from "./TaskOption";
+export { TaskOptions } from "./TaskOptions";
+export { TaskSelection } from "./TaskSelection";

website/src/pages/404.tsx

@@ -1,8 +1,4 @@
-import { useSession } from "next-auth/react";
-import { Footer } from "../components/Footer";
-import { Header } from "src/components/Header";
 import Head from "next/head";
-import Link from "next/link";
 
 export default function Error() {
   return (

website/src/pages/_app.tsx

@@ -1,14 +1,14 @@
+import "../styles/globals.css";
+import "focus-visible";
+
 import { ChakraProvider } from "@chakra-ui/react";
-import { SessionProvider } from "next-auth/react";
-import { Inter } from "@next/font/google";
 import { extendTheme } from "@chakra-ui/react";
+import { Inter } from "@next/font/google";
 import type { AppProps } from "next/app";
+import { SessionProvider } from "next-auth/react";
+import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
 
-import { NextPageWithLayout, getDefaultLayout } from "src/components/Layout";
-
-import "../styles/globals.css";
-import "focus-visible";
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",

website/src/pages/account/edit.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
-import { useSession } from "next-auth/react";
-import { Button, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Button, Input, InputGroup } from "@chakra-ui/react";
 import Head from "next/head";
 import Router from "next/router";
+import { useSession } from "next-auth/react";
+import React, { useState } from "react";
 
 export default function Account() {
   const { data: session } = useSession();

website/src/pages/account/index.tsx

@@ -1,13 +1,14 @@
+import { Button } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
-import React, { useState } from "react";
 import { useSession } from "next-auth/react";
-import { Button } from "@chakra-ui/react";
+import React, { useState } from "react";
 
 export default function Account() {
   const { data: session } = useSession();
   const [username, setUsername] = useState("null");
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleUpdate = async () => {
     const response = await fetch("../api/update", {
       method: "POST",