diff --git a/client/src/containers/CurrentEvent/CurrentEvent.css b/client/src/containers/CurrentEvent/CurrentEvent.css index f96a08a..15d1e51 100644 --- a/client/src/containers/CurrentEvent/CurrentEvent.css +++ b/client/src/containers/CurrentEvent/CurrentEvent.css @@ -6,6 +6,12 @@ bottom: 0; padding: 5px 30px; } + +#summary-container .subscribe { + justify-content: flex-end; + display: flex; + width: 100%; +} .row .col #edit-user { position: absolute; top: 5px; diff --git a/client/src/containers/CurrentEvent/CurrentEvent.js b/client/src/containers/CurrentEvent/CurrentEvent.js index 814e07a..c524dfb 100644 --- a/client/src/containers/CurrentEvent/CurrentEvent.js +++ b/client/src/containers/CurrentEvent/CurrentEvent.js @@ -8,6 +8,7 @@ import { CardTitle, CardSubtitle, Col, + Button, Row, } from 'reactstrap'; import MetaTagsComponent from '../../components/SocialShare/MetaTagsComponent'; @@ -17,16 +18,23 @@ import { fetchCurrentEvent } from '../../actions'; import ContentHeader from '../../components/ContentHeader/ContentHeader'; import moment from 'moment'; import DescriptionContainer from '../../components/DescriptionContainer/DescriptionContainer'; +import FormsModal from '../FormsModal/FormsModal'; import { Link } from 'react-router-dom'; import { AttendeeType } from '../../types/attendee-types'; import './CurrentEvent.css'; import GoogleMap from '../../components/GoogleMap/GoogleMap'; +import { eventRegisteration } from '../../mocks/mockForms'; import CommentsBlock from '../../components/Comments/CommentsBlock'; const DATE_FORMAT = 'LLLL'; class CurrentEvent extends Component { eventId; + + constructor(props) { + super(props); + } + componentDidMount() { this.getCurrentEvent(); } @@ -38,6 +46,12 @@ class CurrentEvent extends Component { dispatch(fetchCurrentEvent(eventId)); }; + eventSubscribe = (e, user) => { + e.preventDefault(); + this.registrationModal.toggle(); + // this.editModal.receiveUserDetails(user) + }; + getAttendeesProfiles = (attendees: Array) => { return ( @@ -69,11 +83,14 @@ class CurrentEvent extends Component { render() { let { event } = this.props.currentEvent; - return (
{event ? ( + (this.registrationModal = ref)} + /> { - + { iconName="fa fa-users fa-2x" content={event.organisation.name} /> + +
+ +
diff --git a/client/src/containers/FormsModal/FormsModal.css b/client/src/containers/FormsModal/FormsModal.css new file mode 100644 index 0000000..e69de29 diff --git a/client/src/containers/FormsModal/FormsModal.js b/client/src/containers/FormsModal/FormsModal.js new file mode 100644 index 0000000..02ddb20 --- /dev/null +++ b/client/src/containers/FormsModal/FormsModal.js @@ -0,0 +1,87 @@ +import React from 'react'; +import { + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Input, + Label, +} from 'reactstrap'; +import './FormsModal.css'; + +class FormsModal extends React.Component { + constructor(props) { + super(props); + this.state = { + modal: false, + backdrop: true, + }; + // this.submit = this.submit.bind(this); + // this.toggle = this.toggle.bind(this); + } + toggle = () => { + this.setState({ + modal: !this.state.modal, + }); + }; + + submit = e => { + //TODO, update user via id; + this.toggle(); + }; + + render() { + return ( +
+ + Forms + +
+ {this.props.registrationForm.map((field, index) => ( +
+ {field.type !== 'dropdown' && ( +
+ + +
+ )} + + {field.type === 'dropdown' && ( +
+ + +
+ )} +
+ ))} +
+ + + {' '} + + + +
+ ); + } +} +export default FormsModal; diff --git a/client/src/mocks/mockForms.js b/client/src/mocks/mockForms.js new file mode 100644 index 0000000..a83e12d --- /dev/null +++ b/client/src/mocks/mockForms.js @@ -0,0 +1,38 @@ +export const eventRegisteration = [ + { + name: 'firstName', + type: 'text', + value: '', + label: 'First Name', + }, + { + name: 'lastName', + type: 'text', + value: '', + label: 'Last Name', + }, + { + name: 'email', + type: 'email', + value: '', + label: 'Email', + }, + { + name: 'phone-number', + type: 'number', + value: '', + label: 'Phone Number', + }, + { + name: 'organisation', + type: 'text', + value: '', + label: 'Organisation', + }, + { + name: 'experience', + type: 'dropdown', + label: 'Experience', + value: ['Fresh', '1 to 2 years', '2 to 3 years', '3 to onward'], + }, +]; diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js index 4b0c843..9842230 100644 --- a/client/src/reducers/index.js +++ b/client/src/reducers/index.js @@ -23,26 +23,26 @@ const defaultAppState = { const appState = (state = defaultAppState, action) => { switch (action.type) { - case TRIGGER_REQUEST: - return { - ...state, - loading: [...state.loading, action.name], - }; - - case TRIGGER_FAILURE: - return { - errors: state.errors.push(action.error), - loading: state.loading.filter(name => name !== action.name), - }; - - case END_REQUEST: - return { - ...state, - loading: state.loading.filter(name => name !== action.name), - }; - - default: - return state; + case TRIGGER_REQUEST: + return { + ...state, + loading: [...state.loading, action.name], + }; + + case TRIGGER_FAILURE: + return { + errors: state.errors.push(action.error), + loading: state.loading.filter(name => name !== action.name), + }; + + case END_REQUEST: + return { + ...state, + loading: state.loading.filter(name => name !== action.name), + }; + + default: + return state; } }; @@ -53,33 +53,33 @@ const defaultUserState = { const userState = (state = defaultUserState, action) => { switch (action.type) { - case USER_LOGIN: - return { - ...state, - token: action.token.access, - refresh: action.token.refresh, - }; - case FETCH_CURRENT_USER: - return { - ...state, - currentUser: action.currentUser, - }; - - case USER_LOGOUT: - return { - ...state, - token: null, - currentUser: null, - refresh: null, - }; - - case REFRESH_TOKEN: - return { - token: action.payload.access, - }; - - default: - return state; + case USER_LOGIN: + return { + ...state, + token: action.token.access, + refresh: action.token.refresh, + }; + case FETCH_CURRENT_USER: + return { + ...state, + currentUser: action.currentUser, + }; + + case USER_LOGOUT: + return { + ...state, + token: null, + currentUser: null, + refresh: null, + }; + + case REFRESH_TOKEN: + return { + token: action.payload.access, + }; + + default: + return state; } }; @@ -88,14 +88,14 @@ const defaultResetPasswordState = { }; const resetPasswordState = (state = defaultResetPasswordState, action) => { switch (action.type) { - case RESET_PASSWORD: - return { - ...state, - message: action.message, - }; - - default: - return state; + case RESET_PASSWORD: + return { + ...state, + message: action.message, + }; + + default: + return state; } }; @@ -127,16 +127,16 @@ const defaultUserProfileState = { const userProfile = (state = defaultUserProfileState, action) => { switch (action.type) { - case FETCH_USER: - return { - user: { ...Object.values(action.user.entities.user)[0] }, - }; - case USER_EDIT: - return { - user: { ...Object.values(action.user) }, - }; - default: - return state; + case FETCH_USER: + return { + user: { ...Object.values(action.user.entities.user)[0] }, + }; + case USER_EDIT: + return { + user: { ...Object.values(action.user) }, + }; + default: + return state; } }; @@ -160,13 +160,13 @@ const defaultOrganisationsState = { }; const organisationsState = (state = defaultOrganisationsState, action) => { switch (action.type) { - case FETCH_ORGANISATIONS: - return { - ...state, - organisations: action.organisations, - }; - default: - return state; + case FETCH_ORGANISATIONS: + return { + ...state, + organisations: action.organisations, + }; + default: + return state; } }; @@ -175,13 +175,13 @@ const defaultSponsorsState = { }; const sponsorsState = (state = defaultSponsorsState, action) => { switch (action.type) { - case FETCH_SPONSORS: - return { - ...state, - sponsors: action.sponsors, - }; - default: - return state; + case FETCH_SPONSORS: + return { + ...state, + sponsors: action.sponsors, + }; + default: + return state; } }; @@ -190,13 +190,13 @@ const defaultLocationState = { }; const locationState = (state = defaultLocationState, action) => { switch (action.type) { - case FETCH_LOCATIONS: - return { - ...state, - locations: action.locations, - }; - default: - return state; + case FETCH_LOCATIONS: + return { + ...state, + locations: action.locations, + }; + default: + return state; } }; @@ -205,13 +205,13 @@ const defaultTagsState = { }; const tagsState = (state = defaultTagsState, action) => { switch (action.type) { - case FETCH_TAGS: - return { - ...state, - tags: action.tags, - }; - default: - return state; + case FETCH_TAGS: + return { + ...state, + tags: action.tags, + }; + default: + return state; } };