refactor form input fields

components/wizard/contact.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
-import Required from './required'
+import Input from './input'
 
 export default function Contact() {
   const { state, onChangeEvent } = useContext(WizardContext)
@@ -9,77 +9,42 @@ export default function Contact() {
 
   return (
     <>
-      <div className="fsw">
+      <Input
-        <div className="fs">
+        label="Name"
-          <label className="flabel">
+        required
-            Name <Required />
+        name="name"
-          </label>
+        value={name}
-          <input
+        onChange={onChangeEvent}
-            type="text"
+      />
-            name="name"
+      <Input
-            value={name}
+        label="E-Mail"
-            onChange={onChangeEvent}
+        type="email"
-            required
+        name="email"
-            className="input-text"
+        value={email}
-          />
+        onChange={onChangeEvent}
-        </div>
+        required
-      </div>
+      />
-      <div className="fsw">
+      <Input
-        <div className="fs">
+        label="Straße"
-          <label className="flabel">
+        name="street"
-            E-Mail <Required />
+        value={street}
-          </label>
+        onChange={onChangeEvent}
-          <input
+        required
-            type="email"
+      />
-            name="email"
+      <Input
-            value={email}
+        label="PLZ"
-            onChange={onChangeEvent}
+        name="zip"
-            required
+        value={zip}
-            className="input-text"
+        onChange={onChangeEvent}
-          />
+        required
-        </div>
+      />
-      </div>
+      <Input
-      <div className="fsw">
+        label="Stadt"
-        <div className="fs">
+        name="city"
-          <label className="flabel">
+        value={city}
-            Straße <Required />
+        onChange={onChangeEvent}
-          </label>
+        required
-          <input
+      />
-            type="text"
-            name="street"
-            value={street}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            PLZ <Required />
-          </label>
-          <input
-            type="text"
-            name="zip"
-            value={zip}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-          <label className="flabel">
-            Stadt <Required />
-          </label>
-          <input
-            type="text"
-            name="city"
-            value={city}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
     </>
   )
 }

components/wizard/dateSelect.tsx

@@ -7,7 +7,7 @@ import useSWR from 'swr'
 import { getNextBigger, getNextSmaller } from '../../helpers/array'
 import { dateFormatBackend } from '../../helpers/date'
 import { WizardContext } from './context/wizardStore'
-import Required from './required'
+import InputWrapper from './inputWrapper'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 
@@ -70,65 +70,60 @@ export default function DateSelect() {
   }
 
   return (
-    <div className="fsw">
+    <InputWrapper label="Datum" required>
-      <div className="fs">
+      <DayPickerInput
-        <label className="flabel">
+        ref={fromRef}
-          Datum <Required />
+        inputProps={{ className: 'input-text', required: true }}
-        </label>
+        value={from}
-        <DayPickerInput
+        placeholder="Von"
-          ref={fromRef}
+        formatDate={MomentLocaleUtils.formatDate}
-          inputProps={{ className: 'input-text', required: true }}
+        parseDate={MomentLocaleUtils.parseDate}
-          value={from}
+        dayPickerProps={{
-          placeholder="Von"
+          locale: 'de',
-          formatDate={MomentLocaleUtils.formatDate}
+          localeUtils: MomentLocaleUtils,
-          parseDate={MomentLocaleUtils.parseDate}
+          className: 'datepicker',
-          dayPickerProps={{
+          disabledDays,
-            locale: 'de',
+          modifiers,
-            localeUtils: MomentLocaleUtils,
+          numberOfMonths: 1,
-            className: 'datepicker',
+        }}
-            disabledDays,
+        onDayChange={(from) => setRange({ ...range, from })}
-            modifiers,
+      />
-            numberOfMonths: 1,
+      {' - '}
-          }}
+      <DayPickerInput
-          onDayChange={(from) => setRange({ ...range, from })}
+        ref={toRef}
-        />
+        inputProps={{
-        {' - '}
+          className: 'input-text',
-        <DayPickerInput
+          disabled: !from,
-          ref={toRef}
+          required: true,
-          inputProps={{
+        }}
-            className: 'input-text',
+        value={to}
-            disabled: !from,
+        placeholder="Bis"
-            required: true,
+        formatDate={MomentLocaleUtils.formatDate}
-          }}
+        parseDate={MomentLocaleUtils.parseDate}
-          value={to}
+        dayPickerProps={{
-          placeholder="Bis"
+          locale: 'de',
-          formatDate={MomentLocaleUtils.formatDate}
+          localeUtils: MomentLocaleUtils,
-          parseDate={MomentLocaleUtils.parseDate}
+          className: 'datepicker',
-          dayPickerProps={{
+          selectedDays: [from, { from, to }],
-            locale: 'de',
+          disabledDays,
-            localeUtils: MomentLocaleUtils,
+          modifiers,
-            className: 'datepicker',
+          numberOfMonths: 1,
-            selectedDays: [from, { from, to }],
+          month: from,
-            disabledDays,
+          fromMonth: from,
-            modifiers,
+        }}
-            numberOfMonths: 1,
+        onDayChange={(to) => setRange({ ...range, to })}
-            month: from,
+      />
-            fromMonth: from,
+      <button
-          }}
+        onClick={() => setRange({ from: undefined, to: undefined })}
-          onDayChange={(to) => setRange({ ...range, to })}
+        className="ibtn"
-        />
+      >
-        <button
+        <svg className="w-full" viewBox="0 0 352 512">
-          onClick={() => setRange({ from: undefined, to: undefined })}
+          <path
-          className="ibtn"
+            fill="currentColor"
-        >
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          <svg className="w-full" viewBox="0 0 352 512">
+          ></path>
-            <path
+        </svg>
-              fill="currentColor"
+      </button>
-              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+    </InputWrapper>
-            ></path>
-          </svg>
-        </button>
-      </div>
-    </div>
   )
 }

