diff --git a/README.md b/README.md index ee42f26..29f8bce 100644 --- a/README.md +++ b/README.md @@ -381,9 +381,9 @@ For each technology, display its `name` and `image`, and wrap them in a React Ro --- -### Iteration 6 | Technology Details +### Bonus: Iteration 6 | Technology Details -In this iteration, you will work on the `TechologyPage` component to display the information of a specific technology. +In this iteration, you will work on the `TechologyPage` component to display information about a specific technology. The component should take 1 prop: @@ -485,16 +485,19 @@ To set up the React Router in your React application, follow these steps: npm install react-router-dom ``` -2. Import the `BrowserRouter` component in your app's entry point (usually `index.js`) and wrap your `` component with it: +2. Import the `BrowserRouter` component in your app's entry point (usually `main.jsx`) and wrap your `` component with it: ```jsx import { BrowserRouter as Router } from "react-router-dom"; -ReactDOM.render( - - - , - document.getElementById("root") +const root = ReactDOM.createRoot(document.getElementById("root")); + +root.render( + + + + + ); ``` diff --git a/index.html b/index.html index 79c4701..ba47f90 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + LAB Stack Tracker
diff --git a/package-lock.json b/package-lock.json index eadb7c4..85afe00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.18.0" }, "devDependencies": { "@types/react": "^18.0.37", @@ -911,6 +912,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -3555,6 +3564,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "dependencies": { + "@remix-run/router": "1.11.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "dependencies": { + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -5017,6 +5056,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==" + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -6960,6 +7004,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "requires": { + "@remix-run/router": "1.11.0" + } + }, + "react-router-dom": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "requires": { + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", diff --git a/package.json b/package.json index 727f1c1..23a7b37 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.18.0" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..34ab9fc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,23 @@ +import { Routes, Route } from "react-router-dom"; import "./App.css"; +import companiesJson from "./companies.json" +import technologiesJson from "./technologies.json" +import { useState } from "react"; +import HomePage from "./pages/HomePage"; +import CompanyPage from "./pages/CompanyPage"; +import TechnologyPage from "./pages/TechnologyPage"; function App() { + const [technologies, setTechnologies] = useState(technologiesJson) + const [companies, setCompanies]= useState (companiesJson) return (

LAB | React Stack Tracker

+ + } /> + }/> + }/> +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..dd57708 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,5 @@ function Navbar() { - return ; + return ; } export default Navbar; diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..0d8172e 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,15 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +// src/main.jsx +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; +import React from "react"; -ReactDOM.createRoot(document.getElementById('root')).render( +import { BrowserRouter as Router } from "react-router-dom"; + +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); \ No newline at end of file diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..51dac6e 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,30 @@ -function CompanyPage() { +import { useParams, Link } from "react-router-dom"; + +function CompanyPage(props) { + const { companySlug } = useParams(); + const result = props.companies.find((company) => { + if (companySlug === company.slug) { + return true; + } else { + return false; + } + }); + if (!result) return
Error
; return (
-

CompanyPage

+

Company Profile

+

{result.name}

+
{result.website}
+
{result.description}
+ + {result.techStack.map((techStack) => ( +
+ + + +
+ ))} +

{companySlug}

); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..cf895f2 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,21 @@ -function HomePage() { +import { Link } from "react-router-dom"; +import React from "react"; + +function HomePage(props) { + console.log(props.companies) return (
-

HomePage

+

StackTracker: Discover Tech Stacks Used by Top Companies

+
    + {props.companies.map(company=>( +
  • + + + {company.name} + +
    • + ))} +
); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..20c51d5 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,23 @@ -function TechnologyPage() { +import { useParams } from "react-router-dom"; + +function TechnologyPage(props) { + const { slug } = useParams(); + let result; + for (let i = 0; i < props.technologies.length; i++) { + if (props.technologies[i].slug === slug) { + result = props.technologies[i]; + break; + } + } + if (!result) { + return
Error slug not found
; + } return (
-

TechnologyPage

+

Technology Details

+
{result.name}
+ +
{result.description}
); }