feat: add filter for workspaces

BREAKING CHANGE: complete new design of workspaces

client/src/actions/index.js

@@ -1,4 +1,4 @@
 export { login, logout } from './auth.actions';
 export { getUser } from './users.actions';
 export { getBookings, postBookings } from './bookings.actions';
-export { getWorkspaces } from './workspaces.actions';
+export { getWorkspaces, filterWorkspaces } from './workspaces.actions';

client/src/actions/types.js

@@ -5,8 +5,9 @@ export const GET_USER = 'GET_USER';
 export const USER_ERROR = 'USER_ERROR';
 
 export const GET_WORKSPACES = 'GET_WORKSPACES';
-export const POST_BOOKINGS = 'POST_BOOKINGS';
+export const FILTER_WORKSPACES = 'FILTER_WORKSPACES';
 export const WORKSPACES_ERROR = 'WORKSPACES_ERROR';
 
 export const GET_BOOKINGS = 'GET_BOOKINGS';
+export const POST_BOOKINGS = 'POST_BOOKINGS';
 export const BOOKINGS_ERROR = 'BOOKINGS_ERROR';

client/src/actions/workspaces.actions.js

@@ -1,13 +1,19 @@
 import axios from 'axios';
-import { BOOKINGS_ERROR, GET_WORKSPACES, WORKSPACES_ERROR } from './types';
+import {
+  BOOKINGS_ERROR,
+  FILTER_WORKSPACES,
+  GET_WORKSPACES,
+  WORKSPACES_ERROR,
+} from './types';
 import { authHeader, API_URL } from '../config/api.config';
 
