Event form implementation

client/package.json

@@ -2,7 +2,7 @@
   "name": "client",
   "version": "0.1.1",
   "private": true,
-  "proxy": "http://localhost:8000/",
+  "proxy": "https://karachi-communities.herokuapp.com",
   "dependencies": {
     "bootstrap": "^4.1.1",
     "font-awesome": "^4.7.0",
@@ -22,6 +22,7 @@
     "react-scripts": "1.1.4",
     "react-select": "^1.2.1",
     "react-share": "^2.2.0",
+    "react-spinners": "^0.4.7",
     "react-toastify": "^4.1.0",
     "reactstrap": "^6.1.0",
     "redux": "^4.0.0",

client/src/actions/index.js

@@ -9,6 +9,7 @@ import OrganisationsService from '../services/organisation';
 import SponsorsService from '../services/sponsors';
 import LocationService from '../services/locations';
 import TagsService from '../services/tags';
+import EventFormService from '../services/eventform';
 
 import UserService from '../services/user';
 import * as humps from 'humps';
@@ -41,6 +42,14 @@ export const POST_COMMENT = 'POST_COMMENT';
 // organisation
 export const FETCH_ORGANISATION_DETAIL = 'FETCH_ORGANISATION_DETAIL';
 
+//EVENT SIGNUP FORM
+export const TOGGLE_EVENT_SIGNUP_MODAL = 'TOGGLE_EVENT_SIGNUP_MODAL';
+
+export const FETCH_EVENT_SIGNUP_FORM = 'FETCH_EVENT_SIGNUP_FORM';
+export const EVENT_FORM_RESPONSE = 'EVENT_FORM_RESPONSE';
+export const POST_EVENT_SIGNUP_DETAILS = 'POST_EVENT_SIGNUP_DETAILS';
+export const EVENT_SIGNUP_SUCCESS_RESPONSE = 'EVENT_SIGNUP_SUCCESS_RESPONSE';
+
 //misc
 export const FETCH_LOCATIONS = 'FETCH_LOCATIONS';
 export const FETCH_ORGANISATIONS = 'FETCH_ORGANISATIONS';
@@ -362,3 +371,55 @@ export const fetchTags = query => async (dispatch, getState) => {
     return e;
   }
 };
+
+//event form action
+
+export const toggleModal = state => ({
+  type: TOGGLE_EVENT_SIGNUP_MODAL,
+  showSignupModal: state,
+});
+
+export const eventForm = form => ({
+  type: EVENT_FORM_RESPONSE,
+  form,
+});
+
+export const postEventSignup = userDetails => ({
+  type: POST_EVENT_SIGNUP_DETAILS,
+  userDetails,
+});
+
+export const eventSignupSuccess = payload => ({
+  type: EVENT_SIGNUP_SUCCESS_RESPONSE,
+  payload,
+});
+
+export const fetchForm = () => ({
+  type: FETCH_EVENT_SIGNUP_FORM,
+});
+
+export const fetchEventFormById = id => async (dispatch, getState) => {
+  dispatch(toggleModal(true));
+  dispatch(fetchForm());
+  dispatch(triggerRequest(FETCH_EVENT_SIGNUP_FORM));
+  try {
+    const response = await EventFormService.getFormById(id);
+
+    dispatch(eventForm(response));
+  } catch (e) {
+    dispatch(triggerFailure(FETCH_EVENT_SIGNUP_FORM, e.message));
+    return e;
+  }
+};
+
+export const postEventSignupDetails = (userDetails, formId) => async (
+  dispatch,
+  getState
+) => {
+  dispatch(triggerRequest(POST_EVENT_SIGNUP_DETAILS));
+  try {
+    const response = await EventFormService.signupForEvent(userDetails, formId);
+    console.log('response e===>', response);
+    dispatch(eventSignupSuccess(response));
+  } catch (e) {}
+};

client/src/components/EventSignup/EventSignupModal.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import SignUpForm from '../EventSignupForm/EventSignupForm';
+import { postEventSignupDetails } from '../../actions';
+import { connect } from 'react-redux';
+import withLoader from '../Loader/withLoader';
+
+const ModalBody_ = props => (
+  <div>
+    <ModalHeader>{props.eventForm.title}</ModalHeader>
+    <ModalBody>
+      <SignUpForm
+        fields={props.eventForm.fields}
+        onSubmit={props.onSubmit}
+        registered={props.registered}
+        toggle={props.toggle}
+      />
+    </ModalBody>
+  </div>
+);
+const ModalContent = withLoader(ModalBody_);
+class EventSignupModal extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  onSubmit = e => {
+    e.preventDefault();
+    const { dispatch, eventForm } = this.props;
+    const { name, email, phone } = e.target.elements;
+
+    const payload = {
+      name: name.value,
+      email: email.value,
+      phone: phone.value,
+    };
+
+    dispatch(postEventSignupDetails(payload, eventForm.id));
+  };
+  render() {
+    const { props } = this;
+    const { eventForm } = this.props;
+    return (
+      <Modal
+        isOpen={props.showModal}
+        toggle={value => {
+          props.toggle(value);
+        }}
+      >
+        <ModalContent
+          showModal={props.showModal}
+          eventForm={eventForm}
+          isFetching={props.isFetching}
+          onSubmit={this.onSubmit}
+          toggle={props.toggle}
+          registered={props.registered}
+        />
+      </Modal>
+    );
+  }
+}
+
+export default connect(null)(EventSignupModal);

