Feature/dashboard volunteer (#55)

* change CYF to code your future, change font size of some of inputs

* Change some text in the form

* connecting dashboard to volunteer form

* fix bugs

Author: Wolfjawan

src/Components/Navbar/index.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import logo from '../../logo-cyf.png'
+import logo from '../../images/logo-CYF-square.png'
 import './Navbar.css'
 
 export default () => {
   return (
     <div className="navbar-div">
       <nav className="navbar navbar-expand-lg navbar-light container">
-        <a className="navbar-brand" href="/">
-          <img src={logo} alt="logo" width="170" height="50" />
-        </a>
+        <span className="navbar-brand">
+          <img src={logo} alt="logo" width="80" height="50" />
+        </span>
       </nav>
     </div>
   )

src/Components/forms/data.json

@@ -47,7 +47,7 @@
 
   "radioButtonList": [
     { "value": "None", "_id": "None" },
-    { "value": "Nome", "_id": "Nome" },
+    { "value": "Some", "_id": "Some" },
     { "value": "Professional experience", "_id": "Professional experience" }
   ],
   "guidePeopleSkillList": [
@@ -57,7 +57,12 @@
       "level": "",
       "label": "Coaching / Mentoring"
     },
-    { "id": "09u03uifnc", "name": "", "level": "", "label": "Public Speaking" }
+    {
+      "id": "09u03uifnc",
+      "name": "",
+      "level": "",
+      "label": "Help people learn public speaking"
+    }
   ],
   "techSkillList": [
     {
@@ -69,7 +74,7 @@
     { "id": "23edcs3h3j3", "name": "", "level": "", "label": "ReactJS" },
     { "id": "9087ihncwqd", "name": "", "level": "", "label": "Databases" },
     { "id": "opiuygtbnc2", "name": "", "level": "", "label": "JavaScript" },
-    { "id": "234edcxzzzx", "name": "", "level": "", "label": "HTML, CSS " },
+    { "id": "234edcxzzzx", "name": "", "level": "", "label": "HTML, CSS" },
     { "id": "34refw43efe", "name": "", "level": "", "label": "UX Design" },
     { "id": "232dwjouhv8", "name": "", "level": "", "label": "Other" }
   ],

src/Components/forms/header.js

@@ -1,14 +1,21 @@
 import React, { Fragment } from 'react'
 
-export default ({ err, formInComplete }) => {
+export default ({ err, formInComplete, userId }) => {
   return (
     <Fragment>
       <span className="form-header">Volunteer Application Form</span>
       <hr />
-      <p className="form-description">
-        Thank you for your interest! To ensure we’re a great fit, please
-        complete the form below:
-      </p>
+      {userId ? (
+        <p className="form-description">
+          Thank you for your interest in volunteering with Code Your Future! To
+          ensure we're a great fit, please complete the form below:
+        </p>
+      ) : (
+        <p className="form-description">
+          Thank you for your interest! To ensure we’re a great fit, please
+          complete the form below:
+        </p>
+      )}
       {err && (
         <p className="errors">
           {err}

src/Components/forms/helper.js

@@ -19,6 +19,8 @@ export const initialState = {
   valuationError: false,
   acknowledgement: false,
   formInComplete: false,
+  userId: '',
+  dashboardUrl: '',
   errors: {
     firstName: false,
     lastName: false,

src/Components/forms/index.js

@@ -10,6 +10,11 @@ class Forms extends Component {
   state = initialState
 
   UNSAFE_componentWillMount() {
+    const dashboardUrl = this.props.location.search
+    const { userId } = this.props.match.params
+    if (userId) {
+      this.setState({ userId, dashboardUrl: dashboardUrl.slice(1) })
+    }
     this.props.loadCities()
   }
 
@@ -88,7 +93,8 @@ class Forms extends Component {
       guidePeople,
       techSkill,
       otherSkill,
-      acknowledgement
+      acknowledgement,
+      userId
     } = this.state
 
     const validatedInputs = this.validateForm({
@@ -120,7 +126,8 @@ class Forms extends Component {
         hearAboutCYF,
         guidePeople: filterEmptyValue(guidePeople),
         techSkill: filterEmptyValue(techSkill),
-        otherSkill: filterEmptyValue(otherSkill)
+        otherSkill: filterEmptyValue(otherSkill),
+        userId
       })
     }
   }
@@ -145,25 +152,41 @@ class Forms extends Component {
 
   render() {
     const { err, volunteer } = this.props
-    const { disabled, acknowledgement, formInComplete } = this.state
+    const {
+      disabled,
+      acknowledgement,
+      formInComplete,
+      userId,
+      dashboardUrl
+    } = this.state
     if (volunteer && volunteer._id) {
       return (
         <div className="form-container container p-4">
           <h4>
             Welcome {volunteer.firstName} {volunteer.lastName}
           </h4>
-          <p>
-            Thank you for submitting your application to Code Your Future to
-            become a volunteer. We will review your application and contact you
-            via email within 10 days.
-          </p>
+          {userId ? (
+            <p>
+              Thank you for submitting your application to volunteer with Code
+              Your Future (CYF). If you are already a registered user of the CYF
+              Admin dashboard, here is a <a href={dashboardUrl}> link</a> to
+              login. For new registrants, we will review your application and
+              contact you via email, within 10 days.
+            </p>
+          ) : (
+            <p>
+              Thank you for submitting your application to Code Your Future to
+              become a volunteer. We will review your application and contact
+              you via email within 10 days.
+            </p>
+          )}
         </div>
       )
     }
     return (
       <div className="form-container container">
         <div>
-          <Header err={err} formInComplete={formInComplete} />
+          <Header err={err} formInComplete={formInComplete} userId={userId} />
           <form className="mb-4" onSubmit={this.handleSubmit} method="post">
             <Inputs
               {...this.props}

src/Components/forms/inputs/checkListB.js

@@ -53,7 +53,9 @@ export default ({ onChange, list, name }) => {
                   />
                 )}
                 {listItem.label !== 'Other' && (
-                  <p className="check-list-single-footer">Choose your level</p>
+                  <p className="check-list-single-footer">
+                    Your level of experience
+                  </p>
                 )}
               </span>
             ) : (

src/Routes/index.js

@@ -7,6 +7,7 @@ import NotFound from '../Components/NotFound'
 export default () => (
   <Switch>
     <Public exact path="/" component={Forms} />
+    <Public exact path="/code/:userId" component={Forms} />
     <Route path="*" component={NotFound} />
   </Switch>
 )