From a22054bdf445842524944700b27ee0b420653c56 Mon Sep 17 00:00:00 2001 From: Hrishita Paul Date: Fri, 31 May 2024 21:41:45 -0700 Subject: [PATCH 1/4] fix:Performance issues --- src/components/CollegePage/CollegePage.css | 1 + src/components/Dashboard/Dashboard.jsx | 4 +- .../ForgotPassword/ForgotPassword.jsx | 18 +++---- src/components/Home/Home.jsx | 14 ++--- src/components/Login/Login.jsx | 26 ++++----- src/components/SignUp/SignUp.jsx | 54 +++++++++---------- 6 files changed, 60 insertions(+), 57 deletions(-) diff --git a/src/components/CollegePage/CollegePage.css b/src/components/CollegePage/CollegePage.css index ceeed700..d92a9405 100644 --- a/src/components/CollegePage/CollegePage.css +++ b/src/components/CollegePage/CollegePage.css @@ -10,6 +10,7 @@ } .content { + margin-top:80px; background-color: rgb(26, 165, 224); width: 50vw; } diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 7b63f4ae..e6ce26b5 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/src/components/Dashboard/Dashboard.jsx @@ -34,7 +34,7 @@ const Dashboard = () => { setFilteredColleges(results); }, [searchTerm]); - const handleSignOut = () => { + const handleSignOut = useCallback(() => { signOut(auth) .then(() => { navigate("/"); @@ -42,7 +42,7 @@ const Dashboard = () => { .catch((err) => { alert(err.message); }); - }; + }); const handleCollegeClick = useCallback( (college) => { diff --git a/src/components/ForgotPassword/ForgotPassword.jsx b/src/components/ForgotPassword/ForgotPassword.jsx index 6d138f27..7173b37a 100644 --- a/src/components/ForgotPassword/ForgotPassword.jsx +++ b/src/components/ForgotPassword/ForgotPassword.jsx @@ -9,7 +9,14 @@ function validEmail(email) { /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } - +function onChangeEvent(event){ + setEmail(event.target.value) + if (!validEmail(event.target.value)) { + setError("**Enter a valid E-mail!"); + } else { + setError(""); + } +} function ForgotPassword() { const [email, setEmail] = useState(); @@ -55,14 +62,7 @@ function ForgotPassword() {
{ - setEmail(event.target.value) - if (!validEmail(event.target.value)) { - setError("**Enter a valid E-mail!"); - } else { - setError(""); - } - }} + onChange={onChangeEvent} placeholder="Enter your email address" className={`common-input ${error === '**Enter a valid E-mail!' ? 'error' : ''} ${error === '**Enter a E-mail!' ? 'error' : ''}`} /> {error === "**Enter a E-mail!" && ( diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 5ee083a3..3a9dbc1e 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -3,6 +3,12 @@ import Typewriter from 'typewriter-effect'; import MeetingPhoto from '../../assets/meeting.webp'; import Navbar from '../Navbar/Navbar'; import './Home.css'; + function handleOnInit(typewriter){ + typewriter.typeString("Still Confused with College Choice?") + .pauseFor(10) + .start(); + +} const Home = () => { return ( @@ -10,14 +16,10 @@ const Home = () => {
- Meeting Image + Meeting Pic
{ - typewriter.typeString("Still Confused with College Choice?") - .pauseFor(10) - .start(); - }} + onInit={handleOnInit} />
diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index e3dd6802..4fc4960c 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -28,7 +28,7 @@ export default function Login() { }); // Function for handelling inputs - const handleLoginInfo = (e)=>{ + const handleLoginInfo = usecallback((e)=>{ const {name, value} = e.target; setLoginInfo((prev)=>{ return {...prev, [name]: value} @@ -40,13 +40,13 @@ export default function Login() { setError((prev)=>{ return {...prev, ...errObj} }) - } + }) - const passwordToggle = () => { + const passwordToggle = useCallback(() => { if (passwordType === "password") { setPasswordType("text"); } else setPasswordType("password"); - }; + }); const navigate = useNavigate(); useEffect(() => { @@ -57,7 +57,7 @@ export default function Login() { }); }, []); - const genrateCaptcha = ()=> + const generateCaptcha = useCallback(()=> { let captcha = ""; const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; @@ -67,20 +67,20 @@ export default function Login() { captcha += charset.charAt(randomIndex); } setCaptchaText(captcha) - } + }) useEffect(()=>{ - genrateCaptcha(); + generateCaptcha(); }, []) // if signin with EmailId/password success then navigate to /dashboard - const handleSignIn = (e) => { + const handleSignIn = useCallback((e) => { e.preventDefault(); let submitable = true; if(captchaVal !== captchaText){ alert("Wrong Captcha") setCaptchaVal(""); - genrateCaptcha(); + generateCaptcha(); return; } @@ -103,15 +103,15 @@ export default function Login() { }else{ alert("Please fill all Fields with Valid Data.") } - }; + }); // Popup Google signin - const SignInGoogle = () => { + const SignInGoogle = useCallback(() => { signInWithPopup(auth, googleAuthProvider) .then(() => { navigate("/dashboard"); }) .catch((err) => alert(err.message)); - }; + }); return (
@@ -180,7 +180,7 @@ export default function Login() {
{captchaText}
{ }); const [error, setError] = useState({}); const [passwordType, setPasswordType] = useState("password"); - const [confrimPasswordType, setConfirmPasswordType] = useState("password"); + const [confirmPasswordType, setConfirmPasswordType] = useState("password"); const [registerInformation, setRegisterInformation] = useState({ email: "", password: "", @@ -51,19 +51,19 @@ const SignUpForm = () => { const [captchaText, setCaptchaText] = useState(""); //password toggele - const passwordToggle = () => { + const passwordToggle = useCallback(() => { if (passwordType === "password") { setPasswordType("text"); } else setPasswordType("password"); - }; - const confirmPasswordToggle = () => { - if (confrimPasswordType === "password") { + }); + const confirmPasswordToggle = useCallback(() => { + if (confirmPasswordType === "password") { setConfirmPasswordType("text"); } else setConfirmPasswordType("password"); - }; + }); - // Functions for handleling inputs - const handelUserInfo = (e) => { + // Functions for handling inputs + const handleUserInfo = useCallback((e) => { const { name, value } = e.target; setUserInfo((prev) => { return { ...prev, [name]: value }; @@ -84,9 +84,9 @@ const SignUpForm = () => { }); } console.log(typeof userInfo.age); - }; + }); - const handleRegisterInformation = (e) => { + const handleRegisterInformation = useCallback((e) => { const { name, value } = e.target; setRegisterInformation((prev) => { return { ...prev, [name]: value }; @@ -99,7 +99,7 @@ const SignUpForm = () => { setError((prev) => { return { ...prev, ...errObj }; }); - }; + }); function writeUserData(userId, email, userInfo) { const { firstName, surname, dob, gender, age } = userInfo; @@ -117,7 +117,7 @@ const SignUpForm = () => { let navigate = useNavigate(); - const genrateCaptcha = () => { + const generateCaptcha = useCallback(() => { let captcha = ""; const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; @@ -127,19 +127,19 @@ const SignUpForm = () => { captcha += charset.charAt(randomIndex); } setCaptchaText(captcha); - }; + }); useEffect(() => { - genrateCaptcha(); + generateCaptcha(); }, []); - const handleRegister = async (e) => { + const handleRegister = useCallback(async (e) => { e.preventDefault(); let submitable = true; if (captchaVal !== captchaText) { alert("Wrong Captcha"); setCaptchaVal(""); - genrateCaptcha(); + generateCaptcha(); return; } @@ -167,7 +167,7 @@ const SignUpForm = () => { } else { alert("Please fill all Fields with Valid Data."); } - }; + }); const ageCalculator = (dob) => { const birthDate = new Date(dob); @@ -208,7 +208,7 @@ const SignUpForm = () => { type="text" name="firstName" value={userInfo.firstName} - onChange={handelUserInfo} + onChange={handleUserInfo} placeholder="First Name" className={`firstname-text ${ error.firstNameError && "inputField" @@ -226,7 +226,7 @@ const SignUpForm = () => { type="text" name="surname" value={userInfo.surname} - onChange={handelUserInfo} + onChange={handleUserInfo} placeholder="Last Name" className={`surname-text ${ error.surnameError && "inputField" @@ -290,7 +290,7 @@ const SignUpForm = () => {
{ }`} /> - {confrimPasswordType === "password" ? ( + {confirmPasswordType === "password" ? ( { type="date" value={userInfo.dob} name="dob" - onChange={handelUserInfo} + onChange={handleUserInfo} required /> @@ -355,7 +355,7 @@ const SignUpForm = () => { type="gender" name="gender" value={userInfo.gender} - onChange={handelUserInfo} + onChange={handleUserInfo} required className="" > @@ -381,7 +381,7 @@ const SignUpForm = () => { name="user-type" value="student" id="student-option" - onChange={handelUserInfo} + onChange={handleUserInfo} required /> @@ -400,7 +400,7 @@ const SignUpForm = () => { name="user-type" value="counsellor" id="counsellor-option" - onChange={handelUserInfo} + onChange={handleUserInfo} required /> @@ -414,7 +414,7 @@ const SignUpForm = () => { id="captchaBox" >
{captchaText}
- +
Date: Fri, 31 May 2024 21:54:32 -0700 Subject: [PATCH 2/4] fix:Performance issues --- src/components/CollegePage/CollegePage.css | 3 +-- src/components/Login/Login.jsx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/CollegePage/CollegePage.css b/src/components/CollegePage/CollegePage.css index d92a9405..97bf6474 100644 --- a/src/components/CollegePage/CollegePage.css +++ b/src/components/CollegePage/CollegePage.css @@ -143,9 +143,8 @@ border-radius: 15px; width: 40vw; margin-left: 5vw; - margin-top: 2vw; + margin-top: 120px; background-color: #c5d5d4; - color: white; padding: 10px 20px; font-size: 16px; border: none; diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index 4fc4960c..275b5bc3 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -2,7 +2,7 @@ import { signInWithEmailAndPassword, signInWithPopup } from "firebase/auth"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useCallback} from "react"; import { Link, useNavigate } from "react-router-dom"; import meeting2 from "../../assets/meeting2.png"; @@ -27,8 +27,8 @@ export default function Login() { password: "", }); - // Function for handelling inputs - const handleLoginInfo = usecallback((e)=>{ + // Function for handling inputs + const handleLoginInfo = useCallback((e)=>{ const {name, value} = e.target; setLoginInfo((prev)=>{ return {...prev, [name]: value} From 8910fcbcd3352ca7068b31d002b671a156606e27 Mon Sep 17 00:00:00 2001 From: Hrishita Paul Date: Fri, 31 May 2024 22:22:47 -0700 Subject: [PATCH 3/4] fix:Performance issues --- package-lock.json | 3 --- src/components/CollegePage/CollegePage.css | 1 - src/components/Login/Login.jsx | 2 +- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index dc46ca48..918df5f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4513,7 +4513,6 @@ "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", "requires": {} -<<<<<<< HEAD }, "react-toastify": { "version": "10.0.5", @@ -4523,8 +4522,6 @@ "requires": { "clsx": "^2.1.0" } -======= ->>>>>>> be9db53b45ec1d45ff6af208cda13aa45c8e503b }, "require-directory": { "version": "2.1.1", diff --git a/src/components/CollegePage/CollegePage.css b/src/components/CollegePage/CollegePage.css index 9441cfa0..2ea1435b 100644 --- a/src/components/CollegePage/CollegePage.css +++ b/src/components/CollegePage/CollegePage.css @@ -14,7 +14,6 @@ } .content { - margin-top:80px; background-color: rgb(26, 165, 224); width: 50vw; overflow: hidden; diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index d8f3b7b3..def714de 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -142,7 +142,7 @@ export default function Login() { .catch((err) => toast.error(err.message,{ className: "toast-message", })); - }; + }); return (
From 6c976b6e4afac9f75c845d861d12d8a8d2248819 Mon Sep 17 00:00:00 2001 From: Hrishita Paul Date: Tue, 4 Jun 2024 10:50:04 -0700 Subject: [PATCH 4/4] fix:performance-issues --- src/components/SignUp/SignUp.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/SignUp/SignUp.jsx b/src/components/SignUp/SignUp.jsx index aa5a579a..17d6ced5 100644 --- a/src/components/SignUp/SignUp.jsx +++ b/src/components/SignUp/SignUp.jsx @@ -49,7 +49,9 @@ const SignUpForm = () => { }); const [captchaVal, setCaptchaVal] = useState(""); const [captchaText, setCaptchaText] = useState(""); - + const handleCaptcha=useCallback((e)=>{ + setCaptchaVal(e.target.value) + }); //password toggele const passwordToggle = useCallback(() => { if (passwordType === "password") { @@ -421,7 +423,7 @@ const SignUpForm = () => { name="captcha" value={captchaVal} placeholder="Enter Captcha Here" - onChange={(e) => setCaptchaVal(e.target.value)} + onChange={handleCaptcha} className="w-[100%] bg-slate-100 py-2 px-4 focus:outline-indigo-500" required />