From e414a178d6aecf5c656e8fa6b8c43cf152af535f Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Fri, 9 Apr 2021 15:33:49 +0000
Subject: [PATCH] Fixed some minor bugs that caused console errors, changed
 a>li to li>a to accomodate best practises

---
 pages/[user].tsx        | 12 ++++++------
 pages/[user]/[type].tsx |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/pages/[user].tsx b/pages/[user].tsx
index 4986d118e3..dcf6413b5c 100644
--- a/pages/[user].tsx
+++ b/pages/[user].tsx
@@ -4,15 +4,15 @@ import prisma from '../lib/prisma'
 
 export default function User(props) {
     const eventTypes = props.user.eventTypes.map(type =>
-        <Link href={props.user.username + '/' + type.id.toString()}>
-            <a>
-                <li key={type.id} className="px-6 py-4">
+        <li key={type.id}>
+            <Link href={'/' + props.user.username + '/' + type.id.toString()}>
+                <a className="block px-6 py-4">
                     <div className="inline-block w-3 h-3 rounded-full bg-blue-600 mr-2"></div>
                     <h2 className="inline-block font-medium">{type.title}</h2>
                     <p className="inline-block text-gray-400 ml-2">{type.description}</p>
-                </li>
-            </a>
-        </Link>
+                </a>
+            </Link>
+        </li>
     );
     return (
         <div>
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index f9c1917f0f..f7cfddb415 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -35,7 +35,7 @@ export default function Type(props) {
     }
 
     const calendar = days.map((day) =>
-        <button onClick={(e) => setSelectedDate(dayjs().month(selectedMonth).date(day).format("YYYY-MM-DD"))} disabled={selectedMonth < dayjs().format('MM') && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
+        <button key={day} onClick={(e) => setSelectedDate(dayjs().month(selectedMonth).date(day).format("YYYY-MM-DD"))} disabled={selectedMonth < dayjs().format('MM') && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
             {day}
         </button>
     );
@@ -84,7 +84,7 @@ export default function Type(props) {
 
     // Display available times
     const availableTimes = times.map((time) =>
-        <div>
+        <div key={time}>
             <Link href={"/" + props.user.username + "/book?date=" + selectedDate + "T" + dayjs(time).format("HH:mm:ss") + "Z&type=" + props.eventType.id}>
                 <a key={time} className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).format("hh:mma")}</a>
             </Link>
@@ -133,12 +133,12 @@ export default function Type(props) {
                                 {calendar}
                             </div>
                         </div>
-                        <div className={"sm:pl-4 mt-8 sm:mt-0 text-center " + (selectedDate ? 'sm:w-1/3' : 'sm:w-1/2 hidden')}>
+                        {selectedDate && <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3">
                             <div className="text-gray-600 font-light text-xl mb-4 text-left">
                                 <span className="w-1/2">{dayjs(selectedDate).format("dddd DD MMMM YYYY")}</span>
                             </div>
                             {!loading ? availableTimes : <div className="loader"></div>}
-                        </div>
+                        </div>}
                     </div>
                 </div>
             </main>