split stuff

components/Box.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Popover } from "@mantine/core";
+import { Button, Group, Popover, Drawer } from "@mantine/core";
 import { Favorites, FavoriteState } from "pages";
 import { FC, useState } from "react";
 import { useLongPress } from "react-use";
@@ -21,16 +21,12 @@ const getBackground = (itemState: FavoriteState) => {
 interface BoxProps {
   startOfDay: number;
   item: Item;
-  setShowOverlay: (open: boolean) => void;
   favorites: Favorites;
   setFavorites: React.Dispatch<React.SetStateAction<Favorites | undefined>>;
 }
-export const Box: FC<BoxProps> = ({ item, startOfDay, setShowOverlay, favorites, setFavorites }) => {
+export const Box: FC<BoxProps> = ({ item, startOfDay, favorites, setFavorites }) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const setOverlayState = (state: boolean) => {
-    setPopoverOpen(state);
-    setShowOverlay(state);
-  };
+  const setOverlayState = (state: boolean) => setPopoverOpen(state);
   const longPressEvent = useLongPress(() => setOverlayState(true));
 
   const itemState = favorites[item.id];

components/Calendar.tsx

@@ -0,0 +1,106 @@
+import { Box } from "components/Box";
+import { Favorites } from "pages";
+import { FC } from "react";
+import { Item, Stage, Village } from "types";
+
+const PADDING = 30;
+
+interface Group {
+  village: Village;
+  stage: Stage;
+  list: Item[];
+}
+const groupByVillageAndStage = (list: Item[]): Group[] => {
+  const groups = list.reduce<Record<Stage, Group>>((groups, item) => {
+    if (!item.stage?.name || !item.village?.name) {
+      return groups;
+    }
+    if (!groups[item.stage.name]) {
+      groups[item.stage.name] = {
+        village: item.village.name,
+        stage: item.stage.name,
+        list: [],
+      };
+    }
+    groups[item.stage.name].list.push(item);
+    return groups;
+  }, {} as any);
+  return Object.values(groups);
+};
+
+interface CalendarProps {
+  list: Item[];
+  favorites: Favorites;
+  setFavorites: React.Dispatch<React.SetStateAction<Favorites | undefined>>;
+}
+export const Calendar: FC<CalendarProps> = ({ list, favorites, setFavorites }) => {
+  // 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;
+  const endOfDay =
+    list.reduce((biggest, current) => {
+      return Math.max(biggest, current.relativeDateInMinutes + current.duration);
+    }, 0) -
+    startOfDay +
+    PADDING;
+
+  const groups = groupByVillageAndStage(list);
+
+  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
+              style={{
+                width: 280,
+                position: "relative",
+                height: endOfDay * 2,
+              }}
+            >
+              {group.list.map((item) => {
+                return (
+                  <Box
+                    key={item.id}
+                    item={item}
+                    startOfDay={startOfDay}
+                    favorites={favorites as Favorites}
+                    setFavorites={setFavorites}
+                  />
+                );
+              })}
+            </ul>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

components/Hidden.tsx

@@ -0,0 +1,62 @@
+import { Button, Divider, Modal, Space } from "@mantine/core";
+import { Favorites } from "pages";
+import { FC } from "react";
+import { Item } from "types";
+
+interface HiddenProps {
+  hidden: Item[];
+  openHidden: boolean;
+  setOpenHidden: React.Dispatch<React.SetStateAction<boolean>>;
+  setFavorites: React.Dispatch<React.SetStateAction<Favorites | undefined>>;
+}
+export const Hidden: FC<HiddenProps> = ({ hidden, openHidden, setOpenHidden, setFavorites }) => {
+  return (
+    <Modal
+      title={<h2>Rejtett programok</h2>}
+      opened={openHidden}
+      onClose={() => setOpenHidden(false)}
+      padding="lg"
+      size="auto"
+      overlayColor="#aaa"
+    >
+      {!hidden.length ? (
+        <p>Még nincs egy program sem elrejtve!</p>
+      ) : (
+        <ul>
+          {hidden.map((item) => {
+            return (
+              <>
+                <li key={item.id} style={{ display: "flex", justifyContent: "space-between", gap: 16 }}>
+                  <div>
+                    <p>{item.title}</p>
+                    <div style={{ display: "flex", gap: 8 }}>
+                      <p>{item.village?.name}</p>
+                      <span>/</span>
+                      <p>{item.stage?.name}</p>
+                    </div>
+                    <p>{item.time?.name}</p>
+                  </div>
+                  <Button
+                    onClick={() => {
+                      setFavorites((favs) => {
+                        if (!favs) {
+                          favs = {};
+                        }
+                        delete favs[item.id];
+                        return favs;
+                      });
+                    }}
+                  >
+                    Vissza
+                  </Button>
+                </li>
+                <Divider my="sm" />
+              </>
+            );
+          })}
+          <Space h="lg" />
+        </ul>
+      )}
+    </Modal>
+  );
+};