move calendar, so it's not visible when stored

components/wizard/calendar.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import useSWR from 'swr'
 import moment, { Moment } from 'moment'
 import { Calendar } from 'react-calendar-component'
-import { dateFormatBackend } from '../helpers/date'
+import { dateFormatBackend } from '../../helpers/date'
 
 const fetcher = (path: string) => fetch(path).then((r) => r.json())
 

components/wizard/index.tsx

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import React, { useContext } from 'react'
 import Contact from './contact'
 import WizardStore, { WizardContext } from './context/wizardStore'
+import Calendar from './calendar'
 import DateSelect from './dateSelect'
 import Reason from './reason'
 
@@ -52,31 +53,34 @@ function WizardInternal() {
   }
 
   return (
-    <form
+    <>
-      className="form"
+      <Calendar />
-      onSubmit={(event) => {
+      <form
-        event.preventDefault()
+        className="form"
-        onSubmit()
+        onSubmit={(event) => {
-      }}
+          event.preventDefault()
-    >
+          onSubmit()
-      {dataStoredLoaded && (
+        }}
-        <p className="mb-12">
+      >
-          Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
+        {dataStoredLoaded && (
-          <a className="link" onClick={forgetData} href="">
+          <p className="mb-12">
-            Daten wieder vergessen
+            Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
-          </a>
+            <a className="link" onClick={forgetData} href="">
-        </p>
+              Daten wieder vergessen
-      )}
+            </a>
-      <DateSelect />
+          </p>
-      <Reason />
+        )}
-      <Contact />
+        <DateSelect />
-      <div>{postDataError}</div>
+        <Reason />
-      <div>
+        <Contact />
-        <button type="submit" disabled={postData} className="btn btn-blue">
+        <div>{postDataError}</div>
-          {postData ? 'Speichern...' : 'Absenden'}
+        <div>
-        </button>
+          <button type="submit" disabled={postData} className="btn btn-blue">
-      </div>
+            {postData ? 'Speichern...' : 'Absenden'}
-    </form>
+          </button>
+        </div>
+      </form>
+    </>
   )
 }
 

pages/index.tsx

@@ -2,7 +2,6 @@ import Head from 'next/head'
 import React from 'react'
 import Footer from '../components/footer'
 import Header from '../components/header'
-import Calendar from '../components/calendar'
 import Wizard from '../components/wizard/index'
 
 export default function Home() {
@@ -15,7 +14,6 @@ export default function Home() {
 
       <Header />
       <main className="main">
-        <Calendar />
         <Wizard />
       </main>
       <Footer />