talking to api

src/v2/client/package.json

@@ -13,6 +13,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-query": "^1.2.9",
+    "axios": "^1.5.0",
     "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/v2/client/src/components/NavBar.tsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom"
 
 export const NavBar = () => {
   return (
-    <nav className="navbar navbar-expand-md navbar-light bg-primary shadow-lg">
+    <nav className="navbar navbar-expand-md navbar-light bg-primary shadow">
       <div className="container-fluid">
         <a className="navbar-brand text-white fw-bold" href="https://sanpetepantry.org/" target="_blank" rel="noreferrer">
           Sanpete Food Bank

src/v2/client/src/components/Spinner.scss

@@ -0,0 +1,43 @@
+@import "../assets/custom.scss";
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid $primary;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: $primary transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/v2/client/src/components/Spinner.tsx

@@ -0,0 +1,9 @@
+import "./Spinner.scss";
+
+export const Spinner = () => {
+  return (
+    <div className="d-flex justify-content-center">
+      <div className="lds-ring"><div></div><div></div><div></div><div></div></div>
+    </div>
+  )
+}

src/v2/client/src/models/Donation.ts

@@ -0,0 +1,9 @@
+export interface Donation {
+  id: number;
+  eventID: number;
+  teamID: number;
+  personID: number;
+  date: string;
+  amount: number;
+  isPending: boolean;
+}

src/v2/client/src/models/Event.ts

@@ -0,0 +1,11 @@
+
+export interface Event {
+  date: Date;
+  title?: string;
+  location?: string;
+  description?: string;
+  mainImage?: string;
+  donationTarget: number;
+  isArchived?: boolean;
+  id: number;
+}

src/v2/client/src/pages/home/DonationProgess.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react"
+import { Event } from "../../models/Event"
+import { useGetEventDonationQuery } from "./homeHooks";
+import { Spinner } from "../../components/Spinner";
+
+export const DonationProgess: FC<{
+  event?: Event
+}> = ({ event }) => {
+  const getEventDonationQuery = useGetEventDonationQuery(event?.id);
+
+  if (getEventDonationQuery.isLoading) return <Spinner />
+  if (!event) return <div className="fs-5">No Event Donations</div>
+
+  const donated = getEventDonationQuery.data ? Math.round(getEventDonationQuery.data / event?.donationTarget * 100) : 0
+
+  return (
+    <>
+      <div className="fs-5"><span className="fw-bold">{donated}%</span> of our ${event.donationTarget} goal</div>
+      <div className="row">
+        <div className="col-6 offset-3">
+          <div className="progress bg-success-subtle">
+            <div className="progress-bar bg-success"
+              style={{ width: (donated / event.donationTarget * 100) + "%" }}
+              role="progressbar"
+              aria-valuenow={donated}
+              aria-valuemin={1}
+              aria-valuemax={event.donationTarget} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/v2/client/src/pages/home/Home.tsx

@@ -1,12 +1,26 @@
+import { Spinner } from "../../components/Spinner";
 import { BenefitsModal } from "./BenefitsModal";
 import { UpcomingEventsModal } from "./UpcomingEventsModal";
+import { useGetEventsQuery } from "./homeHooks";
+import { Event } from "../../models/Event";
+import { DonationProgess } from "./DonationProgess";
 
 export const Home = () => {
-  const width = 1;
+  const getEventsQuery = useGetEventsQuery();
+  const events = getEventsQuery.data ?? [];
+  const futureEvents = events.filter(e => new Date(e.date) >= new Date() && e.isArchived === false)
+  const currentEvent = futureEvents.length > 0 ? futureEvents[0] : undefined
+
+  if (getEventsQuery.isLoading) return <Spinner />
+
   return (
     <div className="container mt-3 text-center">
       <div className="bg-primary shadow text-white ">
-        <h3>There are currently no upcoming events</h3>
+        {currentEvent ? (
+          <h3>Upcoming Event: {currentEvent.title}</h3>
+        ) : (
+          <h3>There are currently no upcoming events</h3>
+        )}
         <iframe
           data-testid={"homePageVideo"} id={"homePageVideo"}
           src="https://www.youtube.com/embed/wkFlIx9sV04"
@@ -15,20 +29,13 @@ export const Home = () => {
           height="450"
           style={{ width: "100%" }}
           allowFullScreen />
-        <div className="fs-5"><span className="fw-bold">0%</span> of our $0 goal</div>
-        <div className="row">
-          <div className="col-6 offset-3">
-            <div className="progress bg-success-subtle">
-              <div className="progress-bar bg-success" style={{ width: width + "%" }} role="progressbar" aria-valuenow={width} aria-valuemin={1} aria-valuemax={100} />
-            </div>
-          </div>
-        </div>
+        <DonationProgess event={currentEvent} />
         <div className="row py-3">
           <div className="col-5 text-end">
             <button className="btn btn-secondary text-white">SHARE NOW</button>
           </div>
           <div className="col-auto">
-            <UpcomingEventsModal />
+            {currentEvent && <UpcomingEventsModal event={currentEvent} />}
           </div>
           <div className="col-auto">
             <button className="btn btn-secondary text-white">DONATE</button>
@@ -50,6 +57,6 @@ export const Home = () => {
           </div>
         </div>
       </div>
-    </div>
+    </div >
   )
 }

src/v2/client/src/pages/home/UpcomingEventsModal.tsx

@@ -1,6 +1,10 @@
+import { FC } from "react"
 import { CustomModal, useModal, ModalButton } from "../../components/CustomModal"
+import { Event } from "../../models/Event"
 
-export const UpcomingEventsModal = () => {
+export const UpcomingEventsModal: FC<{
+  event: Event
+}> = ({ event }) => {
   const eventDetailModalControl = useModal("Event Details", "lg")
 
   const ModalButton: ModalButton = ({ showModal }) => (
@@ -9,11 +13,18 @@ export const UpcomingEventsModal = () => {
   )
   return (
     <CustomModal ModalButton={ModalButton} controls={eventDetailModalControl}>
-      <div className="modal-body text-center">
-        <div className="fw-bold fs-3">Event: There are currently no upcoming events</div>
-        <div className="row mx-5 my-3">
-          <button className="btn btn-secondary text-white"
-            onClick={() => eventDetailModalControl.hide()}>OK</button>
+      <div className="modal-content ">
+        <div className="modal-header">
+          <div className="modal-title fw-bold fs-4">{event.title}</div>
+          <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+          <div>Location: {event.location}</div>
+          <div>Description: {event.description}</div>
+          <div className="row mx-5 my-3">
+            <button className="btn btn-secondary text-white"
+              onClick={() => eventDetailModalControl.hide()}>OK</button>
+          </div>
         </div>
       </div>
     </CustomModal>

src/v2/client/src/pages/home/homeHooks.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query"
+import { homeService } from "./homeService"
+
+export const eventsKey = {
+  eventsKey: ["events"] as const,
+  eventDonationKey: (id?: number) => ["eventDonation", id] as const,
+}
+
+export const useGetEventsQuery = () => {
+  return useQuery({
+    queryKey: eventsKey.eventsKey,
+    queryFn: async () => await homeService.getEvents(),
+  });
+}
+
+export const useGetEventDonationQuery = (id?: number) => {
+  return useQuery({
+    queryKey: eventsKey.eventDonationKey(id),
+    queryFn: async () => {
+      if (!id) return;
+      return await homeService.getEventDonation(id)
+    },
+  });
+} 

src/v2/client/src/pages/home/homeService.ts

@@ -0,0 +1,16 @@
+import axios from "axios"
+import { Event } from "../../models/Event";
+import { Donation } from "../../models/Donation";
+
+export const homeService = {
+  async getEvents(): Promise<Event[]> {
+    const url = "/api/events"
+    const response = await axios.get(url);
+    return response.data
+  },
+  async getEventDonation(id: number): Promise<number> {
+    const url = `/api/donations/event/${id}`
+    const response = await axios.get(url);
+    return response.data
+  },
+}

src/v2/client/src/setupProxy.js

@@ -0,0 +1,10 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function (app) {
+  app.use(
+    ["/swagger", "/api/"],
+    createProxyMiddleware({
+      target: "http://localhost:5238",
+    })
+  )
+}

src/v2/client/tsconfig.json

@@ -21,6 +21,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "setupProxy.js"
   ]
-}
+}