prettier home page

src/v2/api/Controllers/TeamController.cs

@@ -49,6 +49,22 @@ public async Task<ActionResult<IEnumerable<DtoTeam>>> GetByEventID(long eventId)
         }
     }
 
+    [HttpGet("event/{eventId}/user/{userid}")]
+    public async Task<ActionResult<IEnumerable<DtoTeam>>> GetUsersTeamsForEvent(long eventId, int userId)
+    {
+        Log.Information("Getting User {userid} Teams by event {eventId}", userId, eventId);
+        try
+        {
+            var teams = mapper.Map<IEnumerable<DtoTeam>>(await teamRepository.GetUsersTeamsByEventIdAsync(eventId, userId));
+            return new ActionResult<IEnumerable<DtoTeam>>(teams);
+        }
+        catch (NotFoundException<IEnumerable<Team>> ex)
+        {
+            Log.Information(ex.Message, "Event Not Found");
+            return NotFound(ex.Message);
+        }
+    }
+
     [HttpGet("{teamId}")]
     public async Task<ActionResult<DtoTeam>> GetByID(long teamId)
     {

src/v2/api/DataAccess/TeamRepository.cs

@@ -11,6 +11,7 @@ public interface ITeamRepository
     Task<Team> GetTeamByIdAsync(long id);
     Task<IEnumerable<Team>> GetAllAsync();
     Task<IEnumerable<Team>> GetByEventIdAsync(long eventID);
+    Task<IEnumerable<Team>> GetUsersTeamsByEventIdAsync(long eventID, int userId);
     Task<bool> ExistsAsync(long id);
 }
 
@@ -19,7 +20,7 @@ public class TeamRepository : ITeamRepository
     private readonly AspenContext context;
     private readonly IMapper mapper;
     private readonly IPersonTeamAssoicationRepository personTeamAssociationRepository;
-    
+
 
     public TeamRepository(AspenContext context, IMapper mapper, IPersonTeamAssoicationRepository personTeamAssociationRepository)
     {
@@ -28,7 +29,7 @@ public TeamRepository(AspenContext context, IMapper mapper, IPersonTeamAssoicati
         this.personTeamAssociationRepository = personTeamAssociationRepository;
     }
 
-   
+
 
     public async Task<bool> ExistsAsync(long id)
     {
@@ -62,7 +63,7 @@ public async Task<Team> AddAsync(Team team)
                 throw new Exception("Person is already on another team in this event");
             }
         }
-        
+
         await context.Teams.AddAsync(dbTeam);
         existingEvent.Teams.Add(dbTeam);
 
@@ -76,7 +77,7 @@ public async Task<Team> EditTeamAsync(Team team)
     {
         var dbTeam = mapper.Map<DbTeam>(team);
         context.Update(dbTeam);
-        if(team.isArchived == true)
+        if (team.isArchived == true)
         {
             var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
 
@@ -89,23 +90,23 @@ public async Task<Team> EditTeamAsync(Team team)
         return team;
     }
 
-  /*  public async Task DeleteTeamAsync(Team team)
-    {
-        var dbTeam = mapper.Map<DbTeam>(team);
-        context.Update(dbTeam);
+    /*  public async Task DeleteTeamAsync(Team team)
+      {
+          var dbTeam = mapper.Map<DbTeam>(team);
+          context.Update(dbTeam);
 
 
-        var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
+          var teamMembers = await personTeamAssociationRepository.GetTeamMembersAsync(team.ID);
 
-        foreach (var member in teamMembers)
-        {
-            await personTeamAssociationRepository.DeleteAsync(member.ID, team.ID);
-        }
+          foreach (var member in teamMembers)
+          {
+              await personTeamAssociationRepository.DeleteAsync(member.ID, team.ID);
+          }
 
 
-        await context.SaveChangesAsync();
-    }
-*/
+          await context.SaveChangesAsync();
+      }
+  */
 
     public async Task<IEnumerable<Team>> GetByEventIdAsync(long eventID)
     {
@@ -118,4 +119,14 @@ public async Task<IEnumerable<Team>> GetByEventIdAsync(long eventID)
         return mapper.Map<IEnumerable<DbTeam>, IEnumerable<Team>>(unArchivedTeams);
     }
 
+    public async Task<IEnumerable<Team>> GetUsersTeamsByEventIdAsync(long eventID, int userId)
+    {
+        var teams = await context.PersonTeamAssociations
+        .Include(a => a.Team)
+        .Where(a => a.EventId == eventID && a.PersonId == userId)
+        .Select(a => a.Team) // Select the Team objects
+        .ToListAsync();
+
+        return mapper.Map<IEnumerable<DbTeam>, IEnumerable<Team>>(teams);
+    }
 }

src/v2/client/package.json

@@ -15,6 +15,7 @@
     "@types/react-query": "^1.2.9",
     "axios": "^1.5.0",
     "bootstrap": "^5.3.1",
+    "bootstrap-icons": "^1.11.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",

src/v2/client/src/assets/WideContainer.module.scss

