Added exports page with first draft exports

Author: Andre-Diamond

components/nav.tsx

@@ -128,9 +128,15 @@ const Nav = () => {
         <Link href='/issues' className="navitems">
           Issues
         </Link>
-        {roleData?.appRole == "admin" && (<Link href='/status-of-summaries' className="navitems">
-          Summaries
-        </Link>)}
+        {roleData?.appRole == "admin" && (<>
+          <Link href='/status-of-summaries' className="navitems">
+            Summaries
+          </Link>
+          <Link href='/admin-tools' className="navitems">
+            Admin Tools
+          </Link>
+        </>
+        )}
       </div>
       <div>{latestTag}</div>
       <div>

pages/admin-tools.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import type { NextPage } from "next";
+import styles from '../styles/admintools.module.css';
+import { exportTags, exportUsers } from '../utils/exportUtils';
+
+const AdminTools: NextPage = () => {
+  const [loading, setLoading] = useState(false);
+
+  const handleExport = async (entity: 'tags' | 'users', format: 'csv' | 'pdf' | 'json') => {
+    setLoading(true);
+    if (entity === 'tags') {
+      await exportTags(format);
+    } else if (entity === 'users') {
+      await exportUsers(format);
+    }
+    setLoading(false);
+  };
+
+  // Simplified and more scalable structure for export operations
+  const exportOperations = [
+    {
+      entity: 'Tags',
+      formats: ['csv', 'pdf', 'json'],
+    },
+    {
+      entity: 'Users',
+      formats: ['csv', 'pdf', 'json'],
+    },
+    // Example of how to add a new entity
+    // {
+    //   entity: 'NewEntity',
+    //   formats: ['csv', 'pdf'],
+    // },
+  ];
+
+  return (
+    <div className={styles.container}>
+      {!loading && (
+        <div>
+          <h1>Admin Tools</h1>
+          {exportOperations.map((operation: any) => (
+            <div key={operation.entity} className={styles.column}>
+              <h2 className={styles.columnHeading}>{operation.entity}</h2>
+              {operation.formats.map((format: any) => (
+                <button
+                  key={format}
+                  className={styles.button}
+                  onClick={() => handleExport(operation.entity.toLowerCase(), format)}
+                >
+                  Export {operation.entity} ({format.toUpperCase()})
+                </button>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminTools;

pages/api/convertToPdf.js

@@ -1,3 +1,4 @@
+//convertToPdf.js
 import axios from 'axios';
 
 export default async function handler(req, res) {

pages/issues.tsx

@@ -20,7 +20,7 @@ const Issues: NextPage = () => {
   async function getIssues() {
     setLoading(true);
     const issues = await fetchIssues();
-    console.log(issues)
+    //console.log(issues)
     const open = issues.filter((issue: Issue) => issue.state === 'open');
     const closed = issues.filter((issue: Issue) => issue.state === 'closed');
     setOpenIssues(open);

styles/admintools.module.css

@@ -0,0 +1,74 @@
+/* admintools.module.css */
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 4.5em;  /* Leaving space for the top fixed navbar */
+  height: calc(100vh - 4.5em);
+  justify-content: center; /* Centers content vertically */
+  align-items: center;     /* Centers content horizontally */
+}
+
+@media (max-width: 600px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 120px;  
+    align-items: center;    
+  }
+}
+
+.heading {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.subheading {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.button {
+  background-color: #0070f3;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin: 5px;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+.column-flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-flex-space-between {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Aligns buttons and headings in the center of the column */
+  gap: 0.5rem; /* Adjusts the space between items in the column */
+}
+
+.columnHeading {
+  font-size: 1.25rem; /* Adjust size as needed */
+  margin-bottom: 1rem; /* Adds some space between the heading and the first button */
+}

utils/exportUtils.ts

@@ -0,0 +1,113 @@
+// exportUtils.ts
+import { supabase } from "../lib/supabaseClient";
+import axios from 'axios';
+
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  const day = date.getDate(); 
+  const months = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+  const month = months[date.getMonth()]; 
+  const year = date.getFullYear(); 
+
+  return `${day} ${month} ${year}`; 
+};
+
+const convertToMarkdown = (data: any[]): string => {
+  let markdown = '';
+  const headers = Object.keys(data[0]).join(' | ');
+  markdown += `| ${headers} |\n| ${new Array(headers.length).fill('-').join(' | ')} |\n`;
+
+  data.forEach((item) => {
+    const formattedItem = Object.entries(item).map(([key, value]) => {
+      if (key === 'created_at') {
+        return formatDate(value as string);
+      }
+      return value;
+    });
+    const values = formattedItem.join(' | ');
+    markdown += `| ${values} |\n`;
+  });
+
+  return markdown;
+};
+
+const convertToCsv = (data: any[]): string => {
+  const headers = Object.keys(data[0]).join(',');
+  const rows = data.map((item) =>
+    Object.entries(item).map(([key, value]) => {
+      if (key === 'created_at') {
+        return `"${formatDate(value as string)}"`;
+      }
+      return `"${value}"`;
+    }).join(',')
+  );
+  return `${headers}\n${rows.join('\n')}`;
+};
+
+const exportAsCsv = async (data: any[]) => {
+  const csvData = convertToCsv(data);
+  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = 'Export.csv'; // Consider making the filename dynamic
+  link.click();
+};
+
+const exportAsPdf = async (data: any[]) => {
+  const markdown = convertToMarkdown(data);
+  const pdfResponse = await axios.post('/api/convertToPdf', { markdown }, {
+    responseType: 'blob',
+  });
+  const url = window.URL.createObjectURL(new Blob([pdfResponse.data]));
+  const link = document.createElement('a');
+  link.href = url;
+  link.setAttribute('download', 'Export.pdf'); // Consider making the filename dynamic
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+};
+
+const exportAsJson = async (data: any[]) => {
+  console.log("Json", data)
+};
+
+const exportStrategies = {
+  csv: exportAsCsv,
+  pdf: exportAsPdf,
+  json: exportAsJson,
+};
+
+const exportData = async (format: 'csv' | 'pdf' | 'json', data: any[]) => {
+  const exportStrategy = exportStrategies[format];
+  if (!exportStrategy) {
+    throw new Error(`Export format '${format}' is not supported.`);
+  }
+  await exportStrategy(data);
+};
+
+export const exportTags = async (format: 'csv' | 'pdf' | 'json') => {
+  try {
+    const { data, error } = await supabase.from('tags').select('created_at, type, tag');
+    if (error) {
+      console.error('Error exporting tags:', error);
+      return;
+    }
+    await exportData(format, data);
+  } catch (error) {
+    console.error('Error exporting tags:', error);
+  }
+};
+
+export const exportUsers = async (format: 'csv' | 'pdf' | 'json') => {
+  try {
+    const { data, error } = await supabase.from('users').select('created_at, global_name');
+    if (error) {
+      console.error('Error exporting users:', error);
+      return;
+    }
+    await exportData(format, data);
+  } catch (error) {
+    console.error('Error exporting users:', error);
+  }
+};