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

first commit

Browse Source
This commit is contained in:
notnull 2019-03-23 09:42:01 -07:00
commit 269b39979d
24 changed files with 7561 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"
]
}

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

31
dist/bundle.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

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" type="text/css" 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 id="app"></div>
<script defer src="./bundle.js"></script>
</body>
</html>

7053
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
package.json Normal file
View File

@ -0,0 +1,32 @@
{
"name": "minimal-react-webpack-babel-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"test": "echo \"No test specified\" && exit 0"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/polyfill": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"react-hot-loader": "^4.8.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"axios": "^0.18.0",
"http-proxy-middleware": "^0.19.1",
"morgan": "^1.9.1",
"react": "^16.8.5",
"react-bootstrap": "^1.0.0-beta.6",
"react-dom": "^16.8.5"
}
}

34
server.js Normal file
View File

@ -0,0 +1,34 @@
const express = require('express')
const path = require('path')
const app = express()
const morgan = require('morgan')
const proxy = require('http-proxy-middleware')
const port = process.env.PORT || 3001
app.use(morgan('tiny'))
// body parsing middleware
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(require('body-parser').text())
app.use(express.static(path.join(__dirname, 'dist')))
//http://localhost:31337
app.use(proxy('/api', { target: 'http://localhost:1337' }))
// app.get('*', (req, res) => {
// res.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
// })
// error handling endware
app.use((err, req, res, next) => {
console.error(err)
console.error(err.stack)
res.status(err.status || 500).send(err.message || 'Internal server error.')
next()
})
app.listen(port, () => {
console.log(`Doin' haxor stuff on port ${port}`)
})

22
src/components/captions/CaptionList.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react'
const CaptionList = props => {
console.log('CAPTION LIST MOTHERFUCKER!!!!!', props)
const { handleClick, captions } = props
return (
<tbody>
{Object.keys(captions).map(key => {
return captions[key].map(caption => {
return (
<tr onClick={() => handleClick({ nick: caption.nick, text: caption.text })}>
<td>{caption.nick}</td>
<td>{caption.text}</td>
</tr>
)
})
})}
</tbody>
)
}
export default CaptionList

19
src/components/captions/Captions.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react'
import CaptionList from './CaptionList'
import Table from 'react-bootstrap/Table'
const Captions = props => {
const { handleClick, captions } = props
return (
<Table striped bordered hover>
<thead>
<tr>
<th>Episodes</th>
</tr>
</thead>
<CaptionList handleClick={handleClick} captions={captions} />
</Table>
)
}
export default Captions

1
src/components/captions/index.js Normal file
View File

@ -0,0 +1 @@
export { default as Captions } from './Captions'

17
src/components/episodes/EpisodeList.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react'
const EpisodeList = props => {
const { episodes, fetchEpisodeComments } = props
console.log('EPISODELIST', episodes)
return (
<tbody>
{episodes.map(episode => (
<tr onClick={() => fetchEpisodeComments(episode.slug)}>
<td>{episode.title}</td>
</tr>
))}
</tbody>
)
}
export default EpisodeList

20
src/components/episodes/Episodes.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react'
import EpisodeList from './EpisodeList'
import Table from 'react-bootstrap/Table'
const Episodes = props => {
const { episodes, fetchEpisodeComments } = props
console.log(props)
return (
<Table striped bordered hover>
<thead>
<tr>
<th>Episodes</th>
</tr>
</thead>
<EpisodeList fetchEpisodeComments={fetchEpisodeComments} episodes={episodes} />
</Table>
)
}
export default Episodes

1
src/components/episodes/index.js Normal file
View File

@ -0,0 +1 @@
export { default as Episodes } from './Episodes'

12
src/components/fetchEpisodes.js Normal file
View File

@ -0,0 +1,12 @@
import axios from 'axios'
const fetchEpisodes = async () => {
try {
const { data } = await axios.get('/api/v2/episodes')
return data
} catch (e) {
console.log(e)
}
}
export default fetchEpisodes

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

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

