HomeTask #1

admin/src/components/admin/addMembers.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import { reduxForm, reset, Field } from 'redux-form'
+import validator from 'email-validator'
+import ErrorField from '../common/error-field'
+
+class AddMembers extends Component {
+    render() {
+        return (
+            <div>
+                <h1>Add members</h1>
+                <form onSubmit = {this.props.handleSubmit}>
+                    <div>
+                        <Field name = "firstName" label='First name: ' component = {ErrorField} />
+                    </div>
+                    <div>
+                        <Field name = "lastName" label='Last name: ' component = {ErrorField} />
+                    </div>
+                    <div>
+                        <Field name = "email" label='E-mail: ' component = {ErrorField} />
+                    </div>
+                    <button type = "submit">Add member</button>
+                </form>
+            </div>
+        );
+    }
+}
+
+const validate = ({ email, password }) => {
+    const errors = {}
+
+    if (!email) errors.email = 'email is a required field'
+    if (email && !validator.validate(email)) errors.email = 'invalid email'
+
+    if (!password) errors.password = 'password is a required field'
+    if (password && password.length < 8) errors.password = 'to short'
+
+    return errors
+}
+
+const afterSumbit = (result, dispatch) => {
+    dispatch(reset('auth'));
+}
+
+export default reduxForm({
+    form: 'admin',
+    onSubmitSuccess: afterSumbit,
+    validate
+})(AddMembers);

admin/src/components/admin/memberList.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {membersList} from "../../ducks/admin";
+
+class MemberList extends Component {
+    render() {
+        const {membersList} = this.props;
+
+        return (
+            <div>
+            {membersList && membersList.length > 0 ?
+                <table cellSpacing={0} cellPadding={6} style={styles.table}>
+                    <thead>
+                    <tr>
+                        <th style={styles.td}>First name</th>
+                        <th style={styles.td}>Last Name</th>
+                        <th>e-mail</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {membersList.map(member => <tr key={member.email}>
+                        <td style={styles.td}>{member.firstname}</td>
+                        <td style={styles.td}>{member.lastname}</td>
+                        <td>{member.email}</td>
+                    </tr>)}
+                    </tbody>
+                </table>
+                : null}
+            </div>
+        );
+    }
+}
+
+export default connect(state => ({membersList: membersList(state)}),)(MemberList);
+
+const styles = {
+    table: {
+        marginTop: 30,
+        border: 1,borderStyle: 'solid', borderColor: '#000'
+    },
+    td: {
+        borderRight: 1,
+        borderLeft: 0,
+        borderTop: 0,
+        borderBottom: 0,
+        borderStyle: 'solid',
+        borderColor: '#000',
+    }
+}

admin/src/components/common/protected-route.js

@@ -9,7 +9,7 @@ class ProtectedRoute extends Component {
     }
 
     render() {
-        const {component, ...rest} = this.props
+        const {...rest} = this.props
         return <Route {...rest} render = {this.getComponent}/>
     }
 

admin/src/config.js

@@ -1,14 +1,14 @@
 import firebase from 'firebase'
 
-export const appName = 'advreact-10-05'
+export const appName = 'reactfirstproject-80dc2'
 
 export const config = {
-    apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+    apiKey: 'AIzaSyBTCfco9DOZ1M1OcWI662uOgYbBCQm5jXQ',
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
     storageBucket: "",
-    messagingSenderId: "1094825197832"
+    messagingSenderId: "165794362538"
 }
 
 firebase.initializeApp(config)

admin/src/ducks/admin.js

@@ -0,0 +1,49 @@
+import {appName} from '../config'
+import {Record} from 'immutable'
+import {createSelector} from "reselect";
+
+/**
+ * Constants
+ * */
+export const moduleName = 'admin'
+const prefix = `${appName}/${moduleName}`
+
+export const ADD_MEMBER_SUCCESS = `${prefix}/ADD_MEMBER_SUCCESS`
+
+/**
+ * Reducer
+ * */
+export const ReducerRecord = Record({
+    members: []
+})
+
+export default function reducer(state = new ReducerRecord(), action) {
+    const {type, payload} = action
+
+    switch (type) {
+        case ADD_MEMBER_SUCCESS:
+            const arr = state.get('members').slice(0);
+
+            arr.push(payload);
+            return state.set('members', arr)
+
+
+        default:
+            return state
+    }
+}
+
+/**
+ * Selectors
+ * */
+export const membersSelector = state => state[moduleName].members
+export const membersList = createSelector(membersSelector, members => members)
+
+/**
+ * Action Creators
+ * */
+export function addMembers(firstname, lastname, email) {
+    return (dispatch) => {
+        dispatch({ type: ADD_MEMBER_SUCCESS, payload: {firstname, lastname, email} })
+    }
+}

admin/src/redux/reducer.js

@@ -2,8 +2,10 @@ import {combineReducers} from 'redux'
 import {routerReducer as router} from 'react-router-redux'
 import {reducer as form} from 'redux-form'
 import authReducer, { moduleName as authModule } from '../ducks/auth'
+import adminReducer, { moduleName as adminModule } from '../ducks/admin'
 
 export default combineReducers({
     router, form,
-    [authModule]: authReducer
+    [authModule]: authReducer,
+    [adminModule]: adminReducer
 })

admin/src/routes/admin.js

@@ -1,4 +1,11 @@
 import React, { Component } from 'react'
+import {NavLink, Route} from 'react-router-dom'
+import {connect} from 'react-redux'
+
+import {addMembers, membersList} from '../ducks/admin'
+
+import AddMembers from '../components/admin/addMembers'
+import MemberList from '../components/admin/memberList'
 
 class AdminPage extends Component {
     static propTypes = {
@@ -9,9 +16,23 @@ class AdminPage extends Component {
         return (
             <div>
                 <h1>Admin Page</h1>
+                <div>
+                    <NavLink to="/admin/add-member" activeStyle = {{ color: 'red' }}>Add member</NavLink>
+                </div>
+                <div>
+                    <Route path="/admin/add-member" render = {() => <AddMembers onSubmit = {this.addMembers}/>} />
+                </div>
+                <AddMembers onSubmit = {this.addMembers}/>
+                <MemberList />
             </div>
+
         )
     }
+
+    addMembers = ({ firstName, lastName, email }) => {
+        this.props.addMembers(firstName, lastName, email)
+    }
+
 }
 
-export default AdminPage
+export default connect(state => ({membersList: membersList(state)}), {addMembers})(AdminPage)