From d7d35b4cd63b240c7a2f175d127415bb5e2cbf04 Mon Sep 17 00:00:00 2001 From: Mosh Feu Date: Fri, 3 Sep 2021 18:55:18 +0300 Subject: [PATCH] imp(applying mentorship modal): encourage mentee for detailed request (#845) --- README.md | 4 +- .../MentorshipRequestModals/AcceptModal.tsx | 5 +- .../MentorshipRequest.js | 70 +++++++++++-------- .../Modals/MentorshipRequestModals/style.ts | 20 +++++- src/Me/components/Textarea/Textarea.tsx | 3 +- src/components/MemberArea/EditProfile.js | 5 +- src/components/Navigation/Navigation.js | 11 ++- src/config/constants.js | 7 -- src/config/constants.ts | 10 +++ src/utils/auth.js | 12 ++-- 10 files changed, 93 insertions(+), 54 deletions(-) delete mode 100644 src/config/constants.js create mode 100644 src/config/constants.ts diff --git a/README.md b/README.md index a29e5cbe8..2555bccca 100755 --- a/README.md +++ b/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 diff --git a/src/Me/Modals/MentorshipRequestModals/AcceptModal.tsx b/src/Me/Modals/MentorshipRequestModals/AcceptModal.tsx index 2460d47f6..fcfe19e9b 100644 --- a/src/Me/Modals/MentorshipRequestModals/AcceptModal.tsx +++ b/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 {username}! Please make sure to follow our{' '} Guidelines {' '} diff --git a/src/Me/Modals/MentorshipRequestModals/MentorshipRequest.js b/src/Me/Modals/MentorshipRequestModals/MentorshipRequest.js index f4bcb7d43..758eb0bdc 100644 --- a/src/Me/Modals/MentorshipRequestModals/MentorshipRequest.js +++ b/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] && ( {errors[fieldName]} @@ -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) )} + )} diff --git a/src/Me/Modals/MentorshipRequestModals/style.ts b/src/Me/Modals/MentorshipRequestModals/style.ts index 3e763a5ae..ae5626bbb 100644 --- a/src/Me/Modals/MentorshipRequestModals/style.ts +++ b/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: '👉'; + } + } + } `; diff --git a/src/Me/components/Textarea/Textarea.tsx b/src/Me/components/Textarea/Textarea.tsx index 429867721..a3aa494d9 100644 --- a/src/Me/components/Textarea/Textarea.tsx +++ b/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; diff --git a/src/components/MemberArea/EditProfile.js b/src/components/MemberArea/EditProfile.js index 2afd95e69..492e3db1c 100644 --- a/src/components/MemberArea/EditProfile.js +++ b/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 {