restructured
This commit is contained in:
parent
0b4d36909b
commit
133cac478e
4
dist/index.html
vendored
4
dist/index.html
vendored
@ -6,7 +6,7 @@
|
||||
<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" type="text/css" href="css/style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
|
||||
@ -21,6 +21,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div className="container" id="app"></div>
|
||||
<script defer src="/bundle.js"></script>
|
||||
<script defer src="./bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1152
package-lock.json
generated
1152
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -4,8 +4,9 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --config ./webpack.config.dev.js",
|
||||
"build": "webpack --config ./webpack.config.prod.js",
|
||||
"start": "webpack-dev-server --open --config webpack.dev.js",
|
||||
"prod": "",
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
@ -18,13 +19,18 @@
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-loader": "^8.0.5",
|
||||
"clean-webpack-plugin": "^2.0.1",
|
||||
"css-loader": "^2.1.1",
|
||||
"eslint": "^5.14.1",
|
||||
"eslint-loader": "^2.1.2",
|
||||
"eslint-plugin-react": "^7.12.4",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"http-proxy-middleware": "^0.19.1",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^4.29.5",
|
||||
"webpack-cli": "^3.2.3",
|
||||
"webpack-dev-server": "^3.2.0"
|
||||
"webpack-dev-server": "^3.2.1",
|
||||
"webpack-merge": "^4.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
|
||||
@ -1,3 +1,53 @@
|
||||
export { default as Navbar } from './navbar'
|
||||
export { default as Footer } from './footer'
|
||||
export { default as Main } from './main'
|
||||
import React, { Component } from 'react'
|
||||
import axios from 'axios'
|
||||
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
|
||||
|
||||
@ -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
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react'
|
||||
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(
|
||||
<div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user