charlesdedampierre/citeo-plastic

1import { Backdrop, Box, Button, CircularProgress, Container, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";2import React, { useContext, useEffect, useState } from "react";3import { TopicsContext } from "./UploadFileContext";4 5const bunkaDocs = "bunka_docs.json";6const bunkaTopics = "bunka_topics.json";7const { REACT_APP_API_ENDPOINT } = process.env;8 9function DocsView() {10  const [docs, setDocs] = useState(null);11  const [topics, setTopics] = useState(null);12  const { data: apiData, isLoading } = useContext(TopicsContext);13 14  useEffect(() => {15    if (REACT_APP_API_ENDPOINT === "local" || apiData === undefined) {16      // Fetch the JSON data locally17      fetch(`/${bunkaDocs}`)18        .then((response) => response.json())19        .then((localData) => {20          setDocs(localData);21          // Fetch the topics data and merge it with the existing data22          fetch(`/${bunkaTopics}`)23            .then((response) => response.json())24            .then((topicsData) => {25              // Set the topics data with the existing data26              setTopics(topicsData);27            })28            .catch((error) => {29              console.error("Error fetching topics data:", error);30            });31        })32        .catch((error) => {33          console.error("Error fetching JSON data:", error);34        });35    } else {36      // Call the function to create the scatter plot with the data provided by TopicsContext37      setDocs(apiData.docs);38      setTopics(apiData.topics);39    }40  }, [apiData]);41 42  const docsWithTopics =43    docs && topics44      ? docs.map((doc) => ({45          ...doc,46          topic_name: topics.find((topic) => topic.topic_id === doc.topic_id)?.name || "Unknown",47        }))48      : [];49 50  const downloadCSV = () => {51    // Create a CSV content string from the data52    const csvContent = `data:text/csv;charset=utf-8,${[53      ["Doc ID", "Topic ID", "Topic Name", "Content"], // CSV header54      ...docsWithTopics.map((doc) => [doc.doc_id, doc.topic_id, doc.topic_name, doc.content]), // CSV data55    ]56      .map((row) => row.map((cell) => `"${cell}"`).join(",")) // Wrap cells in double quotes57      .join("\n")}`; // Join rows with newline58 59    // Create a Blob containing the CSV data60    const blob = new Blob([csvContent], { type: "text/csv" });61 62    // Create a download URL for the Blob63    const url = URL.createObjectURL(blob);64 65    // Create a temporary anchor element to trigger the download66    const a = document.createElement("a");67    a.href = url;68    a.download = "docs.csv"; // Set the filename for the downloaded file69    a.click();70 71    // Revoke the URL to free up resources72    URL.revokeObjectURL(url);73  };74 75  return (76    <Container fixed>77      <div className="docs-view">78        <h2>Data</h2>79        {isLoading ? (80          <Backdrop open={isLoading} style={{ zIndex: 9999 }}>81            <CircularProgress color="primary" />82          </Backdrop>83        ) : (84          <div>85            <Button variant="contained" color="primary" onClick={downloadCSV} sx={{ marginBottom: "1em" }}>86              Download CSV87            </Button>88            <Box89              sx={{90                height: "1000px", // Set the height of the table91                overflow: "auto", // Add scroll functionality92              }}93            >94              <TableContainer component={Paper}>95                <Table>96                  <TableHead97                    sx={{98                      backgroundColor: "lightblue", // Set background color99                      position: "sticky", // Make the header sticky100                      top: 0, // Stick to the top101                    }}102                  >103                    <TableRow>104                      <TableCell>Doc ID</TableCell>105                      <TableCell>Topic ID</TableCell>106                      <TableCell>Topic Name</TableCell>107                      <TableCell>Content</TableCell>108                    </TableRow>109                  </TableHead>110                  <TableBody>111                    {docsWithTopics.map((doc, index) => (112                      <TableRow113                        key={doc.doc_id}114                        sx={{115                          borderBottom: "1px solid lightblue", // Add light blue border116                        }}117                      >118                        <TableCell>{doc.doc_id}</TableCell>119                        <TableCell>{doc.topic_id}</TableCell>120                        <TableCell>{doc.topic_name}</TableCell>121                        <TableCell>{doc.content}</TableCell>122                      </TableRow>123                    ))}124                  </TableBody>125                </Table>126              </TableContainer>127            </Box>128          </div>129        )}130      </div>131    </Container>132  );133}134 135export default DocsView;136