From 46b813f6b2c5935edd9c01667af569c1a8bce788 Mon Sep 17 00:00:00 2001 From: jxmoose Date: Sat, 25 May 2024 14:56:48 -0700 Subject: [PATCH] added footer file --- .../userComponents/Footer/Footer.tsx | 407 ++++++++++++++++++ 1 file changed, 407 insertions(+) create mode 100644 src/components/userComponents/Footer/Footer.tsx diff --git a/src/components/userComponents/Footer/Footer.tsx b/src/components/userComponents/Footer/Footer.tsx new file mode 100644 index 00000000..e6c900bd --- /dev/null +++ b/src/components/userComponents/Footer/Footer.tsx @@ -0,0 +1,407 @@ +'use client'; + +import React, { useEffect, useState } from 'react'; +import { BiErrorCircle } from 'react-icons/bi'; +import { IoIosCheckmarkCircleOutline } from 'react-icons/io'; +import { FaFacebook, FaTiktok, FaYoutube } from 'react-icons/fa'; +import { FaInstagram } from 'react-icons/fa6'; +import { RiTwitterXFill } from 'react-icons/ri'; +import Link from 'next/link'; +import supabase from '../../../supabase/client'; +import { useWebDeviceDetection } from '../../../context/WindowWidthContext/WindowWidthContext'; + +type EmailInputProps = { + inputValueName: string; + inputValueEmail: string; + subscribed: boolean; + handleNameChange: (e: React.ChangeEvent) => void; + handleEmailChange: (e: React.ChangeEvent) => void; + handleSubmit: (e: React.FormEvent) => void; + showError: boolean; + errorMsg: string; +}; + +/** + * + * @param root0 overall + * @param root0.inputValueName name input + * @param root0.inputValueEmail email input + * @param root0.handleSubmit submit change + * @param root0.showError shows error + * @param root0.errorMsg error message + * @param root0.handleNameChange when change name input + * @param root0.handleEmailChange when change email input + * @param root0.subscribed if you successfully subscribed + * @returns email input component + */ +function Input({ + inputValueName, + inputValueEmail, + subscribed, + handleNameChange, + handleEmailChange, + handleSubmit, + showError, + errorMsg, +}: EmailInputProps) { + const isWebDevice = useWebDeviceDetection(); + return ( +
+ {!isWebDevice && ( +
+
+ {subscribed && ( +
+ +

+ THANK YOU FOR SUBSCRIBING +

+

+ Please click the confirmation link sent to your inbox to + complete the subscription process. Thank you for joining us! +

+
+ )} + {!subscribed && ( +
+
+

+ SUBSCRIBE TO OUR NEWSLETTER +

+
+
+

+ Sign up for our monthly news, events, and stories sent to + your inbox. +

+
+
+ + + + {showError && ( +
+ {/* Display your error message or handle the error case */} +
+ +
+

+ {errorMsg} +

+
+ )} +
+
+ )} +
+
+
+
+
+
+

+ CONNECT WITH US +

+
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+
+
+ + {' '} +

Hours & Locations

{' '} + + + {' '} +

Site Maps

{' '} + + + {' '} +

Featured Tours

{' '} + +
+
+ + {' '} +

Exhibits

{' '} + + + {' '} +

News

{' '} + + + {' '} +

Wildlife Spotlights

{' '} + +
+
+
+ +
+
+ Learn more about PHS/SPCA +
+
+
+ Copyright © 2024 Peninsula Humane Society & SPCA{' '} +
+ + + Privacy Policy + +
+
+
+ )} + {isWebDevice && ( +
+
+
+ + Logo + +

+ The Peninsula Humane Society & SPCA (PHS & SPCA) is a local, + private, non-profit charitable organization dedicated to animal + welfare.{' '} +

+ +
+
+ Learn more about PHS/SPCA +
+
+ +
+
+

VISIT

+ + {' '} +

Hours & Location

+ + + {' '} +

Site Maps

+ + + {' '} +

Featured Tours

{' '} + +
+
+

LEARN & EXPLORE

+ + {' '} +

Exhibits

+ + + {' '} +

News

{' '} + + + {' '} +

Wildlife Spotlights

{' '} + +
+
+

CONTACT US

+

+ {' '} + 5333 Zoo Drive
Los Angeles, CA 90027{' '} +

+

(323) 644-4200

+

+ {' '} + Open today from:
+ 9:30 AM – 5:00 PM{' '} +

+
+ + + + + + + + + + + + + + + +
+
+
+
+

+ Copyright © 2024 Peninsula Humane Society & SPCA{' '} +

+ + Privacy Policy + +
+
+ )} +
+ ); +} + +/** + * @param root0 footer element thats at the bottom of every page. renders differentally based on whether its mobile or web. + * @returns an email pop up. + * if no email is entered and the user clicks the submit button, an error message will pop up. + * if an invalid email is entered and the user clicks the submit button, another error message will pop up. + * otherwise, if a valid email is submitted and properly subscribed, another pop up will appear that will tell the user they are subscribed and direct them to another page. + */ +export default function Footer() { + const [inputValueName, setNameValue] = useState(''); + const [inputValueEmail, setEmailValue] = useState(''); + const [showError, setShowError] = useState(false); + const [errorMsg, setErrorMsg] = useState(''); + + const subbed = () => + Boolean(JSON.parse(window.sessionStorage.getItem('subscribed') || 'false')); + const [subscribed, setSubscribed] = useState(subbed); + + useEffect(() => { + window.sessionStorage.setItem('subscribed', subscribed.toString()); + }, [subscribed]); + + const handleNameChange = (e: React.ChangeEvent) => { + setNameValue(e.target.value); + setShowError(false); + }; + + const handleEmailChange = (e: React.ChangeEvent) => { + setEmailValue(e.target.value); + setShowError(false); + }; + + // const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' }) + + const isValidEmail = (email: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.(com|ca)$/; + return emailRegex.test(email); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + // check name + if (!inputValueName.trim()) { + setShowError(true); + const nameElem = document.getElementById('nameInput'); + if (nameElem) { + nameElem.style.borderColor = 'red'; + } + setErrorMsg('Please enter a name'); + } else if (!inputValueEmail.trim()) { + // Handle the case for an empty email + setShowError(true); + const emailElem = document.getElementById('emailInput'); + if (emailElem) { + emailElem.style.borderColor = 'red'; + } + setErrorMsg('Please enter an email address'); + } else if (isValidEmail(inputValueEmail)) { + // Handle the submission for a valid email + try { + // Insert the email into the Supabase database + const { error } = await supabase + .from('emails') + .insert({ emails: inputValueEmail, first_name: inputValueName }); + // console.log('successfully inserted?'); + } catch (error) { + // console.error(error); + return error; + } + + // miha's edits + + // + setSubscribed(true); + // console.log('Valid email:', inputValueEmail); + // Additional logic for handling a valid email + } else { + // Handle the case for an invalid email + setShowError(true); + const emailElem = document.getElementById('emailInput'); + if (emailElem) { + emailElem.style.borderColor = 'red'; + } + setErrorMsg('Enter a valid email format (ex. example@mail.com)'); + } + return null; + }; + return ( +
+ +
+ ); +}