merge eva repos into single repository

frontend/src/App.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+  BrowserRouter as Router,
+  Route
+} from 'react-router-dom';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import { Provider } from 'react-redux';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import theme from './style/theme';
+import store from './redux/store';
+import IndexContainer from './views/Index';
+import SpaceList from './views/SpaceList';
+import UrlListView from './views/UrlListView';
+import layout from './layout';
+
+injectTapEventPlugin();
+
+const App = () => (
+  <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
+    <Provider store={store}>
+      <Router>
+        <div>
+          <Route path="/list" component={layout(<SpaceList />)} />
+          <Route path="/urls" component={layout(<UrlListView />)} />
+          <Route exact path="/" component={layout(<IndexContainer />)} />
+        </div>
+      </Router>
+    </Provider>
+  </MuiThemeProvider>
+);
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});

frontend/src/api/config.js

@@ -0,0 +1,5 @@
+export default {
+  api: {
+    url: '/api',
+  },
+};

frontend/src/components/EventList.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Table, TableBody, TableRow, TableRowColumn }
+  from 'material-ui/Table';
+import InfoIcon from 'material-ui/svg-icons/action/info-outline';
+import { actions as calendarActions, eventStruct } from '../redux/modules/calendar';
+import { spacedataStruct } from '../redux/modules/spacedata';
+
+const mapStateToProps = state => ({
+  events: state.calendars.items,
+  spacedata: state.spacedata,
+});
+
+class EventList extends React.Component {
+  static propTypes = {
+    events: React.PropTypes.arrayOf(
+      React.PropTypes.shape(eventStruct),
+    ),
+    fetchCalendars: React.PropTypes.func,
+    spacedata: spacedataStruct,
+  };
+
+  defaultProps = {
+    events: [],
+  };
+
+  componentWillMount() {
+    this.props.fetchCalendars();
+  }
+
+  formatDate = date => (date.format('DD.MM.YYYY'));
+  formatTime = date => (date.format('HH:mm'));
+
+  render() {
+    return (
+      <Table
+        selectable
+        multiSelectable
+      >
+        <TableBody
+          showRowHover
+          stripedRows
+          displayRowCheckbox={false}
+        >
+          {this.props.events
+            .filter(event =>
+              (
+                this.props.spacedata.filter.indexOf(event.space) !== -1
+                || this.props.spacedata.filter.length === 0
+              )
+            )
+            .map(event => (
+              <TableRow
+                key={event.importId + event.start.toLocaleString() + event.description}
+              >
+                <TableRowColumn style={{ width: '80px', padding: '5px' }}>
+                  {this.formatDate(event.start)}
+                </TableRowColumn>
+                <TableRowColumn style={{ width: '55px', padding: '5px' }}>
+                  {event.wholeDayEvent ? null : this.formatTime(event.start)}
+                </TableRowColumn>
+                <TableRowColumn>
+                  {event.summary || event.description}
+                </TableRowColumn>
+                <TableRowColumn>
+                  {event.space}
+                </TableRowColumn>
+                <TableRowColumn style={{ textAlign: 'right' }}>
+                  {event.url && <a href={event.url}>
+                    <InfoIcon style={{ cursor: 'pointer' }} />
+                  </a>}
+                </TableRowColumn>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    );
+  }
+}
+
+export default connect(mapStateToProps, {
+  ...calendarActions,
+})(EventList);

frontend/src/components/Map.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Map as LeafletMap, TileLayer } from 'react-leaflet';
+import { connect } from 'react-redux';
+import Marker from './Marker';
+import { actions as spaceDataActions, spacedataStruct } from '../redux/modules/spacedata';
+
+const mapStateToProps = state => ({
+  spacedata: state.spacedata,
+});
+
+const mapDispatchToProps = {
+  ...spaceDataActions,
+};
+
+class Map extends React.Component {
+  static propTypes = {
+    spacedata: spacedataStruct.isRequired,
+    fetchSpacedata: React.PropTypes.func.isRequired,
+    toggleFilterSpacedata: React.PropTypes.func.isRequired,
+  };
+
+  componentWillMount() {
+    this.props.fetchSpacedata();
+  }
+
+  render() {
+    const centerGermany = [51.163375, 10.447683];
+    return (
+      <LeafletMap
+        center={centerGermany}
+        zoom={5}
+        style={{ width: '100vw', height: '50vh', margin: 0, padding: 0, maxWidth: '100%' }}
+      >
+        <TileLayer
+          url="https://spaceapi.ccc.de/map/tiles/{z}/{x}/{y}.png"
+        />
+        {this.props.spacedata.items.map(
+          spacedata => (
+            <Marker
+              spacedata={spacedata}
+              key={spacedata.space}
+              highlight={
+                this.props.spacedata.filter.length === 0
+                || this.props.spacedata.filter.indexOf(spacedata.space) !== -1}
+              toggleFilterSpacedata={this.props.toggleFilterSpacedata}
+            />
+          )
+        )}
+      </LeafletMap>
+    );
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Map);

frontend/src/components/Marker.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { CircleMarker, Popup } from 'react-leaflet';
+import theme from '../style/theme';
+import { spacedataElementStruct } from '../redux/modules/spacedata';
+
+const Marker = (props) => {
+  const color = props.highlight ? theme.palette.accent2Color : theme.palette.primary1Color;
+
+  const style = {
+    container: {
+      display: 'flex',
+    },
+    logo: {
+      width: '50px',
+      marginRight: '5px',
+    },
+  };
+
+  return (
+    <CircleMarker
+      fillColor={color}
+      color={color}
+      radius={5}
+      center={[props.spacedata.location.lat, props.spacedata.location.lon]}
+    >
+      <Popup>
+        <div style={style.container}>
+          <div>
+            {props.spacedata.space}
+            <br />
+            <a href={props.spacedata.url}>
+              {props.spacedata.url}
+            </a>
+          </div>
+        </div>
+      </Popup>
+    </CircleMarker>
+  );
+};
+
+Marker.propTypes = {
+  spacedata: spacedataElementStruct.isRequired,
+  highlight: React.PropTypes.bool.isRequired,
+};
+
+export default Marker;

frontend/src/components/SpaceApiInput.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import request from 'superagent';
+import TextField from 'material-ui/TextField';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import Snackbar from 'material-ui/Snackbar';
+import config from '../api/config';
+
+class SpaceApiInput extends React.Component {
+  static propTypes = {
+    style: React.PropTypes.shape({}),
+  };
+
+  static defaultProps = {
+    style: {},
+  };
+
+  state = {
+    open: false
+  };
+
+  getStyle = () => ({
+    formContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      paddingLeft: '20px',
+      paddingRight: '20px',
+      paddingBottom: '40px',
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingTop: '50px',
+    },
+    hint: {
+      color: 'white',
+      width: '100%',
+      maxWidth: '550px',
+      fontSize: '13px',
+      textAlign: 'center',
+    },
+  });
+
+  handleInputChange = (event) => {
+    this.setState({ url: event.target.value, input: event.target });
+  };
+
+  handleButtonClick = () => {
+    request
+      .post(`${config.api.url}/urls`)
+      .send({
+        url: this.state.url,
+      })
+      .set('Content-Type', 'application/json')
+      .end((err) => {
+        if (!err) {
+          this.spaceApiInput.input.value = '';
+          this.setState({ open: true });
+        }
+      });
+  };
+
+  render() {
+    const style = this.getStyle();
+    return (
+      <div style={style.container}>
+        <p style={style.hint}>
+          Trage die API-URL deines Hackerspaces hier ein und wir werden sie nach
+          kurzer Prüfung freischalten. Bei Fragen oder Problemen wende dich an&nbsp;
+          <a href={'mailto:lokal@ccc.de'} style={{ color: 'white', textDecoration: 'none' }}>
+            {'lokal@ccc.de'}
+          </a>.
+        </p>
+        <div style={style.formContainer}>
+          <TextField
+            hintText={'https://example.com/yourspaceapi.json'}
+            name={'spaceapi-input'}
+            onChange={this.handleInputChange}
+            ref={ref => (this.spaceApiInput = ref)}
+            style={{ width: '100%', maxWidth: '340px' }}
+          />
+          <FloatingActionButton
+            style={{ marginLeft: '20px' }}
+            mini
+            onTouchTap={this.handleButtonClick}
+          >
+            <ContentAdd />
+          </FloatingActionButton>
+        </div>
+        <Snackbar
+          open={this.state.open}
+          message={'Die URL wurde hinzugefuegt und befindet sich nun im review.'}
+          autoHideDuration={4000}
+          style={{ minWidth: '490px' }}
+          onRequestClose={() => this.setState({ open: false })}
+        />
+      </div>
+    );
+  }
+}
+
+export default SpaceApiInput;

frontend/src/components/SpaceList.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+    Table,
+    TableBody,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import { spacedataStruct } from '../redux/modules/spacedata';
+
+export class SpaceList extends React.Component {
+  static propTypes = {
+    fetchSpacedata: React.PropTypes.func.isRequired,
+    spacedata: spacedataStruct,
+  };
+
+  static defaultProps = {
+    spacedata: {
+      items: [],
+    },
+  };
+
+  componentWillMount() {
+    this.props.fetchSpacedata();
+  }
+
+  render() {
+    const items = this.props.spacedata.items.sort(
+      (a, b) => a.space.toUpperCase().localeCompare(b.space.toUpperCase())
+    );
+    return (
+      <Table
+        selectable
+        multiSelectable
+      >
+        <TableBody
+          showRowHover
+          stripedRows
+          displayRowCheckbox={false}
+        >
+          {items
+            .map(space => (
+              <TableRow key={space.space}>
+                <TableRowColumn>
+                  {space.space}
+                </TableRowColumn>
+                <TableRowColumn>
+                  <a
+                    href={space.url}
+                    style={{ textDecoration: 'none', color: 'white' }}
+                  >
+                    {space.url}
+                  </a>
+                </TableRowColumn>
+              </TableRow>
+            )
+          )}
+        </TableBody>
+      </Table>
+    );
+  }
+}
+
+export default SpaceList;

frontend/src/components/Toolbar.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Toolbar as MuiToolbar,
+  ToolbarGroup,
+  ToolbarTitle,
+} from 'material-ui/Toolbar';
+import IconMenu from 'material-ui/IconMenu';
+import IconButton from 'material-ui/IconButton';
+import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
+import MenuItem from 'material-ui/MenuItem';
+import { Link } from 'react-router-dom';
+
+const Toolbar = () => (
+  <MuiToolbar>
+    <ToolbarTitle
+      text={'CCC Spaces'}
+    />
+    <ToolbarGroup>
+      <IconMenu
+        iconButtonElement={
+          <IconButton touch>
+            <NavigationExpandMoreIcon />
+          </IconButton>
+        }
+      >
+        <MenuItem
+          primaryText={'Events'}
+          containerElement={<Link to="/" />}
+        />
+        <MenuItem
+          primaryText={'Spaces'}
+          containerElement={<Link to="/list" />}
+        />
+        <MenuItem
+          primaryText={'Impressum'}
+          href={'http://ccc.de/de/imprint'}
+        />
+      </IconMenu>
+    </ToolbarGroup>
+  </MuiToolbar>
+);
+
+export default Toolbar;

frontend/src/components/UrlList.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {
+    Table,
+    TableBody,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import TextField from 'material-ui/TextField';
+import FlatButton from 'material-ui/FlatButton';
+import moment from 'moment';
+import { spaceUrlStruct } from '../redux/modules/spaceurl';
+
+export class UrlList extends React.Component {
+  static propTypes = {
+    fetchSpaceUrl: React.PropTypes.func.isRequired,
+    validateSpaceUrl: React.PropTypes.func.isRequired,
+    spaceurls: spaceUrlStruct,
+  };
+
+  static defaultProps = {
+    spaceurls: {
+      items: [],
+    },
+  };
+
+  componentWillMount() {
+    this.props.fetchSpaceUrl();
+  }
+
+  getFormatedDateTime = timestamp => (
+    moment
+      .unix(timestamp)
+      .format('DD.MM.YYYY HH:mm')
+  );
+
+  validateSpaceUrl = (spaceUrl) => {
+    const validatedSpaceUrl = {
+      url: spaceUrl.url,
+      validated: true,
+    };
+    this.props.validateSpaceUrl(validatedSpaceUrl, this.secretInput.input.value);
+  };
+
+  render() {
+    return (
+      <div>
+        <Table
+          selectable
+          multiSelectable
+        >
+          <TableBody
+            showRowHover
+            stripedRows
+            displayRowCheckbox={false}
+          >
+            {this.props.spaceurls.items
+              .map(spaceurl => (
+                <TableRow key={spaceurl.url}>
+                  <TableRowColumn>
+                    <a
+                      href={spaceurl.url}
+                      style={{ color: 'white', textDecoration: 'none' }}
+                    >
+                      {spaceurl.url}
+                    </a>
+                  </TableRowColumn>
+                  <TableRowColumn>
+                    {this.getFormatedDateTime(spaceurl.lastUpdated)}
+                  </TableRowColumn>
+                  <TableRowColumn>
+                    {!spaceurl.validated ? <FlatButton
+                      label={'validated'}
+                      onTouchTap={() => this.validateSpaceUrl(spaceurl)}
+                      primary
+                    /> : null}
+                  </TableRowColumn>
+                </TableRow>
+              )
+            )}
+          </TableBody>
+        </Table>
+        <TextField
+          name={'secret-input'}
+          ref={ref => (this.secretInput = ref)}
+        />
+      </div>
+    );
+  }
+}
+
+export default UrlList;

frontend/src/containers/SpaceList.jsx

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { actions as spaceActions } from '../redux/modules/spacedata';
+import Component from '../components/SpaceList';
+
+const mapStateToProps = state => ({
+  spacedata: state.spacedata,
+});
+
+const mapDispatchToProps = {
+  ...spaceActions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);

frontend/src/containers/UrlList.jsx

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { actions as spaceUrlActions } from '../redux/modules/spaceurl';
+import Component from '../components/UrlList';
+
+const mapStateToProps = state => ({
+  spaceurls: state.spaceurls,
+});
+
+const mapDispatchToProps = {
+  ...spaceUrlActions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+import './style/css/reset.css';
+import './style/css/style.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);

frontend/src/layout/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Toolbar from '../components/Toolbar';
+
+const Layout = children => (
+  () => (
+    <div>
+      <Toolbar />
+      {children}
+    </div>
+  )
+);
+
+export default Layout;

frontend/src/redux/modules/calendar.js

@@ -0,0 +1,84 @@
+import { PropTypes } from 'react';
+import request from 'superagent';
+import flatten from 'lodash/flatten';
+import moment from 'moment';
+import RRule from 'rrule';
+import { createAction, handleActions } from 'redux-actions';
+import config from '../../api/config';
+
+export const eventStruct = {
+  start: PropTypes.string.isRequired,
+  WholeDayEvent: PropTypes.bool.isRequired,
+  Description: PropTypes.string.isRequired,
+  Summary: PropTypes.string.isRequired,
+  space: PropTypes.string.isRequired,
+};
+
+const CALENDARS_FETCHED = 'CALENDARS_FETCHED';
+
+export const fetched = createAction(CALENDARS_FETCHED, result => result);
+
+export const fetchCalendars = () => (dispatch) => {
+  request
+    .get(`${config.api.url}/calendar`)
+    .set('Content-Type', 'application/json')
+    .end(
+      (err, res) => {
+        if (!err) {
+          dispatch(fetched(res.body));
+        }
+      }
+    );
+};
+
+export const actions = {
+  fetchCalendars,
+};
+
+export default handleActions({
+  [CALENDARS_FETCHED]: (state, { payload }) => {
+    const items = flatten(flatten(
+      payload.map(
+        calendar => (
+          calendar.Events.map((event) => {
+            if (event.rrule) {
+              try {
+                  const options = RRule.parseString(event.rrule);
+                  options.dtstart = moment(event.start).toDate();
+                  const rule = new RRule(options);
+
+                  return rule.between(
+                      moment().toDate(),
+                      moment().add(3, 'months').toDate()
+                  ).map(date => (
+                      {
+                          ...event,
+                          space: calendar.Space,
+                          start: moment(date),
+                          end: null,
+                      }
+                  ));
+              }
+              catch (ex) {
+                console.log(ex);
+                return [];
+              }
+            }
+
+            return [
+              {
+                ...event,
+                space: calendar.Space,
+                start: moment(event.start),
+                end: moment(event.end),
+              },
+            ];
+          })
+        )
+      )
+    ))
+    .filter(event => event.start.isAfter())
+    .sort((a, b) => a.start - b.start);
+    return { items };
+  },
+}, { items: [] });

frontend/src/redux/modules/spacedata.js

@@ -0,0 +1,72 @@
+import { PropTypes } from 'react';
+import request from 'superagent';
+import { createAction, handleActions } from 'redux-actions';
+import config from '../../api/config';
+
+export const filterStruct = PropTypes.arrayOf(PropTypes.string);
+export const spacedataElementStruct = PropTypes.shape({
+  space: PropTypes.string.isRequired,
+  location: PropTypes.shape({
+    lat: PropTypes.number.isRequired,
+    lon: PropTypes.number.isRequired,
+  }),
+});
+export const itemsStruct = PropTypes.arrayOf(spacedataElementStruct);
+export const spacedataStruct = PropTypes.shape({
+  items: itemsStruct,
+  filter: filterStruct,
+});
+
+const SPACEDATA_FETCHED = 'SPACEDATA_FETCHED';
+const SPACEDATA_FILTER = 'SPACEDATA_FILTER';
+
+export const fetched = createAction(SPACEDATA_FETCHED, result => result);
+export const filter = createAction(SPACEDATA_FILTER, result => result);
+
+export const fetchSpacedata = () => (dispatch) => {
+  request
+    .get(`${config.api.url}/spaces`)
+    .set('Content-Type', 'application/json')
+    .end(
+      (err, res) => {
+        if (!err) {
+          dispatch(fetched(res.body));
+        }
+      }
+    );
+};
+
+export const toggleFilterSpacedata = space => (dispatch) => {
+  dispatch(
+    filter(
+      {
+        space,
+      }
+    )
+  );
+};
+
+export const actions = {
+  fetchSpacedata,
+  toggleFilterSpacedata,
+};
+
+export default handleActions({
+  [SPACEDATA_FETCHED]: (state, { payload }) => (
+    {
+      ...state,
+      items: payload,
+    }
+  ),
+  [SPACEDATA_FILTER]: (state, { payload }) => {
+    const newState = { ...state };
+
+    if (newState.filter.indexOf(payload.space) === -1) {
+      newState.filter.push(payload.space);
+    } else {
+      newState.filter.splice(newState.filter.indexOf(payload.space), 1);
+    }
+
+    return newState;
+  },
+}, { items: [], filter: [] });

frontend/src/redux/modules/spaceurl.js

@@ -0,0 +1,70 @@
+import { PropTypes } from 'react';
+import request from 'superagent';
+import { createAction, handleActions } from 'redux-actions';
+import config from '../../api/config';
+
+export const itemStruct = PropTypes.shape({
+  url: PropTypes.string.isRequired,
+  validated: PropTypes.bool.isRequired,
+  lastUpdated: PropTypes.number.isRequired,
+});
+export const spaceUrlStruct = PropTypes.shape({
+  items: PropTypes.arrayOf(itemStruct),
+});
+
+const SPACEURL_FETCHED = 'SPACEURL_FETCHED';
+const SPACEURL_VALIDATE = 'SPACEURL_VALIDATE';
+
+export const fetched = createAction(SPACEURL_FETCHED, result => result);
+export const validate = createAction(SPACEURL_VALIDATE, result => result);
+
+export const fetchSpaceUrl = () => (dispatch) => {
+  request
+    .get(`${config.api.url}/urls`)
+    .set('Content-Type', 'application/json')
+    .end(
+      (err, res) => {
+        if (!err) {
+          dispatch(fetched(res.body));
+        }
+      }
+    );
+};
+
+export const validateSpaceUrl = (spaceUrl, secret) => (dispatch) => {
+  request
+    .put(`${config.api.url}/urls/${secret}`)
+    .send(spaceUrl)
+    .set('Content-Type', 'application/json')
+    .end(
+      (err) => {
+        if (!err) {
+          dispatch(validate(spaceUrl));
+        }
+      }
+    );
+};
+
+export const actions = {
+  fetchSpaceUrl,
+  validateSpaceUrl,
+};
+
+export default handleActions({
+  [SPACEURL_FETCHED]: (state, { payload }) => ({
+    ...state,
+    items: payload,
+  }),
+  [SPACEURL_VALIDATE]: (state, { payload }) => {
+    const newState = {
+      ...state,
+    };
+
+    newState.items.forEach(spaceUrl => ({
+      ...spaceUrl,
+      validated: spaceUrl.url === payload.url ? true : spaceUrl.validated,
+    }));
+
+    return newState;
+  },
+}, { items: [] });

frontend/src/redux/rootReducer.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import spacedataReducer from './modules/spacedata';
+import calendarsReducer from './modules/calendar';
+import spaceUrlsReducer from './modules/spaceurl';
+
+export default combineReducers({
+  spacedata: spacedataReducer,
+  calendars: calendarsReducer,
+  spaceurls: spaceUrlsReducer,
+});

frontend/src/redux/store.js

@@ -0,0 +1,15 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from './rootReducer';
+
+const initialState = {};
+const store = createStore(
+  rootReducer,
+  initialState,
+  compose(
+    applyMiddleware(thunk)
+  )
+);
+
+
+export default store;

frontend/src/style/css/reset.css

@@ -0,0 +1,4 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}

frontend/src/style/css/style.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #333333;
+}

frontend/src/style/theme.js

@@ -0,0 +1,23 @@
+import { fade } from 'material-ui/utils/colorManipulator';
+import { spacing, colors } from 'material-ui/styles';
+
+export default {
+  spacing,
+  fontFamily: 'Roboto, sans-serif',
+  palette: {
+    primary1Color: colors.grey900,
+    primary2Color: colors.grey900,
+    primary3Color: colors.grey600,
+    accent1Color: colors.grey500,
+    accent2Color: colors.grey500,
+    accent3Color: colors.grey100,
+    textColor: colors.fullWhite,
+    secondaryTextColor: fade(colors.fullWhite, 0.7),
+    alternateTextColor: '#303030',
+    canvasColor: '#303030',
+    borderColor: fade(colors.fullWhite, 0.3),
+    disabledColor: fade(colors.fullWhite, 0.3),
+    pickerHeaderColor: fade(colors.fullWhite, 0.12),
+    clockCircleColor: fade(colors.fullWhite, 0.12),
+  },
+};

frontend/src/views/Index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Map from '../components/Map';
+import EventList from '../components/EventList';
+
+const style = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
+
+const IndexContainer = () => (
+  <div style={style.container}>
+    <Map />
+    <EventList />
+  </div>
+);
+
+export default IndexContainer;

frontend/src/views/SpaceList.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SpaceList from '../containers/SpaceList';
+import SpaceApiInput from '../components/SpaceApiInput';
+
+const SpaceListView = () => (
+  <div>
+    <SpaceList />
+    <SpaceApiInput />
+  </div>
+);
+
+export default SpaceListView;

frontend/src/views/UrlListView.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import UrlList from '../containers/UrlList';
+
+const UrlListView = () => (
+  <div>
+    <UrlList />
+  </div>
+);
+
+export default UrlListView;