From 9dbf3dc9efa2e25772ffd7ecf384a6cee68099ec Mon Sep 17 00:00:00 2001
From: Alexander Simoes <alexandersimoes@gmail.com>
Date: Thu, 26 Dec 2024 21:41:08 -0500
Subject: [PATCH] adds ability to filter deaths by occupation

---
 .../[id]/occupation/[occupationId]/page.jsx   | 20 ++++---
 components/common/Intro.css                   | 35 +++++++++++-
 components/deaths/DeathsByMonth.jsx           |  3 +
 components/deaths/Intro.jsx                   | 56 ++++++++++++-------
 components/deaths/PeopleGrid.jsx              | 16 ++++--
 5 files changed, 97 insertions(+), 33 deletions(-)

diff --git a/app/[locale]/profile/deaths/[id]/occupation/[occupationId]/page.jsx b/app/[locale]/profile/deaths/[id]/occupation/[occupationId]/page.jsx
index c42c38e..6d9e11e 100644
--- a/app/[locale]/profile/deaths/[id]/occupation/[occupationId]/page.jsx
+++ b/app/[locale]/profile/deaths/[id]/occupation/[occupationId]/page.jsx
@@ -24,9 +24,9 @@ async function getOccupation(occupationId) {
   return Array.isArray(data) && data.length > 0 ? data[0] : {};
 }
 