components/wizard/input.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import InputWrapper from './inputWrapper'
+
+interface InputProps extends React.InputHTMLAttributes<T> {
+  label: string
+}
+
+export default function Input(props: InputProps) {
+  const { label, required, type = 'text', ...rest } = props
+
+  return (
+    <InputWrapper label="label" required={required}>
+      <input type={type} required={required} className="input-text" {...rest} />
+    </InputWrapper>
+  )
+}

components/wizard/inputWrapper.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Required from './required'
+
+export default function Input(props: {
+  label: string
+  required: boolean
+  children: React.ReactChildren
+}) {
+  const { label, required, children } = props
+
+  return (
+    <>
+      <div className="fsw">
+        <div className="fs">
+          <label className="flabel">
+            {label} {required && <Required />}
+          </label>
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}

components/wizard/reason.tsx

@@ -1,59 +1,29 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
-import Required from './required'
+import Input from './input'
 
 export default function Contact() {
   const { state, onChangeEvent } = useContext(WizardContext)
 
-  const { formDataChanged } = state
   const { purpose, destination, org } = state.formData
 
   return (
     <>
-      <div className="fsw">
+      <Input
-        <div className="fs">
+        label="Zweck der Fahrt"
-          <label className="flabel">
+        name="purpose"
-            Zweck der Fahrt <Required />
+        value={purpose}
-          </label>
+        onChange={onChangeEvent}
-          <input
+        required
-            type="text"
+      />
-            name="purpose"
+      <Input
-            value={purpose}
+        label="Ziel der Fahrt"
-            onChange={onChangeEvent}
+        name="destination"
-            required
+        value={destination}
-            className={`input-text ${
+        onChange={onChangeEvent}
-              formDataChanged.includes('purpose') && 'input-changed'
+        required
-            }`}
+      />
-          />
+      <Input label="Verein" name="org" value={org} onChange={onChangeEvent} />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            Ziel der Fahrt <Required />
-          </label>
-          <input
-            type="text"
-            name="destination"
-            value={destination}
-            onChange={onChangeEvent}
-            required
-            className="input-text"
-          />
-        </div>
-      </div>
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">Verein</label>
-          <input
-            type="text"
-            name="org"
-            value={org}
-            onChange={onChangeEvent}
-            className="input-text"
-          />
-        </div>
-      </div>
     </>
   )
 }