client/src/components/EventSignup/EventSignupView.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Label, Button } from 'reactstrap';
+
+export default class EventSignupView extends Component {
+  render() {
+    const { props } = this;
+    return (
+      <div
+        style={{
+          display: 'flex',
+
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: '50%',
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <h3>
+            <Label>Sign Up For This Event</Label>
+          </h3>
+          {props.isRegistered ? (
+            <span style={{ color: 'green' }}> Signed up! </span>
+          ) : (
+            <Button onClick={props.onSignUpPress}>Sign Up</Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

client/src/components/EventSignupForm/EventSignupForm.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+import './EventSignupForm.css';
+import { Field, reduxForm } from 'redux-form';
+import renderField from '../RenderField';
+//import validate from './LoginValidator';
+
+const placeHolder = {
+  name: 'Name',
+  email: 'Email',
+  phone: 'Phone',
+};
+
+const EventSignupForm = props => {
+  return (
+    <form id="login-form" onSubmit={props.onSubmit}>
+      {props.fields.map((field, i) => (
+        <Field
+          type="text"
+          key={i}
+          placeholder={placeHolder[field.label]}
+          className="form-control"
+          name={field.label}
+          component={renderField}
+        />
+      ))}
+
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {props.registered ? (
+          <Button
+            className="btn btn-primary"
+            value="Signup_success"
+            onClick={() => props.toggle(false)}
+          >
+            Signed up!
+          </Button>
+        ) : (
+          <Button type="submit" className="btn btn-primary" value="Signup">
+            Submit
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};
+
+export default reduxForm({
+  form: 'eventSignupform',
+})(EventSignupForm);

client/src/components/Loader/withLoader.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { connect } from 'redux';
+import { ClipLoader } from 'react-spinners';
+
+const withLoader = Component => {
+  return ({ isFetching, ...props }) => (
+    <div>
+      {isFetching ? (
+        <div
+          className="sweet-loading"
+          style={{
+            display: 'flex',
+            height: 80,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <ClipLoader
+            className={'MoonLoader'}
+            sizeUnit={'px'}
+            size={30}
+            color={'green'}
+            loading={isFetching}
+          />
+        </div>
+      ) : (
+        <Component {...props} />
+      )}
+    </div>
+  );
+};
+
+export default withLoader;

client/src/containers/App/routes/index.js

@@ -22,7 +22,7 @@ const Routes = () => (
     <Switch>
       <Route exact path="/" component={BaseRedirection} />
       <Route exact path="/events" component={Events} />
-      <Route path="/events/:event_id" component={CurrentEvent} />
+      {/* <Route path="/events/:event_id" component={CurrentEvent} /> */}
       <Route path="/organisations/:organisation_id" component={Organisation} />
       <Route exact path="/users/:user_id" component={UserProfile} />
       <Route path="/login" component={Login} />

client/src/containers/App/routes/private.routes.js

@@ -4,8 +4,12 @@ import { connect } from 'react-redux';
 
 //components
 import EditUserProfile from '../../EditProfile/EditUserProfile';
+import CurrentEvent from '../../../containers/CurrentEvent/CurrentEvent';
 
-const LoginRedirection = () => <Redirect to="/login" />;
+const LoginRedirection = props => (
+  <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
+);
+//const EventRedirection = ()=> <Redirect to= /Events/
 
 const PrivateRoutes = props => (
   <Fragment>
@@ -16,7 +20,19 @@ const PrivateRoutes = props => (
           {props.userState.token ? (
             <EditUserProfile {...routesProps} />
           ) : (
-            <LoginRedirection />
+            <LoginRedirection {...routesProps} />
+          )}
+        </div>
+      )}
+    />
+    <Route
+      path="/events/:event_id"
+      render={routeProps => (
+        <div>
+          {props.userState.token ? (
+            <CurrentEvent {...routeProps} />
+          ) : (
+            <LoginRedirection {...routeProps} />
           )}
         </div>
       )}

client/src/containers/App/routes/public.routes.js

@@ -5,6 +5,7 @@ import { Route, Redirect, Switch } from 'react-router-dom';
 import Signup from '../../Signup/Signup';
 import Login from '../../Login/Login';
 import Events from '../../Events/Events';
+
 import ForgotPassword from '../../ForgotPassword/ForgotPassword';
 
 const BaseRedirection = () => <Redirect to="/events" />;