Home Explore Help
Sign In
janedev
/
project-codepen
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix dynamic urls

Yevheniia Akinshyna 2 years ago
parent
6ac13f7c51
commit
e293a82c2c
7 changed files with 164 additions and 74 deletions
Split View Show Diff Stats
  1. 6 4
      src/components/Routers.js
  2. 7 7
      src/pages/Projects.js
  3. 16 46
      src/pages/Project.js
  4. 118 0
      src/pages/SeachProject.js
  5. 6 6
      src/pages/Search.js
  6. 2 2
      src/store/actions/actionSnippetById.js
  7. 9 9
      src/store/actions/requests.js

+ 6 - 4
src/components/Routers.js
View File 

@@ -11,8 +11,9 @@ import { Main } from "pages/Main";
 
 import { Home } from "pages/WorkPage";
 
 import { Cabinet } from "pages/Cabinet";
 
 import ConnectFormSearch from "pages/Search";
 
-import CProjects from "pages/Projects";
 
-import ConnectedProject from "pages/Project";
 
+import ConnectedProjects from "pages/AllProjects";
 
+import ConnectedSearchProject from "pages/SeachProject";
 
+import ConnectedMyProject from "pages/MyProject"
 
 
 const history = createHistory.createBrowserHistory();
 
 
@@ -30,8 +31,9 @@ const Routs = ({ token }) => {
 
 						<Redirect from='/reg' to='/work' />
 
 						<Route exact path='/work' component={Home} />
 
 						<Route path='/cabinet' component={Cabinet} />
 
-						<Route path='/projects' component={CProjects} />
 
-						<Route path='/project' component={ConnectedProject} />
 
+						<Route path='/projects' component={ConnectedProjects} />
 
+						<Route path='/search-project/:id' component={ConnectedSearchProject} />
 
+                  <Route path='/my-project/:id' component={ConnectedMyProject} />
 
 						<Route path='/search' component={ConnectFormSearch} />
 
 					</Switch>
 
 				)}

+ 7 - 7
src/pages/Projects.js
View File 

