Feat/mentoring-topics-revamp

apps/redi-connect/src/components/molecules/ReadMentoringGoals.tsx

@@ -0,0 +1,56 @@
+import {
+  Caption,
+  CardTags,
+  CardTagsProps,
+  Placeholder,
+} from '@talent-connect/shared-atomic-design-components'
+import { MENTORING_GOALS } from '@talent-connect/shared-config'
+import { RedProfile } from '@talent-connect/shared-types'
+import React from 'react'
+import { connect } from 'react-redux'
+import { RootState } from '../../redux/types'
+
+interface ReadMentoringProps {
+  profile: RedProfile
+  caption?: boolean
+}
+
+export const ProfileTags = ({ items, shortList }: CardTagsProps) => (
+  <CardTags
+    items={items}
+    shortList={shortList}
+    formatter={(item: string) => MENTORING_GOALS[item]}
+  />
+)
+
+const ReadMentoringGoals = ({ profile, caption }: ReadMentoringProps) => {
+  const { mentoringGoals } = profile
+
+  if (!mentoringGoals?.length && !caption)
+    return (
+      <Placeholder>
+        Select at least one goal you would like to support mentees with
+      </Placeholder>
+    )
+
+  return (
+    <>
+      {caption && <Caption>Mentoring goals</Caption>}
+      <ProfileTags items={mentoringGoals} />
+    </>
+  )
+}
+
+const mapStateToProps = (state: RootState) => ({
+  profile: state.user.profile as RedProfile,
+})
+
+export default {
+  Me: connect(mapStateToProps, {})(ReadMentoringGoals),
+  Some: ({ profile }: ReadMentoringProps) => (
+    <ReadMentoringGoals profile={profile} caption />
+  ),
+  Tags: ({ items, shortList }: CardTagsProps) => (
+    <ProfileTags items={items} shortList />
+  ),
+}

apps/redi-connect/src/components/molecules/ReadMentoringTopicsNew2022.tsx

@@ -0,0 +1,55 @@
+import {
+  Caption,
+  CardTags,
+  CardTagsProps,
+  Placeholder,
+} from '@talent-connect/shared-atomic-design-components'
+import { MENTORING_TOPICS_MAP } from '@talent-connect/shared-config'
+import { RedProfile } from '@talent-connect/shared-types'
+import React from 'react'
+import { connect } from 'react-redux'
+import { RootState } from '../../redux/types'
+
+interface ReadMentoringProps {
+  profile: RedProfile
+  caption?: boolean
+}
+
+export const ProfileTags = ({ items, shortList }: CardTagsProps) => (
+  <CardTags
+    items={items}
+    shortList={shortList}
+    formatter={(item: string) => MENTORING_TOPICS_MAP[item]}
+  />
+)
+
+const ReadMentoringTopicsNew2022 = ({
+  profile,
+  caption,
+}: ReadMentoringProps) => {
+  const { mentoringTopics } = profile
+
+  if (!mentoringTopics?.length && !caption)
+    return <Placeholder>Please pick mentoring topics.</Placeholder>
+
+  return (
+    <>
+      {caption && <Caption>{'Mentoring Topics'}</Caption>}
+      <ProfileTags items={mentoringTopics} />
+    </>
+  )
+}
+
+const mapStateToProps = (state: RootState) => ({
+  profile: state.user.profile as RedProfile,
+})
+
+export default {
+  Me: connect(mapStateToProps, {})(ReadMentoringTopicsNew2022),
+  Some: ({ profile }: ReadMentoringProps) => (
+    <ReadMentoringTopicsNew2022 profile={profile} caption />
+  ),
+  Tags: ({ items, shortList }: CardTagsProps) => (
+    <ProfileTags items={items} shortList />
+  ),
+}

apps/redi-connect/src/components/molecules/ReadProfessionalExperienceFields.tsx

@@ -0,0 +1,55 @@
+import {
+  Caption,
+  CardTags,
+  CardTagsProps,
+  Placeholder,
+} from '@talent-connect/shared-atomic-design-components'
+import { PROFESSIONAL_EXPERIENCE_FIELDS } from '@talent-connect/shared-config'
+import { RedProfile } from '@talent-connect/shared-types'
+import React from 'react'
+import { connect } from 'react-redux'
+import { RootState } from '../../redux/types'
+
+interface ReadMentoringProps {
+  profile: RedProfile
+  caption?: boolean
+}
+
+export const ProfileTags = ({ items, shortList }: CardTagsProps) => (
+  <CardTags
+    items={items}
+    shortList={shortList}
+    formatter={(item: string) => PROFESSIONAL_EXPERIENCE_FIELDS[item]}
+  />
+)
+
+const ReadProfessionalExperienceFields = ({
+  profile,
+  caption,
+}: ReadMentoringProps) => {
+  const { professionalExperienceFields } = profile
+
+  if (!professionalExperienceFields?.length && !caption)
+    return <Placeholder>Select your fields of expertise</Placeholder>
+
+  return (
+    <>
+      {caption && <Caption>Professional experience</Caption>}
+      <ProfileTags items={professionalExperienceFields} />
+    </>
+  )
+}
+
+const mapStateToProps = (state: RootState) => ({
+  profile: state.user.profile as RedProfile,
+})
+
+export default {
+  Me: connect(mapStateToProps, {})(ReadProfessionalExperienceFields),
+  Some: ({ profile }: ReadMentoringProps) => (
+    <ReadProfessionalExperienceFields profile={profile} caption />
+  ),
+  Tags: ({ items, shortList }: CardTagsProps) => (
+    <ProfileTags items={items} shortList />
+  ),
+}

