From d1d8848539ec6cb41695038873dd445bb03a9b6a Mon Sep 17 00:00:00 2001
From: G r e y <grey@coder.com>
Date: Sun, 20 Mar 2022 00:33:25 +0000
Subject: [PATCH] feat(site): add TimeCell component

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
---
 .../components/AuditLog/TimeCell.stories.tsx  | 15 +++++++++++
 site/src/components/AuditLog/TimeCell.tsx     | 25 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 site/src/components/AuditLog/TimeCell.stories.tsx
 create mode 100644 site/src/components/AuditLog/TimeCell.tsx

diff --git a/site/src/components/AuditLog/TimeCell.stories.tsx b/site/src/components/AuditLog/TimeCell.stories.tsx
new file mode 100644
index 0000000000000..8cbae38585658
--- /dev/null
+++ 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
new file mode 100644
index 0000000000000..c281afb8205f3
--- /dev/null
+++ 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>
+  )
+}