Add coloring to ItemTable dates to indicate age

[campb303]

In the old webqueue, the Grease monkey/Tampermonkey script added shades of red to the "last modified" cell of an item in the item table. This logic should be implemented in the new ItemTable component.

[wrigh393]

React Relative Time does not accept the use of className to pass CSS classes to the component so we have determined that the best way to accomplish styling based on the age of an item is to create a custom component to render the dates as intended.

[campb303]

The ReactRelativeTime component is just a function that takes a time string and returns a relative time string. If we were to put the styling on that, it would only highlight the text inside the table cell as opposed to the cell itself. Since we want the styling on the cell itself, we'll need to modify the TableCell's component to change styling based on the value fo the different in time between the last modified date and the current date.

This might be best done by creating a modified TableCell component for the last updated column and using that component in the ItemTable loop that generated columns.

[campb303]

To do this:

1. Make a custom component for the last updated cell that wraps an MUI TableCell and contains the logic for setting a background color for a cell based on the time delta of now - lastUpdaed. We could call it LastUpdatedCell.
2. Update the react-table column definitions to use TableCell or LastUpdatedCell accordingly.

https://github.itap.purdue.edu/ECN/webqueue2/blob/staging/src/components/ItemTable/ItemTable.js#L43-L55

[wrigh393]

To style the last updated cells I created a component called LastUpdatedCell and a state variable called cellBackgroundColor.

In the LastUpdatedCell component, the variable lastUpdated is passed the date value and converts it from a UTC string to milliseconds. The now variable is passed the current date on the user's system in milliseconds. These two variable are used to calculate timeDelta which is equal to now - lastUpdated.

The day, week, and month variables all calculate their respective values in milliseconds. We then use an if else statement to determine if timeDetla is more than a day, week, or month.

Example:

    if (timeDelta > day && timeDelta < week && timeDelta < month)//more than one day since last
         {
            setCellBackgroundColor("yellow");
        } else if (timeDelta > week && timeDelta < month) // more than a week since last update
        {
            setCellBackgroundColor("purple");
        } else if (timeDelta > month) //more than a month since last update
        {
            setCellBackgroundColor("green");
        }

We then return a <RelativeTime/> component and render that component for the cells in the last updated column.

Last, we use the cell.getCellProps() prop to set the background color styling of cells with a column id of "lastUpdated" and pass the cellBackgroundColor state variable as the color value.

The next step to solving this issue is calculating the color value based on the timeDetla, not by setting a fixed value for the color.

[campb303]

Rather than using a state variable, since we wont' be be changing the background color of the cell after first render, we should use a local variable inside the component that gets sets based on the same logic you're already using to get a color.

[wrigh393]

To render this component we moved away from using a state variable and instead used react-table's render prop which allows for functions to be passed. In this prop, we implemented a conditional statement that renders the lastUpdatedCell component based on the value cell.column.id of a column. If the value isn't equal to the expected value we render a normal TableCell component.

In order to properly style the lastUpdatedCell component, we need to change the way that the component was being rendered. Previously, it was just rendered using the RelativeTime component but in order to get the proper styling, we needed to wrap that component in a TableCell component. to change the style of the TableCell component we had to pass cell.getCellProps() and expand these props to access the style prop. We then had to expand this style prop so that the styles added by us didn't override the styling that is passed by default by react-table and the useFlexLayout hook.

[campb303]

#135 needs to be merged before this can be closed.