Dynamically change the remaining number of characters required. (#88)

* Dynamically change the remaining number of characters required.

* Changed text, also added string length function for removing white space

* ES6 1 line fnc instead of 3

* forgot npm run fomat

Author: aymenhamada

src/views/pages/ApplicationsView/ApplicationSteps.js

@@ -430,6 +430,7 @@ function FormChallenge({
 }) {
   const classes = useStyles();
   const [formData, updateFormData] = useState(data.challenge);
+  const MIN_CHAR = 150;
 
   const handleChange = event => {
     updateFormData({
@@ -461,10 +462,11 @@ function FormChallenge({
     setActiveStep(3);
   };
 
+  const countChar = string => string.replace(/\s/g, '').length;
+
   useEffect(() => {
     ValidatorForm.addValidationRule('isNotShort', value => {
-      console.log(value);
-      if (value.length < 100) {
+      if (countChar(value) < MIN_CHAR) {
         return false;
       }
       return true;
@@ -486,7 +488,18 @@ function FormChallenge({
         validators={['required', 'isNotShort']}
         errorMessages={[
           'This is a required field',
-          'Text too short. Put in atleast 150 chars.'
+          `Text too short.
+            ${
+              formData.q1 && formData.q1.length
+                ? 'Put in ' +
+                  (MIN_CHAR - countChar(formData.q1)) +
+                  `${
+                    countChar(formData.q1) < MIN_CHAR - 1
+                      ? ' characters more'
+                      : ' character more'
+                  }`
+                : `Put in ${MIN_CHAR} characters more`
+            }`
         ]}
       />
 
@@ -503,7 +516,18 @@ function FormChallenge({
         validators={['required', 'isNotShort']}
         errorMessages={[
           'This is a required field',
-          'Text too short. Put in atleast 150 chars.'
+          `Text too short.
+            ${
+              formData.q2 && formData.q2.length
+                ? 'Put in ' +
+                  (MIN_CHAR - countChar(formData.q2)) +
+                  `${
+                    countChar(formData.q2) < MIN_CHAR - 1
+                      ? ' characters more'
+                      : ' character more'
+                  }`
+                : `Put in ${MIN_CHAR} characters more`
+            }`
         ]}
       />
 
@@ -520,7 +544,18 @@ function FormChallenge({
         validators={['required', 'isNotShort']}
         errorMessages={[
           'This is a required field',
-          'Text too short. Put in atleast 150 chars.'
+          `Text too short.
+            ${
+              formData.q3 && formData.q3.length
+                ? 'Put in ' +
+                  (MIN_CHAR - countChar(formData.q3)) +
+                  `${
+                    countChar(formData.q3) < MIN_CHAR - 1
+                      ? ' characters more'
+                      : ' character more'
+                  }`
+                : `Put in ${MIN_CHAR} characters more`
+            }`
         ]}
       />
 

src/views/pages/CLView/ApplyNowModal.js

@@ -12,7 +12,11 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { ValidatorForm, TextValidator, SelectValidator } from 'react-material-ui-form-validator';
+import {
+  ValidatorForm,
+  TextValidator,
+  SelectValidator
+} from 'react-material-ui-form-validator';
 import { useSnackbar } from 'notistack';
 import axios from 'axios';
 
@@ -134,7 +138,10 @@ export default function ApplyNowModal() {
               name="email"
               onChange={handleChange}
               validators={['required', 'isEmail']}
-              errorMessages={['This is a required field', 'Please enter a valid email']}
+              errorMessages={[
+                'This is a required field',
+                'Please enter a valid email'
+              ]}
             />
 
             <Grid container spacing={2} justify="space-evenly">
@@ -150,7 +157,7 @@ export default function ApplyNowModal() {
                   errorMessages={['Please select a country code']}
                   fullWidth
                 >
-                  {countryCodes.map((code) => {
+                  {countryCodes.map(code => {
                     return <MenuItem value={`+${code}`}>+{code}</MenuItem>;
                   })}
                 </SelectValidator>
@@ -166,8 +173,14 @@ export default function ApplyNowModal() {
                   fullWidth
                   name="phone"
                   onChange={handleChange}
-                  validators={['required', 'matchRegexp:^[+]*[(]*[+]{0,1}[0-9]{1,3}[)]{0,1}[-s./0-9]*$']}
-                  errorMessages={['This is a required field', 'Please enter a valid contact number']}
+                  validators={[
+                    'required',
+                    'matchRegexp:^[+]*[(]*[+]{0,1}[0-9]{1,3}[)]{0,1}[-s./0-9]*$'
+                  ]}
+                  errorMessages={[
+                    'This is a required field',
+                    'Please enter a valid contact number'
+                  ]}
                 />
               </Grid>
             </Grid>
@@ -181,8 +194,14 @@ export default function ApplyNowModal() {
               fullWidth
               name="linkedIn"
               onChange={handleChange}
-              validators={['required', 'matchRegexp:^(http(s)?://)?([w]+.)?linkedin.com/(pub|in|profile)']}
-              errorMessages={['This is a required field', 'Please enter a valid URL']}
+              validators={[
+                'required',
+                'matchRegexp:^(http(s)?://)?([w]+.)?linkedin.com/(pub|in|profile)'
+              ]}
+              errorMessages={[
+                'This is a required field',
+                'Please enter a valid URL'
+              ]}
             />
 
             <TextValidator