chore(lint): small clean up of lint errors wip on #312

src/SidebarProvider.tsx

@@ -24,7 +24,7 @@ export const SidebarProvider: FC = ({ children }) => {
     } else {
       setCurrent(null)
     }
-  }, [location])
+  }, [location, getSecondLevel])
 
   const memoizedContextValue = useMemo(
     () => ({

src/components/ArchivesSidebar/index.tsx

@@ -4,7 +4,7 @@ import React, { FC, HTMLAttributes } from "react"
 import useBuildTree from "../../hooks/useBuildTree"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 import useSidebar from "../../hooks/useSidebar"
-import { IAllArchivesQuery, IFileOrFolder } from "../../types"
+import { IFileOrFolder } from "../../types"
 import { humanize } from "../../utils"
 import { Sidebar } from "../Sidebar"
 import * as SC from "./styles"
@@ -50,7 +50,7 @@ export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
   return (
     <Sidebar {...props}>
       {sortedTree.map((node) => (
-        <Tree item={node} />
+        <Tree item={node} key={node.path} />
       ))}
     </Sidebar>
   )

src/components/FourZeroFour/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment } from "react"
+import React, { FC } from "react"
 import * as SC from "./styles"
 
 interface IPossibleCorrections {

src/components/FourZeroFourHint/index.tsx

@@ -100,7 +100,7 @@ export const FourZeroFourHint: FC<IFourZeroFourHint> = ({
   return (
     <Fragment>
       <SC.StyledDiv>
-        <h3>Based off of "{search}" you may have meant:</h3>
+        <h3>Based off of &quot;{search}&quot; you may have meant:</h3>
         {found}
       </SC.StyledDiv>
       <ul>

src/components/Home/index.tsx

@@ -4,6 +4,7 @@ import { DiscordButton } from "../DiscordButton"
 import { HomePartner } from "../HomePartner"
 import { WavesBottom, WavesTop } from "../Waves"
 import * as SC from "./styles"
+import { OutMode, MoveDirection } from "react-particles-js"
 
 interface IMenuItemProps {
   to: string
@@ -33,6 +34,7 @@ export const Home: FC = () => {
       <SC.StyledParticles
         params={{
           particles: {
+            /* eslint-disable-next-line id-blacklist */
             number: { value: 5, density: { enable: true, value_area: 500 } },
             color: { value: "#ffffff" },
             opacity: {
@@ -51,10 +53,10 @@ export const Home: FC = () => {
             move: {
               enable: true,
               speed: 1.5,
-              direction: "top",
+              direction: MoveDirection.top,
               random: false,
               straight: false,
-              out_mode: "out",
+              out_mode: OutMode.out,
               bounce: false,
               attract: { enable: false },
             },
@@ -67,7 +69,7 @@ export const Home: FC = () => {
           <Link to="/">
             <SC.Logo />
           </Link>
-          <SC.Title>The Programmer's Hangout</SC.Title>
+          <SC.Title>The Programmer&apos;s Hangout</SC.Title>
         </SC.TitleWrapper>
         <SC.Menu>
           <MenuItem to="/about">about</MenuItem>

src/components/ResourcesList/index.tsx

@@ -67,6 +67,8 @@ const Language = memo(
   }
 )
 
+Language.displayName = "Language"
+
 function sortTree(tree: IFileOrFolder[]) {
   return sort((a, b) => a.title.localeCompare(b.title), tree)
 }

src/components/ResourcesSidebar/index.tsx

@@ -141,6 +141,8 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
   )
 })
 
+FirstLevelFolder.displayName = "FirstLevelFolder"
+
 const ResourceList: FC<{
   items: IFileOrFolder[]
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>

src/components/ResourcesSidebar/useMatchingPath.tsx

@@ -8,5 +8,5 @@ export default function useMatchingPath(path: string, callback: () => void) {
     if (isMatchingPath(path)) {
       callback()
     }
-  }, [])
+  }, [path, isMatchingPath, callback])
 }

src/components/Sidebar/index.tsx

@@ -28,7 +28,7 @@ export const Sidebar: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> = (
         <SC.Title to="/">
           The
           <br />
-          Programmer's
+          Programmer&apos;s
           <br />
           Hangout
         </SC.Title>

src/components/Toc/index.tsx

@@ -11,7 +11,7 @@ interface ITocProps {
 }
 
 interface ITitle {
-  prefix?: string
+  prefix: string | null
   title: string
 }
 
@@ -20,7 +20,7 @@ function extractTitle(title: string): ITitle {
   const rest = maybePrefix ? title.replace(maybePrefix[0], "") : title
 
   return {
-    prefix: maybePrefix ? `${maybePrefix[0]} ` : undefined,
+    prefix: maybePrefix ? `${maybePrefix[0]} ` : null,
     title: rest.trim(),
   }
 }

src/hooks/useLocalStorage.tsx

@@ -1,3 +1,4 @@
+/* globals window */
 import { useEffect, useState } from "react"
 
 export const useLocalStorage = (name: string, initialValue: string) => {

src/hooks/useLockBodyScroll.tsx

@@ -1,3 +1,4 @@
+/* globals document */
 import { useState } from "react"
 
 export const useLockBodyScroll = () => {

src/layouts/HomeLayout/index.tsx

@@ -15,7 +15,7 @@ export const HomeLayout: FC<RouteComponentProps> = () => {
     if (locked) {
       unlock()
     }
-  }, [locked])
+  }, [locked, unlock])
 
   return (
     <ThemeProvider>

src/pages/archives/404.tsx

@@ -9,7 +9,10 @@ import { SEO } from "../../components/SEO"
 import { FourZeroFourHint } from "../../components/FourZeroFourHint"
 import { FourZeroFour } from "../../components/FourZeroFour"
 
-export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
+// TODO: there has to be a better type for this
+const FourZeroFourPage: React.FC<{ data: { allFile: FileConnection } }> = ({
+  data,
+}: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Archive Not found" />
     <FourZeroFour title="ARCHIVE NOT FOUND">
@@ -26,6 +29,8 @@ export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   </Fragment>
 )
 
+export default FourZeroFourPage
+
 export const query = graphql`
   query {
     allFile(filter: { sourceInstanceName: { eq: "what-is-archive" } }) {

src/pages/archives/index.tsx

@@ -17,7 +17,7 @@ function ArchivesPage() {
             This regroups the archives of our occasional, temporary channels
             that cover a piece of technology that might be unknown to part of
             our users. You can find those on{" "}
-            <Link to="/about">The Programmer's Hangout</Link>.
+            <Link to="/about">The Programmer&apos;s Hangout</Link>.
           </p>
         }
       />

src/pages/resources/404.tsx

@@ -8,7 +8,10 @@ import { FourZeroFourHint } from "../../components/FourZeroFourHint"
 import { SEO } from "../../components/SEO"
 import { FourZeroFour } from "../../components/FourZeroFour"
 
-export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
+// TODO: there has to be a better type for this
+const FourZeroFourPage: React.FC<{ data: { allFile: FileConnection } }> = ({
+  data,
+}: ComponentQuery<{ allFile: FileConnection }>) => (
   <Fragment>
     <SEO title="404: Resource Not found" />
     <FourZeroFour title="RESOURCE NOT FOUND">
@@ -25,6 +28,8 @@ export default ({ data }: ComponentQuery<{ allFile: FileConnection }>) => (
   </Fragment>
 )
 
+export default FourZeroFourPage
+
 export const query = graphql`
   query {
     allFile(filter: { sourceInstanceName: { eq: "resources" } }) {

src/pages/resources/index.tsx

@@ -18,7 +18,7 @@ function ResourcesPage() {
             <p>
               This is meant as a small knowledge base for commonly answered
               questions on our Discord community,{" "}
-              <Link to="/about">The Programmer's Hangout</Link>.
+              <Link to="/about">The Programmer&apos;s Hangout</Link>.
             </p>
             <p>
               All of it is open source, and you can contribute to it on{" "}

src/utils/index.ts

@@ -146,7 +146,7 @@ export function buildToc(headings: Mdx["headings"]): ITocItem[] {
     return []
   }
 
-  const strip = (value: string) => value.replace(/^(\d*\-)(.*)/, "$2")
+  const strip = (value: string) => value.replace(/^(\d*-)(.*)/, "$2")
 
   slugger.reset()