feat(site): add TimeCell component

greyscaled · greyscaled · commit d1d8848539ec · 2022-03-20T00:33:25.000Z
Summary: This is direct follow-up to #484, #500, and #501. It is a part of many steps in porting/refactoring the AuditLog from v1. Details: - Port over TimeCell from v1, with refactorings - A jest test was not added because we use locale dates and times, which can be tricky to test. This can be addressed in the future. Impact: This change does not have any user-facing impact yet because AuditLog is not yet available in the product. This is part of an incremental approach; the FE is still waiting on the BE port. Relations: - This commit relates to #472, but does not finish it - This commit should not be merged until after #484, #500 and #501, because it builds off of them
diff --git a/site/src/components/AuditLog/TimeCell.stories.tsx b/site/src/components/AuditLog/TimeCell.stories.tsx
@@ -0,0 +1,15 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { TimeCell, TimeCellProps } from "./TimeCell"
+
+export default {
+  title: "AuditLog/Cells/TimeCell",
+  component: TimeCell,
+} as ComponentMeta<typeof TimeCell>
+
+const Template: Story<TimeCellProps> = (args) => <TimeCell {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  date: new Date(),
+}
diff --git a/site/src/components/AuditLog/TimeCell.tsx b/site/src/components/AuditLog/TimeCell.tsx
@@ -0,0 +1,25 @@
+import Box from "@material-ui/core/Box"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+
+export interface TimeCellProps {
+  date: Date
+}
+export namespace TimeCellProps {
+  export const displayTime = (props: TimeCellProps): string => {
+    return props.date.toLocaleTimeString()
+  }
+
+  export const displayDate = (props: TimeCellProps): string => {
+    return props.date.toLocaleDateString().replace(/\//g, ".")
+  }
+}
+
+export const TimeCell: React.FC<TimeCellProps> = (props) => {
+  return (
+    <Box display="flex" flexDirection="column">
+      <Typography>{TimeCellProps.displayTime(props)}</Typography>
+      <Typography variant="caption">{TimeCellProps.displayDate(props)}</Typography>
+    </Box>
+  )
+}
