Merge pull request #86 from brown-ccv/chore-activity-changes

chore: activity page changes

package.json

@@ -30,6 +30,7 @@
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "astro": "^4.3.6",
+    "date-fns": "^3.6.0",
     "firebase": "^9.23.0",
     "i": "^0.3.7",
     "react": "^18.2.0",

src/components/ActivityPage.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react"
 import type { UserInfo } from "firebase/auth"
+import { isAfter, subYears, toDate } from "date-fns"
 import Login from "../components/Login"
 import { useActivityData } from "../hooks/activity.ts"
 import ActivityTable from "./ActivityTable.tsx"
@@ -10,6 +11,9 @@ const ActivityPage = () => {
     setUser(loggedUser)
   }
   const activityData = useActivityData(user)
+  const yearlyActivityData = activityData?.filter((data) =>
+    isAfter(toDate(data.date.toDate()), subYears(new Date(), 1))
+  )
 
   return (
     <div className="space-y-8">
@@ -22,10 +26,18 @@ const ActivityPage = () => {
         )}
       </section>
       {user && activityData && (
-        <section className="space-y-2">
-          <h3>
-            <span className="px-2 font-bold">{activityData.length}</span> download(s)
-          </h3>
+        <section className="space-y-4">
+          <div className="flex justify-between">
+            <h3>
+              <span className="px-2 font-bold">{activityData.length}</span> total download(s)
+            </h3>
+            {yearlyActivityData && (
+              <h3>
+                <span className="px-2 font-bold">{yearlyActivityData.length}</span> download(s) in
+                the past year
+              </h3>
+            )}
+          </div>
           <ActivityTable data={activityData} />
         </section>
       )}

src/components/Login.tsx

@@ -13,10 +13,7 @@ const Login: React.FC<LoginProps> = ({ currentUser, setUserFunction }) => {
 
   const login = async () => {
     await handleLogin().then((loggedUser) => {
-      if (!loggedUser)
-        setMessage(
-          "You must be an admin on this project in order to see this data. If you believe this to be an error, please reach out to David Lindstrom ([email protected])."
-        )
+      if (!loggedUser) setMessage("You must be an admin on this project in order to see this data.")
       setUserFunction(loggedUser)
     })
   }

src/consts.ts

@@ -1,12 +1,4 @@
 export const SITE_TITLE = "MMP"
 export const SITE_DESCRIPTION = "Mesoamerican Migration Project"
 
-export const LINKS = [
-  "people",
-  "news",
-  "publications",
-  "study-design",
-  "data",
-  "documentation",
-  "activity",
-]
+export const LINKS = ["people", "news", "publications", "study-design", "data", "documentation"]

src/pages/activity.astro

@@ -3,6 +3,6 @@ import Layout from "../layouts/Layout.astro"
 import ActivityPage from "../components/ActivityPage"
 ---
 
-<Layout title="Admin" description="History Table of Downloads">
+<Layout title="Activity" description="History Table of Downloads">
   <ActivityPage client:only="react" />
 </Layout>