janedev
/
project-codepen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							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>
//               <body>${html}</body>
//               <style>${css}</style>
//               <script>${javascript}</script>
//             </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>
              <body>${html}</body>
              <style>${css}</style>
              <script>${javascript}</script>
            </html>
          `);
    }, 250);

    return () => clearTimeout(timeout);
  }, [html, css, javascript]);
  return (
    <div>
      <div>
        <Link to="/search">
          <button
            className="btn_search"
            style={{ margin: 10, marginBottom: 50 }}
          >
            Back to search
          </button>
        </Link>
      </div>
      <br />
      {editors?.map((data, index) => (
        <>
          <Editor
            onDelete={() =>
              setEditors(editors?.filter((item) => item !== data))
            }
            data={data}
            onChange={({ type, name, text }) =>
              setEditors([
                ...editors.slice(0, index),
                { type, name, text },
                ...editors.slice(index, 1),
              ])
            }
          />
        </>
      ))}
      <br />
      <div>
        <div>
          <iframe
            className="pane"
            srcDoc={srcDoc}
            title="output"
            sandbox="allow-scripts"
            frameBorder="0"
            style={{ marginTop: 20 }}
            width="95%"
            height="95%"
          />
        </div>
        <div>
          <p className="text">Name of your project: </p>
          <input
            className="input_title"
            placeholder="Name of your project"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <p className="text">Description: </p>
        <textarea
          className="text_desc"
          placeholder="Description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          style={{ marginBottom: 50 }}
        />
      </div>
    </div>
  );
};

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