Skip to content

GitLab

Commit 2c51748b authored by Andres Käver's avatar Andres Käver
Browse files

react demo

parent b8c13b6b
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 2c51748b
......@@ -1599,6 +1599,16 @@
"@babel/types": "^7.3.0"
}
},
"@types/bootstrap": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.3.3.tgz",
"integrity": "sha512-zMsk1IiLKhYO6aXgaoPPkDCqKgKYuyrJllfWLwgS6WnFrnq6G2OVZcjNs5oE0sFSuvhZB1TYkCpicklavdFVFA==",
"dev": true,
"requires": {
"@types/jquery": "*",
"popper.js": "^1.14.1"
}
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
......@@ -1624,6 +1634,12 @@
"@types/node": "*"
}
},
"@types/history": {
"version": "4.7.5",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.5.tgz",
"integrity": "sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==",
"dev": true
},
"@types/istanbul-lib-coverage": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz",
......@@ -1654,6 +1670,15 @@
"jest-diff": "^24.3.0"
}
},
"@types/jquery": {
"version": "3.3.38",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.38.tgz",
"integrity": "sha512-nkDvmx7x/6kDM5guu/YpXkGZ/Xj/IwGiLDdKM99YA5Vag7pjGyTJ8BNUh/6hxEn/sEu5DKtyRgnONJ7EmOoKrA==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/json-schema": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
......@@ -1701,6 +1726,33 @@
"@types/react": "*"
}
},
"@types/react-router": {
"version": "5.1.7",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.7.tgz",
"integrity": "sha512-2ouP76VQafKjtuc0ShpwUebhHwJo0G6rhahW9Pb8au3tQTjYXd2jta4wv6U2tGLR/I42yuG00+UXjNYY0dTzbg==",
"dev": true,
"requires": {
"@types/history": "*",
"@types/react": "*"
}
},
"@types/react-router-dom": {
"version": "5.1.5",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.5.tgz",
"integrity": "sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==",
"dev": true,
"requires": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
}
},
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
"dev": true
},
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
......@@ -2413,6 +2465,37 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"axobject-query": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
......@@ -2988,6 +3071,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bootstrap": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
"integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
......@@ -5724,6 +5812,11 @@
}
}
},
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -6165,6 +6258,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
......@@ -6175,6 +6281,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
......@@ -7469,6 +7583,11 @@
}
}
},
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
......@@ -8077,6 +8196,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
"integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY="
},
"mini-create-react-context": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
"requires": {
"@babel/runtime": "^7.5.5",
"tiny-warning": "^1.0.3"
}
},
"mini-css-extract-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
......@@ -9083,6 +9211,11 @@
"ts-pnp": "^1.1.6"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.26",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
......@@ -10565,6 +10698,52 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"mini-create-react-context": "^0.4.0",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
......@@ -10968,6 +11147,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
......@@ -12434,6 +12618,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
......@@ -12810,6 +13004,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......
package.json
View file @ 2c51748b
......@@ -10,8 +10,14 @@
"@types/node": "^12.12.39",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"font-awesome": "^4.7.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"
},
......@@ -35,5 +41,10 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/bootstrap": "^4.3.3",
"@types/jquery": "^3.3.38",
"@types/react-router-dom": "^5.1.5"
}
}
src/App.css deleted 100644 → 0
View file @ b8c13b6b
.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);
}
}
src/App.test.tsx deleted 100644 → 0
View file @ b8c13b6b
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
src/App.tsx
View file @ 2c51748b
import React from 'react';
import logo from './logo.svg';
import './App.css';
import React, { useState } from "react";
import { BrowserRouter as Router, Route, Switch } 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>
</div>
);
}
import Header from "./components/shared/Header";
import Home from "./components/Home";
import About from "./components/About";
import Privacy from "./components/Privacy";
import GpsSessions from "./components/GpsSessions";
import Form from "./components/Form";
import { AppContextProvider, AppContextInitialState, IAppContext } from "./context/AppContext";
const App = () => {
const setJwt = (jwt: string) => {
console.log('setJwt', jwt);
setAppState({...appState, jwt: jwt});
};
const setUserName = (userName: string) => {
console.log('setUserName', userName);
setAppState({...appState, userName: userName});
}
const initialAppState = {
...AppContextInitialState,
setJwt,
setUserName,
} as IAppContext;
const [appState, setAppState] = useState(initialAppState);
return (
<AppContextProvider value={appState}>
<Router>
<Header />
<div className="container">
<main role="main" className="pb-3">
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/Home">
<Home />
</Route>
<Route path="/Form">
<Form />
</Route>
<Route path="/About">
<About count1={5} count2={45} />
</Route>
<Route path="/Privacy/:id" component={() => Privacy({ name: 'foo', enabled: true })} />
<Route path="/GpsSessions" >
<GpsSessions />
</Route>
<h1>404</h1>
</Switch>
</main>
</div>
</Router>
</AppContextProvider>
)
};
export default App;
src/components/About.tsx 0 → 100644
View file @ 2c51748b
import React, { useState, useEffect, useContext } from "react";
import CounterButton from "./CounterButton";
import { AppContext } from "../context/AppContext";
interface IProps {
count1: number;
count2: number;
}
const About = (props: IProps) => {
const [count1, setCount1] = useState(props.count1);
const [count2, setCount2] = useState(props.count2);
const appContext = useContext(AppContext);
useEffect(() => {
document.title = "c1 - " + count1.toString();
appContext.setUserName("c1 - " + count1.toString());
return () => {console.log('cleanup1')}
}, [count1]);
useEffect(() => {
document.title = "c2 - " + count2.toString();
return () => {console.log('cleanup2')}
}, [count2]);
return (
<>
<h1>About {count1} - {count2}</h1>
<CounterButton
count={count1}
incrementCount={() => setCount1(count1 + 1)} />
<CounterButton
count={count2}
incrementCount={() => setCount2(count2 + 1)} />
</>
);
}
export default About;
/*
interface IProps {
count1: number;
count2: number;
}
interface IState {
count1: number;
count2: number;
}
export default class About extends React.Component<IProps, IState> {
state: IState = {
count1: this.props.count1,
count2: this.props.count2
}
render() {
return (
<>
<h1>About {this.state.count1} - {this.state.count2}</h1>
<CounterButton
count={this.state.count1}
incrementCount={() => this.setState({ count1: this.state.count1 + 1 })} />
<CounterButton
count={this.state.count2}
incrementCount={() => this.setState({ count2: this.state.count2 + 1 })} />
</>
);
}
}
*/
\ No newline at end of file
src/components/CounterButton.tsx 0 → 100644
View file @ 2c51748b
import React from "react";
interface IProps {
count: number;
incrementCount: () => void;
}
const CounterButton = (props: IProps) => (
<button onClick={() => props.incrementCount()}>
Add 1 to {props.count}
</button>
);
export default CounterButton;
src/components/Form.tsx 0 → 100644
View file @ 2c51748b
import React, { useState } from "react";
import FormView from "./FormView";
export interface IFormState {
input: string;
checkbox: boolean;
select: string;
radioGroup1: boolean[];
textarea: string;
}
const Form = () => {
const [state, setState] = useState(
{
input: 'fido',
checkbox: true,
select: '2',
radioGroup1: [false, true, false, false, false, false, false, false],
textarea: 'foo\nbar'
} as IFormState
);
const handleChange = (target:
EventTarget & HTMLInputElement |
EventTarget & HTMLSelectElement |
EventTarget & HTMLTextAreaElement) => {
const t1 = target as HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement;
console.log(t1.name, '-', t1.value, t1.type, t1.checked, t1);
// causes a breakpoint here!
// debugger;
if (target.type === 'text') {
setState({ ...state, [target.name]: target.value });
}
if (target.type === 'checkbox' && target instanceof HTMLInputElement) {
setState({ ...state, [target.name]: target.checked });
}
if (target.type === 'select-one' && target instanceof HTMLSelectElement) {
setState({ ...state, [target.name]: target.value });
}
if (target.type === "radio"){
const newState = {...state};
newState.radioGroup1.forEach((item, index, array) => array[index] = false);
newState.radioGroup1[Number(target.value)] = true;
setState(newState);
}
}
return (
<>
<h1>Form</h1>
<FormView data={state} handleChange={handleChange} />
</>
);
}
export default Form;
\ No newline at end of file
src/components/FormView.tsx 0 → 100644
View file @ 2c51748b
import React from "react";
import { IFormState } from "./Form";
interface IProps {
data: IFormState;
handleChange: (target:
EventTarget & HTMLInputElement |
EventTarget & HTMLSelectElement |
EventTarget & HTMLTextAreaElement) => void;
}
const FormView = (props: IProps) => (
<form>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input value={props.data.input} name="input" onChange={(e) => props.handleChange(e.target)} type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
</div>