Merge pull request #394 from TwoAbove/develop

Fixed patreon views
TwoAbove · Sep 14, 2024 · 0925f70 · 0925f70
2 parents 55a1674 + 6eff290
commit 0925f70
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 43 deletions.
diff --git a/server/patreon.mjs b/server/patreon.mjs
@@ -47,15 +47,15 @@ let patronMembersCache = [];
 
 const getPatreonPatronsData = async () => {
   if (!process.env.PATREON_CREATORS_ACCESS_TOKEN) {
-    return {};
+    return { tierMembers: {}, tiers: {} };
   }
 
-  // TODO: Handler pagination
+  // TODO: Handle pagination
   const data = await membersQuery();
 
   if (data.errors) {
     console.error("Patreon API error", data.errors);
-    return {};
+    return { tierMembers: {}, tiers: {} };
   }
 
   const tiers = data.included
@@ -84,16 +84,36 @@ const getPatreonPatronsData = async () => {
       return acc;
     }, {});
 
-  return tierMembers;
+  tierMembers.Donation = {
+    tier: {
+      id: "donation",
+      type: "tier",
+      attributes: {
+        amount_cents: 0,
+        title: "Donation",
+        url: "",
+        description: "One-time donations",
+        created_at: new Date().toISOString(),
+        edited_at: new Date().toISOString(),
+        published: true,
+        published_at: new Date().toISOString(),
+        patron_count: 1,
+        requires_shipping: false,
+      },
+    },
+    members: ["BurritoSuicide"],
+  };
+
+  return { tierMembers, tiers };
 };
 
 let patronCache = {};
 let tierCache = {};
 
 const updatePatrons = async () => {
-  const data = await getPatreonPatronsData();
-  patronCache = data.tierMembers;
-  tierCache = data.tiers;
+  const { tierMembers, tiers } = await getPatreonPatronsData();
+  patronCache = tierMembers;
+  tierCache = tiers;
 };
 
 updatePatrons();

diff --git a/src/components/Patrons.tsx b/src/components/Patrons.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useState, Suspense, useEffect } from "react";
-import { Container, Stack, Button, Row, Col } from "react-bootstrap";
+import React, { FC, useState, useEffect } from "react";
+import { Row, Col } from "react-bootstrap";
 import Marquee from "react-fast-marquee";
 import { useIsOverflow } from "./helpers";
 
@@ -43,24 +43,17 @@ const PatronScroll: FC<{
   const patronsRow = (
     <div ref={ref} className="d-flex">
       {patrons.map((patron, i) => (
-        <div className="mx-1" key={patron}>
+        <div className="mx-1" key={`${patron}-${i}`}>
           {patron}
         </div>
       ))}
       <span style={{ width: "4rem" }}> </span>
     </div>
   );
 
-  // The link patreon returns is broken
-  // so redirect to patreon.
   const title = (
     <div className="mx-1">
-      <a
-        target="_blank"
-        rel="noreferrer"
-        href={`https://www.patreon.com/join/10343002`}
-        // href={`https://www.patreon.com${tierUrl}`}
-      >
+      <a target="_blank" rel="noreferrer" href={`https://www.patreon.com/join/10343002`}>
         {tier}
       </a>{" "}
       tier
@@ -88,41 +81,25 @@ const PatronScroll: FC<{
 
 const Patrons = () => {
   const [patrons, setPatrons] = useState<IPatrons>({});
+
   useEffect(() => {
     fetch("/api/patreon/patrons")
       .then(res => res.json())
       .then(data => {
-        const patrons = data;
-        patrons.Donation = {
-          members: ["BurritoSuicide"],
-          tier: {
-            attributes: {
-              amount_cents: 0,
-              title: "Donation",
-              url: "",
-            },
-          },
-        };
-        setPatrons(patrons);
+        setPatrons(data);
       })
       .catch(e => {
         console.error(e);
       });
   }, []);
 
-  const elements: JSX.Element[] = [];
-
-  Object.keys(patrons)
-    .sort((a, b) => patrons[b].tier.attributes.amount_cents - patrons[a].tier.attributes.amount_cents)
-    .forEach(tierId => {
-      const tier = patrons[tierId];
-
-      elements.push(
-        <Col key={tierId} className="p-2">
-          <PatronScroll patrons={tier.members} tier={tier.tier.attributes.title} tierUrl={tier.tier.attributes.url} />
-        </Col>
-      );
-    });
+  const elements: JSX.Element[] = Object.entries(patrons)
+    .sort(([, a], [, b]) => b.tier.attributes.amount_cents - a.tier.attributes.amount_cents)
+    .map(([tierId, tier]) => (
+      <Col key={tierId} className="p-2">
+        <PatronScroll patrons={tier.members} tier={tier.tier.attributes.title} tierUrl={tier.tier.attributes.url} />
+      </Col>
+    ));
 
   return (
     <Row xs={1} md={3} className="justify-content-start m-0 my-2">