add social media buttons and fix elementRef to graphicRef build error

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

Hide file tree

Showing 5 changed files with 122 additions and 12 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,6 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off"
+  }
 }
diff --git a/components/GraphicsPane.tsx b/components/GraphicsPane.tsx
@@ -1,11 +1,15 @@
+import dynamic from "next/dynamic";
 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 MonthlyMapView = dynamic(() => import("./MonthlyMapView"), {
+  ssr: false,
+});
+
 const GraphicsPane: React.FC<{ data: GraphicProps["data"] }> = ({ data }) => {
   const [month, setMonth] = useState<number>(0);
   const [year, setYear] = useState<number>(new Date().getFullYear());

diff --git a/components/MonthlyBirdTotal.tsx b/components/MonthlyBirdTotal.tsx
@@ -2,6 +2,7 @@ import { GraphicProps } from "@/utils/types";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
+import { FaLinkedin, FaTwitter, FaFacebook } from "react-icons/fa";
 import { MONTHS } from "@/utils/constants";
 import { downloadImage, getBirdFilename } from "@/utils/helpers";
 
@@ -16,7 +17,7 @@ const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data, month, year }) => {
   );
 
   // Ref for the element to be captured as an image
-  const elementRef = useRef<HTMLDivElement | null>(null);
+  const graphicRef = useRef<HTMLDivElement | null>(null);
 
   // Fetch bird total data when month, year, or data changes
   useEffect(() => {
@@ -49,7 +50,7 @@ const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data, month, year }) => {
     <div className="flex flex-col w-80 h-80 border-none shadow-sm">
       {/* Main content */}
       <div
-        ref={elementRef}
+        ref={graphicRef}
         className="w-80 h-80 bg-white rounded-md box-shadow cursor-pointer text-white"
       >
         <div className="flex flex-row w-full h-full bg-primary">
@@ -97,15 +98,47 @@ const MonthlyBirdTotal: React.FC<GraphicProps> = ({ data, month, year }) => {
         </div>
       </div>
       {/* Controls */}
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
-        <div className="w-full">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2">
+        <div className="w-1/2">
           <Button
             className="h-full w-full bg-primary"
-            onClick={() => downloadImage(elementRef)}
+            onClick={() => downloadImage(graphicRef)}
           >
             <MdOutlineFileDownload className="text-lg" />
           </Button>
         </div>
+        <div className="flex flex-row w-1/2 gap-2 justify-center">
+          <Button
+            className="h-full w-1/4 bg-[#1DA1F2] px-0 py-2"
+            onClick={() =>
+              window.open("https://twitter.com/intent/tweet", "_blank")
+            }
+          >
+            <FaTwitter className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#0077b5] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.linkedin.com/sharing/share-offsite/",
+                "_blank"
+              )
+            }
+          >
+            <FaLinkedin className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#4267B2] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.facebook.com/sharer/sharer.php",
+                "_blank"
+              )
+            }
+          >
+            <FaFacebook className="text-lg" />
+          </Button>
+        </div>
       </div>
     </div>
   );

diff --git a/components/MonthlyMapView.tsx b/components/MonthlyMapView.tsx
@@ -4,6 +4,7 @@ import { downloadImage } from "@/utils/helpers";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
+import { FaLinkedin, FaTwitter, FaFacebook } from "react-icons/fa";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -99,15 +100,47 @@ const MonthlyMapView: React.FC<GraphicProps> = ({ data, month, year }) => {
           </div>
         </div>
       </div>
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
-        <div className="w-full">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2">
+        <div className="w-1/2">
           <Button
             className="h-full w-full bg-primary"
             onClick={() => downloadImage(graphicRef)}
           >
             <MdOutlineFileDownload className="text-lg" />
           </Button>
         </div>
+        <div className="flex flex-row w-1/2 gap-2 justify-center">
+          <Button
+            className="h-full w-1/4 bg-[#1DA1F2] px-0 py-2"
+            onClick={() =>
+              window.open("https://twitter.com/intent/tweet", "_blank")
+            }
+          >
+            <FaTwitter className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#0077b5] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.linkedin.com/sharing/share-offsite/",
+                "_blank"
+              )
+            }
+          >
+            <FaLinkedin className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#4267B2] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.facebook.com/sharer/sharer.php",
+                "_blank"
+              )
+            }
+          >
+            <FaFacebook className="text-lg" />
+          </Button>
+        </div>
       </div>
     </div>
   );

diff --git a/components/MonthlySpeciesBreakdown.tsx b/components/MonthlySpeciesBreakdown.tsx
@@ -4,9 +4,14 @@ import { downloadImage } from "@/utils/helpers";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "@rewind-ui/core";
 import { MdOutlineFileDownload } from "react-icons/md";
+import { FaLinkedin, FaTwitter, FaFacebook } from "react-icons/fa";
 import DoughnutChart from "./DoughnutChart";
 
-const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data, month, year }) => {
+const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({
+  data,
+  month,
+  year,
+}) => {
   const [breakdown, setBreakdown] = useState<SpeciesBreakdown>(null);
   const graphicRef = useRef<HTMLDivElement | null>(null);
 
@@ -50,15 +55,47 @@ const MonthlySpeciesBreakdown: React.FC<GraphicProps> = ({ data, month, year })
           </span>
         </div>
       </div>
-      <div className="flex flex-row rounded-b-md bg-white p-2 w-full">
-        <div className="w-full">
+      <div className="flex flex-row rounded-b-md bg-white p-2 w-full gap-2">
+        <div className="w-1/2">
           <Button
             className="h-full w-full bg-primary"
             onClick={() => downloadImage(graphicRef)}
           >
             <MdOutlineFileDownload className="text-lg" />
           </Button>
         </div>
+        <div className="flex flex-row w-1/2 gap-2 justify-center">
+          <Button
+            className="h-full w-1/4 bg-[#1DA1F2] px-0 py-2"
+            onClick={() =>
+              window.open("https://twitter.com/intent/tweet", "_blank")
+            }
+          >
+            <FaTwitter className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#0077b5] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.linkedin.com/sharing/share-offsite/",
+                "_blank"
+              )
+            }
+          >
+            <FaLinkedin className="text-lg" />
+          </Button>
+          <Button
+            className="h-full w-1/4 bg-[#4267B2] px-0 py-2"
+            onClick={() =>
+              window.open(
+                "https://www.facebook.com/sharer/sharer.php",
+                "_blank"
+              )
+            }
+          >
+            <FaFacebook className="text-lg" />
+          </Button>
+        </div>
       </div>
     </div>
   );