Skip to content

Enhancement lastupdated styling #167

Merged
merged 2 commits into from
Jan 22, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 35 additions & 31 deletions src/components/LastUpdatedCell/LastUpdatedCell.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
import React from 'react'
import PropTypes from "prop-types";
import { useTheme } from '@material-ui/core';
import { red } from '@material-ui/core/colors';
import RelativeTime from 'react-relative-time';
import ItemTableCell from '../ItemTableCell';

/**
* Returns a color showing how old an item is.
* @param {string} time ISO 8601 formatted time string.
* @example
* // Returns "#e57373"
* timeToBackgroundColor("2021-01-04T11:47:00-0500")
* @returns {string} Hex color code.
*/
const timeToBackgroundColor = (time) => {
const lastUpdated = new Date(time).getTime();
const now = new Date().getTime();
const timeDelta = now - lastUpdated;
export default function LastUpdatedCell({ time, ItemTableCellProps }) {

const day = 24 * 60 * 60 * 1000;
const week = day * 7;
const month = week * 4;
const theme = useTheme();

let backgroundColor = "white";
/**
* Returns a color showing how old an item is.
* @param {string} time ISO 8601 formatted time string.
* @example
* // Returns "#e57373"
* timeToBackgroundColor("2021-01-04T11:47:00-0500")
* @returns {string} Hex color code.
*/
const timeToBackgroundColor = (time) => {
const lastUpdated = new Date(time).getTime();
const now = new Date().getTime();
const timeDelta = now - lastUpdated;

// 1-6 days old
if (timeDelta > day && timeDelta <= week) {
backgroundColor = red[100];
}
// 7-28 days old
else if (timeDelta > week && timeDelta <= month) {
backgroundColor = red[300];
}
// 29+ days old
else if (timeDelta > month) {
backgroundColor = red[500];
}
const day = 24 * 60 * 60 * 1000;
const week = day * 7;
const month = week * 4;

return backgroundColor;
}
let backgroundColor = theme.palette.background.paper;

// 1-6 days old
if (timeDelta > day && timeDelta <= week) {
backgroundColor = red[100];
}
// 7-28 days old
else if (timeDelta > week && timeDelta <= month) {
backgroundColor = red[300];
}
// 29+ days old
else if (timeDelta > month) {
backgroundColor = red[500];
}

return backgroundColor;
}

export default function LastUpdatedCell({ time, ItemTableCellProps }) {
// Insert the calculated background color into props so it isn't overriden.
// Inspired by: https://github.com/mui-org/material-ui/issues/19479
ItemTableCellProps = {
Expand Down