restructured

This commit is contained in:
notnull 2019-03-22 18:00:27 -04:00
parent 0b4d36909b
commit 133cac478e
6 changed files with 629 additions and 652 deletions

4
dist/index.html vendored
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width initial-scale=1.0" /> <meta name="viewport" content="width=device-width initial-scale=1.0" />
<title>Anarchy Planet</title> <title>Anarchy Planet</title>
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
@ -21,6 +21,6 @@
</head> </head>
<body> <body>
<div className="container" id="app"></div> <div className="container" id="app"></div>
<script defer src="/bundle.js"></script> <script defer src="./bundle.js"></script>
</body> </body>
</html> </html>

1152
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,8 +4,9 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "webpack-dev-server --config ./webpack.config.dev.js", "start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config ./webpack.config.prod.js", "prod": "",
"build": "webpack --config webpack.prod.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"keywords": [], "keywords": [],
@ -18,13 +19,18 @@
"@babel/preset-react": "^7.0.0", "@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5", "babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"eslint": "^5.14.1", "eslint": "^5.14.1",
"eslint-loader": "^2.1.2", "eslint-loader": "^2.1.2",
"eslint-plugin-react": "^7.12.4", "eslint-plugin-react": "^7.12.4",
"html-webpack-plugin": "^3.2.0",
"http-proxy-middleware": "^0.19.1", "http-proxy-middleware": "^0.19.1",
"style-loader": "^0.23.1",
"webpack": "^4.29.5", "webpack": "^4.29.5",
"webpack-cli": "^3.2.3", "webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.0" "webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1"
}, },
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",

View File

@ -1,3 +1,53 @@
export { default as Navbar } from './navbar' import React, { Component } from 'react'
export { default as Footer } from './footer' import axios from 'axios'
export { default as Main } from './main' import { Items } from './items'
class App 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 App

View File

@ -1,53 +0,0 @@
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

View File

@ -1,6 +1,8 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { Navbar, Footer, Main } from './components' import Main from './components'
import Navbar from './components/navbar'
import Footer from './components/footer'
ReactDOM.render( ReactDOM.render(
<div> <div>