added alert for error in availability and edited textarea style

GSG-G8 · Jun 10, 2020 · 279301e · 279301e
1 parent 1788fbe
commit 279301e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/client/src/components/application/NonlinearStepper/GeneralInfo.js b/client/src/components/application/NonlinearStepper/GeneralInfo.js
@@ -29,7 +29,6 @@ const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
       <Typography variant="h5" color="primary">
         Gender
       </Typography>
-      {/* <div className="Gender_Radio"> */}
       <RadioGroup
         row
         aria-label="gender"
@@ -52,7 +51,6 @@ const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
           label="Male"
         />
       </RadioGroup>
-      {/* </div> */}
       <InputText
         className="nonlinearSelect"
         id="nameID"
@@ -69,15 +67,14 @@ const GeneralInfos = ({ handleFormInput, formValues, errorMsg }) => {
       />
 
       <TextareaAutosize
-        className={` nonlinearSelect ${classes.textArea}`}
+        className="nonlinearSelect textarea"
         label="Motivation"
         name="motivation"
         placeholder="Tell us - in your own words - about your background and why you want to be considered for this program. This is your opportunity to tell your story and make your application unique. Please write at least 5 sentences."
         aria-label="minimum height"
         onChange={handleFormInput}
-        rowsMin={11}
+        rowsMin={4}
         value={formValues.motivation}
-        onError={errorMsg.includes('Insert motivation')}
       />
       <InputText
         className="nonlinearSelect"

diff --git a/client/src/components/application/NonlinearStepper/index.js b/client/src/components/application/NonlinearStepper/index.js
@@ -11,6 +11,7 @@ import GeneralInfos from './GeneralInfo';
 import Typography from '../../common/Typography';
 import { Theme } from '../../common/Typography/style';
 import Button from '../../common/Button';
+import Alert from '../../common/Alert';
 
 import {
   generalInfosValidation,
@@ -27,6 +28,7 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
   const [formValues, setFormValues] = useState(UserData);
   const [errMsg, setErrMsg] = useState([]);
   const [message, setMessage] = useState([]);
+  const [alert, throwAlert] = useState(false);
   const handleFormInput = (e) => {
     setErrMsg([]);
     setFormValues({
@@ -36,13 +38,25 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
   };
 
   const handleNext = async () => {
+    throwAlert(false);
     try {
       await generalInfosValidation(formValues);
       await setMessage('');
       await setActiveStep((prevActiveStep) => prevActiveStep + 1);
     } catch ({ errors }) {
-      setErrMsg(errors);
-      setMessage(errors[0]);
+      const ElementTextArea = document.querySelector('.textarea');
+      throwAlert(true);
+      if (ElementTextArea.value.trim() === '') {
+        ElementTextArea.classList.add('Extra_Text_Area');
+        setErrMsg(errors);
+        setMessage(
+          'You Must Write Your Motivation Message for Joining Code Academy'
+        );
+      } else {
+        ElementTextArea.classList.remove('Extra_Text_Area');
+        setErrMsg(errors);
+        setMessage(errors[0]);
+      }
     }
   };
 
@@ -138,6 +152,12 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
             Availability
           </Typography>
         </div>
+
+        {alert && message.length >= 1 ? (
+          <Alert Type="warning" Msg={message} />
+        ) : (
+          <> </>
+        )}
         <ThemeProvider theme={Theme}>
           <Stepper nonLinear activeStep={activeStep}>
             {steps.map((label, index) => (
@@ -148,7 +168,6 @@ export default function HorizontalNonLinearStepper({ userID, UserData }) {
           </Stepper>
           <div>
             <div>
-              <div className={classes.validation}>{message}</div>
               {getStepContent(activeStep)}
               <div className={classes.gender}>
                 <div className="container_buttons">

diff --git a/client/src/components/pages/application/Availability/index.css b/client/src/components/pages/application/Availability/index.css
@@ -61,6 +61,20 @@
   padding-left: 2rem;
 }
 
+.textarea {
+  resize: none;
+  margin-left: 1rem;
+  border-radius: 0.3rem;
+  padding: 3% 0 0 2%;
+  outline: none;
+  font-weight: lighter;
+  width: 30.5rem;
+}
+
+.Extra_Text_Area {
+  border: 1px solid red;
+}
+
 @media only screen and (max-width: 1150px) {
   .Container_page__availability {
       margin-left: 2%;

diff --git a/client/src/utils/application/nLinearStepperValidation.js b/client/src/utils/application/nLinearStepperValidation.js
@@ -16,7 +16,7 @@ const generalInfosSchema = yup.object().shape({
     .required('Mobile Number is required'),
   age: yup.string().required('Age is required').trim(),
   address: yup.string().required('Address is required'),
-  motivation: yup.string().required(`Insert motivation`).trim(),
+  motivation: yup.string().required('Insert motivation').trim(),
   specialization: yup.string().required(`Insert your Specialization`).trim(),
   university: yup.string().required(`Select your university`).trim(),
   codingExperience: yup