Fix all the lints

Author: etrepum

.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-var-requires": "off",
     "unused-imports/no-unused-imports-ts": "error",
+    "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/ban-types": [
       "error",
       {

components/Layout.tsx

@@ -31,7 +31,7 @@ export interface LayoutProps extends LayoutStaticProps {
   origin?: string;
 }
 
-const DEFAULT_DESCRIPTION: string =
+const DEFAULT_DESCRIPTION =
   "Mission Bit is a 501(c)3 non-profit offering coding education and industry experiences to equip, empower and inspire public school youth to build products they dream up and broaden the opportunity horizon they envision for themselves.";
 
 function updateDocumentSize() {
@@ -61,7 +61,7 @@ export const Layout: React.FC<LayoutProps> = ({
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector("#jss-server-side");
     if (jssStyles) {
-      jssStyles.parentElement!.removeChild(jssStyles);
+      jssStyles.parentElement?.removeChild(jssStyles);
     }
   }, []);
   useEffect(() => {

components/bridge/BridgeDates.tsx

@@ -10,7 +10,7 @@ export const BridgeCalendarEvent: CalendarEvent = {
   url: absoluteUrl("/bridge"),
 };
 
-export function bridgeStartEnd() {
+export function bridgeStartEnd(): ReturnType<typeof hourStartEndParts> {
   const start = Date.parse(BridgeCalendarEvent.start);
   const end = Date.parse(BridgeCalendarEvent.end!);
   return hourStartEndParts(start, end);

components/donate/SectionHeading.tsx

@@ -14,9 +14,8 @@ const Typography = withStyles((theme) => ({
   },
 }))(BaseTypography);
 
-export const SectionHeading: React.FC<Omit<
-  TypographyProps<"h2">,
-  "component" | "variant"
->> = (props) => <Typography {...props} variant="h2" />;
+export const SectionHeading: React.FC<
+  Omit<TypographyProps<"h2">, "component" | "variant">
+> = (props) => <Typography {...props} variant="h2" />;
 
 export default SectionHeading;

components/gala/GalaDates.tsx

@@ -10,7 +10,7 @@ export const GalaCalendarEvent: CalendarEvent = {
   url: absoluteUrl("/gala"),
 };
 
-export function galaStartEnd() {
+export function galaStartEnd(): ReturnType<typeof hourStartEndParts> {
   const start = Date.parse(GalaCalendarEvent.start);
   const end = Date.parse(GalaCalendarEvent.end!);
   return hourStartEndParts(start, end);

components/gala/brands/AdobePdfLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const AdobePdfLogo = (props: SvgIconProps) => (
+const AdobePdfLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 384 512" {...props}>
     <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-22-171.2c-13.5-13.3-55-9.2-73.7-6.7-21.2-12.8-35.2-30.4-45.1-56.6 4.3-18 12-47.2 6.4-64.9-4.4-28.1-39.7-24.7-44.6-6.8-5 18.3-.3 44.4 8.4 77.8-11.9 28.4-29.7 66.9-42.1 88.6-20.8 10.7-54.1 29.3-58.8 52.4-3.5 16.8 22.9 39.4 53.1 6.4 9.1-9.9 19.3-24.8 31.3-45.5 26.7-8.8 56.1-19.8 82-24 21.9 12 47.6 19.9 64.6 19.9 27.7.1 28.9-30.2 18.5-40.6zm-229.2 89c5.9-15.9 28.6-34.4 35.5-40.8-22.1 35.3-35.5 41.5-35.5 40.8zM180 175.5c8.7 0 7.8 37.5 2.1 47.6-5.2-16.3-5-47.6-2.1-47.6zm-28.4 159.3c11.3-19.8 21-43.2 28.8-63.7 9.7 17.7 22.1 31.7 35.1 41.5-24.3 4.7-45.4 15.1-63.9 22.2zm153.4-5.9s-5.8 7-43.5-9.1c41-3 47.7 6.4 43.5 9.1z" />
   </SvgIcon>

components/gala/brands/AppleLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const AppleLogo = (props: SvgIconProps) => (
+const AppleLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 384 512" {...props}>
     <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
   </SvgIcon>

components/gala/brands/GoogleLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const GoogleLogo = (props: SvgIconProps) => (
+const GoogleLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 488 512" {...props}>
     <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
   </SvgIcon>

components/gala/brands/OutlookLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const OutlookLogo = (props: SvgIconProps) => (
+const OutlookLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 103.17322 104.31332" {...props}>
     <path d="m 64.566509,22.116383 v 20.404273 l 7.130526,4.489881 c 0.188058,0.05485 0.595516,0.05877 0.783574,0 L 103.16929,26.320259 c 0,-2.44867 -2.28412,-4.203876 -3.573094,-4.203876 H 64.566509 z" />
     <path d="m 64.566509,50.13308 6.507584,4.470291 c 0.916782,0.673874 2.021622,0 2.021622,0 -1.100922,0.673874 30.077495,-20.035993 30.077495,-20.035993 v 37.501863 c 0,4.082422 -2.61322,5.794531 -5.551621,5.794531 H 64.562591 V 50.13308 z" />

components/gala/brands/WindowsLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const WindowsLogo = (props: SvgIconProps) => (
+const WindowsLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 448 512" {...props}>
     <path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" />
   </SvgIcon>

components/gala/brands/YahooLogo.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const YahooLogo = (props: SvgIconProps) => (
+const YahooLogo = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 2000 1333" {...props}>
     <g transform="translate(0,1333) scale(0.1,-0.1)">
       <path

components/icons/ArrowRightIcon.tsx

@@ -23,7 +23,7 @@ const points = [
   p(xMid, yMax),
 ].join(" ");
 
-const ArrowRightIcon = (props: SvgIconProps) => (
+const ArrowRightIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="-50 -50 100 100" {...props}>
     <polyline
       points={points}

components/icons/Asterisk.tsx

@@ -7,7 +7,7 @@ const Scale = 100;
 const IconScale = Scale / Math.max(IconWidth, IconHeight);
 const viewBox = `${-0.5 * Scale} ${-0.5 * Scale} ${Scale} ${Scale}`;
 
-const AsteriskIcon = (props: SvgIconProps) => (
+const AsteriskIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox={viewBox} {...props}>
     <InlineAsteriskIcon />
   </SvgIcon>
@@ -18,7 +18,9 @@ const AsteriskTransform = [
   `translate(${-0.5 * IconWidth} ${-0.5 * IconHeight})`,
 ].join(" ");
 
-export const InlineAsteriskIcon = (props: React.SVGProps<SVGGElement>) => {
+export const InlineAsteriskIcon = (
+  props: React.SVGProps<SVGGElement>
+): JSX.Element => {
   const transform = [props.transform, AsteriskTransform]
     .filter((x) => x !== undefined)
     .join(" ");

components/icons/CarouselLeft.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const CarouselLeftIcon = (props: SvgIconProps) => (
+const CarouselLeftIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="-50 -50 100 100" {...props}>
     <polyline
       stroke="currentColor"

components/icons/CarouselRight.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const CarouselRightIcon = (props: SvgIconProps) => (
+const CarouselRightIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="-50 -50 100 100" {...props}>
     <polyline
       stroke="currentColor"

components/icons/Check.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const CheckIcon = (props: SvgIconProps) => (
+const CheckIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 100 100" {...props}>
     <g transform="translate(0,-952.36218)">
       <path

components/icons/ExpandMore.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const ExpandMoreIcon = (props: SvgIconProps) => (
+const ExpandMoreIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="-50 -50 100 100" {...props}>
     <polyline
       stroke="currentColor"

components/icons/FormatQuote.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const FormatQuoteIcon = (props: SvgIconProps) => (
+const FormatQuoteIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 18 18" {...props}>
     <path d="M9.66,7.45A2.55,2.55,0,0,1,11,4.13c2.17-.74,3.47,0,3.82,1.22.8,2.66-1.09,7.6-2.59,8.82l-1.54-.77L12.5,8.78S10.15,9.17,9.66,7.45Zm-6.5,0A2.54,2.54,0,0,1,4.49,4.13c2.17-.74,3.46,0,3.85,1.22C9.11,8,7.22,13,5.71,14.17L4.17,13.4,6,8.78S3.65,9.17,3.16,7.45Z" />
   </SvgIcon>

components/icons/Pin.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
 
-const PinIcon = (props: SvgIconProps) => (
+const PinIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon viewBox="0 0 100 100" {...props}>
     <path
       d="M50,2.5c-18.1,0-32.8,14-32.8,31.2c0,7.1,2.5,13.9,7.1,19.3L50,83.8L75.8,53c4.6-5.4,7.1-12.3,7.1-19.3

pages/_document.tsx

@@ -6,7 +6,7 @@ import IEWarning from "components/IEWarning";
 // This is required to set up the stylesheets for Material-UI
 
 export default class MyDocument extends Document {
-  render() {
+  render(): JSX.Element {
     return (
       <Html lang="en">
         <Head />

pages/api/balance-transactions.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiHandler } from "next";
 import getBalanceModifications from "src/googleBalanceModifications";
 import getBalanceTransactions from "src/stripeBalanceTransactions";
 
@@ -11,10 +11,7 @@ function parseCreated(
   return parseInt(created, 10);
 }
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
+const handler: NextApiHandler = async (req, res) => {
   if (req.method === "GET") {
     const created = parseCreated(req.query.created);
     if (created === undefined) {
@@ -35,4 +32,6 @@ export default async function handler(
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-}
+};
+
+export default handler;

pages/api/cancel-subscription.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiHandler } from "next";
 import getStripe from "src/getStripe";
 
 const stripe = getStripe();
@@ -15,10 +15,7 @@ function parseBody(body: unknown): PostBody | undefined {
   return typeof id === "string" ? { id } : undefined;
 }
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
+const handler: NextApiHandler = async (req, res) => {
   if (req.method === "POST") {
     try {
       const body = parseBody(req.body);
@@ -36,4 +33,6 @@ export default async function handler(
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-}
+};
+
+export default handler;

pages/api/checkout-sessions.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiHandler } from "next";
 import Stripe from "stripe";
 import getStripe from "src/getStripe";
 import { Frequency, FREQUENCIES } from "src/stripeHelpers";
@@ -90,10 +90,7 @@ function session_args(
   }
 }
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
+const handler: NextApiHandler = async (req, res) => {
   if (req.method === "POST") {
     try {
       const body = parseBody(req.body);
@@ -121,4 +118,6 @@ export default async function handler(
     res.setHeader("Allow", "POST");
     res.status(405).end("Method Not Allowed");
   }
-}
+};
+
+export default handler;

pages/api/webhook.ts

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from "next";
+import { NextApiHandler } from "next";
 import Stripe from "stripe";
 import getStripe from "src/getStripe";
 import getStripeKey from "src/getStripeKey";
@@ -63,7 +63,7 @@ export const config = {
   },
 };
 
-export async function handler(req: NextApiRequest, res: NextApiResponse) {
+const handler: NextApiHandler = async (req, res) => {
   let event: Stripe.Event;
   try {
     const sig = req.headers["stripe-signature"];
@@ -83,7 +83,7 @@ export async function handler(req: NextApiRequest, res: NextApiResponse) {
   const handleEvent = HANDLERS[event.type] ?? defaultHandler;
   await handleEvent(event);
   res.status(200).json({ received: true });
-}
+};
 
 export default Cors({
   allowMethods: ["POST", "HEAD"],

src/absoluteUrl.ts

@@ -12,7 +12,7 @@ export function getOrigin(origin?: string): string {
   return process.env.URL?.replace(/\/$/, "") ?? defaultOrigin;
 }
 
-export function absoluteUrl(pathOrUrl: string, origin?: string) {
+export function absoluteUrl(pathOrUrl: string, origin?: string): string {
   return pathOrUrl.startsWith("/")
     ? `${getOrigin(origin)}${pathOrUrl}`
     : pathOrUrl;

src/buttonStyles.tsx

@@ -1,26 +1,27 @@
 import { Theme, darken } from "@material-ui/core/styles";
 
-export const buttonStyles = (color: string) => (theme: Theme) => ({
-  outlined: {
-    color,
-    border: `2px solid ${color}`,
-    "&:hover": {
+export const buttonStyles = (color: string) => (theme: Theme) =>
+  ({
+    outlined: {
+      color,
       border: `2px solid ${color}`,
-      backgroundColor: color,
-      color: theme.palette.common.white,
-    },
-  },
-  contained: {
-    color: theme.palette.common.white,
-    backgroundColor: color,
-    "&:hover": {
-      backgroundColor: darken(color, 0.2),
-      // Reset on touch devices, it doesn't add specificity
-      "@media (hover: none)": {
+      "&:hover": {
+        border: `2px solid ${color}`,
         backgroundColor: color,
+        color: theme.palette.common.white,
+      },
+    },
+    contained: {
+      color: theme.palette.common.white,
+      backgroundColor: color,
+      "&:hover": {
+        backgroundColor: darken(color, 0.2),
+        // Reset on touch devices, it doesn't add specificity
+        "@media (hover: none)": {
+          backgroundColor: color,
+        },
       },
     },
-  },
-});
+  } as const);
 
 export default buttonStyles;

src/oneLine.ts

@@ -1,4 +1,7 @@
-function oneLine(strs: TemplateStringsArray, ...placeholders: unknown[]) {
+function oneLine(
+  strs: TemplateStringsArray,
+  ...placeholders: unknown[]
+): string {
   // Build the string as normal, combining all the strings and placeholders:
   let result = "";
   let i = 0;