H2

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

@@ -0,0 +1,49 @@
+import React, { Component, Fragment } from 'react'
+import { getEvents, eventsSelector, moduleName } from '../../ducks/events'
+import { connect } from 'react-redux'
+import './events.css'
+
+class EventsList extends Component {
+  componentDidMount() {
+    this.props.getEvents()
+  }
+
+  render() {
+    const { events, fetching } = this.props
+    {
+      if (fetching) {
+        return <div>Loading...</div>
+      } else {
+        return (
+          <div className="events-list">
+            {events.map((event) => (
+              <div className="events-list-item">
+                <div className="events-list-item__title">{event.title}</div>
+                <div className="events-list-item__date">{event.when}</div>
+                <div className="events-list-item__where">{event.where}</div>
+                <div className="events-list-item__url">{event.url}</div>
+              </div>
+            ))}
+          </div>
+        )
+      }
+    }
+    return (
+      <div>
+        {fetching ? (
+          <div>(</div>
+        ) : (
+          <div>{events.map((event) => event.title)}</div>
+        )}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  (state) => ({
+    events: eventsSelector(state),
+    fetching: state[moduleName].fetching
+  }),
+  { getEvents }
+)(EventsList)

admin/src/components/events/events.css

@@ -0,0 +1,16 @@
+.events-list-item {
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
+  padding: 24px 16px;
+  font-family: Arial sans-serif;
+  margin: 8px;
+  max-width: 50%;
+}
+
+.events-list-item__title {
+  font-size: 24px;
+}
+
+.events-list-item__date {
+  font-size: 12px;
+  margin-bottom: 12px;
+}

admin/src/config.js

@@ -5,12 +5,12 @@ import 'firebase/database'
 export const appName = 'adv-react-25-06'
 
 const config = {
-  apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc',
-  authDomain: `${appName}.firebaseapp.com`,
-  databaseURL: `https://${appName}.firebaseio.com`,
-  projectId: appName,
+  apiKey: 'AIzaSyD25TAZjq0-smHue8ViLsxv3nWBHm3Pjug',
+  authDomain: 'advreact-bed03.firebaseapp.com',
+  databaseURL: 'https://advreact-bed03.firebaseio.com',
+  projectId: 'advreact-bed03',
   storageBucket: '',
-  messagingSenderId: '874599443389'
+  messagingSenderId: '389238619888'
 }
 
 initializeApp(config)

admin/src/ducks/auth.spec.js

@@ -0,0 +1,81 @@
+import { call, put, apply } from 'redux-saga/effects'
+import firebase from 'firebase/app'
+import {
+  SIGN_UP_REQUEST,
+  SIGN_UP_SUCCESS,
+  SIGN_IN_REQUEST,
+  SIGN_IN_SUCCESS,
+  signUpSaga,
+  signInSaga
+} from './auth'
+
+describe('Auth duck sign up saga', () => {
+  it('should sign up with new email and password', () => {
+    const auth = firebase.auth()
+    const credentials = {
+      email: `test${+new Date()}@test.com`,
+      password: 'qwerty123'
+    }
+
+    const action = {
+      type: SIGN_UP_REQUEST,
+      payload: credentials
+    }
+
+    const saga = signUpSaga(action)
+
+    expect(saga.next().value).toEqual(
+      call(
+        [auth, auth.createUserWithEmailAndPassword],
+        credentials.email,
+        credentials.password
+      )
+    )
+
+    const user = {
+      email: credentials.email,
+      uid: '123'
+    }
+
+    expect(saga.next(user).value).toEqual(
+      put({
+        type: SIGN_UP_SUCCESS,
+        payload: { user }
+      })
+    )
+  })
+
+  it('should sign in', () => {
+    const auth = firebase.auth()
+
+    const credentials = {
+      email: `test${+new Date()}@test.com`,
+      password: 'qwerty123'
+    }
+
+    const action = {
+      type: SIGN_IN_REQUEST,
+      payload: credentials
+    }
+
+    const saga = signInSaga(action)
+
+    expect(saga.next().value).toEqual(
+      apply(auth, auth.signInWithEmailAndPassword, [
+        credentials.email,
+        credentials.password
+      ])
+    )
+
+    const user = {
+      email: credentials.email
+    }
+
+    expect(saga.next(user).value).toEqual(
+      put({
+        type: SIGN_IN_SUCCESS,
+        payload: { user }
+      })
+    )
+  })
+})

admin/src/ducks/events.js

@@ -0,0 +1,80 @@
+import { Record, OrderedMap } from 'immutable'
+import { put, takeLatest, call } from 'redux-saga/effects'
+import { createSelector } from 'reselect'
+import { delay } from 'redux-saga'
+import firebase from 'firebase/app'
+
+// Constants
+export const moduleName = 'events'
+export const GET_EVENTS_REQUEST = `${moduleName}/GET_EVENTS_REQUEST`
+export const GET_EVENTS_SUCCESS = `${moduleName}/GET_EVENTS_SUCCESS`
+export const GET_EVENTS_ERROR = `${moduleName}/GET_EVENTS_ERROR`
+
+// Reducer
+const ReducerState = Record({
+  entities: new OrderedMap(),
+  fetching: false
+})
+
+const EventRecord = Record({
+  title: null,
+  url: null,
+  where: null,
+  when: null,
+  month: null,
+  submissionDeadline: null
+})
+
+export default function reducer(state = new ReducerState(), action) {
+  const { type, payload } = action
+
+  switch (type) {
+    case GET_EVENTS_REQUEST:
+      return state.set('fetching', true)
+    case GET_EVENTS_SUCCESS:
+      return state
+        .set('fetching', false)
+        .set('entities', eventsResponseToState(payload))
+    case GET_EVENTS_ERROR:
+      return state.set('fetching', false)
+    default:
+      return state
+  }
+}
+
+// Selectors
+export const stateSelector = (state) => state[moduleName]
+export const eventsSelector = createSelector(stateSelector, (state) =>
+  state.entities.valueSeq().toArray()
+)
+
+// Action Creators
+export const getEvents = () => ({
+  type: GET_EVENTS_REQUEST
+})
+
+// Sagas
+function* getEventsSaga() {
+  const ref = firebase.database().ref('/events')
+  // делей для видимости лоадера
+  yield call(delay, 1000)
+
+  const snapshot = yield call([ref, ref.once], 'value')
+
+  yield put({
+    type: GET_EVENTS_SUCCESS,
+    payload: snapshot.val()
+  })
+}
+
+export function* saga() {
+  yield takeLatest(GET_EVENTS_REQUEST, getEventsSaga)
+}
+
+// utils
+export const eventsResponseToState = (values) => {
+  return Object.entries(values).reduce(
+    (item, [uid, value]) => item.set(uid, new EventRecord({ uid, ...value })),
+    new OrderedMap({})
+  )
+}

admin/src/redux/reducer.js

@@ -2,9 +2,11 @@ import { combineReducers } from '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({
   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 peopleSaga } from '../ducks/people'
 import { saga as authSaga } from '../ducks/auth'
+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-page'
 
 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-page.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import EventsList from '../components/events/events-list'
+
+class EventsPage extends Component {
+  render() {
+    return (
+      <div>
+        <h3>Events list</h3>
+        <EventsList />
+      </div>
+    )
+  }
+}
+
+export default EventsPage