import { useEffect } from "react"; import { connect } from "react-redux"; import { actionSnippetById } from "./../actions/actionSnippetById"; import { useState } from "react"; import { Editor } from "../components/Editor"; import "../components/EditorsPage.css"; import { Link } from "react-router-dom"; // const [editors, setEditors] = useState(datas); // const [title, setTitle] = useState(""); // const [description, setDescription] = useState(""); // const [srcDoc, setSrcDoc] = useState(""); // const [theme, setTheme] = useState(); // const [font, setFont] = useState(); // useEffect(() => { // const timeout = setTimeout(() => { // let html, css, javascript; // editors.forEach((e) => { // if (e.type === "html") html = e.text; // if (e.type === "css") css = e.text; // if (e.type === "javascript") javascript = e.text; // }); // setSrcDoc(` // // ${html} // // // // `); // }, 250); // return () => clearTimeout(timeout); // }, [editors]); const ProjectSnippet = ({ getSnippet, match: { params: { _id }, }, titleText, descriptionText, filesArr, nameText, }) => { useEffect(() => { getSnippet(_id); }, [_id, getSnippet]); const [editors, setEditors] = useState([]); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); useEffect(() => { setEditors(filesArr); setTitle(titleText); setDescription(descriptionText); }, [filesArr, titleText, descriptionText]); const [srcDoc, setSrcDoc] = useState(""); const html = editors?.filter(e => { return e?.type === "html"; })[0]?.text; const css = editors?.filter(e => { return e?.type === "css"; })[0]?.text; const javascript = editors?.filter(e => { return e?.type === "javascript"; })[0]?.text; console.log(javascript); useEffect(() => { const timeout = setTimeout(() => { setSrcDoc(` ${html} `); }, 250); return () => clearTimeout(timeout); }, [html, css, javascript]); return (

{editors?.map((data, index) => ( <> setEditors(editors?.filter(item => item !== data))} data={data} onChange={({ type, name, text }) => setEditors([...editors.slice(0, index), { type, name, text }, ...editors.slice(index, 1)]) } /> ))}