secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Figuring out structure

Browse Source
This commit is contained in:
James Barnsley
2016-10-03 15:22:15 +13:00
parent a414888b2a
commit e0307f69e6
23 changed files with 41 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/about/index.js
View File

@ -1,8 +0,0 @@
import React from 'react'
export default React.createClass({
render() {
return <div>About</div>
}
})

32
src/actions.js
View File

@ -1,32 +0,0 @@
/**
* Actions and Action Creators
**/
export const TOGGLE_DONE = 'TOGGLE_DONE'
export const ADD_TODO = 'ADD_TODO'
export const SET_ALBUM = 'SET_ALBUM'
export function toggleDone( id ){
return {
type: TOGGLE_DONE,
id: id
}
}
export function addTodo( title ){
return {
type: ADD_TODO,
id: title,
title: title
}
}
export function setAlbum( album ){
return {
type: SET_ALBUM,
album: album
}
}

0
src/common/actions.js → src/actions/albumActions.js
View File

3
src/actions/index.js Executable file
View File

@ -0,0 +1,3 @@
import albumActions from './albumActions'

0
src/actions/queueActions.js Executable file
View File

17
src/bootstrap.js vendored Executable file
View File

@ -0,0 +1,17 @@
console.info('Bootstrapping...');
import { createStore } from 'redux'
import reducer from './reducers/index'
import Services from './services/Services'
// start all our services
Promise.all(Services.setup())
.then(() => {
console.info('Services started...');
});
// create our global store
let store = createStore( reducer, {} );
export default store;

8
src/common/Album.js → src/components/Album.js
View File

@ -3,8 +3,8 @@ import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Tracklist from '../common/Tracklist'
import * as actions from './actions'
import TrackList from './TrackList'
import * as albumActions from '../actions/albumActions'
class Album extends React.Component{
@ -47,7 +47,7 @@ class Album extends React.Component{
<div>
<h3>{ this.state.album.name }</h3>
<h3>{ this.state.album.label }</h3>
<Tracklist tracks={this.state.album.tracks.items} />
<TrackList tracks={this.state.album.tracks.items} />
</div>
);
}
@ -77,7 +77,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
albumActions: bindActionCreators(albumActions, dispatch)
}
}

6
src/App.js → src/components/App.js
View File

