janedev
/
project-codepen


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

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

const MyProjectSnippet = ({
	onSave,
	getSnippet,
	match: {
		params: { id },
	},
	titleText,
	descriptionText,
	filesArr,
}) => {
	useEffect(() => {
		getSnippet(id);
	}, [id, getSnippet]);
	const [files, setFiles] = 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(e => {
		return e?.type === "html";
	})[0]?.text;
	const css = files?.filter(e => {
		return e?.type === "css";
	})[0]?.text;
	const javascript = files?.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='/projects'>
					<button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
						Back to All Projects
					</button>
				</Link>
			</div>
			<br />
			{files?.map((data, index) => (
				<>
					<Editor
						data={data}
						onChange={({ type, name, text }) =>
							setFiles([...files.slice(0, index), { type, name, text }, ...files.slice(index, 1)])
						}
					/>
				</>
			))}
			<br />
			<div>
				<div>
					<button
						className='button_plus'
						onClick={newArray => {
							let editors2 = [...files];
							editors2.push(newArray);
							setFiles(editors2);
						}}
					>
						+
					</button>
					<button
						className='button_plus'
						onClick={newArray => {
							let editors2 = [...files];
							editors2.pop(newArray);
							setFiles(editors2);
						}}
					>
						-
					</button>
				</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>
				<button className='button_submit' onClick={() => onSave(title, description, files)}>
					Submit this Editor
				</button>
			</div>
		</div>
	);
};

const ConnectedMyProject = connect(
	state => ({
		titleText: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
		descriptionText: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.description,
		filesArr: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
	}),
	{ getSnippet: actionSnippetById, onSave: actionSnippetAdd },
)(MyProjectSnippet);
export default ConnectedMyProject;