Merge pull request #86 from Pybite/signup

added post functionality to singup

web-client/src/pages/signup.js

@@ -1,7 +1,51 @@
 import '../components/signup.css';
 import '../global.css';
+import { useState } from 'react';
+import {useNavigate} from 'react-router-dom';
 
 export default function Signup(){
+    const [ inputs, setInputs ] = useState({
+        name: '',
+        email: '',
+        password: '',
+        dateOfBirth: '',
+        biography: '',
+        notificationPreference: '',
+        agreeToTerms: false,
+        subscribeToNewsletter: false
+    });
+
+    const { name, email, password, dateOfBirth, biography, notificationPreference, agreeToTerms, subscribeToNewsletter } = inputs;
+    const navigate = useNavigate()
+
+    const onChange = e => {
+      setInputs({ ...inputs, [e.target.name]: e.target.value })
+    }
+
+  const checkState = e =>{
+    setInputs({...inputs, [e.target.name]: e.target.checked});
+    }
+
+    const onSubmit = async (e) => {
+      e.preventDefault();
+      const body = { name, email, password, dateOfBirth, biography, notificationPreference, agreeToTerms, subscribeToNewsletter };
+      try {
+        const r = await fetch('http//localhost:3001/users', {
+        method: 'POST',
+        headers: { 'Content-type': 'application/json' },
+        body: JSON.stringify(body),
+        });
+
+        if(r.ok === false){
+          throw new Error('response sent back an error');
+        };
+        navigate('/signin');
+
+      } catch (error) {
+       console.error(error.message);
+      }
+    }
+
   return (
     <>
       <nav aria-label="breadcrumb" className="breadcrumb">
@@ -11,40 +55,40 @@ export default function Signup(){
         </ul>
       </nav>
       <div id="main-container">
-        <form action="https://jsonplaceholder.typicode.com/users" method="POST" id="sign-up-form">
+        <form id="sign-up-form" onSubmit={ onSubmit }>
           <div className="form-group">
-            <label for="sign-up-form-name">Name</label>
-            <input type="text" id="sign-up-form-name" name="name" required/>
+            <label htmlFor="sign-up-form-name">Name</label>
+            <input type="text" id="sign-up-form-name" name="name" value={name} onChange={onChange} required/>
           </div>
           <div className="form-group">
-            <label for="sign-up-form-email">Email</label>
-            <input type="email" name="email" required id="sign-up-form-email"/>
+            <label htmlFor="sign-up-form-email">Email</label>
+            <input type="email" name="email" required id="sign-up-form-email" value={email}  onChange={onChange}/>
           </div>
           <div className="form-group">
-            <label for="sign-up-form-password">Password</label>
-            <input type="password" name="password" id="sign-up-form-password"/>
+            <label htmlFor="sign-up-form-password">Password</label>
+            <input type="password" name="password" id="sign-up-form-password" value={password}  onChange={onChange}/>
           </div>
           <div className="form-group">
-            <label for="sign-up-form-dob">Date of Birth</label>
-            <input type="date" name="dateOfBirth" id="sign-up-form-dob"/>
+            <label htmlFor="sign-up-form-dob">Date of Birth</label>
+            <input type="date" name="dateOfBirth" id="sign-up-form-dob" value={dateOfBirth}  onChange={onChange}/>
           </div>
           <div className="form-group">
             <label>Notification Preference</label>
-            <label><input type="radio" name="notificationPreference"/> Email</label>
-            <label><input type="radio" name="notificationPreference"/> Phone</label>
-            <label><input type="radio" name="notificationPreference"/> None</label>
+            <label><input type="radio" name="notificationPreference" value='email' onChange={onChange} checked={notificationPreference==='email'}/> Email</label>
+            <label><input type="radio" name="notificationPreference" value='phone' onChange={onChange} checked={notificationPreference==='phone'}/> Phone</label>
+            <label><input type="radio" name="notificationPreference" value='none' onChange={onChange} checked={notificationPreference==='none'}/> None</label>
           </div>
-          
+
           <div className="form-group">
-            <label for="sign-up-form-bio">Write About Yourself</label>
-            <textarea name="biography" id="sign-up-form-bio" rows="3"></textarea>
+            <label htmlFor="sign-up-form-bio">Write About Yourself</label>
+            <textarea name="biography" id="sign-up-form-bio" rows="3" value={biography} onChange={e => onChange(e)}></textarea>
           </div>
           <div className="form-group">
             <div>
-              <label><input type="checkbox" name="agreeToTerms" value="true"/> I agree to the terms and conditions</label>
+              <label><input type="checkbox" name="agreeToTerms" onChange={checkState} /> I agree to the terms and conditions</label>
             </div>
             <div>
-              <label><input type="checkbox" name="subscribeToNewsLetter"/> Subscribe to newsletter</label>
+              <label><input type="checkbox" name="subscribeToNewsLetter" onChange={checkState}  /> Subscribe to newsletter</label>
             </div>
           </div>
           <div>