create task 2.2

admin/src/App.js

@@ -8,6 +8,11 @@ class App extends Component {
   render() {
     return (
       <div>
+          <div>
+              <NavLink to="/admin/events" activeStyle={{ color: 'red' }}>
+                  events
+              </NavLink>
+          </div>
         <div>
           <NavLink to="/admin/people" activeStyle={{ color: 'red' }}>
             people

admin/src/components/events/event-list.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import Event from './event'
+
+class EventList extends React.Component {
+    render() {
+        return (
+            <ul>
+                {this.getEvents()}
+            </ul>
+        )
+    }
+
+    getEvents() {
+        const { events } = this.props
+
+        if (!events) return []
+
+        return events.map((value, key) => {
+            return (<li key={key}><Event event={value} /></li>)
+        })
+    }
+}
+
+
+export default EventList

admin/src/components/events/event.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+class Event extends React.Component {
+    render() {
+        const {event: {title, url, when, where}} = this.props
+        return (
+            <div>
+                <h3>{title}</h3>
+                <dl>
+                    <dt>Url:</dt><dd> {url}</dd>
+                    <dt>When:</dt><dd> {when}</dd>
+                    <dt>Where:</dt><dd> {where}</dd>
+                </dl>
+            </div>
+        )
+    }
+}
+
+
+export default Event

admin/src/config.js

@@ -1,16 +1,16 @@
-import firebase from 'firebase/app'
+import firebase from 'firebase'
 import 'firebase/auth'
 import 'firebase/database'
 
-export const appName = 'advreact-10-05'
+export const appName = 'adv-react-training'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
-  authDomain: `${appName}.firebaseapp.com`,
-  databaseURL: `https://${appName}.firebaseio.com`,
-  projectId: appName,
-  storageBucket: '',
-  messagingSenderId: '1094825197832'
+    apiKey: "AIzaSyCmvhyNT0lpU0qkMlXHzrsNbH3HOTh8f4A",
+    authDomain: `${appName}.firebaseapp.com`,
+    databaseURL: `https://${appName}.firebaseio.com`,
+    projectId: appName,
+    storageBucket: `${appName}.appspot.com`,
+    messagingSenderId: "547163325073"
 }
 
 firebase.initializeApp(config)

admin/src/ducks/events.js

@@ -0,0 +1,72 @@
+import { appName} from "../config"
+import { Record, Map } from 'immutable'
+import firebase from 'firebase/app'
+import { takeEvery, all, put, call, apply } from 'redux-saga/effects'
+
+/**
+ * Constants
+ * */
+export const moduleName = 'events'
+const prefix = `${appName}/${moduleName}`
+
+export const EVENTS_LOAD_REQUEST = `${prefix}/EVENTS_LOAD_REQUEST`
+export const EVENTS_LOAD_SUCCESS = `${prefix}/EVENTS_LOAD_SUCCESS`
+export const EVENTS_LOAD_ERROR = `${prefix}/EVENTS_LOAD_ERROR`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+    events: null,
+    eventsLoadError: null
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const { type, payload } = action
+
+    switch (type) {
+        case EVENTS_LOAD_SUCCESS:
+            return state.set('events', payload.events)
+        case EVENTS_LOAD_ERROR:
+            return state.set('eventsLoadError', payload.error)
+        default:
+            return state
+    }
+}
+
+/**
+ * Selectors
+ */
+export const getEvents = (state) => state[moduleName].events
+export const getEventsLoadError = (state) => state[moduleName].eventsLoadError
+
+/**
+ * Action Creators
+ * */
+
+export function loadEvents() {
+    return {
+        type: EVENTS_LOAD_REQUEST
+    }
+}
+
+/**
+ *  Sagas
+ */
+
+export function* loadEventsSaga() {
+
+    try {
+        const refs = firebase.database().ref().child('events')
+        const events = yield apply(refs, refs.once, ['value'])
+
+        yield put({ type: EVENTS_LOAD_SUCCESS, payload: { events: Map(events.toJSON()) } })
+
+    } catch (error) {
+        yield put({ type: EVENTS_LOAD_ERROR, error })
+    }
+}
+
+export function* saga() {
+    yield all([takeEvery(EVENTS_LOAD_REQUEST, loadEventsSaga), loadEventsSaga()])
+}

admin/src/redux/reducer.js

@@ -3,10 +3,12 @@ import { routerReducer as router } from 'react-router-redux'
 import { reducer as form } from 'redux-form'
 import authReducer, { moduleName as authModule } from '../ducks/auth'
 import peopleReducer, { moduleName as peopleModule } from '../ducks/people'
+import eventsReducer, { moduleName as eventsModule} from '../ducks/events'
 
 export default combineReducers({
   router,
   form,
   [authModule]: authReducer,
-  [peopleModule]: peopleReducer
+  [peopleModule]: peopleReducer,
+    [eventsModule]: eventsReducer
 })

admin/src/redux/saga.js

@@ -1,7 +1,8 @@
 import { all } from 'redux-saga/effects'
 import { saga as authSaga } from '../ducks/auth'
 import { saga as peopleSaga } from '../ducks/people'
+import { saga as eventsSaga } from '../ducks/events'
 
 export default function*() {
-  yield all([authSaga(), peopleSaga()])
+  yield all([authSaga(), peopleSaga(), eventsSaga()])
 }

admin/src/routes/admin.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { Route } from 'react-router-dom'
 import PersonPage from './person-page'
+import EventsPage from "./events";
 
 class AdminPage extends Component {
   static propTypes = {}
@@ -10,6 +11,7 @@ class AdminPage extends Component {
       <div>
         <h1>Admin Page</h1>
         <Route path="/admin/people" component={PersonPage} />
+        <Route path="/admin/events"  component={EventsPage}/>
       </div>
     )
   }

admin/src/routes/events.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { loadEvents, getEvents, getEventsLoadError } from '../ducks/events'
+import EventList from '../components/events/event-list'
+
+class EventsPage extends React.Component {
+    constructor(props) {
+        super(props)
+        loadEvents();
+    }
+
+    render() {
+        const { events, eventsLoadError } = this.props
+        return (
+            <div>
+                <h2>Events List:</h2>
+                {eventsLoadError && <div className="error">Something was wrong!!!</div>}
+                <EventList events={events} />
+            </div>
+
+        )
+    }
+}
+
+const mapStateToProps = (state) => ({
+    events: getEvents(state),
+    eventsLoadError: getEventsLoadError(state)
+})
+
+export default connect(mapStateToProps, loadEvents)(EventsPage)