Continue typescript conversion 3

components/CardsLanding.tsx

@@ -7,7 +7,7 @@ import cardServer from 'public/landing/backend.svg';
 import cardStripe from 'public/landing/stripe.svg';
 import cardTheme from 'public/landing/theme.svg';
 
-const CardsLanding = () => (
+const CardsLanding = (): JSX.Element => (
 	<div className="mt-14">
 		<h2 className="uppercase font-bold text-4xl tracking-wide text-center">
 			We've got you covered

components/Contact.tsx

@@ -9,11 +9,11 @@ the axios.post here, line 18.
 import axios from 'axios';
 import { toast } from 'react-toastify';
 
-const Contact = () => {
+const Contact = (): JSX.Element => {
 	const sendEmail = () => {
-		const name = document.getElementById('name').value;
-		const email = document.getElementById('email').value;
-		const message = document.getElementById('message').value;
+		const name = (document.getElementById('name') as HTMLInputElement).value;
+		const email = (document.getElementById('email') as HTMLInputElement).value;
+		const message = (document.getElementById('message') as HTMLInputElement).value;
 
 		if (name && email && message) {
 			axios
@@ -21,16 +21,16 @@ const Contact = () => {
 				.then((result) => {
 					if (result.data.success === true) {
 						toast.success(result.data.message);
-						document.getElementById('name').value = '';
-						document.getElementById('email').value = '';
-						document.getElementById('message').value = '';
+						(document.getElementById('name') as HTMLInputElement).value = '';
+						(document.getElementById('email') as HTMLInputElement).value = '';
+						(document.getElementById('message') as HTMLInputElement).value = '';
 					}
 				})
 				.catch((err) => {
 					console.log(err);
 				});
 		} else {
-			toast.info('Please enter at least one URL', {
+			toast.info('Please fill all the fields ', {
 				position: 'top-center',
 				autoClose: 2000,
 				hideProgressBar: true,
@@ -79,7 +79,7 @@ const Contact = () => {
 						id="message"
 						name="message"
 						placeholder="Enter your message here..."
-						rows="5"
+						rows={5}
 						className="input input-primary input-bordered resize-none w-full h-32 pt-2"
 					/>
 				</div>

components/Dashboard.tsx

@@ -7,36 +7,50 @@ It also show you the current subscription plan
 
 import { useEffect, useState } from 'react';
 
+import Avatar from './Avatar';
 import Image from 'next/image';
+import PaymentModal from './PaymentModal';
 import Plan from 'public/plan.svg';
 import { PriceIds } from 'utils/priceList';
+import { supabase } from '../utils/supabaseClient';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
-import { supabase } from '../utils/supabaseClient';
-import PaymentModal from './PaymentModal';
-import Avatar from './Avatar';
 
-export default function Dashboard(props) {
+type DashboardProps = {
+	profile: { username: string; website: string; avatar_url: string };
+	session: { user: { email: string } };
+	plan: string;
+};
+
+const Dashboard = ({ profile, session, plan }: DashboardProps): JSX.Element => {
 	const router = useRouter();
 	const [loading, setLoading] = useState(false);
-	const [username, setUsername] = useState(props.profile.username);
-	const [website, setWebsite] = useState(props.profile.website);
-	const [avatar_url, setAvatarUrl] = useState(props.profile.avatar_url);
+	const [username, setUsername] = useState(profile.username);
+	const [website, setWebsite] = useState(profile.website);
+	const [avatar_url, setAvatarUrl] = useState(profile.avatar_url);
 	const [payment, setPayment] = useState(false);
 
 	useEffect(() => {
 		if (router.query.session_id && router.query.session_id !== 'canceled') {
 			setPayment(true);
 		}
-	}, []);
+	}, [router.query.session_id]);
 
-	async function updateProfile({ username, website, avatar_url }) {
+	async function updateProfile({
+		username,
+		website,
+		avatar_url,
+	}: {
+		username: string;
+		website: string;
+		avatar_url: string;
+	}) {
 		try {
 			setLoading(true);
 			const user = supabase.auth.user();
 
 			const updates = {
-				id: user.id,
+				id: user?.id,
 				username,
 				website,
 				avatar_url,
@@ -78,7 +92,7 @@ export default function Dashboard(props) {
 						className="input input-primary input-bordered input-sm flex-1 text-base-100"
 						id="email"
 						type="text"
-						value={props.session.user.email}
+						value={session.user.email}
 						disabled
 					/>
 				</div>
@@ -119,13 +133,15 @@ export default function Dashboard(props) {
 			</div>
 
 			<div className="max-w-xl flex flex-row flex-wrap m-auto w-full p-5 bordered border-2 border-primary shadow-lg my-5">
-				<Image src={Plan} />
+				<Image src={Plan} alt="credit card" />
 				<div className="flex flex-col m-auto">
 					<h2>Your current plan</h2>
-					<p className="">{props.plan ? PriceIds[props.plan] : 'Free tier'}</p>
+					<p className="">{plan ? PriceIds[plan] : 'Free tier'}</p>
 				</div>
 			</div>
 			<PaymentModal open={payment} setPayment={setPayment} />
 		</div>
 	);
-}
+};
+
+export default Dashboard;

components/Landing.tsx

@@ -1,11 +1,11 @@
 import CardsLanding from 'components/CardsLanding';
 import Image from 'next/image';
+import MailingList from './MailingList';
 import landTop from 'public/landing/land-top.svg';
 import start from 'public/landing/start.svg';
 import supabaseImage from 'public/landing/supabase.svg';
-import MailingList from './MailingList';
 
-const Landing = () => (
+const Landing = (): JSX.Element => (
 	<div className="mt-10 mb-20 text-base-content w-full">
 		<div className="flex max-w-6xl m-auto justify-around">
 			<div className="max-w-sm mr-16 my-auto">
@@ -18,7 +18,7 @@ const Landing = () => (
 				</p>
 			</div>
 			<div className="max-w-xl">
-				<Image src={landTop} height={417} width={583} />
+				<Image src={landTop} height={417} width={583} alt="Construction of a website" />
 			</div>
 		</div>
 
@@ -34,7 +34,7 @@ const Landing = () => (
 				</p>
 			</div>
 			<div className="max-w-xl">
-				<Image src={start} />
+				<Image src={start} alt="screenshot of the website" />
 			</div>
 		</div>
 		<div className="flex max-w-6xl m-auto justify-around mt-24 flex-wrap">
@@ -52,7 +52,7 @@ const Landing = () => (
 				</p>
 			</div>
 			<div className="max-w-md order-2 lg:order-1 flex">
-				<Image src={supabaseImage} />
+				<Image src={supabaseImage} alt="screenshot of the Supabase website" />
 			</div>
 		</div>
 		<MailingList />

utils/priceList.ts

@@ -33,7 +33,7 @@ const Prices = {
 	},
 };
 
-const PriceIds = {
+const PriceIds: { [index: string]: any } = {
 	price_1J5q2yDMjD0UnVmMXzEWYDnl: 'Personal plan (monthly)',
 	price_1J5q45DMjD0UnVmMQxXHKGAv: 'Personal plan (annually)',
 	price_1J5q3GDMjD0UnVmMlHc5Eedq: 'Team plan (monthly)',