Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							import { useRef, useState }   from "react";
import { useEffect }          from "react";
import React                  from 'react'
import { connect }            from "react-redux";
import { Redirect }           from "react-router";
import { render }             from 'react-dom';
import Editor                 from "./editor";
import { actionSnippetAdd }   from "../actions/actionSnippetAdd";

import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';

///---------------------------------------------------------=------------------
/*
const SortableItem = sortableElement(({value}) => <li>{value}</li>);

const SortableContainer = sortableContainer(({children}) => {
  return <ul>{children}</ul>;
});


const Sortable = ({render:Tag}) => {
  	const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'])

  	const onSortEnd = ({oldIndex, newIndex}) => {
		let arr = arrayMove(items, oldIndex, newIndex);
		for(let i=0; i<arr.length; i++){
			arr[i].position = i;
		}
		setItems(arr)
	}

  return (
      <Tag>
        {items.map((value, index) => (
          	<SortableItem key={`item-${value}`} index={index} value={value} />
        ))}
      </Tag>
  )
}*/

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]);


    const [click, setClick] = useState(false)

    const SortableItem = sortableElement(({value, index}) => {
    	return (
    			<span><ins>{value.name || "new edit "}</ins> &nbsp; </span> 
    	)
	  })

  	const SortableList = sortableContainer(({items})=>{
  		return(
  			<div>
  				{items?.map((value, index) => (
  						<SortableItem value={value} index={index} />
  					))
  				}
  			</div>
  		)
  	})

  	const onSortEnd = ({oldIndex, newIndex}) => {
  		let arr = arrayMove(files, oldIndex, newIndex);
  		setFiles(arr)
  	}

  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"}}/>

        <br/>
        <div style={{marginTop:"20px", textAlign:'center'}}>
        	<p><b>Click here </b><span>to reverse the snippets</span></p>
        	<SortableList items={files} onSortEnd={onSortEnd} />
        </div>
 		
        {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"
                      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 className="form-control" 
                        value={description} 
                        onChange={(e) => setDescription(e.target.value)} 
                        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;