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>