Enhancement/event timeframes

apps/kvarteret/components/HappeningToday.tsx

@@ -3,14 +3,17 @@ import { Title } from "dak-components";
 import TranslatedField, {
   useTranslation,
 } from "dak-components/lib/components/TranslatedField";
-import { Event } from "dak-components/lib/cms/queries/events";
 
-const HappeningToday = ({ events }: { events: Event[] }) => {
+const HappeningToday = ({ events }: { events: { time: String; room: String; title: String; }[] }) => {
   return (
+
+    /* Creates the element wrapper */
     <div className="happening-today">
       <Title underlined>
         <TranslatedField tKey="index-happening-today" />
       </Title>
+
+      {/* Creates the event elements */}
       <div className="happening-today-content">
         <TodayItem
           bold
@@ -20,16 +23,47 @@ const HappeningToday = ({ events }: { events: Event[] }) => {
             title: useTranslation("event"),
           }}
         />
+
+        {/* Maps a unique key to the event properties */}
         {events.map((x, i) => (
           <TodayItem key={i} event={x} />
         ))}
       </div>
+
+      {/* Creates different elements if there is no events */}
       {events.length <= 0 && (
         <div className="nothing-happening">
           <TranslatedField tKey="index-nothing-happening-today" />
         </div>
       )}
+
+      {/* CSS for the elements above */}
+      <style jsx>
+        {`
+
+        .happening-today-content {
+          gap: 10px;
+          display: grid;
+          margin-top: 5px;
+          grid-template-columns: fit-content(200px) fit-content(200px) 1fr;
+        }
+
+        @media (max-width: 768px) {
+          .happening-today-content {
+            gap: 0;
+            display: grid;
+            grid-template-rows: repeat(auto-fit, 1fr);
+          }
+        }
+
+        .nothing-happening {
+          margin-top: 10px;
+        }
+
+      `}
+      </style>
     </div>
+
   );
 };
 

apps/kvarteret/components/TodayItem.tsx

@@ -1,4 +1,7 @@
-const TodayItem = ({ event, bold = false }) => {
+import { Event } from "dak-components/lib/cms/queries/events";
+import { CrescatEvent } from "dak-components/lib/crescat";
+
+const TodayItem = ({ event, bold = false }: { event: { time: String; room: String; title: String; }; bold?: boolean }) => {
   return (
     <>
       <div className="time">{event.time}</div>
@@ -18,6 +21,7 @@ const TodayItem = ({ event, bold = false }) => {
             .title {
               margin-bottom: 10px;
             }
+
           }
         `}
       </style>

packages/dak-components/lib/crescat.ts

@@ -0,0 +1,57 @@
+import axios, { AxiosRequestHeaders } from 'axios'
+
+import cache from 'memory-cache';
+
+// Fetches the data from a given URL
+const cachedGet = async (url: string, headers: AxiosRequestHeaders) => {
+    const cachedResponse = cache.get(url);
+    if (cachedResponse) {
+        return cachedResponse;
+    }
+
+    const cacheTime = 1000 * 60 * 30; //Cached for 1 minutes
+    const response = await axios.get(url, {
+        headers
+    });
+
+    // Establishes the data from the URL-response
+    const data = response.data;
+    cache.put(url, data, cacheTime);
+    return data;
+}
+
+const getEvents = async () => {
+    const crescatData = await cachedGet("https://app.crescat.io/external/v1/calendar", {
+        Authorization: `Bearer ${process.env.CRESCAT_TOKEN}`
+    });
+
+    return crescatData.filter(x => x.fields.some(x => x.id === 70879));
+}
+
+export { getEvents };
+
+// Type definition for the crescatData
+export interface CrescatEvent {
+    id: number;
+    name: string;
+    start: Date;
+    end: Date;
+    event_type_id: number;
+    rooms: Room[];
+    show_times: any[];
+    fields: Field[];
+}
+
+export interface Field {
+    value: null | string;
+    show_time_id: null;
+    id: number;
+}
+
+export interface Room {
+    name: string;
+    id: number;
+    title: null | string;
+    start: Date;
+    end: Date;
+}