apps/redi-connect/src/components/organisms/EditableMentoringGoals.tsx

@@ -0,0 +1,134 @@
+import {
+  Checkbox,
+  Editable,
+} from '@talent-connect/shared-atomic-design-components'
+import { MENTORING_GOALS } from '@talent-connect/shared-config'
+import { RedProfile } from '@talent-connect/shared-types'
+import { objectEntries } from '@talent-connect/typescript-utilities'
+import { FormikValues, useFormik } from 'formik'
+import React from 'react'
+import { Content, Element } from 'react-bulma-components'
+import { connect } from 'react-redux'
+import * as Yup from 'yup'
+import { RootState } from '../../redux/types'
+import { profileSaveStart } from '../../redux/user/actions'
+import ReadMentoringGoals from '../molecules/ReadMentoringGoals'
+
+export interface FormValues {
+  isMentor: boolean
+  mentoringGoals: string[]
+}
+
+const formMentoringGoals = objectEntries(MENTORING_GOALS)
+
+interface Props {
+  profile: RedProfile | undefined
+  profileSaveStart: Function
+}
+
+const validationSchema = Yup.object({
+  mentoringGoals: Yup.array().min(1),
+})
+
+const EditableMentoringGoals = ({ profile, profileSaveStart }: Props) => {
+  const { id, userType, mentoringGoals } = profile as RedProfile
+
+  const submitForm = async (values: FormikValues) => {
+    const profileMentoring = values as Partial<RedProfile>
+    profileSaveStart({ ...profileMentoring, id })
+  }
+
+  const isMentor =
+    userType === 'mentor' || userType === 'public-sign-up-mentor-pending-review'
+
+  const initialValues: FormValues = {
+    isMentor,
+    mentoringGoals: mentoringGoals || [],
+  }
+
+  const formik = useFormik({
+    initialValues,
+    enableReinitialize: true,
+    validationSchema,
+    onSubmit: submitForm,
+  })
+
+  const { mentoringGoals: selectedMentoringGoals } = formik.values
+
+  const mentoringGoalsChange = (e: any) => {
+    e.persist()
+    const value = e.target.value
+    let newMentoringGoals
+    if (e.target.checked) {
+      newMentoringGoals = selectedMentoringGoals.concat(value)
+    } else {
+      newMentoringGoals = selectedMentoringGoals.filter(
+        (cat: any) => cat !== value
+      )
+    }
+    formik.setFieldValue('mentoringGoals', newMentoringGoals)
+    formik.setFieldTouched('mentoringGoals', true, false)
+  }
+
+  return (
+    <Editable
+      title="Mentoring Goals"
+      onSave={() => formik.handleSubmit()}
+      onClose={() => formik.resetForm()}
+      savePossible={formik.dirty && formik.isValid}
+      read={<ReadMentoringGoals.Me />}
+      className="mentoring"
+    >
+      <Content>
+        Select at least one goal you would like to support mentees with
+      </Content>
+      <Element className="mentoring__group">
+        {formMentoringGoals.map(([fieldId, fieldLabel]) => (
+          <MentoringGoal
+            key={fieldId}
+            id={fieldId}
+            label={fieldLabel}
+            selectedMentoringGoals={selectedMentoringGoals}
+            onChange={mentoringGoalsChange}
+            formik={formik}
+          />
+        ))}
+      </Element>
+    </Editable>
+  )
+}
+
+const MentoringGoal = ({
+  id,
+  label,
+  selectedMentoringGoals,
+  onChange,
+  formik,
+}: any) => {
+  return (
+    <Checkbox.Form
+      name={`mentoringGoals-${id}`}
+      key={id}
+      value={id}
+      checked={selectedMentoringGoals.includes(id)}
+      customOnChange={onChange}
+      {...formik}
+    >
+      {label}
+    </Checkbox.Form>
+  )
+}
+
+const mapStateToProps = (state: RootState) => ({
+  profile: state.user.profile,
+})
+
+const mapDispatchToProps = (dispatch: any) => ({
+  profileSaveStart: (profile: Partial<RedProfile>) =>
+    dispatch(profileSaveStart(profile)),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EditableMentoringGoals)

apps/redi-connect/src/components/organisms/EditableMentoringTopics.tsx

@@ -121,9 +121,6 @@ const CategoryGroup = ({
   onChange,
   formik,
 }: any) => {
-  // The current REDI_LOCATION might not use the current CategoryGroup (e.g.
-  // Munich doesnt, at the time or writing, use 'coding' or 'other'. If it's the case, return null
-
   if (!categoriesByGroup[id]) return null
   return (
     <Columns.Column size={4}>