Overview

This week, we are finishing on the remaining functionalities on adding the weight and the feedback system. After that, we focused on refactoring our code by implementing Redux.

Weight Graph and Info Page

Our client reflected that a weight graph would be useful since they can extract information by comparing the change in weight to the feed rate. We decided then to overlay the weight graph onto the feed graph. On the patient dashboard, we have added a showWeight check box which when on click, will show the weight graph. This is done by adding a weight graph to the LineChart component. To do this, we need to map the weight data using a findWeights function which returns the weights within the timestamp. The value of the weights will also be multiplied by a constant so that it will be in a similar range as the feed rate so that it can be better viewed.

Weight

The weight value can also be changed in the updated patient info page by clicking the change wight button. When the new weight is entered, the value will be updated using dispatch and a successful message will also popup.

Change Weight

User Feedback System

This functionality allows the patient to enter comments on specific data points that they want to clarify. On the patient dashboard, the user can click on the points to comment. We have added a component Modal which is a popup for the user to submit their feedback. After it is entered, the message will be stored in the database. Users will be able to view this by hovering on the point and there will be a new column patient_feedback added.

Feedback1

Feedback2

Refactoring

To refactor the code, we have decided to implement Redux. It is a great tool to improve state management for our app. We have modified using useSelector and useDispatch throughout the whole program. Selector helps with storing minimal state by deriving data from the state when it is needed, so this helps avoid repeating logic as different parts of the app need to read the same data. A Dispatch makes the only way to update the state by calling store.dispatch and pass in an action object so that the states are better managed and will not be updated elsewhere. The Provider is also used is our index.js which allows the Redux store available to any nested components which we have wrapped our entire app with.

Next Steps

As we have now done with functionalities and refactored our app. We will be progressing on testing the program and getting to the final product. Some documentations will also need to be added so that users in the future can use the app without issues.