Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							import {useRef, useState} from "react";
import {connect} from "react-redux";
import {Redirect} from "react-router";
import {useEffect} from "react";
import Editor from "./editor";
import {actionSnippetAdd} from "../actions/actionSnippetAdd";

const Snippets = ({onSave}) => {
    const [files, setFiles] = useState([
        {type: "html", text:`
<div id='area'>⚠ achtung ⚠</div> 
<div>
    <button id='greek'>Change color</button>
    <button id='bluek'>Change color</button>
</div>`, name:'main.html'},
        {type: "css", text:`
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
    background: #111;
    font-family: 'Open Sans',  Impact;
}
#area {
  margin-bottom:70px;
    text-align: center;
    font-size: 6.5em;
    color: #fff;
    letter-spacing: -7px;
    font-weight: 700;
    text-transform: uppercase;
    animation: blur .75s ease-out infinite;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
}`, name:'style.css'},
        {type: "javascript",text:`
greek.style.color='white'
greek.style.background='green'
greek.style.borderRadius='40px'
bluek.style.color='white'
bluek.style.background='blue'
bluek.style.borderRadius='40px'

greek.onclick = () => {
    document.getElementById('area').style.color = 'green'
}
bluek.onclick = () => {
    document.getElementById('area').style.color = 'blue'
}`,name:'main.js'},
    ]);
    const [name, setName] = useState("");
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [srcDoc, setSrcDoc] = useState("");

    const html = files.filter((elem) => {
       return elem?.type === "html";
    })[0]?.text;

    const css = files.filter((elem) => {
        return elem?.type === "css";
    })[0]?.text;

    const js = files.filter((elem) => {
        return elem?.type === "javascript";
    })[0]?.text;

    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>
        <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
                height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", 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),])}
                />
            </>
        ))}
        <br />
        <div style={{alignItems: "center", textAlign: "center", marginTop: "20px", marginBottom: "20px"}}>
          <div>
              <button className="btn btn-primary" style={{}} onClick={()=> setFiles([...files, { type: "html" }])} key={files} style={{marginTop: "10px"}}>
                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 mr-5 mb-5" onClick={() => onSave(title, description, files)} style={{marginTop: '30px'}}>
                  Save project
              </button>
        </div>
    </div>
  );
};

const CSnippets = connect(null, {onSave: actionSnippetAdd})(Snippets);
export default CSnippets;