move selector to global

ianwood103 · Oct 23, 2024 · 858de51 · 858de51
1 parent f89907c
commit 858de51
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 128 deletions.
diff --git a/components/GraphicsPane.tsx b/components/GraphicsPane.tsx
@@ -2,13 +2,56 @@ import { GraphicProps } from "@/utils/types";
 import MonthlyBirdTotal from "./MonthlyBirdTotal";
 import MonthlySpeciesBreakdown from "./MonthlySpeciesBreakdown";
 import MonthlyMapView from "./MonthlyMapView";
+import { Select } from "@rewind-ui/core";
+import { MONTHS } from "@/utils/constants";
+import { useState } from "react";
+
+const GraphicsPane: React.FC<{ data: GraphicProps["data"] }> = ({ data }) => {
+  const [month, setMonth] = useState<number>(0);
+  const [year, setYear] = useState<number>(new Date().getFullYear());
+
+  // Generate array of years from 2000 to current year
+  const currentYear = new Date().getFullYear();
+  const years = Array.from(
+    { length: currentYear - 1999 },
+    (_, i) => currentYear - i
+  );
 
-const GraphicsPane: React.FC<GraphicProps> = ({ data }) => {
   return (
-    <div className="flex flex-row flex-wrap gap-10 justify-evenly mt-20">
-      <MonthlyBirdTotal data={data} />
-      <MonthlySpeciesBreakdown data={data} />
-      <MonthlyMapView data={data} />
+    <div className="flex flex-col items-center">
+      <div className="flex flex-row gap-2 mb-8 pt-4">
+        <div className="w-40">
+          <Select
+            defaultValue={month}
+            onChange={(e) => setMonth(Number(e.target.value))}
+            size="sm"
+          >
+            {MONTHS.map((monthLabel, idx) => (
+              <option key={idx} value={idx}>
+                {monthLabel}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <div className="w-32">
+          <Select
+            defaultValue={year}
+            onChange={(e) => setYear(Number(e.target.value))}
+            size="sm"
+          >
+            {years.map((yearOption) => (
+              <option key={yearOption} value={yearOption}>
+                {yearOption}
+              </option>
+            ))}
+          </Select>
+        </div>
+      </div>
+      <div className="flex flex-row flex-wrap gap-10 justify-evenly">
+        <MonthlyBirdTotal data={data} month={month} year={year} />
+        <MonthlySpeciesBreakdown data={data} month={month} year={year} />
+        <MonthlyMapView data={data} month={month} year={year} />
+      </div>
     </div>
   );
 };

diff --git a/components/MonthlyBirdTotal.tsx b/components/MonthlyBirdTotal.tsx
@@ -1,18 +1,16 @@
 import { GraphicProps } from "@/utils/types";
 import { useEffect, useRef, useState } from "react";
-import { Select, Button } from "@rewind-ui/core";
+import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
 import { MONTHS } from "@/utils/constants";
 import { downloadImage, getBirdFilename } from "@/utils/helpers";
 
-const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data }) => {
+const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data, month, year }) => {
   // State variables
   const [total, setTotal] = useState<number>(0);
   const [mostCommonSpecies, setMostCommonSpecies] = useState<string | null>(
     null
   );
-  const [month, setMonth] = useState<number>(0);
-  const [year, setYear] = useState<number>(new Date().getFullYear());
   const [birdFilename, setBirdFilename] = useState<string>(
     "/bird_placeholder.png"
   );
@@ -47,13 +45,6 @@ const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data }) => {
     fetchBirdTotal();
   }, [data, month, year]);
 
