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

.eslintrc.js

@@ -15,9 +15,15 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "prettier",
     "prettier/@typescript-eslint",
   ],
+  settings: {
+    react: {
+      version: "16.13.1",
+    },
+  },
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "tsconfig.json",
@@ -185,7 +191,6 @@ module.exports = {
     "no-var": "error",
     "object-shorthand": "error",
     "one-var": ["error", "never"],
-    "prefer-arrow/prefer-arrow-functions": "error",
     "prefer-const": "error",
     "prefer-object-spread": "error",
     "quote-props": "off",
@@ -208,9 +213,7 @@ module.exports = {
       "error",
       {
         rules: {
-          "object-curly-spacing": true,
           "prefer-conditional-expression": true,
-          "react-hooks-nesting": true,
           typedef: [
             true,
             "parameter",

package.json

@@ -86,10 +86,10 @@
     "eslint-plugin-jsdoc": "^30.2.1",
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.1.0",
     "gatsby-plugin-remove-trailing-slashes": "^2.3.3",
     "prettier": "^2.0.5",
     "tslint": "^6.1.2",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-react-hooks": "^2.2.2"
+    "tslint-config-prettier": "^1.18.0"
   }
 }

scripts/buildHelpers.js

@@ -1,4 +1,6 @@
+/* globals module */
 const DEFAULT_AVATAR_MODULO = 5
+
 module.exports = {
   findMarkdownLink(absolutePath) {
     // We're assuming this path isn't going to change
@@ -28,7 +30,7 @@ module.exports = {
     return `https://cdn.discordapp.com/embed/avatars/${avatar}.png`
   },
   resolveAuthor(users, author) {
-    const target = users.find(user => user.identifier === author)
+    const target = users.find((user) => user.identifier === author)
     const [name, hash] = this.splitHash(author)
     const avatar = target ? target.avatar : this.getDefaultAvatar(hash)
 
@@ -39,6 +41,6 @@ module.exports = {
     }
   },
   resolveAuthors(users, authors) {
-    return authors.map(author => this.resolveAuthor(users, author))
+    return authors.map((author) => this.resolveAuthor(users, author))
   },
 }

scripts/fetchUsers.js

@@ -1,3 +1,5 @@
+/* globals require, process, console */
+/* eslint-disable @typescript-eslint/no-var-requires */
 // This script will be ran periodically through CI
 // don't touch it
 const Discord = require("discord.js")
@@ -22,27 +24,23 @@ const writeS = (content, dest) => {
 }
 
 client.once("ready", async () => {
-  // tslint:disable-next-line no-console
   console.log("Bot ready, fetching user list...")
   const tph = client.guilds.cache.get(TPH)
   if (!tph) {
     throw Error("Bot is not in TPH, cannot fetch users")
   }
   const members = await tph.members.fetch()
-  const memberInfo = members.map(member => ({
+  const memberInfo = members.map((member) => ({
     avatar: member.user.displayAvatarURL(),
     identifier: member.user.tag,
   }))
   const wrs = fs.createWriteStream(DESTINATION)
-  // tslint:disable-next-line no-console
   console.log(`Fetched ${memberInfo.length} users, writing to ${DESTINATION}`)
   writeS(memberInfo, wrs).on("finish", () => {
-    // tslint:disable-next-line no-console
     console.log("Finished writing list")
     process.exit(0)
   })
 })
 
-// tslint:disable-next-line no-console
 console.log("Attempting to log in...")
 client.login(BOT_TOKEN)

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

tsconfig.json

@@ -4,7 +4,7 @@
     // "incremental": true,                   /* Enable incremental compilation */
     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["ES2019"],                        /* Specify library files to be included in the compilation. */
+    "lib": ["ES2019", "DOM"],                 /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */