From 3d11df6b7fdc1b6d134aac40e3f579a84c5024e7 Mon Sep 17 00:00:00 2001 From: godcindy Date: Mon, 1 Jan 2024 19:22:35 -0500 Subject: [PATCH] completed nested dynamic routes exercise --- package-lock.json | 61 ++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.css | 10 ++++++ src/App.js | 35 ++++++++++--------- src/components/Blog.jsx | 29 ++++++++++++++++ src/components/Nav.jsx | 23 +++++++++++++ src/components/PostDetails.jsx | 32 ++++++++++++++++++ src/components/PostList.jsx | 24 +++++++++++++ src/components/nav.css | 9 +++++ 9 files changed, 209 insertions(+), 15 deletions(-) create mode 100644 src/components/Blog.jsx create mode 100644 src/components/Nav.jsx create mode 100644 src/components/PostDetails.jsx create mode 100644 src/components/PostList.jsx create mode 100644 src/components/nav.css diff --git a/package-lock.json b/package-lock.json index 916b91b..538446e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3263,6 +3264,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", + "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14752,6 +14761,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", + "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "dependencies": { + "@remix-run/router": "1.14.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz", + "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==", + "dependencies": { + "@remix-run/router": "1.14.1", + "react-router": "6.21.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -20088,6 +20127,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", + "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -28271,6 +28315,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", + "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==", + "requires": { + "@remix-run/router": "1.14.1" + } + }, + "react-router-dom": { + "version": "6.21.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz", + "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==", + "requires": { + "@remix-run/router": "1.14.1", + "react-router": "6.21.1" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 458b03e..105d756 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..c3d3441 100644 --- a/src/App.css +++ b/src/App.css @@ -7,6 +7,15 @@ pointer-events: none; } +.nav-links { + width: 40%; + display: flex; + justify-content: space-around; + align-items: center; + list-style: none; +} + + @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; @@ -24,6 +33,7 @@ color: white; } + .App-link { color: #61dafb; } diff --git a/src/App.js b/src/App.js index 3784575..5abc571 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,30 @@ -import logo from './logo.svg'; +import { BrowserRouter, Routes, Route, Link} from 'react-router-dom'; import './App.css'; +import Blog from './components/Blog'; +import Nav from './components/Nav'; + + function App() { return ( +
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ ); } +// const Home = () => { +// return ( +//
+//

Home

+//
+// ) +// } + export default App; + diff --git a/src/components/Blog.jsx b/src/components/Blog.jsx new file mode 100644 index 0000000..4edb7c4 --- /dev/null +++ b/src/components/Blog.jsx @@ -0,0 +1,29 @@ +import { Routes, Route } from 'react-router-dom'; +import PostDetails from './PostDetails'; // Import PostDetail component +import PostList from './PostList'; + +function Blog() { + + return ( + +
+ + {/* */} + } /> {/* Base route for post list */} + } /> {/* Dynamic route for post detail */} + +
+ // ... + ); +} + +const Home = () => { + return ( +
+

Home

+
+ ) + } + + + export default Blog; \ No newline at end of file diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx new file mode 100644 index 0000000..c55b313 --- /dev/null +++ b/src/components/Nav.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import '../App.css'; +import { Link } from "react-router-dom"; +import Blog from "./Blog"; +import './nav.css' + +function Nav () { + return ( + + ) +} + +export default Nav diff --git a/src/components/PostDetails.jsx b/src/components/PostDetails.jsx new file mode 100644 index 0000000..53a933f --- /dev/null +++ b/src/components/PostDetails.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { useParams, Link } from 'react-router-dom'; +import blogData from '../data/blog.json'; + +function PostDetails() { + const { postId } = useParams(); + const post = blogData.posts[postId]; + + + return ( +
+

{post.title}

+

By {post.author} on {post.date}

+
+ {post.tags.map((tag) => ( + Tag:{tag} + ))} +
+ +
+

{post.content}

+
+ + + +
+ + + ); +} + +export default PostDetails; \ No newline at end of file diff --git a/src/components/PostList.jsx b/src/components/PostList.jsx new file mode 100644 index 0000000..f84992d --- /dev/null +++ b/src/components/PostList.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import blogData from '../data/blog.json'; + +function PostList() { +// const posts = Object.values(blogData.posts); +const posts = blogData.posts; + + return ( + +

BLOG, BLOG, BLOG

+ + + ); +} + +export default PostList; \ No newline at end of file diff --git a/src/components/nav.css b/src/components/nav.css new file mode 100644 index 0000000..4b04686 --- /dev/null +++ b/src/components/nav.css @@ -0,0 +1,9 @@ +nav { + display: flex; + justify-content: space-around; + align-items: center; + min-height: 10vh; + /* list-style: none; */ + background: royalblue; + color: white; + } \ No newline at end of file