|
@@ -6,62 +6,34 @@ import { actionSnippetById } from "store/actions/actionSnippetById";
|
|
import { Editor } from "components/Editor";
|
|
import { Editor } from "components/Editor";
|
|
import "components/EditorsPage.css";
|
|
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 = ({
|
|
|
|
|
|
+const MyProjectSnippet = ({
|
|
getSnippet,
|
|
getSnippet,
|
|
match: {
|
|
match: {
|
|
- params: { _id },
|
|
|
|
|
|
+ params: { id },
|
|
},
|
|
},
|
|
titleText,
|
|
titleText,
|
|
descriptionText,
|
|
descriptionText,
|
|
filesArr,
|
|
filesArr,
|
|
- nameText,
|
|
|
|
}) => {
|
|
}) => {
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
- getSnippet(_id);
|
|
|
|
- }, [_id, getSnippet]);
|
|
|
|
- const [editors, setEditors] = useState([]);
|
|
|
|
|
|
+ getSnippet(id);
|
|
|
|
+ }, [id, getSnippet]);
|
|
|
|
+ const [files, setFiles] = useState([]);
|
|
const [title, setTitle] = useState("");
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
- setEditors(filesArr);
|
|
|
|
|
|
+ setFiles(filesArr);
|
|
setTitle(titleText);
|
|
setTitle(titleText);
|
|
setDescription(descriptionText);
|
|
setDescription(descriptionText);
|
|
}, [filesArr, titleText, descriptionText]);
|
|
}, [filesArr, titleText, descriptionText]);
|
|
const [srcDoc, setSrcDoc] = useState("");
|
|
const [srcDoc, setSrcDoc] = useState("");
|
|
- const html = editors?.filter(e => {
|
|
|
|
|
|
+ const html = files?.filter(e => {
|
|
return e?.type === "html";
|
|
return e?.type === "html";
|
|
})[0]?.text;
|
|
})[0]?.text;
|
|
- const css = editors?.filter(e => {
|
|
|
|
|
|
+ const css = files?.filter(e => {
|
|
return e?.type === "css";
|
|
return e?.type === "css";
|
|
})[0]?.text;
|
|
})[0]?.text;
|
|
- const javascript = editors?.filter(e => {
|
|
|
|
|
|
+ const javascript = files?.filter(e => {
|
|
return e?.type === "javascript";
|
|
return e?.type === "javascript";
|
|
})[0]?.text;
|
|
})[0]?.text;
|
|
console.log(javascript);
|
|
console.log(javascript);
|
|
@@ -81,20 +53,19 @@ const ProjectSnippet = ({
|
|
return (
|
|
return (
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<div>
|
|
- <Link to='/propjects'>
|
|
|
|
|
|
+ <Link to='/projects'>
|
|
<button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
|
|
<button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
|
|
- Back to
|
|
|
|
|
|
+ Back to All Projects
|
|
</button>
|
|
</button>
|
|
</Link>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
- {editors?.map((data, index) => (
|
|
|
|
|
|
+ {files?.map((data, index) => (
|
|
<>
|
|
<>
|
|
<Editor
|
|
<Editor
|
|
- onDelete={() => setEditors(editors?.filter(item => item !== data))}
|
|
|
|
data={data}
|
|
data={data}
|
|
onChange={({ type, name, text }) =>
|
|
onChange={({ type, name, text }) =>
|
|
- setEditors([...editors.slice(0, index), { type, name, text }, ...editors.slice(index, 1)])
|
|
|
|
|
|
+ setFiles([...files.slice(0, index), { type, name, text }, ...files.slice(index, 1)])
|
|
}
|
|
}
|
|
/>
|
|
/>
|
|
</>
|
|
</>
|
|
@@ -135,13 +106,12 @@ const ProjectSnippet = ({
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|
|
-const ConnectedProject = connect(
|
|
|
|
|
|
+const ConnectedMyProject = connect(
|
|
state => ({
|
|
state => ({
|
|
titleText: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
|
|
titleText: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.title,
|
|
descriptionText: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.description,
|
|
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,
|
|
filesArr: state?.promise?.findSnippetById?.payload?.data?.SnippetFind?.[0]?.files,
|
|
}),
|
|
}),
|
|
{ getSnippet: actionSnippetById },
|
|
{ getSnippet: actionSnippetById },
|
|
-)(ProjectSnippet);
|
|
|
|
-export default ConnectedProject;
|
|
|
|
|
|
+)(MyProjectSnippet);
|
|
|
|
+export default ConnectedMyProject;
|