From 9a3b4d0c170edc7e953dd65c6da4fcbb189e4083 Mon Sep 17 00:00:00 2001 From: Benjamin Petetot Date: Wed, 1 Jan 2020 16:53:21 +0100 Subject: [PATCH] :bug: fix the visibility toggle in event form (#750) --- src/components/form/renderField.jsx | 2 +- src/components/form/toggle/toggle.jsx | 88 +++++-------------- .../toggle/{toggle.css => toggle.module.css} | 10 +-- .../event/create/eventCreate.container.js | 12 ++- .../edit/eventForm/eventEdit.container.js | 15 +++- .../organizer/event/form/eventForm.jsx | 13 +-- 6 files changed, 50 insertions(+), 90 deletions(-) rename src/components/form/toggle/{toggle.css => toggle.module.css} (86%) diff --git a/src/components/form/renderField.jsx b/src/components/form/renderField.jsx index 83c3e1eb0..87584fd9f 100644 --- a/src/components/form/renderField.jsx +++ b/src/components/form/renderField.jsx @@ -50,7 +50,7 @@ const renderField = component => ({ {component === 'markdown-input' && } {component === 'dayPicker' && } {component === 'dayRangePicker' && } - {component === 'toggle' && } + {component === 'toggle' && } ) diff --git a/src/components/form/toggle/toggle.jsx b/src/components/form/toggle/toggle.jsx index 7f32d5dfc..06abe4e86 100644 --- a/src/components/form/toggle/toggle.jsx +++ b/src/components/form/toggle/toggle.jsx @@ -1,82 +1,34 @@ -import React, { Component } from 'react' +import React, { useState, useCallback } from 'react' import PropTypes from 'prop-types' -import './toggle.css' - -class Toggle extends Component { - state = { - checked: this.props.checked, - } - - getValue = checked => { - const { truthy, falsy } = this.props - if (checked && truthy) { - return truthy - } - if (!checked && falsy) { - return falsy - } - return checked - } - - getChecked = value => { - const { truthy, falsy } = this.props - const { checked } = this.state - if (!truthy && !falsy) { - return checked - } - if (value === truthy) { - return true - } - if (value === falsy) { - return false - } - return value - } - - handleChange = e => { - const { checked } = e.target - const { onChange } = this.props - this.setState( - () => ({ checked }), - () => onChange(this.getValue(checked)), - ) - } - - render() { - const { name, value, ...rest } = this.props - const checked = this.getChecked(value) - - return ( - - ) - } +import styles from './toggle.module.css' + +const Toggle = ({ name, checked, onChange, ...rest }) => { + const [isChecked, setChecked] = useState(checked) + const handleChange = useCallback( + e => { + setChecked(e.target.checked) + onChange(e.target.checked) + }, + [onChange], + ) + + return ( + + ) } Toggle.propTypes = { name: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, - truthy: PropTypes.string, - falsy: PropTypes.string, checked: PropTypes.bool, - value: PropTypes.any, + onChange: PropTypes.func.isRequired, } Toggle.defaultProps = { - truthy: undefined, - falsy: undefined, checked: false, - value: undefined, } export default Toggle diff --git a/src/components/form/toggle/toggle.css b/src/components/form/toggle/toggle.module.css similarity index 86% rename from src/components/form/toggle/toggle.css rename to src/components/form/toggle/toggle.module.css index e59b4b3e2..8ae9a72ef 100644 --- a/src/components/form/toggle/toggle.css +++ b/src/components/form/toggle/toggle.module.css @@ -12,7 +12,7 @@ display: none; } -.toggle-item { +.item { display: inline-block; height: var(--toggle-height); width: var(--toggle-width); @@ -21,7 +21,7 @@ transition: all 0.3s ease-in; } -.toggle-item::before { +.item::before { content: ' '; height: calc(var(--toggle-height)); width: calc(var(--toggle-height)); @@ -35,17 +35,17 @@ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.08); } -.toggle-item:hover::before{ +.item:hover::before{ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px 0 rgba(0, 0, 0, 0.08), 0 4px 9px 2px rgba(0, 0, 0, 0.08); } -input[type='checkbox']:checked + .toggle-item { +input[type='checkbox']:checked + .item { border: 1px solid var(--secondary-color); background: var(--secondary-color); } -input[type='checkbox']:checked + .toggle-item::before { +input[type='checkbox']:checked + .item::before { border: 1px solid var(--secondary-color); left: calc(var(--toggle-width) - var(--toggle-height)); } diff --git a/src/screens/organizer/event/create/eventCreate.container.js b/src/screens/organizer/event/create/eventCreate.container.js index 3f707da1b..58a513556 100644 --- a/src/screens/organizer/event/create/eventCreate.container.js +++ b/src/screens/organizer/event/create/eventCreate.container.js @@ -10,11 +10,17 @@ const mapStore = store => ({ organizations: store.data.organizations.getAsArray(), initialValues: { type: 'conference', - visibility: 'private', + visibility: true, conferenceDates: {}, }, - onSubmit: payload => { - store.dispatch({ type: '@@ui/ON_CREATE_EVENT', payload }) + onSubmit: values => { + store.dispatch({ + type: '@@ui/ON_CREATE_EVENT', + payload: { + ...values, + visibility: values.visibility ? 'private' : 'public', + }, + }) }, }) diff --git a/src/screens/organizer/event/edit/eventForm/eventEdit.container.js b/src/screens/organizer/event/edit/eventForm/eventEdit.container.js index ed2efd0d3..036d65eb8 100644 --- a/src/screens/organizer/event/edit/eventForm/eventEdit.container.js +++ b/src/screens/organizer/event/edit/eventForm/eventEdit.container.js @@ -10,9 +10,18 @@ const mapStore = (store, { eventId }) => { return { submitting: store.ui.loaders.get().isEventSaving, organizations: store.data.organizations.getAsArray(), - initialValues: { ...event }, - onSubmit: payload => { - store.dispatch({ type: '@@ui/ON_UPDATE_EVENT_DETAILS', payload }) + initialValues: { + ...event, + visibility: event.visibility === 'private', + }, + onSubmit: values => { + store.dispatch({ + type: '@@ui/ON_UPDATE_EVENT_DETAILS', + payload: { + ...values, + visibility: values.visibility ? 'private' : 'public', + }, + }) }, toggleArchive: () => { store.dispatch({ diff --git a/src/screens/organizer/event/form/eventForm.jsx b/src/screens/organizer/event/form/eventForm.jsx index bc284cacc..28b63cd05 100644 --- a/src/screens/organizer/event/form/eventForm.jsx +++ b/src/screens/organizer/event/form/eventForm.jsx @@ -69,15 +69,7 @@ const EventForm = ({ ))} )} - + {values.type === 'conference' && ( )} @@ -111,7 +103,7 @@ EventForm.propTypes = { isCreateForm: PropTypes.bool, organizations: PropTypes.arrayOf(PropTypes.object), onSubmit: PropTypes.func.isRequired, - toggleArchive: PropTypes.func.isRequired, + toggleArchive: PropTypes.func, initialValues: PropTypes.object, submitting: PropTypes.bool, } @@ -121,6 +113,7 @@ EventForm.defaultProps = { organizations: [], initialValues: undefined, submitting: false, + toggleArchive: undefined, } export default EventForm