diff options
| -rw-r--r-- | package-lock.json | 37 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/Header.js | 15 | ||||
| -rw-r--r-- | src/components/Header/Header.js | 42 | ||||
| -rw-r--r-- | src/index.js | 30 | ||||
| -rw-r--r-- | src/requests.js | 17 |
6 files changed, 117 insertions, 25 deletions
diff --git a/package-lock.json b/package-lock.json index 52d8d03..647c38b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2218,6 +2218,43 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.0.tgz", "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==" }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "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" + } + }, + "is-buffer": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.1.tgz", diff --git a/package.json b/package.json index d816b05..185f490 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", + "axios": "^0.19.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.3.0", diff --git a/src/components/Header.js b/src/components/Header.js deleted file mode 100644 index 47da527..0000000 --- a/src/components/Header.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -const Header = () => ( - <div> - <span> ChronoCube </span> - <ul> - <li> Home </li> - <li> App </li> - <li> Scoreboard </li> - <li> News </li> - </ul> - </div> -); - -export default Header; diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..9bfe5c4 --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,42 @@ +import React from "react"; +import { + AppBar, + Tabs, + Tab, + Typography +} from "@material-ui/core"; +import styled from 'styled-components'; + +const Header = ({ setPage }) => { + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + return ( + <AppBar position="static"> + <TabsWrapper onChange={handleChange}> + <Typography variant="h4" id="logo"> ChronoCube </Typography> + <Tab label="App" value="app"/> + <Tab label="Profile" value="profile"/> + <Tab label="Scoreboard" value="scoreboard"/> + <Tab label="News" value="news"/> + </TabsWrapper> + </AppBar> + ); +}; + +const TabsWrapper = styled(Tabs)` + border-bottom: 1px solid black; + & .MuiTab-wrapper { + padding: 10px; + } + & .MuiTypography-root { + font-weight: bold; + padding: 10px; + margin-right: 50px; + margin-left: 30px; + } +`; + +export default Header; diff --git a/src/index.js b/src/index.js index 512d416..5c657f9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,22 +1,32 @@ -import React from 'react'; +import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import styled from 'styled-components'; import CssBaseline from '@material-ui/core/CssBaseline' -import Header from "./components/Header"; +import Header from './components/Header/Header'; -const App = () => ( - <Root> - <CssBaseline/> - <Header/> - <p> Page content here </p> - </Root> -); +const App = () => { + + const [page, setPage] = useState('app'); + + return ( + <Root> + <CssBaseline/> + <Header setPage={setPage} /> + <h1> This is the {page} page! </h1> + <p> + This text is rendered outside of <code>Header</code> component, but + interacting with <code>Header</code> can influence content of this page! + </p> + </Root> + ); +}; const Root = styled.div` - background: lightgrey; + background: cornsilk; + padding-bottom: 25px; `; diff --git a/src/requests.js b/src/requests.js new file mode 100644 index 0000000..91eaf65 --- /dev/null +++ b/src/requests.js @@ -0,0 +1,17 @@ +import axios from 'axios' + +const baseUrl = 'http://localhost:8000/'; +const baseApiUrl = baseUrl + 'api/'; + +export const get = (url) => { + return axios.get( + baseApiUrl + url, + ); +}; + +export const post = (url, data) => { + return axios.post( + baseApiUrl + url, + data + ); +}; |