Add/appointment list e2e

client/package.json

@@ -62,6 +62,7 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
+    "moment": "^2.23.0",
     "react": "^16.6.3",
     "react-datepicker": "^2.0.0",
     "react-dom": "^16.6.3",

client/src/actions/appointment.js

@@ -0,0 +1,25 @@
+import { getAppointments, getAppointment } from '../services/appointmentApi';
+
+export const FETCH_APPOINTMENTS = 'FETCH_APPOINTMENTS';
+export const FETCH_APPOINTMENTS_LOAD_START = 'FETCH_APPOINTMENTS_LOAD_START';
+export const FETCH_APPOINTMENTS_LOAD_END = 'FETCH_APPOINTMENTS_LOAD_END';
+export const FETCH_APPOINTMENTS_ERROR = 'FETCH_APPOINTMENTS_ERROR';
+export const fetchAppointments = (userId) => ({
+  type: FETCH_APPOINTMENTS,
+  loadStart: FETCH_APPOINTMENTS_LOAD_START,
+  loadEnd: FETCH_APPOINTMENTS_LOAD_END,
+  errorType: FETCH_APPOINTMENTS_ERROR,
+  payload: getAppointments(userId)
+});
+
+export const FETCH_APPOINTMENT = 'FETCH_APPOINTMENT';
+export const FETCH_APPOINTMENT_LOAD_START = 'FETCH_APPOINTMENT_LOAD_START';
+export const FETCH_APPOINTMENT_LOAD_END = 'FETCH_APPOINTMENT_LOAD_END';
+export const FETCH_APPOINTMENT_ERROR = 'FETCH_APPOINTMENT_ERROR';
+export const fetchAppointment = (appointmentId, userId) => ({
+  type: FETCH_APPOINTMENT,
+  loadStart: FETCH_APPOINTMENT_LOAD_START,
+  loadEnd: FETCH_APPOINTMENT_LOAD_END,
+  errorType: FETCH_APPOINTMENT_ERROR,
+  payload: getAppointment(appointmentId, userId)
+});

client/src/actions/family.js

@@ -0,0 +1,13 @@
+import { getFamily } from '../services/familyApi';
+
+export const FETCH_FAMILY = 'FETCH_FAMILY';
+export const FETCH_FAMILY_LOAD_START = 'FETCH_FAMILY_LOAD_START';
+export const FETCH_FAMILY_LOAD_END = 'FETCH_FAMILY_LOAD_END';
+export const FETCH_FAMILY_ERROR = 'FETCH_FAMILY_ERROR';
+export const fetchFamily = id => ({
+  type: FETCH_FAMILY,
+  loadStart: FETCH_FAMILY_LOAD_START,
+  loadEnd: FETCH_FAMILY_LOAD_END,
+  errorType: FETCH_FAMILY_ERROR,
+  payload: getFamily(id)
+});

client/src/actions/nanny.js

@@ -0,0 +1,13 @@
+import { getNanny } from '../services/nannyApi';
+
+export const FETCH_NANNY = 'FETCH_NANNY';
+export const FETCH_NANNY_LOAD_START = 'FETCH_NANNY_LOAD_START';
+export const FETCH_NANNY_LOAD_END = 'FETCH_NANNY_LOAD_END';
+export const FETCH_NANNY_ERROR = 'FETCH_NANNY_ERROR';
+export const fetchNanny = id => ({
+  type: FETCH_NANNY,
+  loadStart: FETCH_NANNY_LOAD_START,
+  loadEnd: FETCH_NANNY_LOAD_END,
+  errorType: FETCH_NANNY_ERROR,
+  payload: getNanny(id)
+});

client/src/actions/profile.js

@@ -1,11 +1,10 @@
 import {
   updateProfile as putProfile,
-  createProfile as postProfile
+  createProfile as postProfile,
 } from '../services/profileApi';
 import { LOAD_START, LOAD_END } from './fixtures/loadingActions';
 
 
