From a03a8376152f058222c0b111626223bf124ca332 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Thu, 3 Sep 2020 00:31:42 +0200
Subject: [PATCH] add booking status as calendar

---
 components/calendar.tsx | 64 +++++++++++++++++++++++++++++++++++++++++
 package-lock.json       | 11 +++++++
 package.json            |  1 +
 pages/index.tsx         |  2 ++
 styles/index.css        | 58 +++++++++++++++++++++++++++++++++++++
 5 files changed, 136 insertions(+)
 create mode 100644 components/calendar.tsx

diff --git a/components/calendar.tsx b/components/calendar.tsx
new file mode 100644
index 0000000..8759cda
--- /dev/null
+++ b/components/calendar.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import cx from 'classnames'
+import useSWR from 'swr'
+import moment from 'moment'
+import { Calendar } from 'react-calendar-component'
+import { dateFormatBackend } from '../helpers/date'
+
+const fetcher = (path: string) => fetch(path).then((r) => r.json())
+
+export default function MyCalendar() {
+  const { data: daysBooked, error: fetchBookedOnError } = useSWR(
+    '/api/daysbooked',
+    fetcher
+  )
+
+  const [date, setDate] = useState(moment())
+
+  function dayBooked(day: Date) {
+    return daysBooked && daysBooked.includes(dateFormatBackend(day))
+  }
+
+  if (fetchBookedOnError) {
+    return (
+      <div>
+        Entschuldige, aber die Buchungszeiten konnten nicht geladen werden.
+        Versuchen Sie es später nochmals.
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <h2>Buchungsübersicht</h2>
+      <Calendar
+        onChangeMonth={(date) => setDate(date)}
+        date={date}
+        renderDay={({ day, classNames, onPickDate }) => (
+          <div
+            key={day.format()}
+            className={cx(
+              'Calendar-grid-item',
+              day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
+              dayBooked(day.toDate()) && 'Calendar-grid-item--booked',
+              classNames
+            )}
+            onClick={(e) => onPickDate(day)}
+          >
+            {day.format('D')}
+          </div>
+        )}
+        renderHeader={({ date, onPrevMonth, onNextMonth }) => (
+          <div className="Calendar-header">
+            <button onClick={onPrevMonth}>«</button>
+            <div className="Calendar-header-currentDate">
+              {date.format('MMMM YYYY')}
+            </div>
+            <button onClick={onNextMonth}>»</button>
+          </div>
+        )}
+        onPickDate={() => {}}
+      />
+    </>
+  )
+}
diff --git a/package-lock.json b/package-lock.json
index 9c3ec3e..f93818c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9525,6 +9525,17 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-calendar-component": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-calendar-component/-/react-calendar-component-3.0.0.tgz",
+      "integrity": "sha512-vua/pu+hTeLD9SSc+NH79IwCLc3REvl4gL9C3dtUo/+cGhPiQo6CGC/Jm8AVgTBhO4CtNr21tEWAdlCVqIxBbA==",
+      "requires": {
+        "@babel/preset-react": "^7.0.0",
+        "classnames": "^2.2.5",
+        "moment": "^2.19.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
diff --git a/package.json b/package.json
index 80c19da..c35a7e6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "mongoose": "^5.9.25",
     "next": "^9.5.2",
     "react": "16.13.1",
+    "react-calendar-component": "^3.0.0",
     "react-dom": "16.13.1",
     "rebass": "^4.0.7",
     "swr": "^0.3.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index 3577e1a..ea7d714 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,7 @@ 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() {
@@ -14,6 +15,7 @@ export default function Home() {
 
       <Header />
       <main className="main">
+        <Calendar />
         <Wizard />
       </main>
       <Footer />
diff --git a/styles/index.css b/styles/index.css
index 415f7f8..e97b764 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -110,6 +110,64 @@
   @apply text-blue-700;
 }
 
+.Calendar-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.Calendar-header {
+  height: 50px;
+  background: #333;
+  color: #fff;
+  text-align: center;
+  line-height: 50px;
+  display: flex;
+  font-size: 20px;
+  justify-content: space-between;
+}
+
+.Calendar-header button {
+  width: 50px;
+  font-size: 20px;
+  border: 0;
+  background: transparent;
+  color: #ddd;
+  cursor: pointer;
+}
+
+.Calendar-grid-item {
+  flex: 0 14.28571%;
+  text-align: center;
+  border-right: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.Calendar-grid-item--current {
+  font-weight: 700;
+}
+
+.Calendar-grid-item--booked {
+  @apply bg-red-300;
+}
+
+.Calendar-grid-item.nextMonth,
+.Calendar-grid-item.prevMonth {
+  color: #999;
+}
+
+.Calendar-grid-item:nth-child(7n + 1) {
+  border-left: 1px solid #ddd;
+}
+
+.Calendar-grid-item:nth-child(-n + 7) {
+  border-top: 1px solid #ddd;
+}
+
 /* Start purging... */
 @tailwind utilities;
 /* Stop purging. */