I009 event view

src/client/web/actions/event.js

@@ -0,0 +1,67 @@
+import { requestJson } from './utils';
+
+export const LOAD_SPENDINGS = 'spendings:load';
+export const loadSpendings = () => dispatch => {
+  requestJson({
+    method: 'GET',
+    url: '/api/spendings',
+  })
+    .then(data => dispatch(spendingsLoaded(data)))
+    .catch(() => alert('spendings:load ERROR'));
+};
+
+export const SPENDINGS_LOADED = 'spendings:loaded';
+export const spendingsLoaded = spendings => ({
+  type: SPENDINGS_LOADED,
+  payload: { spendings },
+});
+
+export const ADD_SPENDING = 'spending:add';
+export const addSpending = data => dispatch => {
+  requestJson({
+    method: 'POST',
+    url: '/api/spendings',
+    body: data,
+  })
+    .then(data => dispatch(spendingAdded(data)))
+    .catch(() => alert('spending:add ERROR'));
+};
+
+export const SPENDING_ADDED = 'spending:added';
+export const spendingAdded = spending => ({
+  type: SPENDING_ADDED,
+  payload: { spending },
+});
+
+export const UPDATE_SPENDING = 'spending:update';
+export const updateSpending = data => dispatch => {
+  requestJson({
+    method: 'PATCH',
+    url: `/api/spendings/${data.id}`,
+    body: data,
+  })
+    .then(data => dispatch(spendingUpdated(data)))
+    .catch(() => alert('spendings:update ERROR'));
+};
+
+export const SPENDING_UPDATED = 'spending:updated';
+export const spendingUpdated = spending => ({
+  type: SPENDING_UPDATED,
+  payload: { spending },
+});
+
+export const DELETE_SPENDING = 'spending:deleted';
+export const deleteSpending = id => dispatch => {
+  requestJson({
+    method: 'DELETE',
+    url: `/api/spendings/${id}`,
+  })
+    .then(data => dispatch(spendingDeleted(data)))
+    .catch(() => alert('spending:delete ERROR'));
+};
+
+export const SPENDING_DELETED = 'spending:deleted';
+export const spendingDeleted = ({ id }) => ({
+  type: SPENDING_DELETED,
+  payload: { id },
+});

src/client/web/components/App/__tests__/__snapshots__/index.js.snap

