imp(applying mentorship modal): encourage mentee for detailed request (#845)

Author: moshfeu

README.md

@@ -17,7 +17,7 @@ Pre-release version of Coding Coach.
 
 ## Looking for a mentor?
 
-**Please read our [Mentorships Guideline](https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit?ts=5dc96ff1)**
+**Please read our [Mentorships Guideline](https://codingcoach.io/guidelines/mentorship-guidelines)**
 
 1. Go to https://mentors.codingcoach.io/
 2. Register (or Login)
@@ -33,7 +33,7 @@ If you didn't receive any response, you can apply to more mentors.
 
 ## Want to be a mentor?
 
-**Please read our [Mentorships Guideline](https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit?ts=5dc96ff1)**
+**Please read our [Mentorships Guideline](https://codingcoach.io/guidelines/mentorship-guidelines)**
 
 1. Go to https://mentors.codingcoach.io/.
 1. Register

src/Me/Modals/MentorshipRequestModals/AcceptModal.tsx

@@ -1,6 +1,7 @@
 import Body from './style';
 import { Modal } from '../Modal';
 import { ReactComponent as MentorshipSvg } from '../../../assets/me/mentorship.svg';
+import { links } from '../../../config/constants';
 
 type AcceptModalProps = {
   username: string;
@@ -16,9 +17,9 @@ const AcceptModal = ({ username, onClose }: AcceptModalProps) => {
           Awesome! You are now Mentoring <b>{username}!</b> Please make sure to
           follow our{' '}
           <a
-            href="https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit"
+            href={links.MENTORSHIP_GUIDELINES}
+            // eslint-disable-next-line react/jsx-no-target-blank
             target="_blank"
-            rel="noreferrer"
           >
             Guidelines
           </a>{' '}

src/Me/Modals/MentorshipRequestModals/MentorshipRequest.js

@@ -6,6 +6,7 @@ import Textarea from '../../components/Textarea';
 import { applyForMentorship, getMyMentorshipApplication } from '../../../api';
 import ImageSrc from '../../../assets/mentorshipRequestSuccess.svg';
 import Body from './style';
+import { links } from '../../../config/constants';
 
 const FormFields = styled.div`
   display: flex;
@@ -28,8 +29,6 @@ const ExtendedFormField = styled(FormField)`
 
   & label {
     margin-top: 32px;
-    color: ${props =>
-      props.invalid ? 'var(--form-text-invalid)' : 'var(--form-text-default)'};
   }
 `;
 
@@ -55,35 +54,35 @@ const MentorshipRequest = ({ mentor }) => {
     });
   };
 
+  const commonProps = {
+    type: 'longtext',
+    required: true,
+    minLength: 30,
+    validate: value => value.length >= 30,
+    helpText: 'Minimum 30 characters',
+    style: {
+      height: '121px',
+    },
+  };
+
   const model = {
     background: {
+      ...commonProps,
       label: 'My Background',
-      type: 'longtext',
       defaultValue: mentorshipRequestDetails.background,
       placeholder: 'Tell the mentor about yourself.',
-      style: {
-        height: '121px',
-      },
     },
     expectation: {
+      ...commonProps,
       label: 'My Expectations',
-      type: 'longtext',
       defaultValue: mentorshipRequestDetails.expectation,
       placeholder: 'What do you expect from this mentorship?',
-      style: {
-        height: '121px',
-      },
     },
     message: {
+      ...commonProps,
       label: 'Message',
-      type: 'longtext',
       defaultValue: mentorshipRequestDetails.message,
-      validate: value => !!value,
-      required: true,
       placeholder: 'Anything else you want to say?',
-      style: {
-        height: '121px',
-      },
     },
   };
 
@@ -104,11 +103,9 @@ const MentorshipRequest = ({ mentor }) => {
               required={config.required}
               placeholder={config.placeholder}
               value={config.defaultValue}
-              style={{
-                ...config.style,
-                borderColor: errors[fieldName] && 'var(--form-text-invalid)',
-              }}
+              style={config.style}
               invalid={errors[fieldName]}
+              minLength={config.minLength}
             />
             {errors[fieldName] && (
               <ErrorMessage>{errors[fieldName]}</ErrorMessage>
@@ -120,27 +117,21 @@ const MentorshipRequest = ({ mentor }) => {
     }
   };
 
-  // validate form details
   const validate = () => {
-    let isValid = true;
     const _errors = {};
     Object.entries(model).forEach(([field, config]) => {
       if (
         config.validate &&
         !config.validate(mentorshipRequestDetails[field])
       ) {
-        _errors[field] = `The ${config.label.toLowerCase()} is required.`;
-        isValid = false;
+        _errors[
+          field
+        ] = `"${config.label}" should be longer than 30 characters`;
       }
     });
 
-    setErrors(pervState => ({
-      ...pervState,
-      ..._errors,
-      isValid,
-    }));
-
-    return isValid;
+    setErrors(_errors);
+    return Object.keys(_errors).length === 0;
   };
 
   const onSubmit = async e => {
@@ -176,6 +167,23 @@ const MentorshipRequest = ({ mentor }) => {
               formField(fieldName, field, i === 0)
             )}
           </FormFields>
+          <ul>
+            <li>
+              It's important to include all the relevant details so the mentor
+              will understand who you are, where you stand and what you're
+              looking for. Once you finish, please read it to make sure you
+              havn't miss anything.
+            </li>
+            <li>
+              <span>
+                If you haven't read our {/* eslint-disable-next-line */}
+                <a target="_blank" href={links.MENTORSHIP_GUIDELINES}>
+                  Mentorship Guidelines
+                </a>
+                , now is the a good time
+              </span>
+            </li>
+          </ul>
         </Body>
       )}
     </Modal>

src/Me/Modals/MentorshipRequestModals/style.ts

@@ -12,10 +12,28 @@ export default styled.div`
   overflow-y: auto;
 
   @media ${desktop} {
-    max-width: 285px;
+    max-width: 500px;
   }
 
   p {
     text-align: center;
   }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+
+    li {
+      display: grid;
+      grid-template-columns: 0 1fr;
+      grid-gap: 1.75em;
+      align-items: baseline;
+
+      &:before {
+        content: '👉';
+      }
+    }
+  }
 `;

src/Me/components/Textarea/Textarea.tsx

@@ -8,7 +8,8 @@ const StyledTextarea = styled.textarea<{ invalid?: boolean }>`
   line-height: 17px;
   border-radius: 3px;
   background-color: #fff;
-  border: 1px solid #bfbfbf;
+  border: 1px solid
+    ${props => (props.invalid ? 'var(--form-text-invalid)' : '#bfbfbf')};
   padding: 7px 12px 6px 8px;
   color: #4f4f4f;
   min-height: 75px;

src/components/MemberArea/EditProfile.js

@@ -17,6 +17,7 @@ import { providers } from '../../channelProvider';
 import messages from '../../messages';
 import { report, reportError } from '../../ga';
 import UserContext from '../../context/userContext/UserContext';
+import { links } from '../../config/constants';
 
 export default class EditProfile extends Component {
   static contextType = UserContext;
@@ -352,9 +353,9 @@ export default class EditProfile extends Component {
               <label htmlFor="switch-input-read-guidelines-switch">
                 I have read the{' '}
                 <a
-                  href="https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit"
+                  href={links.MENTORSHIP_GUIDELINES}
+                  // eslint-disable-next-line react/jsx-no-target-blank
                   target="_blank"
-                  rel="noreferrer"
                 >
                   Mentorship guidelines
                 </a>{' '}

src/components/Navigation/Navigation.js

@@ -4,6 +4,7 @@ import { isMentor } from '../../helpers/user';
 import auth from '../../utils/auth';
 import EditProfile from '../MemberArea/EditProfile';
 import UserContext from '../../context/userContext/UserContext';
+import { links } from '../../config/constants';
 
 function Navigation({ isAuthenticated, onOpenModal }) {
   const { currentUser } = useContext(UserContext);
@@ -35,11 +36,17 @@ function Navigation({ isAuthenticated, onOpenModal }) {
     <Nav id="menu">
       <List>
         <Link href="https://codingcoach.io/">About</Link>
-        <Link href="https://docs.google.com/document/d/1zKCxmIh0Sd4aWLiQncICOGm6uf38S0kJ0xb0qErNFVA/edit">
+        <Link href={links.MENTORSHIP_GUIDELINES} target="_blank">
           Mentorship Guidelines
         </Link>
         {renderBecomeAMentor()}
-        <Link href="https://calendar.google.com/calendar/u/0?cid=Y18xdmhxMWlzOTRqdHVwdHZnNTJrbzM0cW42a0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" target="_blank">Sessions Calender</Link>
+        <Link
+          href="https://calendar.google.com/calendar/u/0?cid=Y18xdmhxMWlzOTRqdHVwdHZnNTJrbzM0cW42a0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Sessions Calender
+        </Link>
       </List>
     </Nav>
   );

src/config/constants.js

@@ -0,0 +1,10 @@
+export const auth = {
+  DOMAIN: process.env.REACT_APP_AUTH_DOMAIN,
+  CLIENT_ID: process.env.REACT_APP_AUTH_CLIENT_ID,
+  CALLBACK_URL: process.env.REACT_APP_AUTH_CALLBACK,
+};
+
+export const links = {
+  MENTORSHIP_GUIDELINES:
+    'https://codingcoach.io/guidelines/mentorship-guidelines',
+};

src/config/constants.ts

@@ -1,5 +1,5 @@
 import auth0 from 'auth0-js';
-import Constants from '../config/constants';
+import { auth } from '../config/constants';
 import { clearCurrentUser, getCurrentUser } from '../api';
 import { isMentor } from '../helpers/user';
 
@@ -13,9 +13,9 @@ class Auth {
   expiresAt;
 
   auth0 = new auth0.WebAuth({
-    domain: Constants.auth.DOMAIN,
-    clientID: Constants.auth.CLIENT_ID,
-    redirectUri: Constants.auth.CALLBACK_URL,
+    domain: auth.DOMAIN,
+    clientID: auth.CLIENT_ID,
+    redirectUri: auth.CALLBACK_URL,
     responseType: 'token id_token',
     scope: 'openid',
   });
@@ -26,7 +26,7 @@ class Auth {
         origin: isMentorIntent ? 'mentor' : 'user',
       },
       redirectUri: redirectTo
-        ? `${Constants.auth.CALLBACK_URL}?redirectTo=${redirectTo}`
+        ? `${auth.CALLBACK_URL}?redirectTo=${redirectTo}`
         : window.location.href,
     });
   };
@@ -137,7 +137,7 @@ class Auth {
     this.#logout();
     clearCurrentUser();
     this.auth0.logout({
-      returnTo: Constants.auth.CALLBACK_URL,
+      returnTo: auth.CALLBACK_URL,
     });
   };