diff --git a/admin/src/components/admin/addMembers.js b/admin/src/components/admin/addMembers.js new file mode 100644 index 0000000..737451e --- /dev/null +++ b/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 ( +
+

Add members

+
+
+ +
+
+ +
+
+ +
+ +
+
+ ); + } +} + +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); diff --git a/admin/src/components/admin/memberList.js b/admin/src/components/admin/memberList.js new file mode 100644 index 0000000..9331454 --- /dev/null +++ b/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 ( +
+ {membersList && membersList.length > 0 ? + + + + + + + + + + {membersList.map(member => + + + + )} + +
First nameLast Namee-mail
{member.firstname}{member.lastname}{member.email}
+ : null} +
+ ); + } +} + +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', + } +} \ No newline at end of file diff --git a/admin/src/components/common/protected-route.js b/admin/src/components/common/protected-route.js index 521e2a2..409e2c8 100644 --- a/admin/src/components/common/protected-route.js +++ b/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 } diff --git a/admin/src/config.js b/admin/src/config.js index b042e54..17aec1d 100644 --- a/admin/src/config.js +++ b/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) \ No newline at end of file diff --git a/admin/src/ducks/admin.js b/admin/src/ducks/admin.js new file mode 100644 index 0000000..b0034bf --- /dev/null +++ b/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} }) + } +} diff --git a/admin/src/redux/reducer.js b/admin/src/redux/reducer.js index 8a2942d..49721c0 100644 --- a/admin/src/redux/reducer.js +++ b/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 }) \ No newline at end of file diff --git a/admin/src/routes/admin.js b/admin/src/routes/admin.js index 743e0b9..c6383c8 100644 --- a/admin/src/routes/admin.js +++ b/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 (

Admin Page

+
+ Add member +
+
+ } /> +
+ +
+ ) } + + addMembers = ({ firstName, lastName, email }) => { + this.props.addMembers(firstName, lastName, email) + } + } -export default AdminPage \ No newline at end of file +export default connect(state => ({membersList: membersList(state)}), {addMembers})(AdminPage) \ No newline at end of file