@@ -16,6 +16,12 @@ exports[`App should match snapshot 1`] = `
         key="/events"
         path="/events"
       />
+      <Route
+        component={[Function]}
+        exact={true}
+        key="/event/:id"
+        path="/event/:id"
+      />
       <Route
         component={[Function]}
         path="/"

src/client/web/components/Event/AddOrEdit.js

@@ -45,6 +45,7 @@ const AddOrEdit = ({ classes }) => {
         id="attendeeIds"
         name="attendeeIds"
         classes={classes}
+        multiple={true}
         component={SelectPeople}
       />
     </Form>

src/client/web/components/Event/Preview.js

@@ -27,9 +27,18 @@ const style = {
   },
 };
 
-const Preview = ({ attendeeIds, createdAt, label, image, people, classes }) => {
+const Preview = ({
+  id,
+  attendeeIds,
+  createdAt,
+  label,
+  image,
+  people,
+  classes,
+  history,
+}) => {
   return (
-    <Card className={classes.card}>
+    <Card className={classes.card} onClick={() => history.push(`/event/${id}`)}>
       <CardHeader
         avatar="R"
         subheader={format(createdAt, 'DD MMMM YYYY')}
@@ -58,12 +67,14 @@ const Preview = ({ attendeeIds, createdAt, label, image, people, classes }) => {
 };
 
 Preview.propTypes = {
+  id: PropTypes.string,
   attendeeIds: PropTypes.array,
   createdAt: PropTypes.string,
   label: PropTypes.string,
   image: PropTypes.string,
   people: PropTypes.array,
   classes: PropTypes.object,
+  history: PropTypes.object,
 };
 
 export default injectSheet(style)(Preview);

src/client/web/components/Spending/Add.js

@@ -0,0 +1,87 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import { Formik } from 'formik';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from 'material-ui/Button';
+import AddOrEdit from './AddOrEdit';
+
+const styles = {
+  appBar: {
+    position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+  input: {
+    margin: 5,
+  },
+  form: {
+    display: 'grid',
+    gridTemplateColumns: 'auto',
+    gridTemplateRows: 'auto',
+    gridTemplateAreas: "'label' 'currency' 'people'",
+  },
+  formControl: {
+    margin: 5,
+    minWidth: 120,
+  },
+};
+
+const Add = ({ eventId, addSpending, handleClose, classes }) => {
+  return (
+    <Formik
+      initialValues={{
+        eventId: eventId,
+        label: '',
+        amount: '',
+        attendees: [],
+        currency: 'EUR',
+      }}
+      validate={values => {
+        let errors = {};
+
+        if (!values.label) {
+          errors.label = 'Required field';
+        }
+
+        return errors;
+      }}
+      onSubmit={values => {
+        const newSpending = {
+          ...values,
+        };
+        console.log(newSpending);
+        addSpending(newSpending);
+        handleClose();
+      }}
+      render={({ handleSubmit }) => (
+        <Fragment>
+          <DialogTitle>Fill the form</DialogTitle>
+          <DialogContent>
+            <AddOrEdit classes={classes} />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} color="primary">
+              Ok
+            </Button>
+          </DialogActions>
+        </Fragment>
+      )}
+    />
+  );
+};
+
+Add.propTypes = {
+  eventId: PropTypes.string,
+  addSpending: PropTypes.func,
+  handleClose: PropTypes.func,
+  classes: PropTypes.object,
+};
+
+export default injectSheet(styles)(Add);

src/client/web/components/Spending/AddOrEdit.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { map } from 'ramda';
+import { Form } from 'formik';
+import { Field, FieldArray } from 'formik';
+import Button from '@material-ui/core/Button';
+import { InputField, SelectField, SelectPeople } from '../../fields';
+
+const AddOrEdit = ({ classes }) => {
+  const currencies = [
+    {
+      value: 'USD',
+      label: '$',
+    },
+    {
+      value: 'EUR',
+      label: '€',
+    },
+    {
+      value: 'BTC',
+      label: '฿',
+    },
+    {
+      value: 'JPY',
+      label: '¥',
+    },
+  ];
+
+  return (
+    <Form className={classes.form}>
+      <Field
+        id="label"
+        label="Name"
+        name="label"
+        classes={classes}
+        component={InputField}
+      />
+      <Field
+        id="currency"
+        label="Currency"
+        name="currency"
+        domainValues={currencies}
+        classes={classes}
+        component={SelectField}
+      />
+      <Field
+        id="amount"
+        label="Amount"
+        name="amount"
+        classes={classes}
+        component={InputField}
+      />
+      <FieldArray
+        name="attendees"
+        render={arrayHelper => {
+          const { attendees } = arrayHelper.form.values;
+
+          return (
+            <div>
+              <Button onClick={() => arrayHelper.push({})}>
+                Add an attendee
+              </Button>
+              {attendees &&
+                attendees.map((attendee, index) => (
+                  <div key={index}>
+                    <Field
+                      label={`${index + 1}) Name`}
+                      name={`attendees.${index}.personId`}
+                      classes={classes}
+                      multiple={false}
+                      component={SelectPeople}
+                    />
+                    <Field
+                      label={`Key`}
+                      name={`attendees.${index}.key`}
+                      classes={classes}
+                      component={InputField}
+                    />
+                    <Button onClick={() => arrayHelper.remove(index)}>X</Button>
+                  </div>
+                ))}
+            </div>
+          );
+        }}
+      />
+    </Form>
+  );
+};
+
+AddOrEdit.propTypes = {
+  classes: PropTypes.object,
+};
+
+export default AddOrEdit;

src/client/web/components/Spending/Edit.js

@@ -0,0 +1,84 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import { Formik } from 'formik';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from 'material-ui/Button';
+import AddOrEdit from './AddOrEdit';
+
+const styles = {
+  appBar: {
+    position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+  input: {
+    margin: 5,
+  },
+  form: {
+    display: 'grid',
+    gridTemplateColumns: 'auto',
+    gridTemplateRows: 'auto',
+    gridTemplateAreas: "'label' 'currency' 'people'",
+  },
+  formControl: {
+    margin: 5,
+    minWidth: 120,
+  },
+};
+
+const Edit = ({ spending, updateSpending, handleClose, classes }) => {
+  console.log(spending);
+  return (
+    <Formik
+      initialValues={{
+        ...spending,
+      }}
+      validate={values => {
+        let errors = {};
+
+        if (!values.label) {
+          errors.label = 'Name is required';
+        }
+
+        return errors;
+      }}
+      onSubmit={values => {
+        const newSpending = {
+          ...values,
+        };
+
+        updateSpending(newSpending);
+        handleClose();
+      }}
+      render={({ handleSubmit }) => (
+        <Fragment>
+          <DialogTitle>Edit the form</DialogTitle>
+          <DialogContent>
+            <AddOrEdit classes={classes} />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} color="primary">
+              Ok
+            </Button>
+          </DialogActions>
+        </Fragment>
+      )}
+    />
+  );
+};
+
+Edit.propTypes = {
+  spending: PropTypes.object,
+  updateSpending: PropTypes.func,
+  handleClose: PropTypes.func,
+  classes: PropTypes.object,
+};
+
+export default injectSheet(styles)(Edit);