-async function getPeopleDiedThisYear(yearNum, occupation) {
+async function getPeopleDiedThisYear(yearNum) {
   const res = await fetch(
-    `${BASE_API}/person?alive=is.false&deathdate=gte.01-01-${yearNum}&deathdate=lte.12-31-${yearNum}&occupation=eq.${occupation}&select=bplace_country(demonym),dplace_country(id,country,slug),dplace_geonameid(id,place,slug,lat,lon),occupation(*),occupation_id:occupation,name,slug,id,hpi,hpi_prev,gender,birthyear,birthdate,deathyear,deathdate,alive&order=deathdate.asc`,
+    `${BASE_API}/person?alive=is.false&deathdate=gte.01-01-${yearNum}&deathdate=lte.12-31-${yearNum}&select=bplace_country(demonym),dplace_country(id,country,slug),dplace_geonameid(id,place,slug,lat,lon),occupation(*),occupation_id:occupation,name,slug,id,hpi,hpi_prev,gender,birthyear,birthdate,deathyear,deathdate,alive&order=deathdate.asc`,
     {
       next: {revalidate: REVALIDATE_PERIODS.DEFAULT},
     }
@@ -61,9 +61,9 @@ export default async function Page({params: {id: year, occupationId}}) {
 
   const occupation = await getOccupation(occupationId);
 
-  const peopleDiedThisYear = await getPeopleDiedThisYear(
-    yearNum,
-    occupation.id
+  const peopleDiedThisYear = await getPeopleDiedThisYear(yearNum);
+  const peopleDiedThisYearFiltered = peopleDiedThisYear.filter(
+    person => person.occupation_id === occupation.id
   );
 
   const sections = [
@@ -74,7 +74,7 @@ export default async function Page({params: {id: year, occupationId}}) {
         <TopPeople
           occupation={occupation}
           year={year}
-          people={peopleDiedThisYear}
+          people={peopleDiedThisYearFiltered}
         />
       ),
     },
@@ -85,7 +85,7 @@ export default async function Page({params: {id: year, occupationId}}) {
         <DeathsByMonth
           occupation={occupation}
           year={year}
-          people={peopleDiedThisYear}
+          people={peopleDiedThisYearFiltered}
         />
       ),
     },
@@ -93,7 +93,11 @@ export default async function Page({params: {id: year, occupationId}}) {
 
   return (
     <div className="person">
-      <Header occupation={occupation} year={year} people={peopleDiedThisYear} />
+      <Header
+        occupation={occupation}
+        year={year}
+        people={peopleDiedThisYearFiltered}
+      />
       <div className="about-section">
         <ProfileNav sections={sections} />
         <Intro
diff --git a/components/common/Intro.css b/components/common/Intro.css
index ecfff0e..85dbf24 100644
--- a/components/common/Intro.css
+++ b/components/common/Intro.css
@@ -205,4 +205,37 @@
 .year-navigation-link {
   @mixin bodyLink;
   color: #666;
-}
\ No newline at end of file
+}
+
+.occupation-filter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.occupation-filter select {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 1rem;
+  min-width: 200px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.occupation-filter label {
+  font-weight: 500;
+  color: var(--colorMatza);
+}
+
+.occupation-filter select:hover {
+  border-color: #999;
+}
+
+.occupation-filter select:focus {
+  outline: none;
+  border-color: #666;
+  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+} 
\ No newline at end of file
diff --git a/components/deaths/DeathsByMonth.jsx b/components/deaths/DeathsByMonth.jsx
index 3471450..09656cf 100644
--- a/components/deaths/DeathsByMonth.jsx
+++ b/components/deaths/DeathsByMonth.jsx
@@ -53,6 +53,9 @@ export default async function DeathsByMonth({year, people}) {
       {months.map((monthName, index) => {
         const month = index + 1;
         const peopleInMonth = groupedByMonth[month] || [];
+        if (peopleInMonth.length === 0) {
+          return null;
+        }
         return (
           <div key={monthName} className="month-section">
             <h3>
diff --git a/components/deaths/Intro.jsx b/components/deaths/Intro.jsx
index 7cca804..f5ab889 100644
--- a/components/deaths/Intro.jsx
+++ b/components/deaths/Intro.jsx
@@ -1,24 +1,19 @@
+"use client";
+
 import AnchorList from "../utils/AnchorList";
-import {plural} from "pluralize";
 import {toTitleCase} from "../utils/vizHelpers";
 import {FORMATTERS} from "../utils/consts";
 import "../common/Intro.css";
+import {useRouter} from "next/navigation";
 
 export default function Intro({year, people, occupation}) {
-  const peopleSortedByHPI = people.sort((a, b) => b.hpi - a.hpi);
-  const countryBornCounts = people.reduce((acc, person) => {
-    if (person.dplace_country) {
-      const countryId = person.dplace_country.id;
-      if (!acc[countryId]) {
-        acc[countryId] = {
-          count: 0,
-          country: person.dplace_country,
-        };
-      }
-      acc[countryId].count++;
-    }
-    return acc;
-  }, {});
+  const router = useRouter();
+  const peopleSortedByHPI = people
+    .filter(person =>
+      occupation ? person.occupation.id === occupation.id : true
+    )
+    .sort((a, b) => b.hpi - a.hpi);
+
   const occupationCounts = people.reduce((acc, person) => {
     if (person.occupation) {
       const occupationId = person.occupation.id;
@@ -33,11 +28,7 @@ export default function Intro({year, people, occupation}) {
     return acc;
   }, []);
 
-  const topCountries = Object.values(countryBornCounts)
-    .sort((a, b) => b.count - a.count)
-    .slice(0, 3);
-
-  const cityDiedCounts = people.reduce((acc, person) => {
+  const cityDiedCounts = peopleSortedByHPI.reduce((acc, person) => {
     if (person.dplace_geonameid) {
       const cityId = person.dplace_geonameid.id;
       if (!acc[cityId]) {
@@ -130,6 +121,31 @@ export default function Intro({year, people, occupation}) {
           </p>
         </div>
       </div>
+      <div className="occupation-filter">
+        <label htmlFor="occupation-select">Filter by Occupation: </label>
+        <select
+          id="occupation-select"
+          onChange={e => {
+            const path = e.target.value
+              ? `/profile/deaths/${year}/occupation/${e.target.value}`
+              : `/profile/deaths/${year}`;
+            router.push(path);
+          }}
+          value={occupation?.occupation_slug || ""}
+        >
+          <option value="">All Occupations</option>
+          {Object.values(occupationCounts)
+            .sort((a, b) => b.count - a.count)
+            .map(({occupation, count}) => (
+              <option
+                key={occupation.occupation_slug}
+                value={occupation.occupation_slug}
+              >
+                {toTitleCase(occupation.occupation)} ({count})
+              </option>
+            ))}
+        </select>
+      </div>
       <div className="year-navigation">
         <div>
           <a
diff --git a/components/deaths/PeopleGrid.jsx b/components/deaths/PeopleGrid.jsx
index eeb80a9..c2808b3 100644
--- a/components/deaths/PeopleGrid.jsx
+++ b/components/deaths/PeopleGrid.jsx
@@ -4,10 +4,11 @@ import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import {toTitleCase} from "../utils/vizHelpers";
 import Link from "next/link";
+import {plural} from "pluralize";
 
 dayjs.extend(advancedFormat);
 
-const PeopleGrid = ({bios}) => (
+const PeopleGrid = ({bios, occupation, year}) => (
   <>
     <div className="people-grid">
       {bios.map(profile => (
@@ -47,9 +48,16 @@ const PeopleGrid = ({bios}) => (
       ))}
     </div>
     <div className="view-more-link">
-      <Link href="/explore/rankings?show=people&years=2024,2024&yearType=deathyear">
-        View Full List of 2024 Deaths Ranked by HPI →
-      </Link>
+      {occupation ? (
+        <Link href="/explore/rankings?show=people&years=2024,2024&yearType=deathyear">
+          View Full List of {plural(toTitleCase(occupation.occupation))} that
+          died in {year} →
+        </Link>
+      ) : (
+        <Link href="/explore/rankings?show=people&years=2024,2024&yearType=deathyear">
+          View Full List of {year} Deaths Ranked by HPI →
+        </Link>
+      )}
     </div>
   </>
 );