admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Routing on the app

Browse Source
This commit is contained in:
Charles Bochet
2022-12-02 12:39:15 +01:00
parent 017df9dae2
commit eba76274c6
7 changed files with 101 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
front/package-lock.json generated
View File

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

23
front/package.json
View File

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

38
front/src/App.css
View File

@ -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);
}
}

23
front/src/App.tsx
View File

@ -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 (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Routes>
<Route path="/" element={<Tasks />} />
<Route path="/history" element={<History />} />
</Routes>
</div>
);
}

5
front/src/index.tsx
View File

@ -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(
<React.StrictMode>
<BrowserRouter>
<App />
</React.StrictMode>,
</BrowserRouter>,
);

9
front/src/pages/History.tsx Normal file
View File

@ -0,0 +1,9 @@
function History() {
return (
<div>
<h1>This is the history page</h1>
</div>
);
}
export default History;

9
front/src/pages/Tasks.tsx Normal file
View File

@ -0,0 +1,9 @@
function Tasks() {
return (
<div>
<h1>This is the home page</h1>
</div>
);
}
export default Tasks;