diff --git a/components/AuthText.js b/components/AuthText.tsx similarity index 76% rename from components/AuthText.js rename to components/AuthText.tsx index a6be41d..be85b16 100644 --- a/components/AuthText.js +++ b/components/AuthText.tsx @@ -1,10 +1,15 @@ import Image from 'next/image'; import authImage from 'public/auth.png'; -const AuthText = () => ( +const AuthText = (): JSX.Element => (
- + A rocketship

Join SupaNexTail for free! diff --git a/components/Avatar.js b/components/Avatar.tsx similarity index 83% rename from components/Avatar.js rename to components/Avatar.tsx index f50bef7..21a3e5a 100644 --- a/components/Avatar.js +++ b/components/Avatar.tsx @@ -4,16 +4,22 @@ the upload. You can tweak the max size, line 47 */ -import { useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Image from 'next/image'; import { supabase } from 'utils/supabaseClient'; -const Avatar = ({ url, size, onUpload }) => { - const [avatarUrl, setAvatarUrl] = useState(null); +type AvatarProps = { + url: string; + size: number; + onUpload: (filePath: string) => void; +}; + +const Avatar = ({ url, size, onUpload }: AvatarProps): JSX.Element => { + const [avatarUrl, setAvatarUrl] = useState(''); const [uploading, setUploading] = useState(false); - const customImgLoader = ({ src }) => { + const customImgLoader = ({ src }: { src: string }) => { return `${src}`; }; @@ -21,7 +27,7 @@ const Avatar = ({ url, size, onUpload }) => { if (url) downloadImage(url); }, [url]); - async function downloadImage(path) { + async function downloadImage(path: string) { try { const { data, error } = await supabase.storage.from('avatars').download(path); if (error) { @@ -34,7 +40,7 @@ const Avatar = ({ url, size, onUpload }) => { } } - async function uploadAvatar(event) { + async function uploadAvatar(event: React.ChangeEvent) { try { setUploading(true); diff --git a/components/Footer.js b/components/Footer.tsx similarity index 93% rename from components/Footer.js rename to components/Footer.tsx index 8e9b5a7..61af4bf 100644 --- a/components/Footer.js +++ b/components/Footer.tsx @@ -1,8 +1,8 @@ import Link from 'next/link'; import dynamic from 'next/dynamic'; -const Footer = () => { - const ThemeToggle = dynamic(() => import('components/UI/ThemeToggle.js'), { +const Footer = (): JSX.Element => { + const ThemeToggle = dynamic(() => import('components/UI/ThemeToggle'), { ssr: false, }); return ( diff --git a/components/UI/SignUpPanel.js b/components/UI/SignUpPanel.js deleted file mode 100644 index 81266ba..0000000 --- a/components/UI/SignUpPanel.js +++ /dev/null @@ -1,110 +0,0 @@ -import { IoLogoGoogle } from 'react-icons/io'; -import router from 'next/router'; -import { toast } from 'react-toastify'; -import { useState } from 'react'; - -const SignUpPanel = (props) => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [forgot, setForgot] = useState(false); - - const resetPassword = () => { - props.resetPassword(email).then((result) => { - if (result.error) { - toast.error(result.error.message); - } else toast.success('Check your email to reset your password!'); - }); - }; - - const signup = (e) => { - e.preventDefault(); - - // Handle the login. Go to the homepage if success or display an error. - props - .signUp({ - email, - password, - }) - .then((result) => { - if (result.data) { - router.push('/'); - } - if (result.error) { - toast.error(result.error.message); - } - }); - }; - - return ( -
- {!forgot && ( - <> -

Account Sign Up

-
-
- - { - setEmail(event.target.value); - }} - /> -
-
- { - setPassword(event.target.value); - }} - /> -
- -
- -
-
- - - or sign up with - - -
- -
-
-
- - )} -
- ); -}; - -export default SignUpPanel; diff --git a/components/UI/SignUpPanel.tsx b/components/UI/SignUpPanel.tsx new file mode 100644 index 0000000..c8fb94f --- /dev/null +++ b/components/UI/SignUpPanel.tsx @@ -0,0 +1,99 @@ +import { IoLogoGoogle } from 'react-icons/io'; +import router from 'next/router'; +import { toast } from 'react-toastify'; +import { useState } from 'react'; + +type SignUpPanelProps = { + signIn: ({}) => Promise<{ data: Record; error: { message: string } }>; + signUp: ({}) => Promise<{ data: Record; error: { message: string } }>; +}; + +const SignUpPanel = ({ signIn, signUp }: SignUpPanelProps): JSX.Element => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const signup = (e: React.SyntheticEvent) => { + e.preventDefault(); + + // Handle the login. Go to the homepage if success or display an error. + signUp({ + email, + password, + }).then((result) => { + if (result.data) { + router.push('/'); + } + if (result.error) { + toast.error(result.error.message); + } + }); + }; + + return ( +
+

Account Sign Up

+
+
+ + { + setEmail(event.target.value); + }} + /> +
+
+ { + setPassword(event.target.value); + }} + /> +
+ +
+ +
+
+ + + or sign up with + + +
+ +
+
+
+
+ ); +}; + +export default SignUpPanel; diff --git a/components/UI/ThemeToggle.js b/components/UI/ThemeToggle.tsx similarity index 94% rename from components/UI/ThemeToggle.js rename to components/UI/ThemeToggle.tsx index 6f1f685..b60df82 100644 --- a/components/UI/ThemeToggle.js +++ b/components/UI/ThemeToggle.tsx @@ -11,8 +11,8 @@ const theme = { secondary: 'dark', }; -const ThemeToggle = () => { - const [activeTheme, setActiveTheme] = useState(document.body.dataset.theme); +const ThemeToggle = (): JSX.Element => { + const [activeTheme, setActiveTheme] = useState(document.body.dataset.theme || ''); const inactiveTheme = activeTheme === 'supaTheme' ? 'dark' : 'supaTheme'; useEffect(() => {