Merge pull request #113 from codersforcauses/i57-create-events-home-page

Home page linked to Events

.github/workflows/ci-backend.yml

@@ -53,27 +53,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
+      - name: Install poetry
+        run: pipx install poetry
+
       - name: Set up Python Env
         uses: actions/setup-python@v4
         with:
           python-version: "3.12"
-
-      - name: Setup Poetry 🏗
-        uses: snok/install-poetry@v1
-        with:
-          virtualenvs-create: true
-          virtualenvs-in-project: true
-
-      - name: Cache .venv 📦
-        id: cached-poetry-dependencies
-        uses: actions/[email protected]
-        with:
-          path: server/.venv
-          key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}
+          cache: "poetry"
 
       - name: Install dependencies 👨🏻‍💻
         run: poetry install
-        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
 
       - name: Run Migrations 🕊️
         env:
@@ -83,9 +73,7 @@ jobs:
           POSTGRES_PORT: 5432
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
-        run: |
-          source .venv/bin/activate
-          python manage.py migrate
+        run: poetry run python manage.py migrate
 
       - name: Run tests 🧪
         env:
@@ -97,10 +85,9 @@ jobs:
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
         run: |
-          source .venv/bin/activate
-          python3 -m pip install coverage
-          coverage run manage.py test
-          coverage xml
+          poetry run python3 -m pip install coverage
+          poetry run coverage run manage.py test
+          poetry run coverage xml
 
       - name: Upload Coverage ☂️
         uses: codecov/codecov-action@v3

client/.env.example

@@ -1,4 +1,5 @@
 REACT_EDITOR=code
 
 APP_ENV=DEVELOPMENT
-NEXT_PUBLIC_BACKEND_URL="http://localhost:8000/api"
+NEXT_PUBLIC_BACKEND_URL="http://localhost:8000/api"
+NEXT_PUBLIC_BACKEND_IMAGES_URL="http://localhost:8000/"

client/next.config.mjs

@@ -1,5 +1,4 @@
 import os from "node:os";
-
 import isInsideContainer from "is-inside-container";
 
 const isWindowsDevContainer = () =>
@@ -10,13 +9,16 @@ const nextConfig = {
   reactStrictMode: true,
   // dumb fix for windows docker
   images: {
-    remotePatterns: [{
-      protocol: 'http',
-      hostname: 'localhost',
-      port: '8000',
-      pathname: '/static/images/**'
-    }
-  ]},
+    unoptimized: process.env.NODE_ENV === "development",
+    remotePatterns: [
+      {
+        protocol: "http",
+        hostname: "localhost",
+        port: "8000",
+        pathname: "/static/images/**",
+      },
+    ],
+  },
   webpack: isWindowsDevContainer()
     ? (config) => {
         config.watchOptions = {

client/package.json

@@ -67,4 +67,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.2"
   }
-}
+}

client/src/components/main/header/Header.tsx

