Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							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";
import {Redirect} 				from "react-router";

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>
        <Link to="/">
            <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
               <span>&larr;</span> Back to Main Page
            </button>
        </Link>
        <Link to="/projects">
	        <button className="float-right btn btn-outline-info border-info mt-2 mr-2">
	            All projects
	        </button>
	    </Link>

        <br/>
        <div>
        	<h3  style={{marginTop:'30px', marginLeft: "20px"}}><u>Name of this project:</u> &nbsp; <i>{title}</i></h3>
        	<iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%" height="100%"
                style={{height: "280px", marginLeft: "2%",marginTop: "40px", border: "5px solid green"}}/>

	        {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),])}
	                />
	            </>
	        ))}
        </div>

      	<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>
	        <div className="input-group mb-3 mt-5 ml-auto mr-auto w-50">
	          <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-center mt-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;