Clean code WIP

components/CardsLanding.tsx

@@ -19,37 +19,37 @@ const CardsLanding = (): JSX.Element => (
     </p>
     <div className="flex flex-wrap justify-center mt-10">
       <CardLanding
-        image={cardPage}
+        image={cardPage as string}
         text="7 pages fully designed and easily customizable"
         title="Templates"
       />
       <CardLanding
-        image={cardServer}
+        image={cardServer as string}
         text="Integrated backend already setup with Next.js API Routes"
         title="Backend"
       />
       <CardLanding
-        image={cardAuth}
+        image={cardAuth as string}
         text="Auth and user management with Supabase"
         title="Auth"
       />
       <CardLanding
-        image={cardResponsive}
+        image={cardResponsive as string}
         text="Mobile ready, fully responsive and customizable with Tailwind CSS"
         title="Responsive"
       />
       <CardLanding
-        image={cardTheme}
+        image={cardTheme as string}
         text="Custom themes available and easily switch to dark mode"
         title="Themes"
       />
       <CardLanding
-        image={cardStripe}
+        image={cardStripe as string}
         text="Stripe integration. Fully functional subscription system"
         title="Payment"
       />
       <CardLanding
-        image={cardFee}
+        image={cardFee as string}
         text="One-time fee. No subscription, you’ll have access to all the updates"
         title="Lifetime access"
       />

components/Dashboard.tsx

@@ -113,7 +113,7 @@ const Dashboard = ({
             id="username"
             type="text"
             value={username || ''}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(event) => setUsername(event.target.value)}
           />
         </div>
         <div className="flex flex-col mb-5">
@@ -140,7 +140,7 @@ const Dashboard = ({
       </div>
 
       <div className="flex flex-row flex-wrap w-full max-w-xl p-5 m-auto my-5 border-2 shadow-lg bordered border-primary">
-        <Image src={Plan} alt="credit card" />
+        <Image src={Plan as string} alt="credit card" />
         <div className="flex flex-col m-auto">
           <h2>Your current plan</h2>
           <p className="">{planName}</p>

components/Landing.tsx

@@ -20,7 +20,7 @@ const Landing = (): JSX.Element => (
       </div>
       <div className="max-w-xl">
         <Image
-          src={landTop}
+          src={landTop as string}
           height={417}
           width={583}
           alt="Construction of a website"
@@ -40,7 +40,7 @@ const Landing = (): JSX.Element => (
         </p>
       </div>
       <div className="max-w-xl">
-        <Image src={start} alt="screenshot of the website" />
+        <Image src={start as string} alt="screenshot of the website" />
       </div>
     </div>
     <div className="flex flex-wrap justify-around max-w-6xl m-auto mt-24">
@@ -60,7 +60,10 @@ const Landing = (): JSX.Element => (
         </p>
       </div>
       <div className="flex order-2 max-w-md lg:order-1">
-        <Image src={supabaseImage} alt="screenshot of the Supabase website" />
+        <Image
+          src={supabaseImage as string}
+          alt="screenshot of the Supabase website"
+        />
       </div>
     </div>
     <MailingList />

components/MailingList.tsx

@@ -14,7 +14,7 @@ const MailingList = (): JSX.Element => {
   const [loading, setLoading] = useState(false);
   const [valid, setValid] = useState(true);
 
-  const validateEmail = () => {
+  const validateEmail = (): void => {
     // Regex patern for email validation
     const regex =
       /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
@@ -30,7 +30,7 @@ const MailingList = (): JSX.Element => {
     }
   };
 
-  const subscribe = () => {
+  const subscribe = (): void => {
     setLoading(true);
     axios
       .put('api/mailingList', {
@@ -52,7 +52,7 @@ const MailingList = (): JSX.Element => {
       <h2 className="text-3xl font-bold text-center uppercase md:text-4xl font-title">
         Stay Tuned
       </h2>
-      <Image src={Mailing} alt="Mail" />
+      <Image src={Mailing as string} alt="Mail" />
       <label className="label">
         <p className="max-w-md m-auto text-center">
           Want to be the first to know when SupaNexTail launches and get an
@@ -61,13 +61,13 @@ const MailingList = (): JSX.Element => {
       </label>
       <div className="m-auto mt-5">
         <input
-          onChange={(e) => {
-            setMail(e.target.value);
+          onChange={(event) => {
+            setMail(event.target.value);
           }}
           type="email"
           placeholder="Your email"
           className={`input input-primary input-bordered ${
-            valid ? null : 'input-error'
+            valid ? '' : 'input-error'
           }`}
         />
         <button

components/Nav.tsx

@@ -7,9 +7,10 @@ import { LogOut, Menu } from 'react-feather';
 import Image from 'next/image';
 import Link from 'next/link';
 import Logo from 'public/logo.svg';
+import { UserCredentials } from '@supabase/gotrue-js';
 
 type NavProperties = {
-  user: Record<string, unknown>;
+  user: UserCredentials | undefined;
   signOut: () => void;
 };
 
@@ -66,7 +67,7 @@ const Nav = ({ user, signOut }: NavProperties): JSX.Element => {
     <nav className="w-full mb-2 navbar">
       <Link href="/">
         <a>
-          <Image src={Logo} alt="SupaNexTail Logo" />
+          <Image src={Logo as string} alt="SupaNexTail Logo" />
         </a>
       </Link>
 

pages/api/stripe/customer-portal.ts

@@ -28,10 +28,10 @@ const stripe = new Stripe(process.env.STRIPE_SECRET || '', {
 
 export default async function handler(
   request: NextApiRequest,
-  res: NextApiResponse
+  response: NextApiResponse
 ): Promise<void> {
-  await cors(request, res);
-  await limiter(request, res);
+  await cors(request, response);
+  await limiter(request, response);
   if (request.method === 'POST') {
     const returnUrl = `${request.headers.origin}/dashboard`; // Stripe will return to the dashboard, you can change it
 

utils/AuthContext.tsx

@@ -5,14 +5,16 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { Session, UserCredentials } from '@supabase/gotrue-js';
 
-import { UserCredentials } from '@supabase/gotrue-js';
 import { supabase } from 'utils/supabaseClient';
 
 type authContextType = {
-  user: boolean;
+  user: UserCredentials | undefined;
+  session: Session | undefined;
   login: () => void;
   logout: () => void;
+  signOut: () => void;
 };
 
 type Properties = {
@@ -20,9 +22,11 @@ type Properties = {
 };
 
 const authContextDefaultValues: authContextType = {
-  user: false,
+  user: undefined,
+  session: undefined,
   login: () => {},
   logout: () => {},
+  signOut: () => {},
 };
 
 // create a context for authentication
@@ -82,4 +86,4 @@ export const AuthProvider = ({ children }: Properties): JSX.Element => {
 };
 
 // export the useAuth hook
-export const useAuth = () => useContext(AuthContext);
+export const useAuth = (): authContextType => useContext(AuthContext);