瀏覽代碼

попытка открыть сохраненный проект

Vladislav342 2 年之前
父節點
當前提交
40438663aa

+ 0 - 1
React/CodePen/src/App.css

@@ -5,7 +5,6 @@
 }
 
 
-
 .headerBlock{
 	border:1px solid black;	
 }

+ 6 - 0
React/CodePen/src/actions/actionSnippetById.js

@@ -0,0 +1,6 @@
+import {actionPromise} from "./actionPromise";
+import {snippetById} from "./requests";
+
+export const actionSnippetById = (id) => async (dispatch) => {
+	return await dispatch(actionPromise("findSnippetById", snippetById(id)));
+};

+ 3 - 3
React/CodePen/src/components/header.js

@@ -1,9 +1,9 @@
 import React from "react";
 import ConnectedNick from "./nickHeader";
 import ImgLogo from "./logo";
-import { connect } from "react-redux";
-import { useState } from "react";
-import { actionSearch } from "../actions/actionSearch";
+import {connect} from "react-redux";
+import {useState} from "react";
+import {actionSearch} from "../actions/actionSearch";
 
 const Header = ({onSearch}) => {
   const [request, setRequest] = useState('');

+ 2 - 0
React/CodePen/src/components/routes.js

@@ -11,6 +11,7 @@ import {Redirect} from "react-router";
 import {useEffect, useState, useRef} from "react";
 import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
 import ChangePass from "../pages/changePass";
+import Project from "../pages/project";
 
 const LoginForm = ({onLogin}) =>{
   const [login, setLogin] = useState(''); //braunvlad4
@@ -37,6 +38,7 @@ const Routes = ({ isAuth }) => {
                 <ConnectedPrivateRoute path="/changePass" roles={['user']} component={ChangePass} />
                 <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
                 <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
+                <ConnectedPrivateRoute path="/project" roles = {['user']} component={Project} />
             </Switch>
       </div>
     </div>

+ 117 - 0
React/CodePen/src/pages/project.js

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