MP-5 languages update

Author: kkartunov

src/apps/profiles/src/member-profile/languages/LanguageCard/LanguageCard.tsx

@@ -1,4 +1,3 @@
-import { compact } from 'lodash'
 import { FC } from 'react'
 
 import { UserTrait } from '~/libs/core'
@@ -11,14 +10,7 @@ interface LanguageCardProps {
 
 const LanguageCard: FC<LanguageCardProps> = (props: LanguageCardProps) => (
     <div className={styles.language}>
-        <p className='body-main-medium'>{props.trait.language}</p>
-        <p className='body-small'>
-            {compact([
-                props.trait.spokenLevel ? `Spoken: ${props.trait.spokenLevel}` : undefined,
-                props.trait.writtenLevel ? `Written: ${props.trait.writtenLevel}` : undefined,
-            ])
-                .join(' | ')}
-        </p>
+        <p className='body-main-bold'>{props.trait.language}</p>
     </div>
 )
 

src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx

@@ -9,7 +9,6 @@ import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { notifyUniNavi } from '../../lib'
 
 import { ModifyLanguagesModal } from './ModifyLanguagesModal'
-import { LanguageCard } from './LanguageCard'
 import styles from './MemberLanguages.module.scss'
 
 interface MemberLanguagesProps {
@@ -73,8 +72,11 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
 
             <div className={styles.languages}>
                 {
-                    memberLanguages?.map((trait: UserTrait) => (
-                        <LanguageCard trait={trait} key={`member-lan-${trait.language}`} />
+                    memberLanguages?.map((trait: UserTrait, indx: number) => (
+                        <span key={`member-lan-${trait.language}`}>
+                            {trait.language}
+                            {indx < memberLanguages.length - 1 && ', '}
+                        </span>
                     ))
                 }
             </div>

src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss

@@ -14,50 +14,49 @@
 .formWrap {
     display: flex;
     flex-direction: column;
-    min-height: 500px;
     margin-top: $sp-2;
 
     @include ltelg {
         :global(.input-wrapper) {
             margin-bottom: $sp-2;
         }
     }
-
-    .formCTAs {
-        display: flex;
-        align-items: center;
-
-        svg {
-            width: 14px;
-            height: 14px;
-            margin-right: $sp-1;
-        }
-
-        .ctaBtnCancel {
-            margin-left: $sp-8;
-        }
-    }
 }
 
 .languages {
-    margin-bottom: $sp-15;
-
-    &.noLanguages {
-        margin-bottom: 0;
-    }
+    margin: $sp-4 0 $sp-6;
+    padding-bottom: $sp-4;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: $sp-4;
+    border-bottom: 1px solid $black-20;
 
     .languageItemWrap {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-bottom: $sp-2;
         border-radius: 8px;
-        padding: $sp-2;
+        padding: $sp-5 $sp-6;
         border: 1px solid $black-10;
 
-        button svg {
-            width: 16px;
-            height: 16px;
+        button {
+            padding-right: 0;
+
+            svg {
+                width: 24px;
+                height: 24px;
+            }
         }
     }
+}
+
+.langModal {
+    @include gtemd {
+        overflow: visible !important;
+    }
+}
+
+.langModalBody {
+    overflow: visible !important;
 }

src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.tsx

@@ -1,4 +1,4 @@
-import { bind, sortBy } from 'lodash'
+import { bind, compact, sortBy, values } from 'lodash'
 import { Dispatch, FC, MutableRefObject, SetStateAction, useMemo, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import classNames from 'classnames'
@@ -39,64 +39,53 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
     const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-
-    const [formErrors, setFormErrors]: [
-        { [key: string]: string },
-        Dispatch<SetStateAction<{ [key: string]: string }>>
-    ]
-        = useState<{ [key: string]: string }>({})
-
-    const [selectedLanguage, setSelectedLanguage]: [
-        string | undefined,
-        Dispatch<SetStateAction<string | undefined>>
-    ]
-        = useState<string | undefined>()
-
-    const [selectedSpokenLevel, setSelectedSpokenLevel]: [
-        string | undefined,
-        Dispatch<SetStateAction<string | undefined>>
-    ]
-        = useState<string | undefined>()
-
-    const [selectedWrittenLevel, setSelectedWrittenLevel]: [
-        string | undefined,
-        Dispatch<SetStateAction<string | undefined>>
-    ]
-        = useState<string | undefined>()
-
     const languages: any = useMemo(() => sortBy(
         dropDowns.language.map(lang => ({ label: lang.label, value: lang.label })),
         'label',
     ), [])
 
-    const spokenLevel: any = useMemo(() => dropDowns.spokenLevel.map(
-        lang => ({ label: lang.label, value: lang.label }),
-    ), [])
-
-    const writtenLevel: any = useMemo(() => dropDowns.writtenLevel.map(
-        lang => ({ label: lang.label, value: lang.label }),
-    ), [])
-
     const [currentMemberLanguages, setCurrentMemberLanguages]: [
         UserTrait[] | undefined,
         Dispatch<SetStateAction<UserTrait[] | undefined>>
     ]
         = useState<UserTrait[] | undefined>(props.memberLanguages)
 
-    function handleSelectedLanguageChange(event: React.ChangeEvent<HTMLInputElement>): void {
-        setSelectedLanguage(event.target.value)
+    const [formValues, setFormValues]: [
+        { [key: string]: string | boolean | Date | undefined },
+        Dispatch<SetStateAction<{ [key: string]: string | boolean | Date | undefined }>>
+    ]
+        = useState<{ [key: number]: string | boolean | Date | undefined }>({
+            1: undefined,
+        })
+
+    function handleSelectedLanguageChange(key: string, event: React.ChangeEvent<HTMLInputElement>): void {
+        setFormValues({
+            ...formValues,
+            [key]: event.target.value,
+        })
+        setIsFormChanged(true)
     }
 
-    function handleSelectedSpokenLevelChange(event: React.ChangeEvent<HTMLInputElement>): void {
-        setSelectedSpokenLevel(event.target.value)
-    }
+    function handleLanguagesSave(): void {
+        const formLanguages = compact(values(formValues))
 
-    function handleSelectedWrittenLevelChange(event: React.ChangeEvent<HTMLInputElement>): void {
-        setSelectedWrittenLevel(event.target.value)
-    }
+        if (formLanguages.length) {
+            const filteredLanguages = formLanguages
+                .filter((item: any) => !currentMemberLanguages?.find((trait: UserTrait) => trait.language === item))
+
+            if (filteredLanguages.length) {
+                setCurrentMemberLanguages([
+                    ...(currentMemberLanguages || []),
+                    ...filteredLanguages.map((item: any) => ({
+                        language: item,
+                    })),
+                ])
+            }
+
+            resetForm()
+            return
+        }
 
-    function handleLanguagesSave(): void {
         setIsSaving(true)
 
         methodsMap[!!props.memberLanguages ? 'update' : 'create'](props.profile.handle, [{
@@ -116,51 +105,11 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
             })
     }
 
-    function handleFormAction(): void {
-        if (!selectedLanguage) {
-            setFormErrors({ selectedLanguage: 'Please select a language' })
-            return
-        }
-
-        if (!selectedSpokenLevel) {
-            setFormErrors({ selectedSpokenLevel: 'Please select a spoken level' })
-            return
-        }
-
-        if (!selectedWrittenLevel) {
-            setFormErrors({ selectedWrittenLevel: 'Please select a written level' })
-            return
-        }
-
-        if (currentMemberLanguages?.find((item: UserTrait) => item.language === selectedLanguage)) {
-            toast.info('Language already exists', { position: toast.POSITION.BOTTOM_RIGHT })
-            resetForm()
-            return
-        }
-
-        setCurrentMemberLanguages([
-            ...(currentMemberLanguages || []),
-            {
-                language: selectedLanguage,
-                spokenLevel: selectedSpokenLevel,
-                writtenLevel: selectedWrittenLevel,
-            },
-        ])
-        setIsFormChanged(true)
-        resetForm()
-    }
-
-    function handleCancelEditMode(): void {
-        resetForm()
-    }
-
     function resetForm(): void {
         formElRef.current.reset()
-        setIsEditMode(false)
-        setSelectedLanguage(undefined)
-        setSelectedSpokenLevel(undefined)
-        setSelectedWrittenLevel(undefined)
-        setFormErrors({})
+        setFormValues({
+            1: undefined,
+        })
     }
 
     function handleRemoveLanguage(trait: UserTrait): void {
@@ -170,8 +119,23 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
         setIsFormChanged(true)
     }
 
+    function handleAddAdditionalLanguage(): void {
+        const keys = Object.keys(formValues)
+
+        if (keys.length < 5) {
+            setFormValues({
+                ...formValues,
+                [keys.length + 1]: undefined,
+            })
+        }
+    }
+
     return (
         <BaseModal
+            bodyClassName={styles.langModalBody}
+            classNames={{
+                modal: styles.langModal,
+            }}
             onClose={props.onClose}
             open
             size='lg'
@@ -193,75 +157,47 @@ const ModifyLanguagesModal: FC<ModifyLanguagesModalProps> = (props: ModifyLangua
             )}
         >
             <div className={styles.container}>
-                <div className={classNames(styles.languages, currentMemberLanguages?.length ? '' : styles.noLanguages)}>
+                <p>What languages do you speak?</p>
+
+                <div className={classNames(styles.languages)}>
                     {
                         currentMemberLanguages?.map((trait: UserTrait) => (
                             <div className={styles.languageItemWrap} key={`member-lan-${trait.language}`}>
                                 <LanguageCard trait={trait} />
                                 <Button
                                     icon={IconOutline.TrashIcon}
                                     onClick={bind(handleRemoveLanguage, this, trait)}
+                                    size='lg'
                                 />
                             </div>
                         ))
                     }
                 </div>
 
-                <p>Add Languages</p>
                 <form
                     ref={formElRef}
                     className={classNames(styles.formWrap)}
                 >
                     <div className={styles.form}>
-                        <InputSelect
-                            options={languages}
-                            value={selectedLanguage}
-                            onChange={handleSelectedLanguageChange}
-                            name='languages'
-                            label='Language *'
-                            error={formErrors.selectedLanguage}
-                            placeholder='Select a Language'
-                            dirty
+                        {
+                            Object.keys(formValues)
+                                .map((key: string) => (
+                                    <InputSelect
+                                        options={languages}
+                                        value={formValues[key] as string}
+                                        onChange={bind(handleSelectedLanguageChange, this, key)}
+                                        name='languages'
+                                        label='Language'
+                                        placeholder='Select a language from the list'
+                                        key={`language-${key}`}
+                                    />
+                                ))
+                        }
+                        <Button
+                            label='+ Additional Language'
+                            secondary
+                            onClick={handleAddAdditionalLanguage}
                         />
-
-                        <InputSelect
-                            options={spokenLevel}
-                            value={selectedSpokenLevel}
-                            onChange={handleSelectedSpokenLevelChange}
-                            name='spokenLevel'
-                            label='Spoken Level *'
-                            error={formErrors.selectedSpokenLevel}
-                            placeholder='Select a Spoken Level'
-                            dirty
-                        />
-
-                        <InputSelect
-                            options={writtenLevel}
-                            value={selectedWrittenLevel}
-                            onChange={handleSelectedWrittenLevelChange}
-                            name='writtenLevel'
-                            label='Written Level *'
-                            error={formErrors.selectedWrittenLevel}
-                            placeholder='Select a Written Level'
-                            dirty
-                        />
-
-                        <div className={styles.formCTAs}>
-                            {!isEditMode && <IconOutline.PlusCircleIcon />}
-                            <Button
-                                link
-                                label={`${isEditMode ? 'Edit' : 'Add'} Language to your List`}
-                                onClick={handleFormAction}
-                            />
-                            {isEditMode && (
-                                <Button
-                                    className={styles.ctaBtnCancel}
-                                    link
-                                    label='Cancel'
-                                    onClick={handleCancelEditMode}
-                                />
-                            )}
-                        </div>
                     </div>
                 </form>
             </div>