janedev
/
project-codepen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							import { useEffect } from "react";
import { connect } from "react-redux";
import { actionSnippetById } from "../actions/actionSnippetById";
import { useState } from "react";
import { Editor } from "../components/Editor";
import { actionSnippetAdd } from "../actions/actionSnippetAdd";
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("");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  useEffect(() => {
    setFiles(filesArr);
    setTitle(titleText);
    setDescription(descriptionText);
  }, [filesArr, titleText, descriptionText]);
  const [srcDoc, setSrcDoc] = useState("");
  const html = files?.filter((el) => {
    return el?.type === "html";
  })[0]?.text;
  const css = files?.filter((el) => {
    return el?.type === "css";
  })[0]?.text;
  const js = files?.filter((el) => {
    return el?.type === "javascript";
  })[0]?.text;
  console.log(js);
  useEffect(() => {
    const timeout = setTimeout(() => {
      setSrcDoc(`
        <html>
          <body>${html || ""}</body>
          <style>${css}</style>
          <script>${js}</script>
        </html>
      `);
    }, 250);

    return () => clearTimeout(timeout);
  }, [html, css, js]);
  return (
    <div>
      <br />
      {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>
          <iframe
            srcDoc={srcDoc}
            title="output"
            sandbox="allow-scripts"
            frameBorder="0"
            width="95%"
            height="95%"
            style={{
              marginTop: "10px",
              border: "1px solid #F0FFFF",
              boxShadow: "0px 5px 10px 2px rgba(34, 60, 80, 0.2)",
            }}
          />
          <div>
            <Link to="/projects">
              <button className="btn btn-outline-info border-info mt-3">
                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, id)}
        >
          Save project
        </button>
      </div>
    </div>
  );
};

const ConnectedProject = connect(
  (state) => ({
    titleText:
      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;