-
 export const PROFILE_UPDATE = 'PROFILE_UPDATE';
 export const PROFILE_UPDATE_ERROR = 'PROFILE_UPDATE_ERROR';
 export const updateProfile = (id, profileInfo) => ({
@@ -16,10 +15,9 @@ export const updateProfile = (id, profileInfo) => ({
   payload: putProfile(id, profileInfo)
 });
 
-
 export const PROFILE_CREATE = 'PROFILE_CREATE';
 export const PROFILE_CREATE_ERROR = 'PROFILE_CREATE_ERROR';
-export const createProfile = (profileInfo) => ({
+export const createProfile = profileInfo => ({
   type: PROFILE_CREATE,
   loadStart: LOAD_START,
   loadEnd: LOAD_END,

client/src/components/dashboard/Appointment.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ROUTES } from '../../routes/routes';
+import { Link } from 'react-router-dom';
+import { getLocalDateTime } from '../helpers/time';
+import moment from 'moment';
+moment().format();
+
+export default function Appointment({ appointment, user }) {
+  return (
+    <div>
+      <Link to={ROUTES.APPOINTMENT_DETAIL.linkTo(user._id, appointment._id)}>
+        <div style={{ border: '1px solid black' }}>
+          <p>Start Time: {getLocalDateTime(appointment.request.startDateTime)}</p>
+          <p>End Time: {getLocalDateTime(appointment.request.endDateTime)}</p>
+        </div>
+      </Link>
+    </div>
+  );
+}

client/src/components/dashboard/AppointmentDetail.js

@@ -1,14 +1,18 @@
 import React, { Fragment, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
+import { getLocalDateTime } from '../helpers/time';
+import moment from 'moment';
+import { ROUTES } from '../../routes/routes';
+import { Link } from 'react-router-dom';
+moment().format();
 
 class AppointmentDetail extends PureComponent {
   static propTypes = {
     detail: PropTypes.object,
     fetchAppointment: PropTypes.func.isRequired,
     match: PropTypes.object.isRequired,
-    fetchNanny: PropTypes.func.isRequired,
-    fetchFamily: PropTypes.func.isRequired,
+    session: PropTypes.object.isRequired
   };
 
   componentDidMount() {
@@ -19,12 +23,45 @@ class AppointmentDetail extends PureComponent {
   }
 
   render() {
-    const { detail } = this.props;
+    const { detail, session } = this.props;
     if(!detail) return null;
+    console.log(detail);
+    console.log(session);
+    const ageComponents = detail.request.birthdays.map((birthday, i) => {
+      const age = moment([birthday]).fromNow(true);
+      return (
+        <li key={i}>
+          Child {i + 1}: {age}
+        </li>
+      );
+    });
+
     return (
       <Fragment>
         <h3>Appointment Detail</h3>
-        <p></p>
+        <p>Start Time: {getLocalDateTime(detail.request.startDateTime)}</p>
+        <p>End Time: {getLocalDateTime(detail.request.endDateTime)}</p>
+        <p>Number of Children: {detail.request.birthdays.length}</p>
+        <p>Ages of Children: {ageComponents} </p>
+        <p>Appointment Comments: {detail.request.appointmentComments}</p>
+        <div>
+          <h4>Nanny Profile:</h4>
+          <p>Name: {detail.nannyProfile.name}</p>
+          <img src={detail.nannyProfile.photo} alt="profile photo" />
+          <p>Price per hour: {detail.nannyProfile.pricePerHour + 3.5}</p>
+          <p>Phone: {detail.nannyProfile.phone}</p>
+          <p>Home ZIP code: {detail.nannyProfile.zip}</p>
+          <p>Description: {detail.nannyProfile.description}</p>
+        </div>
+        <div>
+          <h4>Family Profile:</h4>
+          <p>Name: {detail.familyProfile.name}</p>
+          <p>Phone: {detail.familyProfile.phone}</p>
+          <p>Home ZIP code: {detail.familyProfile.zip}</p>
+          <p>Number of Children: {detail.familyProfile.birthdays.length}</p>
+          <p>Description: {detail.familyProfile.description}</p>
+          <Link to={ROUTES.DASHBOARD.linkTo(session._id)}>Return to Appointments List</Link>
+        </div>
       </Fragment>
     );
   }

client/src/components/dashboard/Appointments.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Appointment from './Appointment';
+export default class Appointments extends Component {
+  static propTypes = {
+    appointments: PropTypes.array.isRequired,
+    fetchAppointments: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired,
+    match: PropTypes.object.isRequired
+  };
+
+  componentDidMount() {
+    const { fetchAppointments } = this.props;
+    const userId = this.props.match.params.id;
+    fetchAppointments(userId);
+  }
+
+  render() {
+    const { appointments, user } = this.props;
+
+    const appointmentComponents = appointments.map(appointment => {
+      return (
+        <Appointment
+          key={appointment._id}
+          appointment={appointment}
+          user={user}
+        />
+      );
+    });
+
+    return (
+      <div>
+        <h1>I am an appointment list.</h1>
+        {appointmentComponents}
+      </div>
+    );
+  }
+}

client/src/components/dashboard/Dashboard.js

@@ -1,8 +1,14 @@
 import React, { PureComponent } from 'react';
 import NannyDashboard from './NannyDashboard';
 import FamilyDashboard from './FamilyDashboard';
+import PropTypes from 'prop-types';
 
 export default class Dashboard extends PureComponent {
+  static propTypes = {
+    appointments: PropTypes.array.isRequired,
+    fetchAppointments: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired,
+  };
 
   render() {
     const { role } = this.props.user;

client/src/components/dashboard/FamilyDashboard.js

@@ -1,12 +1,21 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Appointments from './Appointments';
 import FamilyRequestContainer from '../../containers/FamilyRequestContainer';
 
 
 export default class FamilyDashboard extends Component {
+  static propTypes = {
+    appointments: PropTypes.array.isRequired,
+    fetchAppointments: PropTypes.func.isRequired,
+    user: PropTypes.object.isRequired
+  };
+
   render() {
     return (
       <div>
         <h1>I am a family dashboard</h1>
+        <Appointments  {...this.props }/>
         <FamilyRequestContainer {...this.props} />
       </div>
     );

client/src/components/helpers/time.js

@@ -0,0 +1,8 @@
+import moment from 'moment';
+moment().format();
+
+export const getLocalDateTime = time => {
+  return moment(time)
+    .local()
+    .format('dddd, MMMM Do YYYY, h:mm:ss a');
+};

client/src/containers/AppointmentDetail.js

@@ -0,0 +1,20 @@
+import { connect } from 'react-redux';
+import AppointmentDetail from '../components/dashboard/AppointmentDetail';
+import { getAppointment } from '../selectors/appointment';
+import { fetchAppointment } from '../actions/appointment';
+import { getSession } from '../selectors/session';
+
+const mapStateToProps = state => ({
+  detail: getAppointment(state),
+  session: getSession(state)
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchAppointment: (appointmentId, userId) =>
+    dispatch(fetchAppointment(appointmentId, userId))
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AppointmentDetail);

client/src/containers/DashBoardContainer.js

@@ -1,14 +1,23 @@
 import { connect } from 'react-redux';
 import Dashboard from '../components/dashboard/Dashboard';
 import { getSession, getSessionProfile, getSessionLoading } from '../selectors/session';
+import { getAppointments } from '../selectors/appointment';
+import { fetchAppointments } from '../actions/appointment';
 
 const mapStateToProps = state => ({
   user: getSession(state),
   profile: getSessionProfile(state),
+  appointments: getAppointments(state),
   loading: getSessionLoading(state)
 });
 
+const mapDispatchToProps = dispatch => {
+  return {
+    fetchAppointments: userId => dispatch(fetchAppointments(userId))
+  };
+};
+
 export default connect(
   mapStateToProps,
-  null
+  mapDispatchToProps
 )(Dashboard);

client/src/reducers/appointment.js

@@ -0,0 +1,42 @@
+import {
+  FETCH_APPOINTMENTS,
+  FETCH_APPOINTMENTS_LOAD_START,
+  FETCH_APPOINTMENTS_LOAD_END,
+  FETCH_APPOINTMENTS_ERROR,
+  FETCH_APPOINTMENT,
+  FETCH_APPOINTMENT_LOAD_START,
+  FETCH_APPOINTMENT_LOAD_END,
+  FETCH_APPOINTMENT_ERROR
+} from '../actions/appointment';
+
+const initialState = {
+  appointments: [],
+  detail: null,
+  loading: false,
+  error: null,
+  nanny: 'hi',
+  family: 'hey'
+};
+
+export default function reducer(state = initialState, { type, payload }) {
+  switch(type) {
+    case FETCH_APPOINTMENTS:
+      return { ...state, appointments: payload };
+    case FETCH_APPOINTMENTS_LOAD_START:
+      return { ...state, loading: true };
+    case FETCH_APPOINTMENTS_LOAD_END:
+      return { ...state, loading: false };
+    case FETCH_APPOINTMENTS_ERROR:
+      return { ...state, error: payload };
+    case FETCH_APPOINTMENT:
+      return { ...state, detail: payload };
+    case FETCH_APPOINTMENT_LOAD_START:
+      return { ...state, loading: true };
+    case FETCH_APPOINTMENT_LOAD_END:
+      return { ...state, loading: false };
+    case FETCH_APPOINTMENT_ERROR:
+      return { ...state, error: payload };
+    default:
+      return state;
+  }
+}

client/src/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import session from './session';
 import request from './requests/request';
 import availability from './availability';
+import appointment from './appointment';
 
 export default combineReducers({
   session,
+  appointment,
   request,
   availability
 });

client/src/routes/routes.js

@@ -5,7 +5,7 @@ import { Signup, Signin } from '../containers/AuthContainer';
 import { withSession } from '../components/auth/withSession';
 import ProfileContainer from '../containers/ProfileContainer';
 import DashBoardContainer from '../containers/DashBoardContainer';
-// import FamilyRequestContainer from '../containers/FamilyRequestContainer';
+import AppointmentDetail from '../containers/AppointmentDetail';
 
 
 
@@ -20,11 +20,6 @@ export const ROUTES = {
     Component: Signup,
     linkTo: () => '/signup'
   },
-  DASHBOARD: {
-    path: '/dashboard/:id',
-    Component: withSession(DashBoardContainer),
-    linkTo: id => `/dashboard/${id}`
-  },
   SIGNIN: {
     path: '/signin',
     Component: Signin,
@@ -35,6 +30,16 @@ export const ROUTES = {
     Component: withSession(ProfileContainer),
     linkTo: id => `/profile/${id}`
 
+  },
+  APPOINTMENT_DETAIL: {
+    path: '/dashboard/:userId/:appointmentId',
+    Component: withSession(AppointmentDetail),
+    linkTo: (userId, appointmentId) => `/dashboard/${userId}/${appointmentId}`
+  },
+  DASHBOARD: {
+    path: '/dashboard/:id',
+    Component: withSession(DashBoardContainer),
+    linkTo: id => `/dashboard/${id}`
   }
 };