notnull/client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new

Browse Source
This commit is contained in:
notnull 2019-03-22 15:10:10 -04:00
commit 9f4cf669de
20 changed files with 8500 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.babelrc Normal file
View File

@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

21
.eslintrc Normal file
View File

@ -0,0 +1,21 @@
{
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true,
"mocha": true
},
"rules": {
"quotes": [1, "single"],
"no-unused-vars": [1],
"no-use-before-define": [2, "nofunc"],
"indent": [1, 2],
"semi": [1, "never"],
"no-console": 0,
"no-irregular-whitespace": 0,
"react/prop-types": 0
}
}

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
node_modules
bundle.js
.git

0
README.md Normal file
View File

16
dist/css/style.css vendored Normal file
View File

@ -0,0 +1,16 @@
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}

26
dist/index.html vendored Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="fire.png" />
<meta name="viewport" content="width=device-width initial-scale=1.0" />
<title>Anarchy Planet</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
</head>
<body>
<div className="container" id="app"></div>
<script defer src="/bundle.js"></script>
</body>
</html>

4
index.js Normal file
View File

@ -0,0 +1,4 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './src'
ReactDOM.render(<App />, document.getElementById('app'))

8153
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.dev.js",
"build": "webpack --config ./webpack.config.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.3",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"eslint": "^5.14.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-react": "^7.12.4",
"http-proxy-middleware": "^0.19.1",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0"
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.8.2",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.2"
}
}

13
src/components/footer.js Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
const Footer = () => {
return (
<footer className="text-center footer">
<div className="container-fluid">
<h6 className="mt-3">&#9398; anarchy planet</h6>
</div>
</footer>
)
}
export default Footer

3
src/components/index.js Normal file
View File

@ -0,0 +1,3 @@
export { default as Navbar } from './navbar'
export { default as Footer } from './footer'
export { default as Main } from './main'

15
src/components/items/ItemList.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react'
import ItemRow from './ItemRow'
const ItemList = props => {
const { items } = props
console.log(items)
return (
<tbody>
{items.map(item => (
<ItemRow key={item.id} {...item} />
))}
</tbody>
)
}
export default ItemList

12
src/components/items/ItemRow.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
const ItemRow = item => {
return (
<tr>
<th>{item.id}</th>
<td>{item.name}</td>
</tr>
)
}
export default ItemRow

20
src/components/items/Items.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import ItemList from './ItemList'
import Table from 'react-bootstrap/Table'
const Items = props => {
const { items } = props
return (
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Item</th>
</tr>
</thead>
<ItemList items={items} />
</Table>
)
}
export default Items

3
src/components/items/index.js Normal file
View File

@ -0,0 +1,3 @@
export { default as Items } from './Items'
export { default as ItemList } from './ItemList'
export { default as ItemRow } from './ItemRow'

53
src/components/main.js Normal file
View File

@ -0,0 +1,53 @@
import React, { Component } from 'react'
import axios from 'axios'
import { Items } from './items'
class Main extends Component {
constructor() {
super()
this.state = { loading: true }
}
componentDidMount() {
this.fetchAPI()
}
async fetchAPI() {
try {
const { data } = await axios.get('/api')
const { ascii } = await data
await console.log(ascii)
await this.fetchItems()
await this.setState({ ascii })
} catch (e) {
console.log(e)
}
}
async fetchItems() {
try {
const { data } = await axios.get('/api/items')
this.setState({ loading: false, items: data })
} catch (e) {
console.log(e)
}
}
renderData() {
return (
<div className="mt-5">
<Items {...this.state} />
</div>
)
}
renderError() {
return <div>{this.state.error} </div>
}
render() {
if (this.state.loading) return <div />
if (this.state.items) return this.renderData()
if (this.state.error) return this.renderError()
return <div />
}
}
export default Main

41
src/components/navbar.js Normal file
View File

@ -0,0 +1,41 @@
import React from 'react'
import {
Navbar,
Nav,
NavDropdown,
FormControl,
Form,
Button
} from 'react-bootstrap'
const MainNav = () => {
return (
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#home">Anarchy Planet</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
)
}
export default MainNav

12
src/index.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { Navbar, Footer, Main } from './components'
ReactDOM.render(
<div>
<Navbar />
<Main />
<Footer />
</div>,
document.getElementById('app')
)

32
webpack.config.dev.js Normal file
View File

@ -0,0 +1,32 @@
module.exports = {
entry: { app: ['@babel/polyfill', './src/index.js'] },
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
port: 8080,
open: true,
proxy: {
'/api': 'http://localhost:1337'
}
}
}

32
webpack.config.prod.js Normal file
View File

@ -0,0 +1,32 @@
module.exports = {
entry: { app: ['@babel/polyfill', './src/index.js'] },
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
port: 8080,
open: true,
proxy: {
'/api': 'http://localhost:1337'
}
}
}