Ability to Rearrange Charts on Data Dashboard

[jahn18]

Purpose

Users should have the ability to move charts around.

Description

This still requires an initial design. Please work on the design here: https://docs.google.com/presentation/d/1ewzopIbE7nNtew-pzOVGlbBm-ShRoF-1CaN7ZTIj9UU/edit#slide=id.g2b95e401a1d_0_4

Redux Implementation: We want to save the arrangement of the charts within a the global store so that several components can access it.

Steps:

1. Create a new folder under stores.

2. Create files for Action, Types, Reducers, and Sagas (Several examples are shown here https://github.com/UBCSailbot/website/tree/main/stores). We won't be calling an API in this case, so a file for Service is not necessary.

• You should define three different actions: (1) when a user rearranges the chart, (2) when the update succeeds, and (3) when the update fails.
• For types, take a look at the other examples. In our case, we want some field to store the array and also an error field to save the error message in case something fails.
• The reducer implementation should be straightforward. Implement a function for the update succeed case (we update the state), and a function for the update failure case (we update the error field).
• The implementation for the Saga class will be slightly different compared to the other examples shown in stores. When implementing a function within the class, we want something akin to:

*[<ACTION_NAME_REARRANGING_CHART>]() {
    yield takeLatest(<ACTION_NAME_REARRANGING_CHART>, (action) => {
        ... add logic here to call reducers for update succeed and update failed case 
    })
}

takeLastest will call the function you implemented whenever a <ACTION_NAME_REARRANGING_CHART> action is dispatched.

3. Dispatch the action when a user updates the chart arrangment.

We most likely want to call this dispatch when a user completes rearranging the chart (possibly by pressing some button?). Take a look here as an example as to how this can be done: https://redux-saga.js.org/docs/introduction/GettingStarted

4. Add the Saga and Reducer class you implemented to https://github.com/UBCSailbot/website/blob/main/lib/redux/rootReducer.ts and https://github.com/UBCSailbot/website/blob/main/lib/redux/rootSaga.ts

5. Access the data you saved in the redux store within the DashboardContainer file.

You want to modify mapStateToProps to access the data you saved in the redux store. Take a look here: https://github.com/UBCSailbot/website/blob/main/views/DashboardContainer.tsx#L142C7-L142C22. Once you pass in the correct data, you can then access it as a prop within the class (take gps, batteries, and windSensors as an example).

Now using the data you saved, you can then use this to determine how the charts should be rearranged.

6. How will we save the arrangement of the chart for each user? It would be pretty annoying to have to rearrange the charts everytime we refresh.