@@ -20,14 +20,14 @@ const Projects = ({ snippets }) => {
 
 			</div>
 
 			<br />
 
 			<div className='snippet_block'>
 
-				{snippets?.map((key, index) => (
 
-					<div className='snippet'>
 
+				{snippets?.map(snippet => (
 
+					<div className='snippet' key={snippet._id}>
 
 						<img src={`${process.env.PUBLIC_URL}/img/code.png`} alt='code'></img>
 
 						<div className='block_content'>
 
-							<p>{`Name: ${snippets?.[index]?.title}` || "Project without name"}</p>
 
-							<p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
 
+							<p>{`Name: ${snippet.title}` || "Project without name"}</p>
 
+							<p>{`Description: ${snippet.description}` || ""}</p>
 
 							<div className='btn_center'>
 
-								<Link to={"/project/" + snippets?.[index]?._id}>
 
+								<Link to={"/my-project/" + snippet._id}>
 
 									<button className='btn_search'>Open project</button>
 
 								</Link>
 
 							</div>
 
@@ -49,7 +49,7 @@ const Projects = ({ snippets }) => {
 
 	);
 
 };
 
 
-const CProjects = connect(state => ({
 
+const ConnectedProjects = connect(state => ({
 
 	snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
 
 }))(Projects);
 
-export default CProjects;
 
+export default ConnectedProjects;

+ 16 - 46
src/pages/Project.js
View File 

@@ -6,62 +6,34 @@ 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 = ({
 
+const MyProjectSnippet = ({
 
 	getSnippet,
 
 	match: {
 
-		params: { _id },
 
+		params: { id },
 
 	},
 
 	titleText,
 
 	descriptionText,
 
 	filesArr,
 
-	nameText,
 
 }) => {
 
 	useEffect(() => {
 
-		getSnippet(_id);
 
-	}, [_id, getSnippet]);
 
-	const [editors, setEditors] = useState([]);
 
+		getSnippet(id);
 
+	}, [id, getSnippet]);
 
+	const [files, setFiles] = useState([]);
 
 	const [title, setTitle] = useState("");
 
 	const [description, setDescription] = useState("");
 
 	useEffect(() => {
 
-		setEditors(filesArr);
 
+		setFiles(filesArr);
 
 		setTitle(titleText);
 
 		setDescription(descriptionText);
 
 	}, [filesArr, titleText, descriptionText]);
 
 	const [srcDoc, setSrcDoc] = useState("");
 
-	const html = editors?.filter(e => {
 
+	const html = files?.filter(e => {
 
 		return e?.type === "html";
 
 	})[0]?.text;
 
-	const css = editors?.filter(e => {
 
+	const css = files?.filter(e => {
 
 		return e?.type === "css";
 
 	})[0]?.text;
 
-	const javascript = editors?.filter(e => {
 
+	const javascript = files?.filter(e => {
 
 		return e?.type === "javascript";
 
 	})[0]?.text;
 
 	console.log(javascript);
 
@@ -81,20 +53,19 @@ const ProjectSnippet = ({
 
 	return (
 
 		<div>
 
 			<div>
 
-				<Link to='/propjects'>
 
+				<Link to='/projects'>
 
 					<button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
 
-						Back to
 
+						Back to All Projects
 
 					</button>
 
 				</Link>
 
 			</div>
 
 			<br />
 
-			{editors?.map((data, index) => (
 
+			{files?.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)])
 
+                  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 => ({
 
 		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 },
 
-)(ProjectSnippet);
 
-export default ConnectedProject;
 
+)(MyProjectSnippet);
 
+export default ConnectedMyProject;

+ 118 - 0
src/pages/SeachProject.js
View File 

@@ -0,0 +1,118 @@
 
+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 SearchProjectSnippet = ({
 
+	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 => e?.type === "html")[0]?.text;
 
+	const css = files?.filter(e => e?.type === "css")[0]?.text;
 
+	const javascript = files?.filter(e => 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='/search'>
 
+					<button className='btn_search' style={{ margin: 10, marginBottom: 50 }}>
 
+						Back to Search
 
+					</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>
 
+					<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 ConnectedSearchProject = 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 },
 
+)(SearchProjectSnippet);
 
+export default ConnectedSearchProject;

+ 6 - 6
src/pages/Search.js
View File 

@@ -34,15 +34,15 @@ const Search = ({ onSearch, snippets }) => {
 
 				</div>
 
 			</div>
 
 			<div className='snippet_block'>
 
-				{snippets?.map((key, index) => (
 
-					<div key={key} className='snippet'>
 
+				{snippets?.map(snippet => (
 
+					<div key={snippet._id} className='snippet'>
 
 						<img src={`${process.env.PUBLIC_URL}/img/code.png`} alt='code'></img>
 
 						<div className='block_content'>
 
-							<p>{`Name: ${snippets?.[index]?.title}` || "Project without name"}</p>
 
-							<p>{`Description: ${snippets?.[index]?.description}` || ""}</p>
 
-							<p>{`Owner: ${snippets?.[index]?.owner?.login}`}</p>
 
+							<p>{`Name: ${snippet.title}` || "Project without name"}</p>
 
+							<p>{`Description: ${snippet.description}` || ""}</p>
 
+							<p>{`Owner: ${snippet.owner.login}`}</p>
 
 							<div className='btn_center'>
 
-								<Link to={"/project/" + snippets?.[index]?._id}>
 
+								<Link to={"/search-project/" + snippet._id}>
 
 									<button className='btn_search'>Open project</button>
 
 								</Link>
 
 							</div>

+ 2 - 2
src/store/actions/actionSnippetById.js
View File 

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

+ 9 - 9
src/store/actions/requests.js
View File 

@@ -20,7 +20,7 @@ export const registration = async (login, password) => {
 
       createUser(
 
          login: $login,
 
          password: $password
 
-      ){
 
+      ) {
 
          _id
 
       }
 
    }`;
 
@@ -31,7 +31,7 @@ export const registration = async (login, password) => {
 
 export const findImage = async () => {
 
 	const query = `query imgFind {
 
       ImageFind(query:"[{}]") {
 
-         url owner{
 
+         url owner {
 
             nick
 
          }
 
       }
 
@@ -43,7 +43,7 @@ export const findImage = async () => {
 
 export const findUser = async _id => {
 
 	const query = `query userOne($query:String) {
 
       UserFindOne(query:$query) {
 
-         _id avatar{
 
+         _id  avatar {
 
             url
 
          }
 
       }
 
@@ -55,7 +55,7 @@ export const findUser = async _id => {
 
 export const setAvatar = async (idUser, idAvatar) => {
 
 	const query = `mutation setAvatar($idUser:String , $idAvatar:ID) { 
       UserUpsert(user:{_id: $idUser, avatar: {_id: $idAvatar}}) {
 
-         _id, avatar{
 
+         _id, avatar {
 
             url
 
          }
 
       }
 
@@ -76,11 +76,11 @@ export const addSnippet = async (title, description, files, idSnippet) => {
 
 	});
 
 };
 
 
-export const getSnippetById = async id => {
 
+export const getSnippetById = async _id => {
 
 	const query = `query snippetFind($query:String) {
 
       SnippetFind(query:$query) {
 
-         owner{
 
-            _id 
+         owner {
 
+            _id
 
          }
 
          title description _id files {
 
             type text name
 
@@ -88,13 +88,13 @@ export const getSnippetById = async id => {
 
       }
 
    }`;
 
 
-	return await gql(query, { query: JSON.stringify([{ _id: id }]) });
 
+	return await gql(query, { query: JSON.stringify([{ _id }]) });
 
 };
 
 
 export const getSnippetByOwnerId = async id => {
 
 	const query = `query snippetFind($query:String) {
 
       SnippetFind(query:$query) {
 
-         owner{
 
+         owner {
 
             _id
 
          }
 
          title description _id files {