From b65d15ba340b0cf7e85e90d7c9685774cdb74764 Mon Sep 17 00:00:00 2001
From: Gabor Juhasz <gabor.juhasz@accretivetg.com>
Date: Mon, 11 Jul 2022 14:58:02 +0200
Subject: [PATCH] refactor to Drawer

---
 components/Box.tsx      | 149 ++++++++++++++--------------------------
 components/Calendar.tsx | 139 +++++++++++++++++++++++--------------
 components/Detail.tsx   |  45 ++++++++++++
 components/Gradient.tsx |  30 ++++++++
 styles/globals.css      |  14 ++++
 tsconfig.json           |   1 +
 6 files changed, 229 insertions(+), 149 deletions(-)
 create mode 100644 components/Detail.tsx
 create mode 100644 components/Gradient.tsx

diff --git a/components/Box.tsx b/components/Box.tsx
index 3a71465..a5a5a02 100644
--- a/components/Box.tsx
+++ b/components/Box.tsx
@@ -1,128 +1,83 @@
-import { Button, Group, Popover, Drawer } from "@mantine/core";
-import { Favorites, FavoriteState } from "pages";
-import { FC, useState } from "react";
-import { useLongPress } from "react-use";
+import { useMantineTheme } from "@mantine/core";
+import { Gradient } from "components/Gradient";
+import { Favorites } from "pages";
+import { FC } from "react";
 import { Item } from "types";
 
-const getBackground = (itemState: FavoriteState) => {
-  switch (itemState) {
-    case "must": {
-      return "green";
-    }
-    case "maybe": {
-      return "yellow";
-    }
-    default: {
-      return "white";
-    }
-  }
-};
+export const SCALE_MINUTES_TO_PIXELS = 2.7;
 
 interface BoxProps {
   startOfDay: number;
   item: Item;
   favorites: Favorites;
-  setFavorites: React.Dispatch<React.SetStateAction<Favorites | undefined>>;
+  setDetailId: React.Dispatch<React.SetStateAction<string | null>>;
 }
