add Search Bar

src/TextContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
@@ -8,6 +8,7 @@ import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import DescriptionIcon from '@mui/icons-material/Description';
+import TextField from "@mui/material/TextField";
 
 export const topicsSizeFraction = (topicsCentroids, topicSize) => {
   const totalSize = topicsCentroids.reduce((sum, topic) => sum + topic.size, 0);
@@ -16,13 +17,26 @@ export const topicsSizeFraction = (topicsCentroids, topicSize) => {
 
 function TextContainer({ topicName, topicSizeFraction, content }) {
   const [selectedDocument, setSelectedDocument] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredContent, setFilteredContent] = useState([]);
 
-  const handleDocumentClick = (docIndex) => {
-    if (selectedDocument === docIndex) {
-      setSelectedDocument(null);
+  useEffect(() => {
+    // Update the filtered content based on the search query
+    if (searchQuery.trim() === "") {
+      setFilteredContent(content);
     } else {
-      setSelectedDocument(docIndex);
+      const filtered = content.filter((doc) =>
+        doc.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      setFilteredContent(filtered);
     }
+
+    // Automatically select the first document when search results change
+    setSelectedDocument(0);
+  }, [searchQuery, content]);
+
+  const handleDocumentClick = (docIndex) => {
+    setSelectedDocument(docIndex);
   };
 
   return (
@@ -45,6 +59,8 @@ function TextContainer({ topicName, topicSizeFraction, content }) {
           <Typography variant="h6" style={{ marginBottom: "8px" }}>
             {topicName}
           </Typography>
+
+
         </Box>
         <Typography
           variant="h5"
@@ -56,10 +72,22 @@ function TextContainer({ topicName, topicSizeFraction, content }) {
         >
           {topicSizeFraction}% of the Territory
         </Typography>
+        <TextField
+          label="Search"
+          variant="outlined"
+          fullWidth
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
         <Paper elevation={3} style={{ maxHeight: "70vh", overflowY: "auto" }}>
           <List>
-            {content.map((doc, index) => (
-              <ListItem button key={`textcontainerdoc-${index}`} onClick={() => handleDocumentClick(index)} selected={selectedDocument === index}>
+            {filteredContent.map((doc, index) => (
+              <ListItem
+                button
+                key={`textcontainerdoc-${index}`}
+                onClick={() => handleDocumentClick(index)}
+                selected={selectedDocument === index}
+              >
                 <ListItemIcon>
                   <DescriptionIcon /> {/* Display a document icon */}
                 </ListItemIcon>
@@ -68,6 +96,15 @@ function TextContainer({ topicName, topicSizeFraction, content }) {
             ))}
           </List>
         </Paper>
+        <Box
+          style={{
+            marginTop: "20px",
+            padding: "8px",
+            width: "80%", // Adjust the width as needed
+            margin: "0 auto", // Center horizontally
+          }}
+        >
+        </Box>
       </Box>
     </div>
   );
@@ -79,4 +116,4 @@ TextContainer.propTypes = {
   content: PropTypes.array.isRequired,
 };
 
-export default TextContainer;
+export default TextContainer;