@@ -5,12 +5,15 @@ export default function Header() {
   return (
     <div
       id="header"
-      className="relative flex w-full justify-center bg-[url('/logo-background.png')] p-10 px-16 text-white max-[340px]:px-2"
+      className="relative flex w-full justify-center bg-[url('/logo-background.webp')] p-10 text-white max-[340px]:px-2 md:px-16"
     >
       {/* Dark overlay */}
       <div className="absolute inset-0 h-full w-full bg-black opacity-30"></div>
       {/* Z score to ensure it goes over the black filter*/}
-      <div id="nav_header" className="z-10 flex w-full flex-col gap-20">
+      <div
+        id="nav_header"
+        className="z-10 flex w-full flex-col gap-10 md:gap-20"
+      >
         <Navbar />
         <NavBarTitle />
       </div>

client/src/components/main/header/NavBarTitle.tsx

@@ -7,14 +7,20 @@ export default function NavBarTitle() {
       {router.pathname == "/" ? (
         <div
           id="inspiring_div"
-          className="mt-auto flex flex-col gap-2 text-start"
+          className="mt-auto flex flex-col gap-6 text-start"
         >
-          <p className="text-3xl md:text-4xl" style={{ fontWeight: "519" }}>
+          <p
+            className="text-3xl md:text-4xl lg:text-5xl"
+            style={{ fontWeight: "519" }}
+          >
             Inspiring generations to co-exist
           </p>
-          <div className="pl-10">
-            <p className="md:text-xl">recreation, education, conservation</p>
-          </div>
+          <p
+            className="text-lg md:text-xl lg:text-2xl"
+            style={{ fontWeight: "459" }}
+          >
+            recreation, education, conservation
+          </p>
         </div>
       ) : (
         ""

client/src/components/main/header/Navbar.tsx

@@ -60,7 +60,7 @@ export default function Navbar() {
       className="flex w-full items-center justify-between whitespace-nowrap text-xl lg:text-2xl"
     >
       <div id="logo" className="flex w-full items-center justify-start">
-        <Link className="hover:opacity-80" href="/">
+        <Link className="w-28 hover:opacity-80 md:w-auto" href="/">
           <Image src="/logo.png" width={155} height={100} alt="logo" />{" "}
         </Link>
       </div>

client/src/components/ui/EventCard_V3.tsx

@@ -1,12 +1,14 @@
+"use client";
+import { format as dateFormat } from "date-fns";
 import { Mail, Share } from "lucide-react";
 import Image from "next/image";
 
 import { Button } from "@/components/ui/button";
 
 interface EventCardProps {
-  date: string;
-  startTime: string;
-  endTime: string;
+  id: number;
+  startTime: Date;
+  endTime: Date;
   title: string;
   city: string;
   location: string;
@@ -15,48 +17,8 @@ interface EventCardProps {
   rsvpURL: string;
 }
 
-function getDayOfWeek(dateString: string): string {
-  const daysOfWeek = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
-  const date = new Date(dateString);
-  const dayIndex = date.getDay();
-  return daysOfWeek[dayIndex];
-}
-
-function getDayOfMonth(dateString: string): number {
-  const date = new Date(dateString);
-  return date.getDate();
-}
-
-function getMonthStr(dateString: string): string {
-  const monthAbbr = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-  const date = new Date(dateString);
-  const monthIndex = date.getMonth();
-  return monthAbbr[monthIndex];
-}
-
 const EventCard = ({
-  date,
+  id,
   startTime,
   endTime,
   title,
@@ -66,76 +28,80 @@ const EventCard = ({
   refImageURL,
   rsvpURL,
 }: EventCardProps) => {
-  const dayOfWeek = getDayOfWeek(date);
-  const dayOfMonth = getDayOfMonth(date);
-  const MonthStr = getMonthStr(date);
+  const start_date_fmt = dateFormat(startTime, "EEEE, do MMM");
+  const end_date_fmt = dateFormat(endTime, "EEEE, do MMM");
+  const date =
+    start_date_fmt == end_date_fmt
+      ? start_date_fmt
+      : `${start_date_fmt} - ${end_date_fmt}`;
+  const start_time_fmt = dateFormat(startTime, "hh:mm aa");
+  const end_time_fmt = dateFormat(endTime, "hh:mm aa");
 
   return (
-    <div className="flex w-full flex-col rounded-lg border border-secondary p-6 md:flex-row">
+    <div className="flex w-full flex-col gap-x-8 rounded-lg border border-secondary p-6 md:flex-row">
       <div className="order-3 hidden min-w-56 flex-col md:order-2 lg:block">
         <div className="w-fit">
-          <p className="px-1 pb-1 text-2xl font-semibold"> {MonthStr} </p>
+          <p className="max-w-72 px-1 pb-1 text-2xl font-semibold"> {date} </p>
           <hr className="border-b-1 mb-4 border-black" />
         </div>
         <div className="me-5 grid grid-cols-1 place-items-center">
-          <p className="mb-1 text-5xl font-bold">{dayOfMonth}</p>
-          <p className="text-[#5B5A5A]">{dayOfWeek}</p>
           <p className="mb-5">
-            {startTime} - {endTime}
+            {start_time_fmt} - {end_time_fmt}
           </p>
-          <Button
-            variant="ghost"
-            className="rounded-lg border border-[#5B5A5A] px-5 py-0.5 text-lg font-medium"
-          >
-            <div className="flex flex-row">
-              {" "}
+          <a href={`event/${id}`}>
+            <Button
+              variant="ghost"
+              className="flex flex-row rounded-lg border border-[#5B5A5A] px-5 py-0.5 text-lg font-medium"
+            >
               RSVP <Mail className="ml-2"> </Mail>{" "}
-            </div>
-          </Button>
+            </Button>
+          </a>
         </div>
       </div>
       <div className="order-2 mb-2 flex grow flex-col md:order-3">
         <div className="mb-2 flex flex-row items-center gap-x-8 lg:mb-5">
-          <p className="text-3xl font-semibold">{title}</p>
+          <a href={`event/${id}`} className="text-3xl font-semibold">
+            {title}
+          </a>
           <Share className="h-full self-center text-primary"></Share>
         </div>
         <hr className="border-b-1 mb-4 border-secondary lg:hidden" />
         <div className="mb-2 flex justify-between lg:hidden">
+          <p className="font-medium">{date}</p>
           <p className="font-medium">
-            {dayOfWeek}, {MonthStr} {dayOfMonth}
-          </p>
-          <p className="font-medium">
-            {startTime} - {endTime}
+            {start_time_fmt} - {end_time_fmt}
           </p>
         </div>
         <div className="mb-6 flex justify-between gap-x-8 text-lg">
           <p className="rounded-lg bg-[#7D916F] px-5 py-0.5 font-medium text-white">
             {city}
           </p>
-          <Button
-            variant="ghost"
-            className="rounded-lg border border-[#5B5A5A] px-5 py-0.5 text-lg font-medium lg:hidden"
-          >
-            <div className="flex flex-row">
-              {" "}
+          <a href={`event/${id}`}>
+            <Button
+              variant="ghost"
+              className="flex flex-row rounded-lg border border-[#5B5A5A] px-5 py-0.5 text-lg font-medium lg:hidden"
+            >
               RSVP <Mail className="ml-2"> </Mail>{" "}
-            </div>
-          </Button>
+            </Button>
+          </a>
           <p className="hidden font-medium lg:block">{location}</p>
         </div>
         <hr className="border-b-1 mb-4 hidden border-black lg:block" />
         <div>
           <p>{description}</p>
         </div>
       </div>
-      <div className="relative order-1 mb-5 h-64 w-full rounded-lg md:order-3 md:mb-0 md:w-96">
+      <a
+        href={`event/${id}`}
+        className="relative order-1 mb-5 h-64 w-full rounded-lg md:order-3 md:mb-0 md:w-96"
+      >
         <Image
           fill
-          src={refImageURL}
+          src={`${refImageURL ? refImageURL : "/tempEventImg.jpeg"}`}
           alt="event image"
           className="h-full w-full rounded-md object-cover md:ps-6"
         />
-      </div>
+      </a>
     </div>
   );
 };

client/src/components/ui/loading.tsx

@@ -9,3 +9,11 @@ export function ButtonLoading() {
     </Button>
   );
 }
+
+export function WaitingLoader() {
+  return (
+    <Button className="bg-transparent" disabled>
+      <ReloadIcon className="mr-2 h-[40px] w-[40px] animate-spin text-primary" />
+    </Button>
+  );
+}