Spaces:
Sleeping
Sleeping
File size: 1,923 Bytes
8765030 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import { Grid, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import { WordsContext } from "../Context/WordsContext";
import CreateWordEmbedding from "../CreateWord/CreateWord";
import WordCard from "../WordCard";
import EmbeddingPlot from "../Plot";
export default function ActiveWords() {
const [words, setWords] = useState([]);
// const [embedding, setEmbedding] = useState([]);
const fetchWords = async () => {
const response = await fetch("http://localhost:8000/api/words");
const wordsResponse = await response.json();
setWords(wordsResponse.data);
// console.log("response", wordsResponse.data);
// console.log("words", words);
};
const deleteWord = async (id) => {
await fetch(`http://localhost:8000/api/delete-word/${id}`, {
method: "DELETE",
headers: { "Content-Type": "application/json" },
});
await fetchWords();
};
useEffect(() => {
fetchWords();
}, []);
return (
<>
<WordsContext.Provider value={{ words, fetchWords }}>
<Grid container>
<Grid item xs={8} container direction={"column"}>
<Grid item>
<CreateWordEmbedding />
</Grid>
<Grid item>
<EmbeddingPlot words={words}/>
</Grid>
</Grid>
<Grid item xs={4}>
<Grid item>
<Typography variant={"h4"}>Active Words</Typography>
</Grid>
<Grid container direction={"column"} mt={2}>
{words.map((word) => (
<Grid item key={word.id} mb={1} mr={1}>
<WordCard
word={word.item}
id={word.id}
deleteWord={deleteWord}
/>
</Grid>
))}
</Grid>
</Grid>
</Grid>
</WordsContext.Provider>
</>
);
}
|