-  // Generate array of years from 2000 to current year
-  const currentYear = new Date().getFullYear();
-  const years = Array.from(
-    { length: currentYear - 1999 },
-    (_, i) => currentYear - i
-  );
-
   return (
     <div className="flex flex-col w-80 h-80 border-none shadow-sm">
       {/* Main content */}
@@ -106,39 +97,10 @@ const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data }) => {
         </div>
       </div>
       {/* Controls */}
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2">
-        {/* Month selector */}
-        <div className="w-1/2">
-          <Select
-            defaultValue={month}
-            onChange={(e) => setMonth(Number(e.target.value))}
-            size="sm"
-          >
-            {MONTHS.map((monthLabel, idx) => (
-              <option key={idx} value={idx}>
-                {monthLabel}
-              </option>
-            ))}
-          </Select>
-        </div>
-        {/* Year selector */}
-        <div className="w-1/3">
-          <Select
-            defaultValue={year}
-            onChange={(e) => setYear(Number(e.target.value))}
-            size="sm"
-          >
-            {years.map((yearOption) => (
-              <option key={yearOption} value={yearOption}>
-                {yearOption}
-              </option>
-            ))}
-          </Select>
-        </div>
-        {/* Download button */}
-        <div className="w-1/6">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
+        <div className="w-full">
           <Button
-            className="h-full bg-primary"
+            className="h-full w-full bg-primary"
             onClick={() => downloadImage(elementRef)}
           >
             <MdOutlineFileDownload className="text-lg" />

diff --git a/components/MonthlyMapView.tsx b/components/MonthlyMapView.tsx
@@ -2,17 +2,14 @@ import { GraphicProps, Coordinate } from "@/utils/types";
 import { MONTHS } from "@/utils/constants";
 import { downloadImage } from "@/utils/helpers";
 import { useEffect, useRef, useState } from "react";
-import { Select, Button } from "@rewind-ui/core";
+import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 
-const MonthlyMapView: React.FC<GraphicProps> = ({ data }) => {
-  const [month, setMonth] = useState<number>(0);
-  const [year, setYear] = useState<number>(new Date().getFullYear());
+const MonthlyMapView: React.FC<GraphicProps> = ({ data, month, year }) => {
   const [coordinates, setCoordinates] = useState<Coordinate[]>([]);
-
   const graphicRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -36,12 +33,6 @@ const MonthlyMapView: React.FC<GraphicProps> = ({ data }) => {
     fetchMapData();
   }, [data, month, year]);
 
-  const currentYear = new Date().getFullYear();
-  const years = Array.from(
-    { length: currentYear - 1999 },
-    (_, i) => currentYear - i
-  );
-
   return (
     <div className="flex flex-col w-80 h-80 border-none shadow-sm">
       <div
@@ -108,36 +99,10 @@ const MonthlyMapView: React.FC<GraphicProps> = ({ data }) => {
           </div>
         </div>
       </div>
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2 z-10">
-        <div className="w-1/2">
-          <Select
-            defaultValue={month}
-            onChange={(e) => setMonth(Number(e.target.value))}
-            size="sm"
-          >
-            {MONTHS.map((monthLabel, idx) => (
-              <option key={idx} value={idx}>
-                {monthLabel}
-              </option>
-            ))}
-          </Select>
-        </div>
-        <div className="w-1/3">
-          <Select
-            defaultValue={year}
-            onChange={(e) => setYear(Number(e.target.value))}
-            size="sm"
-          >
-            {years.map((yearOption) => (
-              <option key={yearOption} value={yearOption}>
-                {yearOption}
-              </option>
-            ))}
-          </Select>
-        </div>
-        <div className="w-1/6">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
+        <div className="w-full">
           <Button
-            className="h-full bg-primary"
+            className="h-full w-full bg-primary"
             onClick={() => downloadImage(graphicRef)}
           >
             <MdOutlineFileDownload className="text-lg" />

diff --git a/components/MonthlySpeciesBreakdown.tsx b/components/MonthlySpeciesBreakdown.tsx
@@ -2,15 +2,12 @@ import { GraphicProps, SpeciesBreakdown } from "@/utils/types";
 import { MONTHS } from "@/utils/constants";
 import { downloadImage } from "@/utils/helpers";
 import { useEffect, useRef, useState } from "react";
-import { Select, Button } from "@rewind-ui/core";
+import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
 import DoughnutChart from "./DoughnutChart";
 
-const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data }) => {
-  const [month, setMonth] = useState<number>(0);
-  const [year, setYear] = useState<number>(new Date().getFullYear());
+const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data, month, year }) => {
   const [breakdown, setBreakdown] = useState<SpeciesBreakdown>(null);
-
   const graphicRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -34,12 +31,6 @@ const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data }) => {
     fetchSpeciesBreakdown();
   }, [data, month, year]);
 
-  const currentYear = new Date().getFullYear();
-  const years = Array.from(
-    { length: currentYear - 1999 },
-    (_, i) => currentYear - i
-  );
-
   return (
     <div className="flex flex-col w-80 h-80 border-none shadow-sm">
       <div
@@ -59,36 +50,10 @@ const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data }) => {
           </span>
         </div>
       </div>
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2 z-10">
-        <div className="w-1/2">
-          <Select
-            defaultValue={month}
-            onChange={(e) => setMonth(Number(e.target.value))}
-            size="sm"
-          >
-            {MONTHS.map((monthLabel, idx) => (
-              <option key={idx} value={idx}>
-                {monthLabel}
-              </option>
-            ))}
-          </Select>
-        </div>
-        <div className="w-1/3">
-          <Select
-            defaultValue={year}
-            onChange={(e) => setYear(Number(e.target.value))}
-            size="sm"
-          >
-            {years.map((yearOption) => (
-              <option key={yearOption} value={yearOption}>
-                {yearOption}
-              </option>
-            ))}
-          </Select>
-        </div>
-        <div className="w-1/6">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
+        <div className="w-full">
           <Button
-            className="h-full bg-primary"
+            className="h-full w-full bg-primary"
             onClick={() => downloadImage(graphicRef)}
           >
             <MdOutlineFileDownload className="text-lg" />

diff --git a/utils/types.ts b/utils/types.ts
@@ -4,6 +4,8 @@ export interface ParsedData {
 
 export interface GraphicProps {
   data: ParsedData[];
+  month: number;
+  year: number;
 }
 
 export type SpeciesBreakdown = {