janedev
/
project-codepen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

import { actionSnippetById } from "store/actions/actionSnippetById";
import { Editor } from "components/Editor";
import "components/EditorsPage.css";

//  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;