Merge pull request #106 from which-ecosystem/feat/date-format

Imrove date formats

1 files changed, 41 insertions, 0 deletions

diff --git a/src/components/DateString/DateString.tsx b/src/components/DateString/DateString.tsx
new file mode 100644
index 0000000..7c824cd
--- /dev/null
+++ b/src/components/DateString/DateString.tsx
@@ -0,0 +1,41 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import compactDateString from './compactDateString';
+
+interface PropTypes {
+  value: Date | string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    display: 'block',
+    cursor: 'pointer'
+  }
+});
+
+const DATE_FORMAT = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+
+const DateString: React.FC<PropTypes> = ({ value }) => {
+  const [isCompact, setIsCompact] = useState<boolean>(true);
+  const classes = useStyles();
+
+  const toggleScompact = useCallback(() => setIsCompact(v => !v), [setIsCompact]);
+
+  const date = useMemo(() => new Date(value), [value]);
+  const formatted = useMemo(() => date.toLocaleString('default', DATE_FORMAT), [date]);
+  const compact = useMemo(() => compactDateString(date), [date]);
+
+  return (
+    <div role="presentation" className={classes.root} onClick={toggleScompact}>
+      {isCompact ? compact : formatted}
+    </div>
+  );
+};
+
+export default DateString;