Browse Source

fix dynamic urls

Yevheniia Akinshyna 2 years ago
parent
commit
e293a82c2c

+ 6 - 4
src/components/Routers.js

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

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

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

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

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

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

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