Merge pull request #22 from kaupunginnaiset/feat/add-event-listing

Add event card

components/pages/Homepage/EventCard.tsx

@@ -0,0 +1,93 @@
+import Image from "next/image";
+import format from "date-fns/format";
+import styles from "../../../styles/Home.module.css";
+import { isSameDay } from "date-fns";
+
+interface Event {
+  title: string;
+  category?: string[];
+  location: string;
+  img?: string;
+  altText?: string;
+  startTime: string;
+  endTime?: string | null;
+  wholeDay?: boolean;
+}
+
+interface EventCardProps {
+  event: Event;
+}
+
+interface TimeProps {
+  startDateTime: string;
+  endDateTime?: string | null;
+  wholeDay?: boolean;
+}
+
+interface CategoryProps {
+  category: string;
+}
+
+const dayFormatString = "d.L.yyyy";
+const dayFormatStringWithoutYear = "d.L.";
+const timeFormatString = "HH:mm";
+
+const Time = ({ startDateTime, endDateTime, wholeDay }: TimeProps) => {
+  const startTimeDate = new Date(startDateTime);
+  const endTimeDate = endDateTime ? new Date(endDateTime) : null;
+  const startTime = format(startTimeDate, timeFormatString);
+  const endTime = endTimeDate ? format(endTimeDate, timeFormatString) : null;
+
+  const shouldShowEndDate = endTimeDate && !isSameDay(startTimeDate, endTimeDate);
+
+  return (
+    <div className={styles.times}>
+      <time dateTime={format(startTimeDate, "yyyy-LL-dd")}>
+        {shouldShowEndDate ? format(startTimeDate, dayFormatStringWithoutYear) : format(startTimeDate, dayFormatString)}
+      </time>
+      {shouldShowEndDate ? (
+        <>
+          -<time dateTime={format(endTimeDate, "yyyy-LL-dd")}>{format(endTimeDate, dayFormatString)}</time>
+        </>
+      ) : (
+        ""
+      )}{" "}
+      {!wholeDay ? (
+        <>
+          <time dateTime={startTime}>{startTime}</time>
+          {endTime ? (
+            <>
+              -<time dateTime={endTime}>{endTime}</time>
+            </>
+          ) : (
+            ""
+          )}
+        </>
+      ) : (
+        ""
+      )}
+    </div>
+  );
+};
+
+const Category = ({ category }: CategoryProps) => {
+  return <span className={styles.category}>{category}</span>;
+};
+
+export const EventCard = ({ event }: EventCardProps) => {
+  return (
+    <div className={styles["event-card"]}>
+      <div className={styles["image-container"]}>
+        <Image src="https://picsum.photos/200" alt="" width={200} height={200} />
+      </div>
+      <Time startDateTime={event.startTime} endDateTime={event.endTime} wholeDay={event.wholeDay} />
+      <h2>{event.title}</h2>
+      <address>{event.location}</address>
+      <div className={styles.categories}>
+        {event.category?.map(category => (
+          <Category key={`${category}-${event.startTime}`} category={category} />
+        ))}
+      </div>
+    </div>
+  );
+};

components/pages/Homepage/index.tsx

@@ -0,0 +1,17 @@
+import styles from "../../../styles/Home.module.css";
+
+import data from "../../../data";
+import { EventCard } from "./EventCard";
+
+export const Frontpage = () => {
+  return (
+    <>
+      <h1 className={styles.title}>Tapahtumat</h1>
+      <div className={styles.events}>
+        {data.map(item => (
+          <EventCard key={item.id} event={item} />
+        ))}
+      </div>
+    </>
+  );
+};

next.config.js

@@ -1,7 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   basePath: "",
-  reactStrictMode: true
+  reactStrictMode: true,
+  images: {
+    domains: ["picsum.photos"]
+  }
 };
 
 module.exports = nextConfig;

package.json

@@ -13,6 +13,7 @@
     "tools:db:fetch": "ts-node -O '{\"module\": \"commonjs\"}' ./tools/firebase/fetch.ts"
   },
   "dependencies": {
+    "date-fns": "^2.28.0",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
@@ -28,6 +29,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "firebase-admin": "^10.0.2",
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
     "prettier": "^2.5.1",
@@ -36,7 +38,6 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^25.0.0",
     "stylelint-prettier": "^2.0.0",
-    "firebase-admin": "^10.0.2",
     "ts-node": "^10.7.0",
     "typescript": "4.6.2"
   }

pages/index.tsx

@@ -1,26 +1,15 @@
 import type { NextPage } from "next";
 import Head from "next/head";
 import { Layout } from "../components/layout/Layout";
-import styles from "../styles/Home.module.css";
-
-import data from "../data/";
+import { Frontpage } from "../components/pages/Homepage";
 
 const Home: NextPage = () => {
   return (
     <Layout>
       <Head>
-        <title>Alman Akka</title>
-        <link rel="icon" href="/favicon.ico" />
+        <title>Tapahtumat - Alman Akka</title>
       </Head>
-
-      <h1 className={styles.title}>Alman Akka</h1>
-      <div>
-        {data.map((item, index) => (
-          <p key={item.id}>
-            {index + 1}. {item.title}
-          </p>
-        ))}
-      </div>
+      <Frontpage />
     </Layout>
   );
 };

styles/Home.module.css

@@ -1,3 +1,81 @@
 .container {
   padding: 0 2rem;
 }
+
+.events {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  margin: auto 2rem;
+}
+
+.event-card {
+  max-width: 30rem;
+  width: 100%;
+  margin: 0;
+  margin-bottom: 4rem;
+  display: grid;
+  align-items: start;
+  row-gap: 0.25rem;
+  column-gap: 0.5rem;
+  justify-content: start;
+  grid-template-areas:
+    "img time"
+    "img title"
+    "img location"
+    "img categories";
+}
+
+.times {
+  grid-area: time;
+  font-size: 1rem;
+}
+
+.event-card > h2 {
+  margin: 0;
+  grid-area: title;
+  font-size: 1.4rem;
+  word-break: break-word;
+}
+
+.image-container {
+  grid-area: img;
+  max-width: 10rem;
+  min-width: 8rem;
+}
+
+.event-card > address {
+  grid-area: location;
+}
+
+.categories {
+  grid-area: categories;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.category {
+  font-weight: bold;
+  color: #fff;
+  background-color: var(--c-pride-blue);
+  padding: 0.25rem;
+  margin: 0.25rem 0.25rem 0.25rem 0;
+}
+
+@media screen and (max-width: 600px) {
+  .event-card {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "img"
+      "time"
+      "title"
+      "location"
+      "categories";
+  }
+
+  .image-container {
+    width: 100%;
+    justify-self: center;
+  }
+}

styles/Layout.module.css

@@ -57,7 +57,7 @@
 
 .main {
   min-height: 100vh;
-  padding: 4rem 0;
+  margin: auto 2rem;
   flex: 1;
   display: flex;
   flex-direction: column;

yarn.lock

@@ -1863,6 +1863,11 @@ date-and-time@^2.0.0:
   resolved "https://registry.yarnpkg.com/date-and-time/-/date-and-time-2.3.0.tgz#1b509be4c938dbbf5fc9c14d66e1daf9fe3cef13"
   integrity sha512-DY53oj742mykXjZzDxT7NxH5cxwBRb7FsVG5+8pcV96qU9JQd0UhA21pQB18fwwsXOXeSM0RJV4OzgVxu8eatg==
 
+date-fns@^2.28.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"