state simplification

client/src/components/User/Register.tsx

@@ -5,70 +5,54 @@ import { registerNewUser } from "../../util/apiUtils";
 import Page from "../../util/Page";
 
 function Register() {
-    const [name, setName] = useState<string>('');
-    const [email, setEmail] = useState<string>('');
-    const [password, setPassword] = useState<string>('');
-    const [verify, setVerify] = useState<string>('');
-    const [warningText, setWarningText] = useState<string>('initial');
-
-    const [userInput, setUserInput] = useState<userInfo>({
-        name: '',
+    const formInitialState: userInfo = {
+        firstName: '',
+        lastName: '',
         email: '',
         password: '',
-    })
+        verifyPassword: '',
+        created: '',
+        headers: emptySessionHeader
+    }
 
-    const [userData, setUserData] = useState<userInfo>();
+    const [userInput, setUserInput] = useState(formInitialState);
+    const [warningText, setWarningText] = useState('initial');
 
     // checks password complexity
     useEffect(() => {
-        if (!password) return;
+        if (!userInput.password) return;
 
         switch (true) {
-            case (!verify):
+            case (!userInput.verifyPassword):
                 setWarningText('Verify your password below.');
                 break;
-            case (verify !== password):
+            case (userInput.verifyPassword !== userInput.password):
                 setWarningText('Passwords do not match.');
                 break;
-            case (verify && !verify.includes('!')):
+            case (userInput.verifyPassword && !userInput.verifyPassword.includes('!')):
                 setWarningText('Password does not meet safety criteria.');
                 break;
-            case (verify === password):
+            case (userInput.verifyPassword === userInput.password):
                 setWarningText('');
                 break;
             default:
                 throw new Error("Password switch case is faulty");
         }
-    }, [password, verify]);
-
-    // updates user info object on each render
-    useEffect(() => {
-        let newInfo: userInfo = {
-            name: name,
-            email: email,
-            password: password,
-            headers: emptySessionHeader
-        }
-
-        setUserData(newInfo);
-    }, [name, email, password]);
+    }, [userInput.password, userInput.verifyPassword]);
 
     // interrupts rendering loop by setting warning text on password data
     useEffect(() => {
         if (warningText === '') {
             setWarningText('Conditions met!');
         }
-    }, [userData, warningText]);
+    }, [userInput, warningText]);
 
     // allows registration submission if warning text has correct value and userData is defined with all required values
     const handleRegistration = async () => {
-        if (!userData) return;
-        warningText === "Conditions met!" && await registerNewUser(userData);
+        if (userInput === formInitialState) return;
+        warningText === "Conditions met!" && await registerNewUser(userInput);
 
-        setName('');
-        setEmail('');
-        setPassword('');
-        setVerify('');
+        setUserInput(formInitialState);
     }
 
     return (
@@ -78,18 +62,18 @@ function Register() {
             <form>
                 <div className="form-row">
                     <label htmlFor="first-name-register">First Name:</label>
-                    <input required type="text" id="name-register" value={name} onChange={(e) => setName(e.target.value)}/>
+                    <input required type="text" id="name-register" value={userInput.firstName} onChange={(e) => setUserInput({...userInput, firstName: e.target.value})}/>
                 </div>
 
                 <div className="form-row">
                     <label htmlFor="last-name-register">Last Name:</label>
-                    <input required type="text" id="last-name-register" value={name} onChange={(e) => setName(e.target.value)}/>
+                    <input required type="text" id="last-name-register" value={userInput.lastName} onChange={(e) => setUserInput({...userInput, lastName: e.target.value})}/>
                 </div>
 
 
                 <div className="form-row">
                     <label htmlFor="email-register">Email address:</label>
-                    <input type="email" id="email-register" value={email} onChange={(e) => setEmail(e.target.value)}/>
+                    <input type="email" id="email-register" value={userInput.email} onChange={(e) => setUserInput({...userInput, email: e.target.value})}/>
                 </div>
 
                 <p style={(warningText === 'initial') ? {display: 'none'} : {display: 'block'}}>{warningText}</p>
@@ -98,17 +82,17 @@ function Register() {
                     <label htmlFor="password-register" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
                         Password:
                     </label>
-                    <input type="password" id="password-register" value={password} onChange={(e) => setPassword(e.target.value)}/>
+                    <input type="password" id="password-register" value={userInput.password} onChange={(e) => setUserInput({...userInput, password: e.target.value})}/>
                 </div>
                 <div className="form-row">
                     <label htmlFor="password-verify" style={(warningText && warningText !== 'Conditions met!') ? {color: 'red'} : {color: 'green'}}>
                         Re-enter password:
                     </label>
-                    <input type="password" id="password-verify" value={verify} onChange={(e) => setVerify(e.target.value)}/>
+                    <input type="password" id="password-verify" value={userInput.verifyPassword} onChange={(e) => setUserInput({...userInput, verifyPassword: e.target.value})}/>
                 </div>
             </form>
 
-            <button disabled={!userData} onClick={handleRegistration}>Create my account</button>
+            <button disabled={warningText !== 'Conditions met!'} onClick={handleRegistration}>Create my account</button>
         </Page>
     );
 }

client/src/types/main.d.ts

@@ -6,9 +6,14 @@ export type userInfo = {
     lastName?: string
     email: string
     id?: number
+    
+    // NOTE: userInfo.name is deprecated
     name?: string
     password: string
+    verifyPassword?: string
     headers?: SessionHeader
+    created?: string
+    modified?: string
 }
 
 export type LoginHeaders = {

routes/register.js

@@ -5,14 +5,16 @@ const client = require('../db/Client');
 
 registerRouter.route('/').post(async (req, res) => {
     const newClient = client();
-    const { name, email, password } = req.body;
+    const { firstName, lastName, email, password } = req.body;
 
     const salt = await bcrypt.genSalt(10);
     const hash = await bcrypt.hash(password, salt);
 
     try {
         newClient.connect().then(console.log("Connection successful."));
-        await newClient.query("INSERT INTO users (name, email, password) values ($1, $2, $3)", [name, email, hash]);
+        await newClient.query(
+            "INSERT INTO users (first_name, last_name, email, password) values ($1, $2, $3, $4)",
+            [firstName, lastName, email, hash]);
         res.sendStatus(200);
     } catch(e) {
         console.log(e);