charlesdedampierre/citeo-plastic

1import React, { useState, useEffect } from "react";2import PropTypes from "prop-types";3import Box from "@mui/material/Box";4import Typography from "@mui/material/Typography";5import Paper from "@mui/material/Paper";6import List from "@mui/material/List";7import ListItem from "@mui/material/ListItem";8import ListItemText from "@mui/material/ListItemText";9import ListItemIcon from "@mui/material/ListItemIcon";10import DescriptionIcon from '@mui/icons-material/Description';11import TextField from "@mui/material/TextField";12 13export const topicsSizeFraction = (topicsCentroids, topicSize) => {14  const totalSize = topicsCentroids.reduce((sum, topic) => sum + topic.size, 0);15  return Math.round((topicSize / totalSize) * 100);16}17 18 19 20function TextContainer({ topicName, topicSizeFraction, content }) {21  const [selectedDocument, setSelectedDocument] = useState(null);22  const [searchQuery, setSearchQuery] = useState("");23  const [filteredContent, setFilteredContent] = useState([]);24 25  useEffect(() => {26    // Update the filtered content based on the search query27    if (searchQuery.trim() === "") {28      setFilteredContent(content);29    } else {30      const filtered = content.filter((doc) =>31        doc.toLowerCase().includes(searchQuery.toLowerCase())32      );33      setFilteredContent(filtered);34    }35 36    // Automatically select the first document when search results change37    setSelectedDocument(0);38  }, [searchQuery, content]);39 40  const handleDocumentClick = (docIndex) => {41    setSelectedDocument(docIndex);42  };43 44  return (45    <div id="topic-box-container">46      <Box className="topic-box">47        <Box48          style={{49            display: "flex",50            flexDirection: "column",51            alignItems: "center",52            background: "rgb(94, 163, 252)",53            padding: "8px",54            color: "white",55            textAlign: "center",56            borderRadius: "20px", // Make it rounder57            margin: "0 auto", // Center horizontally58            width: "80%", // Adjust the width as needed59          }}60        >61          <Typography variant="h6" style={{ marginBottom: "8px" }}>62            {topicName}63          </Typography>64 65 66        </Box>67        <Typography68          variant="h5"69          style={{70            marginBottom: "20px",71            marginTop: "20px",72            textAlign: "center",73          }}74        >75          {topicSizeFraction}% of the Territory76        </Typography>77        <TextField78          label="Search"79          variant="outlined"80          fullWidth81          value={searchQuery}82          onChange={(e) => setSearchQuery(e.target.value)}83        />84        <Paper elevation={3} style={{ maxHeight: "70vh", overflowY: "auto" }}>85          <List>86            {filteredContent.map((doc, index) => (87              <ListItem88                button89                key={`textcontainerdoc-${index}`}90                onClick={() => handleDocumentClick(index)}91                selected={selectedDocument === index}92              >93                <ListItemIcon>94                  <DescriptionIcon /> {/* Display a document icon */}95                </ListItemIcon>96                <ListItemText primary={<span style={{ fontSize: "14px" }}>{doc}</span>} />97              </ListItem>98            ))}99          </List>100        </Paper>101        <Box102          style={{103            marginTop: "20px",104            padding: "8px",105            width: "80%", // Adjust the width as needed106            margin: "0 auto", // Center horizontally107          }}108        >109        </Box>110      </Box>111    </div>112  );113}114 115TextContainer.propTypes = {116  topicName: PropTypes.string.isRequired,117  topicSizeFraction: PropTypes.number.isRequired,118  content: PropTypes.array.isRequired,119};120 121export default TextContainer;