Merge pull request #30 from kshxtij/fix-all-eslint-warnings

Fix Eslint CI warnings

Author: yutotakano

frontend/src/api/favourite.ts

@@ -2,7 +2,7 @@ import { fetchGet, fetchPost } from "./fetch-utils";
 
 export const addNewFavourite = async (slug: string) => {
   const url = `/api/favourites/add/${slug}/`;
-  const success = await fetchPost(`/api/favourites/add/${slug}/`, {})
+  await fetchPost(url, {})
 };;
 
 

frontend/src/app.tsx

@@ -1,6 +1,5 @@
 import {
   Button,
-  Badge,
   MantineProvider,
   Box,
   Affix,
@@ -9,13 +8,12 @@ import {
   Indicator,
   MantineColorsTuple,
   CSSVariablesResolver,
-  useMantineColorScheme,
   SegmentedControl,
 } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@mantine/charts/styles.css";
 import React, { useEffect, useState } from "react";
-import { Redirect, Route, Switch, useLocation } from "react-router-dom";
+import { Redirect, Route, Switch } from "react-router-dom";
 import tinycolor from "tinycolor2";
 import { fetchGet, getCookie } from "./api/fetch-utils";
 import { notLoggedIn, SetUserContext, User, UserContext } from "./auth";

frontend/src/components/Editor/EditorFooter.tsx

@@ -1,6 +1,5 @@
 import { Button, Group, Modal } from "@mantine/core";
 import * as React from "react";
-import { useCallback, useState } from "react";
 import { ImageHandle } from "./utils/types";
 import EditorHelp from "./EditorHelp";
 import classes from "./EditorFooter.module.css";
@@ -16,7 +15,7 @@ const EditorFooter: React.FC<Props> = ({
   onDelete,
   onOpenOverlay,
 }) => {
-  const [isHelpOpen, {toggle: toggleHelpModal, close: closeHelpModal}] = useDisclosure();
+  const [isHelpOpen, { toggle: toggleHelpModal, close: closeHelpModal }] = useDisclosure();
   return (
     <div>
       <Group justify="right" className={classes.row}>

frontend/src/components/Navbar/MobileHeader.tsx

@@ -5,8 +5,6 @@ import {
   Container,
   Group,
   Stack,
-  useMantineTheme,
-  Text,
 } from "@mantine/core";
 import { useLocalStorageState } from "@umijs/hooks";
 import { NavItem, translate } from "./GlobalNav";
@@ -30,7 +28,6 @@ const BottomHeader: React.FC<Props> = ({
   loginButton,
   signet,
 }) => {
-  const theme = useMantineTheme();
   const [opened, setOpened] = React.useState(false);
   const [uwu, _] = useLocalStorageState("uwu", false);
 

frontend/src/components/answer-section.tsx

@@ -164,7 +164,7 @@ const AnswerSectionComponent: React.FC<Props> = React.memo(
     const user = useUser()!;
     const isCatAdmin = user.isCategoryAdmin;
 
-    const [deleteWarningIsOpen, {open: openDeleteWarning, close: closeDeleteWarning}] = useDisclosure();
+    const [deleteWarningIsOpen, { open: openDeleteWarning, close: closeDeleteWarning }] = useDisclosure();
     const hideAnswerSection = async () => {
       await onHasAnswersChange();
       closeDeleteWarning();
@@ -198,41 +198,41 @@ const AnswerSectionComponent: React.FC<Props> = React.memo(
         />
         {((cutName && cutName.length > 0) ||
           (isCatAdmin && displayEmptyCutLabels)) && (
-          <NameCard id={id}>
-            {isEditingName ? (
-              <Group>
-                <TextInput
-                  value={draftName}
-                  placeholder="Name"
-                  onChange={e => setDraftName(e.target.value)}
-                />
-                <IconButton
-                  variant="filled"
-                  tooltip="Save PDF section name"
-                  icon={<IconDeviceFloppy />}
-                  onClick={() => {
-                    setIsEditingName(false);
-                    onCutNameChange(draftName);
-                  }}
-                />
-              </Group>
-            ) : (
-              <Flex justify="space-between" align="center">
-                <Text fw={700} m={0}>
-                  {cutName}
-                </Text>
-                {isCatAdmin && (
+            <NameCard id={id}>
+              {isEditingName ? (
+                <Group>
+                  <TextInput
+                    value={draftName}
+                    placeholder="Name"
+                    onChange={e => setDraftName(e.target.value)}
+                  />
                   <IconButton
                     variant="filled"
-                    tooltip="Edit PDF section name"
-                    icon={<IconEdit />}
-                    onClick={() => setIsEditingName(true)}
+                    tooltip="Save PDF section name"
+                    icon={<IconDeviceFloppy />}
+                    onClick={() => {
+                      setIsEditingName(false);
+                      onCutNameChange(draftName);
+                    }}
                   />
-                )}
-              </Flex>
-            )}
-          </NameCard>
-        )}
+                </Group>
+              ) : (
+                <Flex justify="space-between" align="center">
+                  <Text fw={700} m={0}>
+                    {cutName}
+                  </Text>
+                  {isCatAdmin && (
+                    <IconButton
+                      variant="filled"
+                      tooltip="Edit PDF section name"
+                      icon={<IconEdit />}
+                      onClick={() => setIsEditingName(true)}
+                    />
+                  )}
+                </Flex>
+              )}
+            </NameCard>
+          )}
         <Container fluid pb="md" px="md">
           {!hidden && data && (
             <div>
@@ -254,8 +254,8 @@ const AnswerSectionComponent: React.FC<Props> = React.memo(
             </div>
           )}
           <AnswerSectionButtonWrapper
-            bg={computedColorScheme == "light" ? "gray.0" : "dark.7"}
-            // color={isBeingMoved || !has_answers ? "primary" : undefined}
+            bg={computedColorScheme === "light" ? "gray.0" : "dark.7"}
+          // color={isBeingMoved || !has_answers ? "primary" : undefined}
           >
             <div>
               {data === undefined ? (
@@ -296,7 +296,7 @@ const AnswerSectionComponent: React.FC<Props> = React.memo(
                       !isBeingMoved &&
                       data.answers.length > 0 && (
                         <>
-                          <Button onClick={onToggleHidden} variant={hidden ? "filled" : "outline"} leftSection={hidden ? <IconChevronDown /> : <IconChevronUp /> }>
+                          <Button onClick={onToggleHidden} variant={hidden ? "filled" : "outline"} leftSection={hidden ? <IconChevronDown /> : <IconChevronUp />}>
                             {hidden ? "Show Answers" : "Hide Answers"}
                           </Button>
                         </>

frontend/src/components/answer.tsx

@@ -10,7 +10,7 @@ import {
   Box,
   Paper,
 } from "@mantine/core";
-import { differenceInSeconds, formatDistanceToNow } from "date-fns";
+import { differenceInSeconds } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { Link } from "react-router-dom";
 import { imageHandler } from "../api/fetch-utils";
@@ -69,7 +69,7 @@ const AnswerComponent: React.FC<Props> = ({
   onSectionChanged,
   hasId = true,
 }) => {
-  const [viewSource, {toggle: toggleViewSource}] = useDisclosure();
+  const [viewSource, { toggle: toggleViewSource }] = useDisclosure();
   const [setFlaggedLoading, setFlagged] = useSetFlagged(onSectionChanged);
   const [resetFlaggedLoading, resetFlagged] =
     useResetFlaggedVote(onSectionChanged);

frontend/src/components/category-card.tsx

@@ -42,7 +42,7 @@ const CategoryCard: React.FC<Props> = ({ category, onFavouriteToggle: refresh })
   // Find a secondary text color to use based on the current color scheme, for
   // the document count, exam count, and answer progress.
   const computedColorScheme = useComputedColorScheme('light');
-  const subTextColor = computedColorScheme == "light" ? "gray.8" : "gray.5";
+  const subTextColor = computedColorScheme === "light" ? "gray.8" : "gray.5";
 
   const [favouriteLoading, add] = useMutation(addNewFavourite, res => {
     refresh();

frontend/src/components/comment-single.tsx

@@ -1,5 +1,5 @@
 import { Anchor, Box, Breadcrumbs, Card, Divider, Text } from "@mantine/core";
-import { differenceInSeconds, formatDistanceToNow } from "date-fns";
+import { differenceInSeconds } from "date-fns";
 import React from "react";
 import { Link } from "react-router-dom";
 import { SingleComment } from "../interfaces";

frontend/src/components/comment.tsx

@@ -1,4 +1,4 @@
-import { differenceInSeconds, formatDistanceToNow } from "date-fns";
+import { differenceInSeconds } from "date-fns";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { addNewComment, removeComment, updateComment } from "../api/comment";
@@ -11,7 +11,6 @@ import Editor from "./Editor";
 import { UndoStack } from "./Editor/utils/undo-stack";
 import CodeBlock from "./code-block";
 import MarkdownText from "./markdown-text";
-import SmallButton from "./small-button";
 import { Anchor, Button, Flex, Group, Paper, Text } from "@mantine/core";
 import {
   IconCode,
@@ -36,7 +35,7 @@ const CommentComponent: React.FC<Props> = ({
   onSectionChanged,
   onDelete,
 }) => {
-  const [viewSource, {toggle: toggleViewSource}] = useDisclosure();
+  const [viewSource, { toggle: toggleViewSource }] = useDisclosure();
   const { isAdmin, username } = useUser()!;
   const [confirm, modals] = useConfirm();
   const [editing, setEditing] = useState(false);

frontend/src/components/create-document-modal.tsx

@@ -2,7 +2,6 @@ import { Button, TextInput, Modal, Stack } from "@mantine/core";
 import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 import { useCreateDocument } from "../api/hooks";
-import { useUser } from "../auth";
 import { IconPlus } from "@tabler/icons-react";
 
 interface Props {

frontend/src/components/document-comment.tsx

@@ -7,7 +7,7 @@ import {
   Modal,
   Text,
 } from "@mantine/core";
-import { differenceInSeconds, formatDistanceToNow } from "date-fns";
+import { differenceInSeconds } from "date-fns";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { imageHandler } from "../api/fetch-utils";
@@ -141,7 +141,7 @@ const DocumentCommentComponent = ({ documentSlug, comment, mutate }: Props) => {
               </Button.Group>
             )}
           </Flex>
-          <Divider/>
+          <Divider />
         </Card.Section>
         <MarkdownText value={comment.text} />
       </Card>

frontend/src/components/document-list.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Flex, Group, Paper, Tooltip, Title, useComputedColorScheme } from "@mantine/core";
+import { Alert, Flex, Group, Tooltip, Title, useComputedColorScheme } from "@mantine/core";
 import React, { useEffect, useState } from "react";
 import { loadDocumentTypes, useDocuments } from "../api/hooks";
 import CreateDocumentForm from "./create-document-modal";
@@ -14,7 +14,7 @@ interface Props {
 }
 
 const DocumentList: React.FC<Props> = ({ slug }) => {
-  const [isOpen, {open, close}] = useDisclosure();
+  const [isOpen, { open, close }] = useDisclosure();
   const [documents] = useDocuments(slug);
   const [docTypes, setDocTypes] = useState<string[] | null>(null);
   const [sortedDocs, setSortedDocs] = useState<
@@ -74,7 +74,7 @@ const DocumentList: React.FC<Props> = ({ slug }) => {
             <ShimmerButton
               onClick={open}
               leftSection={<IconPlus />}
-              color={computedColorScheme == "dark" ? "compsocMain" : "dark"}
+              color={computedColorScheme === "dark" ? "compsocMain" : "dark"}
               variant="outline"
             >
               Add document

frontend/src/components/document-pdf.tsx

@@ -63,7 +63,7 @@ const DocumentPdf: React.FC<DocumentPdfProps> = ({ url }) => {
       Object.fromEntries(getPages(renderer).map(pageNumber =>
         [pageNumber, (v: boolean) => inViewChange(pageNumber, v)],
       )),
-    [renderer],
+    [renderer, inViewChange],
   );
 
   return (
@@ -101,7 +101,7 @@ const DocumentPdf: React.FC<DocumentPdfProps> = ({ url }) => {
         maxWidth={maxWidth}
         setMaxWidth={setMaxWidth}
         inViewPages={inViewPages}
-        />
+      />
     </>
   );
 };

frontend/src/components/exam-list.tsx

@@ -2,7 +2,6 @@ import {
   Alert,
   Box,
   Button,
-  Container,
   Flex,
   Group,
   Loader,
@@ -90,7 +89,7 @@ const ExamList: React.FC<ExamListProps> = ({ metaData }) => {
           <ShimmerButton
             onClick={() => setFormIsOpen(true)}
             leftSection={<IconPlus />}
-            color={computedColorScheme == "dark" ? "compsocMain" : "dark"}
+            color={computedColorScheme === "dark" ? "compsocMain" : "dark"}
             variant="outline"
           >
             Add new exam

frontend/src/components/exam-type-section.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mantine/core";
 import React from "react";
 import examTypeClasses from "./exam-type-section.module.css";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { fetchPost } from "../api/fetch-utils";
 import { useUser } from "../auth";
 import useConfirm from "../hooks/useConfirm";
@@ -46,7 +46,6 @@ const ExamTypeSection: React.FC<ExamTypeCardProps> = ({
 }) => {
   const user = useUser()!;
   const catAdmin = user.isCategoryAdmin;
-  const history = useHistory();
   const allSelected = exams.every(exam => selected.has(exam.filename));
   const someSelected = exams.some(exam => selected.has(exam.filename));
   const checked = someSelected;

frontend/src/components/panel-left.tsx

@@ -1,4 +1,4 @@
-import { Button, Title, Tooltip } from "@mantine/core";
+import { Button, Title } from "@mantine/core";
 import React, { CSSProperties } from "react";
 import Transition from "react-transition-group/Transition";
 import { IconMenu2, IconX } from "@tabler/icons-react";

frontend/src/components/pdf-panel-base.tsx

@@ -7,7 +7,7 @@ import {
   Text,
 } from "@mantine/core";
 import { useDebounceFn } from "@umijs/hooks";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import PDF from "../pdf/pdf-renderer";
 import IconButton from "./icon-button";
 import Panel from "./panel";
@@ -24,7 +24,7 @@ interface PdfPanelBaseProps {
   subtitle?: string;
 
   inViewPages?: Set<number>;
-  
+
   /**
    * Use this to limit the pagination to only the specified pages.
    */
@@ -99,7 +99,7 @@ const PdfPanelBase: React.FC<PdfPanelBaseProps> = ({
     () => {
       return inViewPages ? Math.min(...Array.from(inViewPages)) : undefined
     }
-  , [inViewPages])  
+    , [inViewPages])
 
   return (
     <Panel isOpen={isOpen} toggle={toggle}>

frontend/src/components/user-score-card.tsx

@@ -8,7 +8,7 @@ import {
   LoadingOverlay,
   Title,
 } from "@mantine/core";
-import React, { ReactNode } from "react";
+import React from "react";
 import { logout } from "../api/fetch-utils";
 import { useSetUser, useUser } from "../auth";
 import { UserInfo } from "../interfaces";
@@ -20,7 +20,6 @@ import {
   IconLogout,
   IconMessage,
   IconPencil,
-  IconPencilCog,
   IconProps,
 } from "@tabler/icons-react";
 
@@ -71,10 +70,10 @@ const UserScoreCard: React.FC<UserScoreCardProps> = ({
     <>
       <Group justify="space-between" mb="sm">
         <Title order={1} my="md">
-            @{username}{" "}
-            {userInfo &&
-              userInfo.displayName !== username &&
-              `(${userInfo.displayName})`}
+          @{username}{" "}
+          {userInfo &&
+            userInfo.displayName !== username &&
+            `(${userInfo.displayName})`}
         </Title>
 
         {isMyself && (
@@ -105,7 +104,7 @@ const UserScoreCard: React.FC<UserScoreCardProps> = ({
 
       <Container fluid p={0}>
         <SimpleGrid
-          cols={{ base: 1, xs: 2, sm: 3, md: 4}}
+          cols={{ base: 1, xs: 2, sm: 3, md: 4 }}
         >
           {scoreCard(userInfo, "Score", "score", IconChevronUp)}
           {scoreCard(userInfo, "Answers", "score_answers", IconPencil)}