123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import { useEffect } from "react";
- import { connect } from "react-redux";
- import { actionSnippetById } from "./../actions/actionSnippetById";
- import { useState } from "react";
- import { Editor } from "../components/Editor";
- import "../components/EditorsPage.css";
- import { Link } from "react-router-dom";
- // const [editors, setEditors] = useState(datas);
- // const [title, setTitle] = useState("");
- // const [description, setDescription] = useState("");
- // const [srcDoc, setSrcDoc] = useState("");
- // const [theme, setTheme] = useState();
- // const [font, setFont] = useState();
- // useEffect(() => {
- // const timeout = setTimeout(() => {
- // let html, css, javascript;
- // editors.forEach((e) => {
- // if (e.type === "html") html = e.text;
- // if (e.type === "css") css = e.text;
- // if (e.type === "javascript") javascript = e.text;
- // });
- // setSrcDoc(`
- // <html>
- // <body>${html}</body>
- // <style>${css}</style>
- // <script>${javascript}</script>
- // </html>
- // `);
- // }, 250);
- // return () => clearTimeout(timeout);
- // }, [editors]);
- const ProjectSnippet = ({
- getSnippet,
- match: {
- params: { _id },
- },
- titleText,
- descriptionText,
- filesArr,
- nameText,
- }) => {
- useEffect(() => {
- getSnippet(_id);
- }, [_id, getSnippet]);
- const [editors, setEditors] = useState([]);
- const [title, setTitle] = useState("");
- const [description, setDescription] = useState("");
- useEffect(() => {
- setEditors(filesArr);
- setTitle(titleText);
- setDescription(descriptionText);
- }, [filesArr, titleText, descriptionText]);
- const [srcDoc, setSrcDoc] = useState("");
- const html = editors?.filter(e => {
- return e?.type === "html";
- })[0]?.text;
- const css = editors?.filter(e => {
- return e?.type === "css";
- })[0]?.text;
- const javascript = editors?.filter(e => {
- return e?.type === "javascript";
- })[0]?.text;
- console.log(javascript);
- useEffect(() => {
- const timeout = setTimeout(() => {
- setSrcDoc(`
- <html>
- <body>${html}</body>
- <style>${css}</style>
- <script>${javascript}</script>
- </html>
- `);
- }, 250);
- return () => clearTimeout(timeout);
- }, [html, css, javascript]);
- return (
- <div>
- <div>
- <Link to='/propjects'>
- <button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
- Back to
- </button>
- </Link>
- </div>
- <br />
- {editors?.map((data, index) => (
- <>
- <Editor
- onDelete={() => setEditors(editors?.filter(item => item !== data))}
- data={data}
- onChange={({ type, name, text }) =>
- setEditors([...editors.slice(0, index), { type, name, text }, ...editors.slice(index, 1)])
- }
- />
- </>
- ))}
- <br />
- <div>
- <div>
- <iframe
- className='pane'
- srcDoc={srcDoc}
- title='output'
- sandbox='allow-scripts'
- frameBorder='0'
- style={{ marginTop: 20 }}
- width='95%'
- height='95%'
- />
- </div>
- <div>
- <p className='text'>Name of your project: </p>
- <input
- className='input_title'
- placeholder='Name of your project'
- value={title}
- onChange={e => setTitle(e.target.value)}
- />
- </div>
- <p className='text'>Description: </p>
- <textarea
- className='text_desc'
- placeholder='Description'
- value={description}
- onChange={e => setDescription(e.target.value)}
- style={{ marginBottom: 50 }}
- />
- </div>
- </div>
- );
- };
- const ConnectedProject = connect(
- state => ({
- titleText: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
- descriptionText: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.description,
- nameText: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.name,
- filesArr: state?.p?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
- }),
- { getSnippet: actionSnippetById },
- )(ProjectSnippet);
- export default ConnectedProject;
|