Continuation of Typescript porting

components/Layout.tsx

@@ -12,16 +12,29 @@ The images are in the public folder.
 
 import 'react-toastify/dist/ReactToastify.css';
 
+import Footer from './Footer';
 import Head from 'next/head';
+import Nav from './Nav';
 import { ToastContainer } from 'react-toastify';
 import { useAuth } from 'utils/AuthContext';
-import Nav from './Nav';
-import Footer from './Footer';
 
-const Layout = (props) => {
+type LayoutProps = {
+	children: JSX.Element;
+};
+
+const Layout = ({ children }: LayoutProps): JSX.Element => {
 	const { user, signOut } = useAuth();
 
-	const toastStyle = {
+	type toast = {
+		success: string;
+		error: string;
+		info: string;
+		warning: string;
+		default: string;
+		dark: string;
+	};
+
+	const toastStyle: toast = {
 		// Style your toast elements here
 		success: 'bg-accent',
 		error: 'bg-red-600',
@@ -43,7 +56,7 @@ const Layout = (props) => {
 			</Head>
 			<div className="max-w-7xl flex flex-col min-h-screen mx-auto p-5">
 				<Nav user={user} signOut={signOut} />
-				<main className="flex-1">{props.children}</main>
+				<main className="flex-1">{children}</main>
 				<ToastContainer
 					position="bottom-center"
 					toastClassName={({ type }) =>

components/MailingList.tsx

@@ -9,8 +9,8 @@ import axios from 'axios';
 import { toast } from 'react-toastify';
 import { useState } from 'react';
 
-const MailingList = () => {
-	const [mail, setMail] = useState(null);
+const MailingList = (): JSX.Element => {
+	const [mail, setMail] = useState('');
 	const [loading, setLoading] = useState(false);
 	const [valid, setValid] = useState(true);
 
@@ -52,7 +52,7 @@ const MailingList = () => {
 			<h2 className="text-3xl md:text-4xl font-bold font-title uppercase text-center">
 				Stay Tuned
 			</h2>
-			<Image src={Mailing} />
+			<Image src={Mailing} alt="Mail" />
 			<label className="label">
 				<p className="text-center max-w-md m-auto">
 					Want to be the first to know when SupaNexTail launches and get an exclusive discount? Sign

components/PaymentModal.tsx

@@ -2,14 +2,19 @@ import { Dialog, Transition } from '@headlessui/react';
 
 import { Fragment } from 'react';
 
-const PaymentModal = (props) => {
+type PaymentModalProps = {
+	open: boolean;
+	setPayment: (arg0: boolean) => void;
+};
+
+const PaymentModal = ({ open, setPayment }: PaymentModalProps): JSX.Element => {
 	function closeModal() {
-		props.setPayment(false);
+		setPayment(false);
 	}
 
 	return (
 		<>
-			<Transition appear show={props.open} as={Fragment}>
+			<Transition appear show={open} as={Fragment}>
 				<Dialog
 					as="div"
 					className="fixed inset-0 z-10 overflow-y-auto bg-gray-500 bg-opacity-50"

components/Pricing.tsx

@@ -15,9 +15,9 @@ import axios from 'axios';
 import router from 'next/router';
 import { useAuth } from 'utils/AuthContext';
 
-const Pricing = () => {
+const Pricing = (): JSX.Element => {
 	const [enabled, setEnabled] = useState(false);
-	const { user } = useAuth();
+	const { user, session } = useAuth();
 	const [customerId, setCustomerId] = useState(null);
 	const [sub, setSub] = useState(false);
 	const flat = false; // Switch between subscription system or flat prices
@@ -64,7 +64,7 @@ const Pricing = () => {
 		},
 	};
 
-	const handleSubmit = async (e, priceId) => {
+	const handleSubmit = async (e: React.SyntheticEvent<HTMLButtonElement>, priceId: string) => {
 		e.preventDefault();
 		// Create a Checkout Session. This will redirect the user to the Stripe website for the payment.
 		axios

components/PrivacyPolicy.tsx

@@ -1,4 +1,4 @@
-const PrivacyPolicy = () => (
+const PrivacyPolicy = (): JSX.Element => (
 	<div className="max-w-xl text-left m-auto py-10">
 		<h1 className="text-center">Privacy Policy for {process.env.NEXT_PUBLIC_TITLE}</h1>
 

components/SignUp.tsx

@@ -7,11 +7,17 @@ You can select your auth providers, or just keep the email/password. You can
 check the providers available here: https://supabase.io/docs/guides/auth
 */
 
+import SignUpPanel from './UI/SignUpPanel';
+import { SupabaseClient } from '@supabase/supabase-js';
 import { supabase } from 'utils/supabaseClient';
 import { useAuth } from 'utils/AuthContext';
-import SignUpPanel from './UI/SignUpPanel';
 
-const Container = (props) => {
+type ContainerProps = {
+	children: JSX.Element;
+	supabaseClient: SupabaseClient;
+};
+
+const Container = ({ children }: ContainerProps): JSX.Element => {
 	const { user, signOut } = useAuth();
 	if (user)
 		return (
@@ -22,19 +28,14 @@ const Container = (props) => {
 				</button>
 			</div>
 		);
-	return props.children;
+	return children;
 };
 
-const AuthComponent = () => {
-	const { signUp, signIn, signOut, resetPassword } = useAuth();
+const AuthComponent = (): JSX.Element => {
+	const { signUp, signIn } = useAuth();
 	return (
 		<Container supabaseClient={supabase}>
-			<SignUpPanel
-				signUp={signUp}
-				signIn={signIn}
-				signOut={signOut}
-				resetPassword={resetPassword}
-			/>
+			<SignUpPanel signUp={signUp} signIn={signIn} />
 		</Container>
 	);
 };

components/Terms.tsx

@@ -1,4 +1,4 @@
-const Terms = () => (
+const Terms = (): JSX.Element => (
 	<div className="max-w-xl text-left m-auto py-10">
 		<h1>Terms and Conditions</h1>
 

pages/api/stripe/create-checkout-session.ts

@@ -1,6 +1,7 @@
-import * as Stripe from 'stripe';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import Cors from 'cors';
+import Stripe from 'stripe';
 import initMiddleware from 'utils/init-middleware';
 import rateLimit from 'express-rate-limit';
 
@@ -18,9 +19,11 @@ const limiter = initMiddleware(
 );
 // Set your secret key. Remember to switch to your live secret key in production.
 // See your keys here: https://dashboard.stripe.com/apikeys
-const stripe = new Stripe(process.env.STRIPE_SECRET);
+const stripe = new Stripe(process.env.STRIPE_SECRET, {
+	apiVersion: '2020-08-27',
+});
 
-export default async function handler(req, res) {
+export default async function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
 	await cors(req, res);
 	await limiter(req, res);
 	if (req.method === 'POST') {

tsconfig.json

@@ -4,10 +4,10 @@
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
     "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
-    "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */// "lib": [],                                   /* Specify library files to be included in the compilation. */
+    "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ // "lib": [],                                   /* 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', 'react', 'react-jsx' or 'react-jsxdev'. */// "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
@@ -15,7 +15,7 @@
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
-    "removeComments": false, /* Do not emit comments to output. */// "noEmit": true,                              /* Do not emit outputs. */
+    "removeComments": false, /* Do not emit comments to output. */ // "noEmit": true,                              /* Do not emit outputs. */
     // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
@@ -27,27 +27,27 @@
     "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
     "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
     "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
-    "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. *//* Additional Checks */
+    "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */
     "noUnusedLocals": true, /* Report errors on unused locals. */
     "noUnusedParameters": true, /* Report errors on unused parameters. */
     "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-    "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */// "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+    "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
     // "noImplicitOverride": true,                  /* Ensure overriding members in derived classes are marked with an 'override' modifier. */
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
     /* Module Resolution Options */
     "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": "./", /* Base directory to resolve non-absolute module names. *//* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                             /* List of folders to include type definitions from. */
     // "types": [],                                 /* Type declaration files to be included in compilation. */
     "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */// "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+    "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
     /* Source Map Options */
     // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
     "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
-    "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. *//* Experimental Options */
+    "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /* Experimental Options */
     // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
     /* Advanced Options */
@@ -71,4 +71,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}