Vladislav_Postnikov
/
HomeWork1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							import { useEffect } 			    from "react";
import { useState }           from "react";
import { connect } 			      from "react-redux";
import { Redirect }           from "react-router";
import { Link }               from "react-router-dom";
import { actionSnippetById } 	from "../actions/actionSnippetById";
import   Editor 				      from "../components/editor";
import { actionSnippetAdd } 	from "../actions/actionSnippetAdd";
import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';


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(files);

  
  useEffect(() => {
    const timeout = setTimeout(() => {
      setSrcDoc(`
        <html>
          <body>${html || ""}</body>
          <style>${css}</style>
          <script>${js}</script>
        </html>
      `);
    }, 250);
    return () => clearTimeout(timeout);
  }, [html, css, js]);


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

  const SortableList = sortableContainer(({items})=>{
      //console.log(items)
      return(
          <div>
              {items?.map((value, index) => (
                  <SortableItem value={value} index={index} />
                ))
              }
          </div>
      )
  })
  const onSortEnd = ({oldIndex, newIndex}) => {
      let arr = arrayMove(filesArr, oldIndex, newIndex);
      setFiles(arr)
  }
  return (
    <div>
        <Link to="/">
            <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
               <span>&#8617;</span> Back to Main Page
            </button>
        </Link>
        <Link to="/projects" style={{}}>
	        <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"}}/>

          <div style={{marginTop:"20px", textAlign:'center'}}>
              <p onClick={()=>console.log(files)}><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),])}
	                />
	            </>
	        ))}
        </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;