Project/projectreact/src/pages/project.js

import { useEffect } from "react";
import { connect } from "react-redux";
import { actionSnippetById } from "../actions";
import { useState } from "react";
import Editor from "../components/editor";
import { actionSnippetAdd } from "../actions";
import { Link } from "react-router-dom";

const ProjectSnippet = ({
  onSave,
  getSnippet,
  match: {
    params: { id },
  },
  titleText,
  descriptionText,
  filesArr,
  nameText,
}) => {
  useEffect(() => {
    getSnippet(id);
  }, []);
  const [files, setFiles] = useState([]);
  const [name, setName] = useState(nameText);
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  useEffect(() => {
      setFiles(filesArr) 
      setTitle(titleText)
      setDescription(descriptionText)
  },[filesArr , titleText , descriptionText])
  return (
    <div>
      {files?.map((data, index) => (
        <>
          <Editor
            onDelete={() => setFiles(files.filter((item) => item != data))}
            data={data}
            onChange={({ type, name, text }) =>
              setFiles([
                ...files.slice(0, index),
                { type, name, text },
                ...files.slice(index + 1),
              ])
            }
          />
        </>
      ))}
      <br />
      <div
        style={{
          alignItems: "center",
          textAlign: "center",
          marginBottom: "10px",
        }}
      >
        <div>
          <button
            className="btn btn-primary"
            onClick={() => setFiles([...files, { type: "html" }])}
            key={files}
          >
            Add editor
          </button>
          <div>
          <Link to ="/projects">
              <button className = 'btn btn-outline-info border-info'>All projects</button>
          </Link>
          </div>
        </div>
        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-25">
          <div className="input-group-prepend">
            <span className="input-group-text" id="basic-addon1">
              Name of your project
            </span>
          </div>
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            type="text"
            className="form-control"
            placeholder="Name of project"
            aria-label="Name of project"
            aria-describedby="basic-addon1"
          />
        </div>
        <div className="input-group ml-auto mr-auto w-50">
          <div className="input-group-prepend">
            <span className="input-group-text ">Description</span>
          </div>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="form-control "
            aria-label="With textarea"
            placeholder="Your description"
          ></textarea>
        </div>
        <button
          className="btn btn-success float-right mr-5 mb-5"
          onClick={() => onSave(title, description, files)}
        >
          Save project
        </button>
      </div>
    </div>
  );
};

const ConnectedProject = connect(
  (state) => ({
    title:
      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
    descriptionText:
      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]
        ?.description,
    nameText:
      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.name,
    filesArr:
      state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
  }),
  { getSnippet: actionSnippetById ,onSave: actionSnippetAdd  }
)(ProjectSnippet);
export default ConnectedProject;