my-app/src/Components/ActiveWords/index.jsx

import { Grid, ThemeProvider, Typography } from "@mui/material";
import { useSnackbar } from "notistack";
import { useEffect, useState } from "react";
import { buildTheme } from "../../infrastructure/theme/theme";
import baseUrl from "../../services/api/api.config";
import postData from "../../services/api/base";
import { WordsContext } from "../Context/WordsContext";
import IntroWordRepresentation from "../CreateWord/CreateWord";
import DimensionsList from "../DimensionList";
import EmbeddingPlot from "../Plot";
import WordCard from "../WordCard";

export default function WordsVectorized() {
  const [wordsVectorized, setWordsVectorized] = useState([]);
  const [selectedDimensions, setSelectedDimensions] = useState([1, 2, 3]);
  const { enqueueSnackbar } = useSnackbar();
  const [wordOne, setWordOne] = useState("");
  const [variance, setVariance] = useState({
    variances: new Array(50).fill(0),
    dimensions: [1, 2, 3],
  });

  const onChangeWordOne = (event) => {
    const newWordOne = event.target.value;
    setWordOne(newWordOne);
  };

  const onPressButton = () => {
    const url = `/add-word`;
    const data = {
      id: wordsVectorized.length + 1,
      item: wordOne,
    };
    postData(url, data)
      .then(fetchWordsVectorized)
      .catch((error) => {
        enqueueSnackbar(error.detail || error.message, {
          variant: "error",
        });
      });

    setWordOne("");
  };

  const fetchWordsVectorized = async () => {
    const url = `${baseUrl}/words`;
    const response = await fetch(url);
    const wordsResponse = await response.json();
    setWordsVectorized(wordsResponse.data);
    console.log(wordsResponse.data);
  };

  const handleDimensionClick = (dimension) => {
    setSelectedDimensions((prev) => {
      if (prev.includes(dimension)) {
        return prev.filter((dim) => dim !== dimension);
      } else if (prev.length < 3) {
        return [...prev, dimension];
      } else {
        return [prev[1], prev[2], dimension];
      }
    });
  };

  const deleteWordsVectorized = async (id) => {
    const url = `${baseUrl}/delete-word/${id}`;
    await fetch(url, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
    });
    await fetchWordsVectorized();
  };

  useEffect(() => {
    fetchWordsVectorized();
  }, []);

  return (
    <>
      <WordsContext.Provider
        value={{ words: wordsVectorized, fetchWords: fetchWordsVectorized }}
      >
        <ThemeProvider theme={buildTheme()}>
          <Grid item textAlign={"center"} mb={5}>
            <Typography
              variant="h0"
              color="#000"
              sx={{ borderBottom: "2px solid #000" }}
            >
              Word Representation
            </Typography>
          </Grid>
          <Grid container>
            <Grid item container direction={"column"}>
              <IntroWordRepresentation
                wordOne={wordOne}
                onChangeWordOne={onChangeWordOne}
                onPressButton={onPressButton}
              />
            </Grid>
            <DimensionsList
              embedding={variance.variances}
              selectedDimensions={selectedDimensions}
              onDimensionClick={handleDimensionClick}
            />
            <Grid item xs={9}>
              <EmbeddingPlot words={wordsVectorized} x={selectedDimensions[0]} y={selectedDimensions[1]} z={selectedDimensions[2]} />
            </Grid>

            <Grid item xs={3}>
              <Grid container direction={"column"} mt={2}>
                {wordsVectorized.map((word) => (
                  <Grid item key={word.id} mb={1} mr={1}>
                    <WordCard
                      word={word.item}
                      id={word.id}
                      deleteWord={deleteWordsVectorized}
                    />
                  </Grid>
                ))}
              </Grid>
            </Grid>
          </Grid>
        </ThemeProvider>
      </WordsContext.Provider>
    </>
  );
}