chore: set up tslint (#60)

chore: set up tslint

.gitattributes

@@ -1 +1 @@
-src/generated/* linguist-vendored
+generated/* linguist-vendored

codegen.yml

@@ -2,7 +2,7 @@ overwrite: true
 schema: "http://localhost:8000/___graphql"
 documents: "src/**/*.graphql"
 generates:
-  src/generated/graphql.ts:
+  generated/graphql.ts:
     plugins:
       - "typescript"
       - "typescript-operations"

package.json

@@ -21,6 +21,8 @@
     "develop": "gatsby develop",
     "fetch-users": "node ./scripts/fetchUsers.js",
     "format": "prettier --write src/**/*.{js,jsx}",
+    "lint": "tslint -c tslint.json '{src,scripts}/**/*.{js,ts,tsx}'",
+    "lint:fix": "npm run lint -- --fix",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
@@ -49,7 +51,8 @@
     "react-helmet": "^5.2.1",
     "react-highlight": "^0.12.0",
     "react-perfect-scrollbar": "^1.5.3",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "typescript": "^3.5.3"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^1.4.0",
@@ -65,6 +68,10 @@
     "@types/styled-components": "^4.1.18",
     "babel-plugin-styled-components": "^1.10.6",
     "discord.js": "^11.5.1",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "tslint": "^5.18.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-eslint-rules": "^5.4.0",
+    "tslint-react-hooks": "^2.2.1"
   }
 }

scripts/buildHelpers.js

@@ -33,9 +33,9 @@ module.exports = {
     const avatar = target ? target.avatar : this.getDefaultAvatar(hash)
 
     return {
-      name,
-      hash,
       avatar,
+      hash,
+      name,
     }
   },
   resolveAuthors(users, authors) {

scripts/fetchUsers.js

@@ -22,23 +22,27 @@ 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.get(TPH)
   if (!tph) {
     throw Error("Bot is not in TPH, cannot fetch users")
   }
   const guild = await tph.fetchMembers()
   const memberInfo = guild.members.map(member => ({
-    identifier: `${member.user.username}#${member.user.discriminator}`,
     avatar: member.user.displayAvatarURL,
+    identifier: `${member.user.username}#${member.user.discriminator}`,
   }))
   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(process.env.BOT_TOKEN)

src/SidebarProvider.tsx

@@ -1,21 +1,21 @@
 import React, { useState } from "react"
 
-interface SidebarProviderProps {
+interface ISidebarProviderProps {
   children: React.ReactNode
 }
 
-export interface SidebarContextInterface {
+export interface ISidebarContextInterface {
   current: number
   setCurrent: (index: number) => void
 }
 
-export const SidebarContext = React.createContext<SidebarContextInterface | null>(
+export const SidebarContext = React.createContext<ISidebarContextInterface | null>(
   null
 )
 
 export function SidebarProvider({
   children,
-}: SidebarProviderProps): JSX.Element {
+}: ISidebarProviderProps): JSX.Element {
   const [current, setCurrent] = useState(0)
 
   function selectFirstLevel(index: number) {

src/components/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import * as SC from "./styles"
 import { Container } from "../Container"
+import * as SC from "./styles"
 
 export function Footer() {
   return (

src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { Container } from "../Container"
 import logo from "../../images/tph-logo.png"
+import { Container } from "../Container"
 import * as SC from "./styles"
 
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {

src/components/Layout/index.tsx

@@ -5,16 +5,16 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
+import { graphql, useStaticQuery } from "gatsby"
 import React, { PropsWithChildren } from "react"
-import { useStaticQuery, graphql } from "gatsby"
 
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
+import { GlobalStyles } from "../../globalStyles"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
 import { Header } from "../Header"
-import { GlobalStyles } from "../../globalStyles"
 import * as SC from "./styles"
-import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css"
 
 export function Layout({ children }: PropsWithChildren<{}>) {
   const data = useStaticQuery(graphql`

src/components/Markdown/index.tsx

@@ -1,12 +1,12 @@
-import React from "react"
-import * as SC from "./styles"
 import Prism from "prismjs"
-import "prismjs/components/prism-python"
 import "prismjs/components/prism-markup-templating"
 import "prismjs/components/prism-php"
+import "prismjs/components/prism-python"
 import "prismjs/plugins/line-numbers/prism-line-numbers.css"
+import React from "react"
+import * as SC from "./styles"
 
-interface MarkdownProps {
+interface IMarkdownProps {
   content: string
 }
 

src/components/ResourceBreadcrumb/index.tsx

@@ -1,11 +1,11 @@
 import React from "react"
 
-import { IFileOrFolder } from "../ResourcesSidebar/index"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { traversePaths } from "../../utils"
+import { IFileOrFolder } from "../ResourcesSidebar/index"
 import * as SC from "./styles"
 
-interface ResourceBreadcrumbProps {
+interface IResourceBreadcrumbProps {
   relativePath: any
 }
 
@@ -24,7 +24,7 @@ function flatten([
   return flatten([...currNode.children, ...previousNodes, currNode])
 }
 
-export function ResourceBreadcrumb({ relativePath }: ResourceBreadcrumbProps) {
+export function ResourceBreadcrumb({ relativePath }: IResourceBreadcrumbProps) {
   const paths = relativePath.split("/")
   const breadcrumbItems = flatten([traversePaths(paths)])
 

src/components/ResourceBreadcrumb/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 
 export const ResourceBreadcrumbWrapper = styled.div`
   display: flex;

src/components/ResourceHeader/index.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment } from "react"
 
-import { StackedAvatars } from "../StackedAvatars"
 import ChevronUp from "../../icons/chevron-up.svg"
 import { ResourceBreadcrumb } from "../ResourceBreadcrumb"
+import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
 
-interface ResourceHeaderProps {
+interface IResourceHeaderProps {
   relativePath: any
   title: any
   authors: any

src/components/ResourceHeader/styles.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from "styled-components"
 import { Link } from "gatsby"
+import styled, { css } from "styled-components"
 import { fontFamily, modularScale } from "../../design/typography"
 
 export const ResourceHeaderWrapper = styled.div`

src/components/ResourcesLayout/index.tsx

@@ -8,9 +8,9 @@
 import React, { PropsWithChildren } from "react"
 
 import { GlobalStyles } from "../../globalStyles"
+import { SidebarProvider } from "../../SidebarProvider"
 import { ResourcesSidebar } from "../ResourcesSidebar"
 import * as SC from "./styles"
-import { SidebarProvider } from "../../SidebarProvider"
 
 export function ResourcesLayout({ children }: PropsWithChildren<{}>) {
   return (

src/components/ResourcesSidebar/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState, PropsWithChildren } from "react"
-import { useStaticQuery, graphql, Link } from "gatsby"
-import useBuildTree from "./useBuildTree"
-import useSidebar from "./../../hooks/useSidebar"
-import Banner from "../../images/tph-banner.svg"
+import { graphql, Link, useStaticQuery } from "gatsby"
+import React, { PropsWithChildren, useState } from "react"
 import TriangleDown from "../../icons/triangle-down.svg"
+import Banner from "../../images/tph-banner.svg"
+import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
+import useBuildTree from "./useBuildTree"
 
 export interface IFile {
   title: string

src/components/ResourcesSidebar/styles.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components"
 import { Link } from "gatsby"
+import styled from "styled-components"
 import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`