🐛 fix the visibility toggle in event form (#750)

src/components/form/renderField.jsx

@@ -50,7 +50,7 @@ const renderField = component => ({
     {component === 'markdown-input' && <MarkdownInput {...input} />}
     {component === 'dayPicker' && <DayPicker id={input.name} {...input} />}
     {component === 'dayRangePicker' && <DayRangePicker id={input.name} {...input} />}
-    {component === 'toggle' && <Toggle {...rest} {...input} name={input.name} />}
+    {component === 'toggle' && <Toggle {...rest} {...input} />}
   </Label>
 )
 

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 (
-      <label className="toggle" htmlFor={name}>
-        <input
-          id={name}
-          name={name}
-          type="checkbox"
-          {...rest}
-          checked={checked}
-          onChange={this.handleChange}
-        />
-        <span className="toggle-item" />
-      </label>
-    )
-  }
+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 (
+    <label className={styles.toggle} htmlFor={name}>
+      <input id={name} type="checkbox" {...rest} checked={isChecked} onChange={handleChange} />
+      <span className={styles.item} />
+    </label>
+  )
 }
 
 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

src/components/form/toggle/toggle.css → 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));
 }

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',
+      },
+    })
   },
 })
 

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({

src/screens/organizer/event/form/eventForm.jsx

@@ -69,15 +69,7 @@ const EventForm = ({
             ))}
           </Field>
         )}
-        <Field
-          name="visibility"
-          label="Private event"
-          component={toggle}
-          type="checkbox"
-          truthy="private"
-          falsy="public"
-          inline
-        />
+        <Field name="visibility" label="Private event" component={toggle} type="checkbox" inline />
         {values.type === 'conference' && (
           <Field name="conferenceDates" label="Conference date" component={dayRangePicker} inline />
         )}
@@ -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