Merge pull request #2 from sarL3y/form-validation

Basic form validation

client/src/components/Footer.js

@@ -7,7 +7,7 @@ const Footer = (props) => {
 
     return (
         <div className="footer-wrapper">
-            <footer className="footer" role="footer" aria-label="footer">
+            <footer className="footer" aria-label="footer">
                 <p>pre-alpha version: 0.1</p>
             </footer>
         </div>

client/src/components/Navbar.js

@@ -16,8 +16,8 @@ const Navbar = (props) => {
                     </Link>
                 </div>
 
-                <div class="navbar-image">
-                    <img src="/hflalogo.png"></img>
+                <div className="navbar-image">
+                    <img src="/hflalogo.png" alt="Hack for LA Logo"></img>
                 </div>
 
                 {/* <div className="navbar-buttons">

client/src/pages/CheckInForm.js

@@ -4,6 +4,9 @@ import '../sass/CheckIn.scss';
 
 const CheckInForm = (props) => {
     const [isLoading, setIsLoading] = useState(false);
+    const [isFormReady, setIsFormReady] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("");
     const [questions, setQuestions] = useState([]);
     const [newOrReturning] = useState(props && props.match.params.userType);
     const [formInput, setFormInput] = useState({ 
@@ -15,8 +18,8 @@ const CheckInForm = (props) => {
     const [firstName, setFirstName] = useState("");
     const [lastName, setLastName] = useState("");
     const [newMember, setNewMember] = useState(true);
-    const [month, setMonth] = useState("-MONTH-");
-    const [year, setYear] = useState("-YEAR-");
+    const [month, setMonth] = useState("JAN");
+    const [year, setYear] = useState("2020");
 
     const fetchQuestions = async () => {
         try {
@@ -58,7 +61,10 @@ const CheckInForm = (props) => {
     const handleNewMemberChange = (e) => {
         if (e.target.value === "true") {
             setNewMember(true);
+            setMonth("JAN");
+            setYear("2020");
         }
+
         if (e.target.value === "false") {
             setNewMember(false);
         }
@@ -106,27 +112,55 @@ const CheckInForm = (props) => {
             });
     }
 
+    // function checkIsEmptyField(obj) {
+    //     if (!Object.values(obj).some(key => (key !== null && key !== ''))) {
+    //         setIsError(true);
+    //         setErrorMessage("Please don't leave any fields blank");
+    //         setIsFormReady(false);
+    //     }  
+    // } 
+
     const checkInNewUser = (e) => {
         e.preventDefault();
 
+        const firstAttended = `${month} ${year}`;
+
+        // SET all of the user's info from useState objects
+        const userForm = { 
+            name: { 
+                firstName, 
+                lastName 
+            }, 
+            ...formInput,
+            newMember,
+            firstAttended
+        };
+
         try {
             setIsLoading(true);
 
-            const firstAttended = `${month} ${year}`;
-
-            // SET all of the user's info from useState objects
-            const userForm = { 
-                name: { 
-                    firstName, 
-                    lastName 
-                }, 
-                ...formInput,
-                newMember,
-                firstAttended
-            };
+            // checkIsEmptyField(userForm);
+            setIsFormReady(true);
+
+            if (Object.values(userForm).some(value => value === "")) {
+                setIsError(true);
+                setErrorMessage("Please don't leave any fields blank");
+                setIsFormReady(false);
+            }
+
+            if(year === "2020" && month !== "JAN") {
+                setIsError(true);
+                setErrorMessage("You can't set a date in the future... Please try again.");
+                setIsFormReady(false);
+            }
+
+            console.log(isFormReady);
 
             // SUBMIT all of the user's info from the userForm object
-            submitForm(userForm);
+            if(isFormReady) {
+                submitForm(userForm);
+            }  
+
             setIsLoading(false);
 
         } catch(error) {
@@ -170,7 +204,7 @@ const CheckInForm = (props) => {
     useEffect(() => {
         fetchQuestions();
 
-    }, []);
+    }, [errorMessage]);
 
     return (
         <div className="flex-container">
@@ -356,6 +390,8 @@ const CheckInForm = (props) => {
                                 })
                             )}
 
+                            {isError && errorMessage.length > 1 ? <div className="error">{errorMessage}</div> : null}
+
                             {!isLoading ? (
                                 <div className="form-row">
                                     <div className="form-input-button">

client/src/pages/Home.js

@@ -62,8 +62,5 @@ const Home = (props) => {
     )
 };
 
-{/* <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@thisisflik?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Steven Pahel"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Steven Pahel</span></a> */}
-
-
 export default Home;