Set up react-router, bring out Home
This commit is contained in:
parent
1bf5dd182c
commit
381a5c99f3
|
@ -8,6 +8,7 @@
|
|||
"@testing-library/user-event": "^7.1.2",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.3.0",
|
||||
"semantic-ui-react": "^0.88.2"
|
||||
},
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
|
||||
import './light.css';
|
||||
import Logo from './logo.svg';
|
||||
import { Container, Divider, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import { requester } from './utils.js';
|
||||
|
||||
function LoginForm(props) {
|
||||
|
@ -53,7 +54,7 @@ function LoginForm(props) {
|
|||
</Form.Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function SignupForm(props) {
|
||||
const [input, setInput] = useState({});
|
||||
|
@ -160,7 +161,7 @@ function SignupForm(props) {
|
|||
</Form.Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function DetailsForm(props) {
|
||||
const member = props.user.member;
|
||||
|
@ -233,7 +234,7 @@ function DetailsForm(props) {
|
|||
</Form.Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function MemberInfo(props) {
|
||||
const user = props.user;
|
||||
|
@ -311,72 +312,15 @@ function MemberInfo(props) {
|
|||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [token, setToken] = useState(localStorage.getItem('token', ''));
|
||||
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
|
||||
|
||||
const setTokenCache = (x) => {
|
||||
setToken(x);
|
||||
localStorage.setItem('token', x);
|
||||
}
|
||||
|
||||
const setUserCache = (x) => {
|
||||
setUser(x);
|
||||
localStorage.setItem('user', JSON.stringify(x));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
requester('/me/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setUserCache(res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setUser(false);
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
const logout = () => {
|
||||
setTokenCache('');
|
||||
setUserCache(false);
|
||||
}
|
||||
|
||||
const menuName = user && user.member && user.member.preferred_name || 'Me';
|
||||
function Home(props) {
|
||||
const token = props.token;
|
||||
const setTokenCache = props.setTokenCache;
|
||||
const user = props.user;
|
||||
const setUserCache = props.setUserCache;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container>
|
||||
<div className='header'>
|
||||
<img src={Logo} className='logo' />
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<Menu>
|
||||
<Container>
|
||||
<Menu.Item
|
||||
content='Home'
|
||||
/>
|
||||
<Menu.Item
|
||||
content={menuName}
|
||||
/>
|
||||
<Menu.Item
|
||||
content='Space'
|
||||
/>
|
||||
|
||||
{user && <Menu.Menu position='right'>
|
||||
<Menu.Item
|
||||
content='Logout'
|
||||
onClick={logout}
|
||||
icon='cancel'
|
||||
/>
|
||||
<Menu.Item fitted content='' />
|
||||
</Menu.Menu>}
|
||||
</Container>
|
||||
</Menu>
|
||||
|
||||
<Container>
|
||||
<Grid stackable padded columns={2}>
|
||||
<Grid.Column>
|
||||
|
@ -419,8 +363,98 @@ function App() {
|
|||
</Grid.Column>
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [token, setToken] = useState(localStorage.getItem('token', ''));
|
||||
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
|
||||
|
||||
const setTokenCache = (x) => {
|
||||
setToken(x);
|
||||
localStorage.setItem('token', x);
|
||||
}
|
||||
|
||||
const setUserCache = (x) => {
|
||||
setUser(x);
|
||||
localStorage.setItem('user', JSON.stringify(x));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
requester('/me/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setUserCache(res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setUser(false);
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
const logout = () => {
|
||||
setTokenCache('');
|
||||
setUserCache(false);
|
||||
}
|
||||
|
||||
let menuName = user && user.member && user.member.preferred_name || 'Profile';
|
||||
menuName = menuName.length > 7 ? 'Profile' : menuName;
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Container>
|
||||
<div className='header'>
|
||||
<img src={Logo} className='logo' />
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
<Menu>
|
||||
<Container>
|
||||
<Menu.Item
|
||||
content='Home'
|
||||
as={Link}
|
||||
to='/'
|
||||
/>
|
||||
|
||||
<Dropdown item text={menuName} id='ps-menu'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
content='Transactions'
|
||||
/>
|
||||
<Dropdown.Item
|
||||
content='Cards'
|
||||
/>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown item text='Space' id='ps-menu'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item
|
||||
content='Members'
|
||||
/>
|
||||
<Dropdown.Item
|
||||
content='Courses'
|
||||
/>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
{user && <Menu.Menu position='right'>
|
||||
<Menu.Item
|
||||
content='Logout'
|
||||
onClick={logout}
|
||||
icon='cancel'
|
||||
/>
|
||||
<Menu.Item fitted content='' />
|
||||
</Menu.Menu>}
|
||||
</Container>
|
||||
</Menu>
|
||||
|
||||
<Route exact path='/'>
|
||||
<Home token={token} setTokenCache={setTokenCache} user={user} setUserCache={setUserCache} />
|
||||
</Route>
|
||||
|
||||
</Router>
|
||||
)
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
html, body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
@ -9,3 +13,11 @@
|
|||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#ps-menu .menu .item {
|
||||
padding: 1.25rem 1rem !important;
|
||||
}
|
||||
|
||||
#ps-menu .dropdown.icon {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -828,7 +828,7 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.2"
|
||||
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6":
|
||||
version "7.7.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
|
||||
integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
|
||||
|
@ -4755,6 +4755,18 @@ hex-color-regex@^1.1.0:
|
|||
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
|
||||
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
|
||||
|
||||
history@^4.9.0:
|
||||
version "4.10.1"
|
||||
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
|
||||
integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
|
||||
dependencies:
|
||||
"@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@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
|
@ -4764,6 +4776,13 @@ hmac-drbg@^1.0.0:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.1.0:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
|
||||
integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
|
||||
dependencies:
|
||||
react-is "^16.7.0"
|
||||
|
||||
hosted-git-info@^2.1.4:
|
||||
version "2.8.5"
|
||||
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
|
||||
|
@ -5414,6 +5433,11 @@ is-wsl@^2.1.0:
|
|||
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
|
||||
integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
|
||||
|
||||
isarray@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
|
||||
integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
|
||||
|
||||
isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
|
||||
|
@ -6254,7 +6278,7 @@ loglevel@^1.6.4:
|
|||
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
|
||||
integrity sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==
|
||||
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
|
@ -6461,6 +6485,15 @@ min-indent@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
|
||||
integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
|
||||
|
||||
mini-create-react-context@^0.3.0:
|
||||
version "0.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
|
||||
integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.4.0"
|
||||
gud "^1.0.0"
|
||||
tiny-warning "^1.0.2"
|
||||
|
||||
mini-css-extract-plugin@0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
|
||||
|
@ -7338,6 +7371,13 @@ path-to-regexp@0.1.7:
|
|||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
|
||||
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
|
||||
|
||||
path-to-regexp@^1.7.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
|
||||
integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
|
||||
dependencies:
|
||||
isarray "0.0.1"
|
||||
|
||||
path-type@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
|
||||
|
@ -8429,7 +8469,7 @@ react-error-overlay@^6.0.4:
|
|||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
|
||||
integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
|
||||
|
||||
react-is@^16.6.3, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
|
||||
react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
|
||||
version "16.12.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
|
||||
integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
|
||||
|
@ -8447,6 +8487,35 @@ react-popper@^1.3.4:
|
|||
typed-styles "^0.0.7"
|
||||
warning "^4.0.2"
|
||||
|
||||
react-router-dom@^5.1.2:
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
|
||||
integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
history "^4.9.0"
|
||||
loose-envify "^1.3.1"
|
||||
prop-types "^15.6.2"
|
||||
react-router "5.1.2"
|
||||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router@5.1.2:
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
|
||||
integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
|
||||
dependencies:
|
||||
"@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.3.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"
|
||||
|
||||
react-scripts@3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.3.0.tgz#f26a21f208f20bd04770f43e50b5bbc151920c2a"
|
||||
|
@ -8796,6 +8865,11 @@ resolve-from@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
|
||||
integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
|
||||
|
||||
resolve-pathname@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
|
||||
integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
|
||||
|
||||
resolve-url-loader@3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.1.tgz#28931895fa1eab9be0647d3b2958c100ae3c0bf0"
|
||||
|
@ -9823,6 +9897,16 @@ timsort@^0.3.0:
|
|||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
tiny-invariant@^1.0.2:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
|
||||
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
|
||||
|
||||
tiny-warning@^1.0.0, tiny-warning@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||
|
||||
tmp@^0.0.33:
|
||||
version "0.0.33"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
|
||||
|
@ -10175,6 +10259,11 @@ validate-npm-package-license@^3.0.1:
|
|||
spdx-correct "^3.0.0"
|
||||
spdx-expression-parse "^3.0.0"
|
||||
|
||||
value-equal@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
|
||||
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
|
||||
|
||||
vary@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
|
|
Loading…
Reference in New Issue
Block a user