-const getWorkspaces = () => async (dispatch) => {
+const getWorkspaces = (callback) => async (dispatch) => {
   axios
     .get(`${API_URL}/workspaces`, authHeader())
     .then(({ data }) => {
       dispatch({ type: GET_WORKSPACES, payload: data });
       dispatch({ type: BOOKINGS_ERROR, payload: '' });
+      callback();
     })
     .catch(({ response }) => {
       if (response) {
@@ -18,5 +24,14 @@ const getWorkspaces = () => async (dispatch) => {
     });
 };
 
-// eslint-disable-next-line import/prefer-default-export
-export { getWorkspaces };
+const filterWorkspaces = (workspaces, room) => async (dispatch) => {
+  const filteredWorkspaces = room === 'All Rooms'
+    ? workspaces
+    : workspaces.filter((workspace) => workspace.room.name === room);
+  dispatch({
+    type: FILTER_WORKSPACES,
+    payload: { workspaces: filteredWorkspaces },
+  });
+};
+
+export { getWorkspaces, filterWorkspaces };

client/src/reducers/workspaces.reducer.js

@@ -1,14 +1,17 @@
-import { GET_WORKSPACES, WORKSPACES_ERROR } from '../actions/types';
+import { GET_WORKSPACES, WORKSPACES_ERROR, FILTER_WORKSPACES } from '../actions/types';
 
 const INITIAL_STATE = {
   workspaces: undefined,
   errorMessage: '',
+  filter: undefined,
 };
 
 function workspaces(state = INITIAL_STATE, action) {
   switch (action.type) {
     case GET_WORKSPACES:
       return { ...state, workspaces: action.payload };
+    case FILTER_WORKSPACES:
+      return { ...state, filter: action.payload };
     case WORKSPACES_ERROR:
       return { ...state, errorMessage: action.payload };
     default:

client/src/views/workspaces.view.js

@@ -1,37 +1,126 @@
+/* eslint-disable no-nested-ternary */
 import React, { Component } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import {
-  Card, Container, Col, Row,
+  Badge, Card, Container, Col, Row, Form,
 } from 'react-bootstrap';
 import * as actions from '../actions';
 import NewBooking from '../components/newbooking.component';
 
+const today = new Date().toISOString().slice(0, 10);
+
 class Workspaces extends Component {
+  constructor(props) {
+    super(props);
+    this.getRooms = this.getRooms.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.state = {
+      rooms: [],
+      date: today,
+      room: 'All Rooms',
+    };
+  }
+
   componentDidMount() {
     const { getWorkspaces } = this.props;
-    getWorkspaces();
+    getWorkspaces(() => {
+      const { workspaces } = this.props;
+      this.getRooms(workspaces);
+      this.setFilter();
+    });
   }
 
+  getRooms = (workspaces) => {
+    const map = new Map();
+    const rooms = [];
+    workspaces.forEach((workspace) => {
+      if (!map.has(workspace.room._id)) {
+        map.set(workspace.room._id, true);
+        rooms.push(workspace.room);
+      }
+    });
+    rooms.sort((a, b) => (a.name < b.name ? -1 : 1));
+    this.setState({ rooms });
+  };
+
+  setFilter = (event) => {
+    const { workspaces, filterWorkspaces } = this.props;
+    const room = event ? event.target.value : 'All Rooms';
+    this.setState({ room });
+    filterWorkspaces(workspaces, room);
+  };
+
   render() {
-    const { workspaces, errorMessage } = this.props;
+    const { workspaces, errorMessage, filter } = this.props;
+    const { rooms, date, room } = this.state;
 
     if (errorMessage) return <Container>{errorMessage}</Container>;
-    if (!workspaces) return <Container>Loading...</Container>;
+    if (!workspaces || !filter) return <Container>Loading...</Container>;
 
     return (
       <Container>
-        <h2>Workspaces</h2>
         <Row>
-          {workspaces.map((workspace) => (
+          <Col md>
+            <Form.Group>
+              <Form.Control as="select" onChange={this.setFilter}>
+                <option>All Rooms</option>
+                {rooms.length > 0
+                  && rooms.map((r) => <option key={r._id}>{r.name}</option>)}
+              </Form.Control>
+            </Form.Group>
+          </Col>
+          <Col md>
+            <Form.Group>
+              <Form.Control
+                name="date"
+                type="date"
+                value={date}
+                min={today}
+                onChange={(event) => {
+                  this.setState({ date: event.target.value });
+                }}
+              />
+            </Form.Group>
+          </Col>
+        </Row>
+        <hr />
+        <Row>
+          {filter.workspaces.map((workspace) => (
             <Col key={workspace._id} md="4" className="mb-3">
               <Card className="shadow">
                 <Card.Header>{workspace.room.name}</Card.Header>
                 <Card.Body>
                   <Card.Title>{workspace.name}</Card.Title>
+                  {workspace.bookings.length > 0
+                  && workspace.bookings.filter((booking) => booking.date === date).length > 0 ? (
+                      workspace.bookings
+                        .filter((booking) => booking.date === date)
+                        .map((booking) => (
+                          <div key={booking._id}>
+                            {booking.bookedState === 0 ? (
+                              <Badge pill variant="info">
+                                Free PM
+                              </Badge>
+                            ) : booking.bookedState === 1 ? (
+                              <Badge pill variant="danger">
+                                Occupied
+                              </Badge>
+                            ) : (
+                              <Badge pill variant="warning">
+                                Free AM
+                              </Badge>
+                            )}
+                          </div>
+                        ))
+                    ) : (
+                      <Badge pill variant="success">
+                        Free
+                      </Badge>
+                    )}
                 </Card.Body>
                 <Card.Footer>
-                  <NewBooking workspace={workspace} />
+                  <NewBooking workspace={workspace} date={date} room={room} />
                 </Card.Footer>
               </Card>
             </Col>
@@ -43,7 +132,11 @@ class Workspaces extends Component {
 }
 
 function mapStateToProps(state) {
-  return { workspaces: state.workspaces.workspaces, errorMessage: state.workspaces.errorMessage };
+  return {
+    workspaces: state.workspaces.workspaces,
+    errorMessage: state.workspaces.errorMessage,
+    filter: state.workspaces.filter,
+  };
 }
 
 export default compose(connect(mapStateToProps, actions))(Workspaces);