[refactor] make icon switch component in react and use in toggles for project overview

meinberlin/apps/budgeting/assets/BudgetingProposalListItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import django from 'django'
 import { toDate } from './helpers'
-import SwitchButton from '../../contrib/assets/SwitchButton'
+import CheckboxButton from '../../contrib/assets/CheckboxButton'
 import { ListItemBadges } from './ListItemBadges'
 import { ListItemStats } from './ListItemStats'
 
@@ -33,7 +33,7 @@ export const BudgetingProposalListItem = (props) => {
           </span>
           {toDate(proposal.created)}
         </div>
-        <SwitchButton
+        <CheckboxButton
           onText={django.gettext('Voted')}
           offText={django.gettext('Give my vote')}
           onClass="btn"

meinberlin/apps/budgeting/assets/Pagination.jest.jsx → meinberlin/apps/budgeting/assets/__tests__/Pagination.jest.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, fireEvent, screen } from '@testing-library/react'
-import { Pagination } from './Pagination'
+import { Pagination } from '../Pagination'
 
 test('clicking on page 2 returns value of 2', () => {
   const onPageChangedFn = jest.fn()

meinberlin/apps/contrib/assets/IconSwitch.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+export const IconSwitch = (props) => {
+  const {
+    activeClass,
+    inactiveClass,
+    startIconClass,
+    endIconClass,
+    startText,
+    endText,
+    startID,
+    endID,
+    startAria,
+    endAria,
+    showStartObject,
+    showEndObject,
+    displayStartObject
+  } = props
+
+  return (
+    <div>
+      <div className="switch-btn-group-container">
+        <div className="btn-group switch-btn-group" role="group">
+          <label
+            htmlFor={startID}
+            className={!displayStartObject ? activeClass : inactiveClass}
+          >
+            <input
+              className="radio__input"
+              type="radio"
+              value={startID}
+              id={startID}
+              aria-label={startAria}
+              onClick={showStartObject}
+              onKeyDown={showStartObject}
+            />
+            <i className={startIconClass} />
+            <span>{startText}</span>
+          </label>
+          <label
+            htmlFor={endID}
+            className={displayStartObject ? activeClass : inactiveClass}
+          >
+            <input
+              className="radio__input"
+              type="radio"
+              id={endID}
+              value={endID}
+              aria-label={endAria}
+              onClick={showEndObject}
+              onKeyDown={showEndObject}
+            />
+            <i className={endIconClass} />
+            <span>{endText}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  )
+}

meinberlin/apps/plans/assets/Toggles.jsx

@@ -1,5 +1,6 @@
-/* global django */
-const React = require('react')
+import React from 'react'
+import django from 'django'
+import { IconSwitch } from '../../contrib/assets/IconSwitch'
 
 class Toggles extends React.Component {
   clickStatusButton () {
@@ -122,28 +123,21 @@ class Toggles extends React.Component {
                 >{this.titleSearchButtonString()} <i className="fa fa-times" />
                 </button>}
             </div>
-            <div className="switch-btn-group-container">
-              <div className="btn-group switch-btn-group" role="group">
-                <switch
-                  className={!this.props.displayMap ? 'btn btn--light switch--btn active' : 'btn btn--light'}
-                  onClick={this.props.showList} // eslint-disable-line react/jsx-handler-names
-                  htmlFor="show_list"
-                >
-                  <input className="radio__input" type="radio" value="list" id="show_list" aria-label={django.gettext('show list')} />
-                  <i className="fa fa-list" />
-                  <span> {django.gettext('List')}</span>
-                </switch>
-                <switch
-                  className={this.props.displayMap ? 'btn btn--light switch--btn active' : 'btn btn--light'}
-                  onClick={this.props.showMap} // eslint-disable-line react/jsx-handler-names
-                  htmlFor="show_map"
-                >
-                  <input className="radio__input" type="radio" value="map" id="show_map" aria-label={django.gettext('show map')} />
-                  <i className="fa fa-map" />
-                  <span> {django.gettext('Map')}</span>
-                </switch>
-              </div>
-            </div>
+            <IconSwitch
+              activeClass="btn btn--icon btn--light switch--btn active"
+              inactiveClass="btn btn--icon btn--light"
+              startText={django.gettext('List')}
+              endText={django.gettext('Map')}
+              startAria={django.gettext('show list')}
+              endAria={django.gettext('show map')}
+              startIconClass="fa fa-list"
+              endIconClass="fa fa-map"
+              startID="show_list"
+              endID="show_map"
+              displayStartObject={this.props.displayMap}
+              showStartObject={this.props.showList}
+              showEndObject={this.props.showMap}
+            />
           </div>
         </div>
       )