From eba76274c6af47751899539e3ac3b7583942ca74 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 2 Dec 2022 12:39:15 +0100 Subject: [PATCH] Add Routing on the app --- front/package-lock.json | 61 +++++++++++++++++++++++++++++++++++++ front/package.json | 23 +++++++------- front/src/App.css | 38 ----------------------- front/src/App.tsx | 23 +++++--------- front/src/index.tsx | 5 +-- front/src/pages/History.tsx | 9 ++++++ front/src/pages/Tasks.tsx | 9 ++++++ 7 files changed, 101 insertions(+), 67 deletions(-) delete mode 100644 front/src/App.css create mode 100644 front/src/pages/History.tsx create mode 100644 front/src/pages/Tasks.tsx diff --git a/front/package-lock.json b/front/package-lock.json index 6ef5ef700..87cf45356 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -13,6 +13,7 @@ "@types/react-dom": "^18.0.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.4.4", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, @@ -2852,6 +2853,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz", + "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -12429,6 +12438,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz", + "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==", + "dependencies": { + "@remix-run/router": "1.0.4" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz", + "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==", + "dependencies": { + "@remix-run/router": "1.0.4", + "react-router": "6.4.4" + }, + "engines": { + "node": ">=14" + }, + "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", @@ -17188,6 +17227,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz", + "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -24013,6 +24057,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz", + "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==", + "requires": { + "@remix-run/router": "1.0.4" + } + }, + "react-router-dom": { + "version": "6.4.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz", + "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==", + "requires": { + "@remix-run/router": "1.0.4", + "react-router": "6.4.4" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/front/package.json b/front/package.json index ffe0f42d2..b5b3facd0 100644 --- a/front/package.json +++ b/front/package.json @@ -8,6 +8,7 @@ "@types/react-dom": "^18.0.9", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.4.4", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, @@ -36,19 +37,19 @@ ] }, "devDependencies": { - "@typescript-eslint/eslint-plugin": "^5.45.0", - "eslint": "^8.28.0", - "eslint-config-standard-with-typescript": "^23.0.0", - "eslint-plugin-import": "^2.26.0", - "eslint-plugin-n": "^15.5.1", - "eslint-plugin-promise": "^6.1.1", - "eslint-plugin-react": "^7.31.11", - "typescript": "^4.9.3", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-prettier": "^4.2.1", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.5.2" + "@types/jest": "^27.5.2", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-config-standard-with-typescript": "^23.0.0", + "eslint-plugin-import": "^2.26.0", + "eslint-plugin-n": "^15.5.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-promise": "^6.1.1", + "eslint-plugin-react": "^7.31.11", + "typescript": "^4.9.3" } } diff --git a/front/src/App.css b/front/src/App.css deleted file mode 100644 index 74b5e0534..000000000 --- a/front/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/front/src/App.tsx b/front/src/App.tsx index a53698aab..e730e605a 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -1,24 +1,15 @@ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import Tasks from './pages/Tasks'; +import History from './pages/History'; +import { Routes, Route } from 'react-router-dom'; function App() { return (
-
- logo -

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

- - Learn React - -
+ + } /> + } /> +
); } diff --git a/front/src/index.tsx b/front/src/index.tsx index 56a5fca11..aeda2984c 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -2,12 +2,13 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; +import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, ); root.render( - + - , + , ); diff --git a/front/src/pages/History.tsx b/front/src/pages/History.tsx new file mode 100644 index 000000000..badf9b3fe --- /dev/null +++ b/front/src/pages/History.tsx @@ -0,0 +1,9 @@ +function History() { + return ( +
+

This is the history page

+
+ ); +} + +export default History; diff --git a/front/src/pages/Tasks.tsx b/front/src/pages/Tasks.tsx new file mode 100644 index 000000000..877134e2a --- /dev/null +++ b/front/src/pages/Tasks.tsx @@ -0,0 +1,9 @@ +function Tasks() { + return ( +
+

This is the home page

+
+ ); +} + +export default Tasks;