-export const Box: FC<BoxProps> = ({ item, startOfDay, favorites, setFavorites }) => {
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const setOverlayState = (state: boolean) => setPopoverOpen(state);
-  const longPressEvent = useLongPress(() => setOverlayState(true));
+export const Box: FC<BoxProps> = ({ item, startOfDay, favorites, setDetailId }) => {
+  const theme = useMantineTheme();
 
   const itemState = favorites[item.id];
   if (itemState === "nope") {
     return null;
   }
 
-  const setFavoriteState = (state?: FavoriteState) => {
-    setFavorites((favs) => {
-      if (!favs) {
-        favs = {};
+  const getBackground = () => {
+    switch (itemState) {
+      case "must": {
+        return theme.colors.green[4];
       }
-      if (state) {
-        favs[item.id] = state;
-      } else {
-        delete favs[item.id];
+      case "maybe": {
+        return theme.colors.yellow[4];
       }
-      return favs;
-    });
-    setOverlayState(false);
+      default: {
+        return "white";
+      }
+    }
   };
 
   return (
     <li
-      {...longPressEvent}
+      onClick={() => setDetailId(item.id)}
       style={{
         listStyle: "none",
         position: "absolute",
         left: 0,
-        top: (item.relativeDateInMinutes - startOfDay) * 2,
+        top: (item.relativeDateInMinutes - startOfDay) * SCALE_MINUTES_TO_PIXELS,
         padding: 4,
       }}
     >
-      <Popover
-        opened={popoverOpen}
-        onClose={() => setOverlayState(false)}
-        position="bottom"
-        target={
-          <div
-            style={{
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-between",
-              background: getBackground(itemState),
-              border: "1px solid gray",
-              height: popoverOpen ? "auto" : item.duration * 2,
-              minHeight: popoverOpen ? item.duration * 2 : "",
-              transform: popoverOpen ? "scale(1.05)" : "",
-              transition: "transform 400ms",
-              overflow: "hidden",
-              zIndex: popoverOpen ? 2 : "",
-              width: 272,
-            }}
-          >
-            <div style={{ padding: 8, flex: 1, minHeight: 0 }}>
-              <p
-                style={{
-                  marginBottom: 16,
-                }}
-              >
-                {item.title}
-              </p>
-              <p dangerouslySetInnerHTML={{ __html: item.description }} />
-            </div>
-            <div
-              style={{
-                padding: 8,
-                background: getBackground(itemState),
-                display: "flex",
-                justifyContent: "space-between",
-              }}
-            >
-              <p>{item.time?.name}</p>
-              <p>{item.duration} perc</p>
-            </div>
-          </div>
-        }
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          background: getBackground(),
+          border: "1px solid rgba(0, 0, 0, .08)",
+          height: item.duration * SCALE_MINUTES_TO_PIXELS,
+          overflow: "hidden",
+          width: 272,
+          borderRadius: 8,
+          filter: "drop-shadow(0 4px 16px rgba(0, 0, 0, .16))",
+        }}
       >
-        <Group direction="column">
-          {itemState && <Button onClick={() => setFavoriteState()}>Alapállapot</Button>}
-          {itemState !== "must" && (
-            <Button color="green" onClick={() => setFavoriteState("must")}>
-              Kötelező
-            </Button>
-          )}
-          {itemState !== "maybe" && (
-            <Button color="yellow" onClick={() => setFavoriteState("maybe")}>
-              Jó lenne
-            </Button>
-          )}
-          <Button color="red" onClick={() => setFavoriteState("nope")}>
-            Rejtsd el
-          </Button>
-        </Group>
-      </Popover>
+        <div style={{ padding: 6, flex: 1, minHeight: 0 }}>
+          <p style={{ lineHeight: 1.4 }}>{item.title}</p>
+        </div>
+
+        <Gradient height={20} color={getBackground()} />
+
+        <div
+          style={{
+            padding: 6,
+            background: getBackground(),
+            display: "flex",
+            justifyContent: "space-between",
+          }}
+        >
+          <p>{item.time?.name}</p>
+          <p>{item.duration} perc</p>
+        </div>
+      </div>
     </li>
   );
 };
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index d5994db..41929ec 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -1,6 +1,8 @@
-import { Box } from "components/Box";
-import { Favorites } from "pages";
-import { FC } from "react";
+import { Drawer } from "@mantine/core";
+import { Box, SCALE_MINUTES_TO_PIXELS } from "components/Box";
+import { Detail } from "components/Detail";
+import { Favorites, FavoriteState } from "pages";
+import { FC, useState } from "react";
 import { Item, Stage, Village } from "types";
 
 const PADDING = 30;
@@ -34,12 +36,15 @@ interface CalendarProps {
   setFavorites: React.Dispatch<React.SetStateAction<Favorites | undefined>>;
 }
 export const Calendar: FC<CalendarProps> = ({ list, favorites, setFavorites }) => {
+  const [detailId, setDetailId] = useState<string | null>(null);
+
   // find the first program of the day
   // show an extra 30 minutes of padding before
   const startOfDay =
     list.reduce((smallest, current) => {
       return Math.min(smallest, current.relativeDateInMinutes);
-    }, Infinity) - PADDING;
+    }, Infinity) -
+    PADDING / 2;
   const endOfDay =
     list.reduce((biggest, current) => {
       return Math.max(biggest, current.relativeDateInMinutes + current.duration);
@@ -49,58 +54,88 @@ export const Calendar: FC<CalendarProps> = ({ list, favorites, setFavorites }) =
 
   const groups = groupByVillageAndStage(list);
 
+  const detail = list.find((item) => item.id === detailId);
+
+  const setFavoriteState = (item: Item, state?: FavoriteState) => {
+    setFavorites((favs) => {
+      if (!favs) {
+        favs = {};
+      }
+      if (state) {
+        favs[item.id] = state;
+      } else {
+        delete favs[item.id];
+      }
+      return favs;
+    });
+    setDetailId(null);
+  };
+
   return (
-    <ul
-      style={{
-        display: "flex",
-        overflowX: "auto",
-        scrollSnapType: "x mandatory",
-        height: "100vh",
-        background: "lightgray",
-      }}
-    >
-      {groups.map((group) => {
-        return (
-          <li
-            key={group.stage}
-            style={{
-              position: "relative",
-              scrollSnapAlign: "start",
-            }}
-          >
-            <div
-              style={{
-                position: "sticky",
-                top: 0,
-                zIndex: 1,
-                background: "white",
-              }}
-            >
-              <p>{group.village}</p>
-              <p>{group.stage}</p>
-            </div>
-            <ul
+    <>
+      <Drawer
+        opened={detailId !== null}
+        onClose={() => setDetailId(null)}
+        position="right"
+        padding="md"
+        size="80%"
+        zIndex={301}
+      >
+        {detail && <Detail item={detail} favorites={favorites} setFavoriteState={setFavoriteState} />}
+      </Drawer>
+
+      <ul
+        style={{
+          display: "flex",
+          overflowX: "auto",
+          scrollSnapType: "x mandatory",
+          height: "100vh",
+          background: "lightgray",
+        }}
+      >
+        {groups.map((group) => {
+          return (
+            <li
+              key={group.stage}
               style={{
-                width: 280,
                 position: "relative",
-                height: endOfDay * 2,
+                scrollSnapAlign: "start",
               }}
             >
-              {group.list.map((item) => {
-                return (
-                  <Box
-                    key={item.id}
-                    item={item}
-                    startOfDay={startOfDay}
-                    favorites={favorites as Favorites}
-                    setFavorites={setFavorites}
-                  />
-                );
-              })}
-            </ul>
-          </li>
-        );
-      })}
-    </ul>
+              <div
+                style={{
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 1,
+                  background: "white",
+                }}
+              >
+                <p>{group.village}</p>
+                <p>{group.stage}</p>
+              </div>
+              <ul
+                style={{
+                  width: 280,
+                  position: "relative",
+                  height: endOfDay * SCALE_MINUTES_TO_PIXELS,
+                }}
+              >
+                {group.list.map((item) => {
+                  return (
+                    <Box
+                      key={item.id}
+                      item={item}
+                      startOfDay={startOfDay}
+                      favorites={favorites as Favorites}
+                      setDetailId={setDetailId}
+                    />
+                  );
+                })}
+              </ul>
+            </li>
+          );
+        })}
+      </ul>
+    </>
   );
 };
diff --git a/components/Detail.tsx b/components/Detail.tsx
new file mode 100644
index 0000000..8175e15
--- /dev/null
+++ b/components/Detail.tsx
@@ -0,0 +1,45 @@
+import { Button, Group, Space, Title } from "@mantine/core";
+import { Gradient } from "components/Gradient";
+import { Favorites, FavoriteState } from "pages";
+import { FC } from "react";
+import { Item } from "types";
+
+interface DetailProps {
+  item: Item;
+  favorites: Favorites;
+  setFavoriteState: (item: Item, state?: FavoriteState) => void;
+}
+export const Detail: FC<DetailProps> = ({ item, favorites, setFavoriteState }) => {
+  const itemState = favorites[item.id];
+  if (itemState === "nope") {
+    return null;
+  }
+
+  return (
+    <Group direction="column" style={{ height: "100%", paddingBottom: 50 }}>
+      <div style={{ flex: 100, overflowY: "auto", paddingBottom: 50 }}>
+        <Title order={3}>{item.title}</Title>
+        <p dangerouslySetInnerHTML={{ __html: item.description }} />
+      </div>
+
+      <Gradient />
+
+      <Group direction="column" align="center" style={{ width: "100%", flexGrow: 1, justifyContent: "flex-end" }}>
+        {itemState && <Button onClick={() => setFavoriteState(item)}>Alapállapot</Button>}
+        {itemState !== "must" && (
+          <Button color="green" onClick={() => setFavoriteState(item, "must")}>
+            Kötelező
+          </Button>
+        )}
+        {itemState !== "maybe" && (
+          <Button color="yellow" onClick={() => setFavoriteState(item, "maybe")}>
+            Jó lenne
+          </Button>
+        )}
+        <Button color="red" onClick={() => setFavoriteState(item, "nope")}>
+          Rejtsd el
+        </Button>
+      </Group>
+    </Group>
+  );
+};
diff --git a/components/Gradient.tsx b/components/Gradient.tsx
new file mode 100644
index 0000000..af8d83a
--- /dev/null
+++ b/components/Gradient.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+
+interface GradientProps {
+  color?: string;
+  position?: string;
+  height?: number | string;
+}
+export const Gradient: FC<GradientProps> = ({ color = "white", position = "bottom", height = 100 }) => {
+  return (
+    <div
+      style={{
+        height: 1,
+        width: "100%",
+        zIndex: 250,
+        position: "relative",
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          [position]: 0,
+          height,
+          width: "100%",
+          background: `linear-gradient(to ${position}, transparent, ${color})`,
+        }}
+      ></div>
+    </div>
+  );
+};
diff --git a/styles/globals.css b/styles/globals.css
index ddba9d8..8a5bddb 100755
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -90,6 +90,20 @@ abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
 /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
diff --git a/tsconfig.json b/tsconfig.json
index 8687e92..f718381 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
     "jsx": "preserve",
     "incremental": true,
     "downlevelIteration": true,
+    "strictNullChecks": true,
     "baseUrl": "."
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],