@ -0,0 +1,101 @@
import React, { Component } from 'react'
import axios from 'axios'
import { Episodes } from './episodes'
import { Captions } from './captions'
import fetchEpisodes from './fetchEpisodes'
import { Form, Button } from 'react-bootstrap'
class App extends Component {
constructor() {
super()
this.state = { savedComments: [], loading: true }
this.fetchEpisodeComments = this.fetchEpisodeComments.bind(this)
this.handleClick = this.handleClick.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
componentDidMount() {
this.fetchAPI()
}
async fetchAPI() {
try {
const { data } = await axios.get('/api')
const { ascii } = await data
await console.log(ascii)
const episodes = await fetchEpisodes()
await this.setState({ loading: false, episodes, ascii })
} catch (e) {
console.log(e)
}
}
async fetchEpisodeComments(slug) {
try {
const { data } = await axios.get(`/api/v2/episodes/${slug}`)
console.log(`FETCH COMMENTS FOR EPISODE ${data.slug}`, data.captions)
const captions = data.captions
this.setState({ loading: false, captions })
} catch (e) {
console.log(e)
}
}
handleClick(msg) {
const comments = this.state.savedComments.concat([msg])
this.setState({ savedComments: comments })
console.log(this.state.savedComments)
}
handleSubmit(e) {
e.preventDefault()
console.log(this.state.savedComments)
}
renderEpisodes() {
return (
<div className="mt-5">
<Episodes fetchEpisodeComments={this.fetchEpisodeComments} episodes={this.state.episodes} />
</div>
)
}
renderCaptions() {
return (
<div className="mt-5">
<div>
<Button
onClick={() => {
this.setState({ captions: null })
}}
>
Show Episodes
</Button>
</div>
<Form onSubmit={this.handleSubmit}>
<Form.Group controlId="formSavedComments">
<Form.Label>Saved Comments</Form.Label>
<Form.Control type="savedComments" placeholder="Saved Comments" />
<Form.Text className="text-muted">
{this.state.savedComments.map(comment => `${comment.text}\n`)}
</Form.Text>
</Form.Group>
<Captions handleClick={this.handleClick} captions={this.state.captions} />
</Form>
</div>
)
}
renderError() {
return <div>{this.state.error} </div>
}
render() {
console.log(this.state)
if (this.state.loading) return <div />
if (this.state.captions) return this.renderCaptions()
if (this.state.episodes) return this.renderEpisodes()
// if (this.state.error) return this.renderError()
else return <div />
}
}
export default App

31
src/components/items/Captions.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react'
import ItemList from './ItemList'
import Table from 'react-bootstrap/Table'
const Captions = props => {
const { captions } = props
return (
<Table striped bordered hover>
<thead>
<tr>
<th>TimeStamp</th>
<th>Nick</th>
<th>Message</th>
</tr>
</thead>
<tbody>
{captions.map(caption => {
return (
<tr>
<td>caption.timestamp</td>
<td>caption.nick</td>
<td>caption.message[0]</td>
</tr>
)
})}
</tbody>
</Table>
)
}
export default Captions

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, fetchEpisodeComments } = props
//console.log(items)
return (
<tbody>
{items.map(item => (
<ItemRow fetchEpisodeComments={fetchEpisodeComments} key={item.slug} {...item} />
))}
</tbody>
)
}
export default ItemList

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

@ -0,0 +1,16 @@
import React from 'react'
const ItemRow = props => {
const { fetchEpisodeComments, item } = props
return (
<tr>
<td>
<a onClick={fetchEpisodeComments} href={`/episode/${item.slug}`}>
{item.title}
</a>
</td>
</tr>
)
}
export default ItemRow

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

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

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

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

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

@ -0,0 +1,32 @@
import React from 'react'
import { Navbar, Nav, NavDropdown, FormControl, Form, Button } from 'react-bootstrap'
import fetchEpisodes from './fetchEpisodes'
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="#" onClick={fetchEpisodes}>
Episodes
</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

16
src/index.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import ReactDOM from 'react-dom'
import Main from './components'
import Navbar from './components/navbar'
import Footer from './components/footer'
ReactDOM.render(
<div>
<Navbar />
<Main />
<Footer />
</div>,
document.getElementById('app'),
)
module.hot.accept()

37
webpack.config.js Normal file
View File

@ -0,0 +1,37 @@
const webpack = require('webpack')
module.exports = {
entry: ['@babel/polyfill', './src/index.js'],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: './dist',
hot: true,
port: 3001,
allowedHosts: [
'localhost',
'irc.anarchyplanet.org',
'services.anarchyplanet.org',
'gam4soeb3t5f56fs.onion',
],
proxy: {
'/api': 'http://localhost:31337',
},
},
}