|
@@ -0,0 +1,117 @@
|
|
|
|
|
+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,}) => {
|
|
|
|
|
+ const [files, setFiles] = useState([]);
|
|
|
|
|
+ const [name, setName] = useState("");
|
|
|
|
|
+ const [title, setTitle] = useState("");
|
|
|
|
|
+ const [description, setDescription] = useState("");
|
|
|
|
|
+ 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(() => {
|
|
|
|
|
+ getSnippet(id);
|
|
|
|
|
+ }, []);
|
|
|
|
|
+
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ setFiles(filesArr);
|
|
|
|
|
+ setTitle(titleText);
|
|
|
|
|
+ setDescription(descriptionText);
|
|
|
|
|
+ }, [filesArr, titleText, descriptionText]);
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ 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;
|
