add download button

elliotBraem · Jan 28, 2025 · b51fc59 · b51fc59
1 parent b90b096
commit b51fc59
Showing 1 changed file with 76 additions and 5 deletions.
diff --git a/frontend/src/routes/feed.$feedId.tsx b/frontend/src/routes/feed.$feedId.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import FeedItem from "../components/FeedItem";
 import FeedList from "../components/FeedList";
 import Layout from "../components/Layout";
+import { Modal } from "../components/Modal";
 import { useFeedConfig, useFeedItems } from "../lib/api";
 import { useState } from "react";
 import { TwitterSubmission } from "../types/twitter";
@@ -20,6 +21,62 @@ function FeedPage() {
   const [statusFilter, setStatusFilter] = useState<
     "all" | TwitterSubmission["status"]
   >("all");
+  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+
+  const handleDownload = (
+    selectedStatus: "all" | TwitterSubmission["status"],
+  ) => {
+    const itemsToDownload = items.filter(
+      (item) => selectedStatus === "all" || item.status === selectedStatus,
+    );
+    const jsonContent = JSON.stringify(itemsToDownload, null, 2);
+    const blob = new Blob([jsonContent], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${feed?.name || "feed"}_${selectedStatus}_submissions.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    setIsDownloadModalOpen(false);
+  };
+
+  const DownloadModal = () => (
+    <Modal
+      isOpen={isDownloadModalOpen}
+      onClose={() => setIsDownloadModalOpen(false)}
+    >
+      <h2 className="text-2xl font-bold mb-4">Download Submissions</h2>
+      <p className="mb-4">Select which submissions you want to download:</p>
+      <div className="space-y-2">
+        <button
+          onClick={() => handleDownload("all")}
+          className="w-full px-4 py-2 bg-gray-100 hover:bg-gray-200 text-black rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 text-sm font-medium"
+        >
+          All Submissions
+        </button>
+        <button
+          onClick={() => handleDownload("approved")}
+          className="w-full px-4 py-2 bg-green-200 hover:bg-green-300 text-black rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 text-sm font-medium"
+        >
+          Approved Submissions
+        </button>
+        <button
+          onClick={() => handleDownload("pending")}
+          className="w-full px-4 py-2 bg-yellow-200 hover:bg-yellow-300 text-black rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 text-sm font-medium"
+        >
+          Pending Submissions
+        </button>
+        <button
+          onClick={() => handleDownload("rejected")}
+          className="w-full px-4 py-2 bg-red-200 hover:bg-red-300 text-black rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 text-sm font-medium"
+        >
+          Rejected Submissions
+        </button>
+      </div>
+    </Modal>
+  );
 
   const filteredItems = items.filter(
     (item) => statusFilter === "all" || item.status === statusFilter,
@@ -98,12 +155,18 @@ function FeedPage() {
 
   return (
     <Layout sidebar={sidebarContent} rightPanel={rightPanelContent}>
+      <DownloadModal />
       <div className="space-y-4">
-        <div className="flex flex-col xl:flex-row xl:items-center xl:justify-between mb-6 mr-4">
-          <h2 className="text-2xl font-bold mb-2 sm:mb-0">
-            {feed?.name || "Loading..."}
-          </h2>
-          <div className="flex flex-wrap gap-2">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-6">
+          <div>
+            <h2 className="text-2xl font-bold mb-2">
+              {feed?.name || "Loading..."}
+            </h2>
+            <p className="text-sm sm:text-base text-gray-600">
+              {feed?.description || "No description available"}
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2 items-start xl:items-center xl:justify-end">
             <button
               onClick={() => setStatusFilter("all")}
               className={`px-3 py-1.5 rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 translate-x-0 translate-y-0 hover:-translate-x-0.5 hover:-translate-y-0.5 text-sm font-medium ${
@@ -144,6 +207,12 @@ function FeedPage() {
             >
               Rejected
             </button>
+            <button
+              onClick={() => setIsDownloadModalOpen(true)}
+              className="px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded-md border-2 border-black shadow-sharp hover:shadow-sharp-hover transition-all duration-200 translate-x-0 translate-y-0 hover:-translate-x-0.5 hover:-translate-y-0.5 text-sm font-medium"
+            >
+              Download
+            </button>
           </div>
         </div>
         {filteredItems.length === 0 ? (
@@ -162,3 +231,5 @@ function FeedPage() {
     </Layout>
   );
 }
+
+export default FeedPage;