@ -5,8 +5,8 @@ import { createStore, bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import * as actions from './actions'
import Services from './services/Services'
import * as actions from '../actions/index'
import Services from '../services/Services'
/**
@ -49,7 +49,7 @@ class App extends React.Component{
return (
<div>
<ul role="nav">
<li><Link to="/now-playing">Now playing</Link></li>
<li><Link to="/queue">Now playing</Link></li>
<li><Link to="/album/6N51k5TP5pSZYPf7bLffLe">808's and Heartbreak</Link></li>
<li><Link to="/album/1PgfRdl3lPyACfUGH4pquG">A million</Link></li>
<li><Link to="/library/albums">Library: Albums</Link></li>

8
src/routes/NowPlaying.js → src/components/Queue.js
View File

@ -4,8 +4,8 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Services from '../services/Services'
import Tracklist from '../common/Tracklist'
import * as actions from '../actions'
import TrackList from '../components/TrackList'
import * as queueActions from '../actions/queueActions'
class NowPlaying extends React.Component{
@ -31,7 +31,7 @@ class NowPlaying extends React.Component{
renderTracks(){
if( this.state.tracks ){
return (
<Tracklist tracks={this.state.tracks} />
<TrackList tracks={this.state.tracks} />
);
}
return null;
@ -60,7 +60,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
queueActions: bindActionCreators(queueActions, dispatch)
}
}

0
src/common/Tracklist.js → src/components/TrackList.js
View File

37
src/config/Mopidy.js
View File

@ -1,37 +0,0 @@
import React, { PropTypes } from 'react'
import * as actions from './actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
class Mopidy extends React.Component{
constructor(props){
super(props);
let self = this;
console.log('Mopidy > constructor')
}
render(){
return null
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Mopidy)

79
src/config/Spotify.js
View File

@ -1,79 +0,0 @@
import React, { PropTypes } from 'react'
import * as actions from './actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
class Spotify extends React.Component{
constructor(props){
super(props);
let self = this;
this.urlBase = 'https://api.spotify.com/v1/';
console.log('SpotifyProvider > constructor')
// listen for incoming messages from the authorization iframe
// this is triggered when authentication is granted from the popup
window.addEventListener('message', function(event){
if( !/^https?:\/\/jamesbarnsley\.co\.nz/.test(event.origin) ) return false;
self.handleMessage( event );
}, false);
}
handleMessage( event ){
// convert to json
var data = JSON.parse(event.data);
// fire event
this.props.actions.authorizeSpotifySuccess( data );
}
test(){
console.log('test stuff');
}
getAlbum( albumid ){
return $.when(
$.ajax({
method: 'GET',
cache: true,
url: this.urlBase+'albums/'+albumid
})
);
}
render(){
if( this.props.config.authorizingSpotify ){
var src = '//jamesbarnsley.co.nz/spotmop.php?action=authorize&app='+location.protocol+'//'+window.location.host;
return (
<div>
Authorizing...
<iframe id="authorization-frame" src={src}></iframe>
</div>
);
}
return null
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Spotify)

21
src/config/actions.js
View File

@ -1,21 +0,0 @@
/**
* Actions and Action Creators
**/
export const AUTHORIZE_SPOTIFY = 'AUTHORIZE_SPOTIFY'
export const AUTHORIZE_SPOTIFY_SUCCESS = 'AUTHORIZE_SPOTIFY_SUCCESS'
export function authorizeSpotify( authorize = true ){
return {
type: AUTHORIZE_SPOTIFY,
authorize: authorize
}
}
export function authorizeSpotifySuccess( authorization ){
return {
type: AUTHORIZE_SPOTIFY_SUCCESS,
authorization: authorization
}
}

24
src/config/reducer.js
View File

@ -1,24 +0,0 @@
import * as actions from './actions'
export default function config(config = {}, action){
switch (action.type) {
case actions.AUTHORIZE_SPOTIFY:
return Object.assign({}, config, {
authorizingSpotify: action.authorize
});
case actions.AUTHORIZE_SPOTIFY_SUCCESS:
console.info('Spotify authorization successful');
var config = Object.assign({}, config, action.authorization)
config = Object.assign({}, config, { authorizingSpotify: false })
return config
default:
return config
}
}

2
src/index.html
View File

@ -4,7 +4,7 @@
<title>Testing React and Redux</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta base-href="/alto/production" />
<meta base-href="/iris/production" />
</head>
<body>

15
src/index.js
View File

@ -10,12 +10,11 @@ import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { Router, Route, Link, hashHistory } from 'react-router'
import reducer from './reducer'
import App from './App'
import LibraryAlbums from './library/LibraryAlbums'
import Album from './common/Album'
import NowPlaying from './routes/NowPlaying'
import store from './bootstrap.js'
import App from './components/App'
import Album from './components/Album'
import Queue from './components/Queue'
import Services from './services/Services'
@ -38,14 +37,12 @@ Promise.all(Services.setup())
**/
ReactDOM.render(
<Provider store={ createStore( reducer, { todos: [] } ) }>
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="album/:id" component={Album} />
<Route path="library/albums" component={LibraryAlbums} />
<Route path="now-playing" component={NowPlaying} />
<Route path="queue" component={Queue} />
</Route>
</Router>

68
src/library/LibraryAlbums.js
View File

@ -1,68 +0,0 @@
import React, { PropTypes } from 'react'
import * as actions from './actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
class LibraryAlbums extends React.Component{
constructor(props) {
super(props);
this.state = {
albums: []
};
}
// on load of this component
componentDidMount(){
var url = 'http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=4320a3ef51c9b3d69de552ac083c55e3&artist=Cher&album=Believe&format=json';
//var url = 'https://pixabay.com/api/?key=3190651-5f431f6c829ace6d75ff07701&q=yellow+flowers&image_type=photo&pretty=true';
var self = this;
// url (required), options (optional)
fetch(url, {
method: 'get'
}).then(function(response) {
return response.json();
}).then(function( json ) {
self.setState({ albums: json.hits });
}).catch(function(err) {
console.error( err );
});
}
render() {
return (
<div>
<h3>Library album</h3>
{
this.state.albums.map(album =>
<h4 key={album.webformatURL}>{ album.webformatURL }</h4>
)
}
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LibraryAlbums)

12
src/library/actions.js
View File

@ -1,12 +0,0 @@
/**
* Actions and Action Creators
**/
export const LOAD_ALBUMS = 'LOAD_ALBUMS'
export function loadAlbums(){
return {
type: LOAD_ALBUMS
}
}

16
src/library/reducer.js
View File

@ -1,16 +0,0 @@
import * as actions from './actions'
export default function album(album = {}, action) {
switch (action.type) {
case actions.SET_ALBUM:
return Object.assign({}, album, action.album);
default:
return album
}
}

2
src/common/reducer.js → src/reducers/album.js
View File

@ -1,5 +1,5 @@
import * as actions from './actions'
import * as actions from '../actions/albumActions'
export default function album(album = {}, action) {
switch (action.type) {

6
src/reducer.js → src/reducers/index.js
View File

@ -6,15 +6,13 @@
**/
// import all of our application reducers
import todos from './todos/reducer'
import config from './config/reducer'
import album from './album'
import { combineReducers } from 'redux'
// combine them into one root reducer
export default combineReducers({
todos,
config
album
})

158
src/todos/index.js
View File

@ -1,158 +0,0 @@
import React, { PropTypes } from 'react'
import * as actions from '../actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
class Todos extends React.Component{
constructor(props) {
super(props);
}
// on load of this component
componentDidMount(){
this.props.actions.load();
}
render(){
return (
<Todos_View todos={this.props.todos} actions={this.props.actions} />
);
}
}
/**
* The Todo's presenter, or view
*
* Any UI and UX display occurs here, and is passed back to it's brain through props
* This allows for reuse of the brain for different contexts without duplicating functionality
**/
class Todos_View extends React.Component{
constructor(props) {
super(props);
}
render(){
return (
<div>
<ul className="todos">
{
this.props.todos.map(todo =>
<TodoItem todo={todo} key={todo.id} actions={this.props.actions} />
)
}
</ul>
<AddTodoForm actions={this.props.actions} />
</div>
);
}
}
/**
* The Todo item
**/
class TodoItem extends React.Component{
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.props.actions.toggleDone(this.props.todo.id);
this.props.actions.save();
}
render(){
var style = {};
if( this.props.todo.completed ) style.textDecoration = 'line-through';
return <li onClick={this.handleClick} style={style}>{ this.props.todo.title }</li>;
}
}
/**
* The Todo item
**/
class AddTodoForm extends React.Component{
constructor(props) {
super(props);
this.state = {
title: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(){
this.props.actions.addTodo( this.state.title );
this.props.actions.save();
this.setState({ title: '' });
}
handleChange( newTitle ){
this.setState({ title: newTitle });
}
render(){
return <AddTodoForm_View title={this.state.title} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
}
}
class AddTodoForm_View extends React.Component{
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange( event ){
this.props.handleChange( event.target.value );
}
handleSubmit( event ){
event.preventDefault();
this.props.handleSubmit();
}
render(){
return (
<form onSubmit={ this.handleSubmit }>
<input type="text" value={ this.props.title } onChange={this.handleChange} />
<input type="submit" value="Add" />
</form>
);
}
}
/*
Todos.propTypes = {
todos: React.PropTypes.array.isRequired
};
*/
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Todos)

38
src/todos/reducer.js
View File

@ -1,38 +0,0 @@
import * as actions from '../actions'
export default function todos(todos = [], action){
switch( action.type ){
case actions.LOAD:
if( localStorage.getItem( 'todos' ) ){
return JSON.parse( localStorage.getItem( 'todos' ) );
}
return [];
case actions.SAVE:
localStorage.setItem( 'todos', JSON.stringify(todos) );
return todos;
case actions.ADD_TODO:
return Object.assign([], todos, [...todos, { id: action.id, title: action.title, completed: false }] )
case actions.TOGGLE_DONE:
return Object.assign([], todos,
todos.map(todo => {
if( todo.id === action.id ){
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
);
default:
return todos
}
}