@@ -0,0 +1,14 @@
+@import "./custom.scss";
+
+@mixin make-container($padding-x: $container-padding-x) {
+  width: 100%;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 100em;
+}
+
+.customContainer {
+  @include make-container(-x)
+}

src/v2/client/src/assets/custom.scss

@@ -1,5 +1,6 @@
 $primary: #673AB7;
-$secondary: #FFA500;
+$secondary: #8AB73A;
 $info: #0089DB;
+$success: #C3DD94;
 
 @import "../../node_modules/bootstrap/scss/bootstrap.scss"

src/v2/client/src/index.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { StrictMode } from 'react';
 import "bootstrap"
 import "./assets/custom.scss"
+import "bootstrap-icons/font/bootstrap-icons.css"
 import { createRoot } from 'react-dom/client'
 
 const queryClient = getQueryClient();

src/v2/client/src/models/Team.ts

@@ -0,0 +1,11 @@
+export interface Team {
+  id: number;
+  description: string;
+  mainImage: string;
+  ownerId: number;
+  eventId: number;
+  name: string;
+  donationTarget: number;
+  isArchived: boolean;
+  welcomeMessage: string;
+}

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

@@ -1,6 +1,6 @@
 import { FC } from "react"
 import { Event } from "../../models/Event"
-import { useGetEventDonationQuery } from "./homeHooks";
+import { useGetEventDonationQuery } from "./events/eventHooks";
 import { Spinner } from "../../components/Spinner";
 
 export const DonationProgess: FC<{
@@ -15,18 +15,14 @@ export const DonationProgess: FC<{
 
   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 className="fs-5 text-center"><span className="fw-bold">{donated}%</span> of our ${event.donationTarget} goal</div>
+      <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>
     </>
   )

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

@@ -1,9 +1,8 @@
+import classes from "../../assets/WideContainer.module.scss"
 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";
+import { EventDetails } from "./events/EventDetails";
+import { useGetEventsQuery } from "./events/eventHooks";
+import { CharityTeams } from "./teams/CharityTeams";
 
 export const Home = () => {
   const getEventsQuery = useGetEventsQuery();
@@ -12,50 +11,45 @@ export const Home = () => {
   const currentEvent = futureEvents.length > 0 ? futureEvents[0] : undefined
 
   if (getEventsQuery.isLoading) return <Spinner />
+  if (getEventsQuery.isError) return <h3>Error getting events</h3>
+  if (!getEventsQuery.data) return <h3>Unable to get events</h3>
+
 
   return (
-    <div className="container mt-3 text-center">
-      <div className="bg-primary shadow text-white ">
-        {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"
-          title="YouTube video player"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          height="450"
-          style={{ width: "100%" }}
-          allowFullScreen />
-        <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">
-            {currentEvent && <UpcomingEventsModal event={currentEvent} />}
-          </div>
-          <div className="col-auto">
-            <button className="btn btn-secondary text-white">DONATE</button>
+    <div className={`${classes.customContainer} mt-3 text-center`}>
+      <div className="row">
+        <div className="col">
+          <iframe
+            data-testid={"homePageVideo"} id={"homePageVideo"}
+            src="https://www.youtube.com/embed/wkFlIx9sV04"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            height="450"
+            style={{ width: "100%" }}
+            allowFullScreen />
+          <div className="bg-light shadow px-3">
+            <div className="fw-bold text-black fs-4">Charity Teams</div>
+            <div className="text-start">Joining a charity team is a fulfilling way to make a positive impact while connecting with like-minded individuals who share your passion for giving back.</div>
+            <div className="pb-3">
+              <div className="fw-bold fs-4">Benefits of Joining a Charity Event Team</div>
+              <ul className="text-start">
+                <li>Joining a team for a charity event is a powerful way to maximize your impact and make a positive difference in the lives of others.</li>
+                <li>When you're part of a team, you benefit from the camaraderie and collective motivation, which encourages you to contribute more generously than you might on your own.</li>
+                <li>The spirit of friendly competition among teams drives each member to push their limits, resulting in a greater overall contribution to the cause.</li>
+                <li>Being part of a team fosters a sense of belonging, creating a network of passionate individuals united by a common goal.</li>
+                <li>By working together and leveraging each other's strengths, you not only raise more funds for the charity, but you also forge lasting connections that strengthen your community and promote a culture of giving.</li>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="bg-light shadow px-3">
-        <div className="fw-bold text-black fs-4">Charity Teams</div>
-        <div className="text-start">Joining a charity team is a fulfilling way to make a positive impact while connecting with like-minded individuals who share your passion for giving back.</div>
-        <div className="my-3">
-          <BenefitsModal />
-        </div>
-        <div className="row pb-3">
-          <div className="col text-end">
-            <button className="btn btn-secondary text-white">ACTIVE TEAMS</button>
-          </div>
-          <div className="col text-start">
-            <button className="btn btn-secondary text-white">CREATE A TEAM</button>
+        {currentEvent && (
+          <div className="col-4">
+            <EventDetails event={currentEvent} />
+            <div className="my-2">
+              <CharityTeams eventId={currentEvent?.id} />
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div >
   )