From b67fc708eb0463202ea01678ce7dcb25a2b01bd0 Mon Sep 17 00:00:00 2001 From: Benjamin Gammaire Date: Tue, 25 Jun 2019 12:56:19 +0200 Subject: [PATCH] wip populate formValue with new links on profile --- src/components/Icons/index.tsx | 1 + src/models/user.models.tsx | 6 ++ src/pages/Profile/content/Link.field.tsx | 60 +++++++++++++++++++ .../Profile/content/ProfileEdit.form.tsx | 60 +++++++++++++------ src/pages/Profile/content/Template.tsx | 14 +++++ 5 files changed, 123 insertions(+), 18 deletions(-) create mode 100644 src/pages/Profile/content/Link.field.tsx create mode 100644 src/pages/Profile/content/Template.tsx diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index fb52ffb7d6..8cc1cf4749 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -46,6 +46,7 @@ interface IProps { glyph: keyof IGlyphs size?: number | string marginRight?: string + OnClick?: () => void } export type availableGlyphs = | 'download' diff --git a/src/models/user.models.tsx b/src/models/user.models.tsx index 4509f415e1..564100b14c 100644 --- a/src/models/user.models.tsx +++ b/src/models/user.models.tsx @@ -4,6 +4,11 @@ export interface IUserState { user?: IUser } +export interface ILink { + label: string + url: string +} + // IUser retains most of the fields from legacy users (omitting passwords), // and has a few additional fields. Note 'email' is excluded // _uid is unique/fixed identifier @@ -22,6 +27,7 @@ export interface IUser extends IDbDoc { DHSite_id?: number DHSite_mention_name?: string country?: string + links?: ILink[] } export type UserRole = 'super-admin' | 'subscriber' diff --git a/src/pages/Profile/content/Link.field.tsx b/src/pages/Profile/content/Link.field.tsx new file mode 100644 index 0000000000..ac0e48f507 --- /dev/null +++ b/src/pages/Profile/content/Link.field.tsx @@ -0,0 +1,60 @@ +import React, { Component } from 'react' +import Selector from 'src/components/Selector' +import COM_TYPE_MOCK from 'src/mocks/communicationSelector.mock' +import { Field } from 'react-final-form' +import { InputField } from 'src/components/Form/Fields' +import { Button } from 'src/components/Button' +import { Modal } from 'src/components/Modal/Modal' +import Text from 'src/components/Text' +import { Flex } from 'rebass' +import { FlexContainer } from 'src/components/Layout/FlexContainer' + +interface IProps { + link: string + index: number + onDelete: (index: number) => void +} +interface IState { + showDeleteModal: boolean + _toDocsList: boolean +} + +class Link extends Component { + constructor(props: IProps) { + super(props) + this.state = { + showDeleteModal: false, + _toDocsList: false, + } + } + + toggleDeleteModal() { + this.setState({ showDeleteModal: !this.state.showDeleteModal }) + } + confirmDelete() { + this.toggleDeleteModal() + this.props.onDelete(this.props.index) + } + + render() { + const { link, index } = this.props + return ( + + + + + + + + )} + + ) + } +} + +export { Link } diff --git a/src/pages/Profile/content/ProfileEdit.form.tsx b/src/pages/Profile/content/ProfileEdit.form.tsx index b091c6fa4c..47cd4eee5e 100644 --- a/src/pages/Profile/content/ProfileEdit.form.tsx +++ b/src/pages/Profile/content/ProfileEdit.form.tsx @@ -1,8 +1,10 @@ import * as React from 'react' import { Form, Field } from 'react-final-form' +import arrayMutators from 'final-form-arrays' import Heading from 'src/components/Heading' -import { IUser } from 'src/models/user.models' +import { IUser, ILink } from 'src/models/user.models' import Text from 'src/components/Text' +import TEMPLATE from './Template' import { InputField, TextAreaField } from 'src/components/Form/Fields' import { UserStore } from 'src/stores/User/user.store' import { Button } from 'src/components/Button' @@ -15,13 +17,13 @@ import countries from 'react-flags-select/lib/countries.js' import 'react-flags-select/scss/react-flags-select.scss' import styled from 'styled-components' import theme from 'src/themes/styled.theme' -import Selector from 'src/components/Selector' -import COM_TYPE_MOCK from 'src/mocks/communicationSelector.mock' import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet' import L from 'leaflet' import 'leaflet/dist/leaflet.css' import { LocationSearchField } from 'src/components/Form/LocationSearch.field' +import { FieldArray } from 'react-final-form-arrays' +import { Link } from './Link.field' interface IFormValues extends Partial { // form values are simply subset of user profile fields @@ -77,6 +79,8 @@ export class ProfileEditForm extends React.Component { } public async saveProfile(values: IFormValues) { + console.log('update profile, submit triggered') + await this.injected.userStore.updateUserProfile(values) this.setState({ readOnly: true, showNotification: true }) } @@ -102,13 +106,18 @@ export class ProfileEditForm extends React.Component { render() { const user = this.injected.userStore.user const { lat, lng, zoom } = this.state + console.log('formValues', this.state.formValues) return user ? (
this.saveProfile(values)} initialValues={user} - render={({ handleSubmit, submitting }) => { + validateOnBlur + mutators={{ + ...arrayMutators, + }} + render={({ handleSubmit, submitting, values }) => { return ( <> {this.state.readOnly && ( @@ -176,20 +185,35 @@ export class ProfileEditForm extends React.Component { Do you want to add communication links (Facebook, Discord, Slack, Email ?) - - - - - + + {({ fields }) => ( + <> + {fields.map((name, index: number) => ( + { + fields.remove(fieldIndex) + }} + /> + ))} + {/* TODO why is the sumbit triggered on first click f add another btn ? */} + + + )} + diff --git a/src/pages/Profile/content/Template.tsx b/src/pages/Profile/content/Template.tsx new file mode 100644 index 0000000000..98139aec33 --- /dev/null +++ b/src/pages/Profile/content/Template.tsx @@ -0,0 +1,14 @@ +import { IUser } from 'src/models/user.models' + +const INITIAL_VALUES: Partial = { + links: [ + { + label: '', + url: '', + }, + ], +} + +export default { + INITIAL_VALUES, +}