git push origin developMerge branch 'issue-148' into develop

Author: callmekatootie

client/src/components/EditProfileModal/index.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PT from "prop-types";
+import { trim, findIndex } from "lodash";
 
 import Button from "../Button";
 import Input from "../Input";
@@ -87,6 +88,38 @@ export default function EditProfileModal({
     setLocalUser({ ...localUser, skills });
   };
 
+  /**
+   * Checks if all required fields are field
+   * @param {Object} localUser user's new data
+   */
+  const isValid = (localUser) => {
+    let fieldName;
+    if (!trim(localUser.firstName)) {
+      fieldName = "First name";
+    } else if (!trim(localUser.lastName)) {
+      fieldName = "Last name";
+    } else if (!trim(localUser.title.value)) {
+      fieldName = "Current role";
+    } else if (!trim(localUser.company.value)) {
+      fieldName = "Company";
+    } else if (!trim(localUser.location.value)) {
+      fieldName = "Location";
+    } else {
+      let fieldIndex = findIndex(
+        localUser.companyAttributes,
+        (a) => !trim(a.value)
+      );
+      if (fieldIndex !== -1) {
+        fieldName = localUser.companyAttributes[fieldIndex].name;
+      }
+    }
+    if (fieldName) {
+      alert(`Please enter a value for the "${fieldName}" field`);
+      return false;
+    }
+    return true;
+  };
+
   return (
     <Modal className={style.container} onCancel={onCancel}>
       <ProfileCard
@@ -111,8 +144,10 @@ export default function EditProfileModal({
               isSavingChanges ? style.disabledButton : style.saveButton
             }
             onClick={() => {
-              setIsSavingChanges(true);
-              updateUser(localUser);
+              if (isValid(localUser)) {
+                setIsSavingChanges(true);
+                updateUser(localUser);
+              }
             }}
             disabled={isSavingChanges || isDeactivatingUser}
           >
@@ -132,6 +167,7 @@ export default function EditProfileModal({
                 setImmediate(() => target.focus());
               }}
               value={localUser.firstName}
+              required
             />
             <Input
               label="Last name"
@@ -143,6 +179,7 @@ export default function EditProfileModal({
                 setImmediate(() => target.focus());
               }}
               value={localUser.lastName}
+              required
             />
             <Input
               label="Current role"
@@ -157,6 +194,7 @@ export default function EditProfileModal({
                 setImmediate(() => target.focus());
               }}
               value={localUser.title.value}
+              required
             />
             <Input
               label="Company"
@@ -171,6 +209,7 @@ export default function EditProfileModal({
                 setImmediate(() => target.focus());
               }}
               value={localUser.company.value}
+              required
             />
             <Input
               label="Location"
@@ -185,6 +224,7 @@ export default function EditProfileModal({
                 setImmediate(() => target.focus());
               }}
               value={localUser.location.value}
+              required
             />
           </div>
           <h3>Skills</h3>
@@ -234,6 +274,7 @@ export default function EditProfileModal({
                   setImmediate(() => target.focus());
                 }}
                 value={localUser.companyAttributes[key].value}
+                required
               />
             ))}
           </div>

client/src/components/Input/index.jsx

@@ -4,14 +4,16 @@ import _ from "lodash";
 
 import style from "./style.module.scss";
 
-export default function Input({ className, label, onChange, value }) {
+export default function Input({ className, label, onChange, value, required }) {
   let containerStyle = style.container;
+  let labelStyle = style.label;
   if (className) containerStyle += ` ${className}`;
+  if (required) labelStyle += ` ${style.required}`;
   const id = _.uniqueId("input_");
 
   return (
     <div className={containerStyle}>
-      <label htmlFor={id} className={style.label}>
+      <label htmlFor={id} className={labelStyle}>
         {label}
       </label>
       <input
@@ -22,6 +24,7 @@ export default function Input({ className, label, onChange, value }) {
           if (event.keyCode === 8) {
             event.preventDefault();
             event.currentTarget.value = event.currentTarget.value.slice(0, -1);
+            onChange(event);
           }
         }}
         value={value}
@@ -35,4 +38,9 @@ Input.propTypes = {
   label: PT.string,
   onChange: PT.func,
   value: PT.string,
+  required: PT.bool,
+};
+
+Input.defaultProps = {
+  required: false,
 };

client/src/components/Input/style.module.scss

@@ -30,3 +30,9 @@
   font: 400 12pt/1.25 Inter;
   width: 180px;
 }
+
+.label.required:after {
+  content: "*";
+  color: red;
+  margin-left: 5px;
+}