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 />
-          </label>
-          <input
-            type="text"
         name="name"
         value={name}
         onChange={onChangeEvent}
-            required
-            className="input-text"
       />
-        </div>
+      <Input
-      </div>
+        label="E-Mail"
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            E-Mail <Required />
-          </label>
-          <input
         type="email"
         name="email"
         value={email}
         onChange={onChangeEvent}
         required
-            className="input-text"
       />
-        </div>
+      <Input
-      </div>
+        label="Straße"
-      <div className="fsw">
-        <div className="fs">
-          <label className="flabel">
-            Straße <Required />
-          </label>
-          <input
-            type="text"
         name="street"
         value={street}
         onChange={onChangeEvent}
         required
-            className="input-text"
       />
-        </div>
+      <Input
-      </div>
+        label="PLZ"
-      <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">
+      <Input
-            Stadt <Required />
+        label="Stadt"
-          </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,11 +70,7 @@ export default function DateSelect() {
   }
 
   return (
-    <div className="fsw">
+    <InputWrapper label="Datum" required>
-      <div className="fs">
-        <label className="flabel">
-          Datum <Required />
-        </label>
       <DayPickerInput
         ref={fromRef}
         inputProps={{ className: 'input-text', required: true }}
@@ -128,7 +124,6 @@ export default function DateSelect() {
           ></path>
         </svg>
       </button>
-      </div>
+    </InputWrapper>
-    </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">
-            Zweck der Fahrt <Required />
-          </label>
-          <input
-            type="text"
         name="purpose"
         value={purpose}
         onChange={onChangeEvent}
         required
-            className={`input-text ${
-              formDataChanged.includes('purpose') && 'input-changed'
-            }`}
       />
-        </div>
+      <Input
-      </div>
+        label="Ziel der Fahrt"
-      <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>
+      <Input label="Verein" name="org" value={org} onChange={onChangeEvent} />
-      </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>
     </>
   )
 }