From fb15863b2fc502b834a3c514eea648dfe290359a Mon Sep 17 00:00:00 2001
From: Nicholas <nsanaie@unc.edu>
Date: Sat, 2 Mar 2024 01:40:02 -0500
Subject: [PATCH] simplified code by removing multiple useEffects()

---
 .vscode/settings.json                 |  1 +
 compass/app/auth/newPassword/page.tsx | 23 +++++------------------
 compass/components/Input.tsx          |  5 +++--
 3 files changed, 9 insertions(+), 20 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/compass/app/auth/newPassword/page.tsx b/compass/app/auth/newPassword/page.tsx
index d230894..1b626ab 100644
--- a/compass/app/auth/newPassword/page.tsx
+++ b/compass/app/auth/newPassword/page.tsx
@@ -15,25 +15,11 @@ function isStrongPassword(password: string): boolean {
 export default function Page() {
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
- const [valid, setValid] = useState(true);
- const [matching, setMatching] = useState(true);
  const [isButtonDisabled, setIsButtonDisabled] = useState(true);
 
  useEffect(() => {
-    if (newPassword !== ''){
-      setValid(isStrongPassword(newPassword))
-    }
- }, [newPassword])
-
- useEffect(() => {
-  if (confirmPassword !== ''){
-    setMatching(newPassword === confirmPassword)
-  }
-}, [newPassword, confirmPassword])
-
- useEffect(() => {
-    setIsButtonDisabled(newPassword === '' || confirmPassword === '' || !matching || !valid);
-  }, [matching, valid]);
+    setIsButtonDisabled(newPassword === '' || confirmPassword === '' || newPassword !== confirmPassword|| !isStrongPassword(newPassword));
+  }, [newPassword, confirmPassword]);
 
 
  return (
@@ -58,12 +44,13 @@ export default function Page() {
                type="password"
                title="Enter New Password"
                value={newPassword}
+               valid={isButtonDisabled}
                onChange={(e) => {
                setNewPassword(e.target.value);
                }}
            />
          </div>
-         {valid ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
+         {isStrongPassword(newPassword) || newPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
                             <strong className="block font-medium text-red-800"> Password is not strong enough. </strong>
                               <p className="mt-2 text-sm text-red-700">
                               Tip: Use a mix of letters, numbers, and symbols for a strong password. Aim for at least 8 characters!
@@ -79,7 +66,7 @@ export default function Page() {
                }}
            />
          </div>
-         {matching ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
+         {newPassword === confirmPassword || confirmPassword === '' ? null : <div role="alert" className="rounded border-s-4 border-red-500 bg-red-50 p-4">
                             <strong className="block font-medium text-red-800"> Passwords do not match. </strong>
                               <p className="mt-2 text-sm text-red-700">
                               Please make sure both passwords are the exact same!
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index d5a4348..07c4d16 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -5,15 +5,16 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   title?: ReactNode;
   type?:ReactNode;
   placeholder?:ReactNode
+  valid?:boolean;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void; 
 };
 
-const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, ...rest }) => {
+const Input: FunctionComponent<InputProps> = ({ icon, type, title, placeholder, onChange, valid, ...rest }) => {
   return (
     <div>
       <label
   htmlFor={title}
-  className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-purple-600 focus-within:ring-1 focus-within:ring-purple-600"
+  className="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-red-600 focus-within:ring-1 focus-within:ring-red-600"
 >
   <span className="text-xs font-semibold text-gray-700"> {title} </span>