From 7605be6c77393ed98e179c27f3bc3915afb95f5c Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 20:51:00 +0300
Subject: feat: create DateString component

---
 src/components/DateString/DateString.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/components/DateString/DateString.tsx

(limited to 'src/components/DateString')

diff --git a/src/components/DateString/DateString.tsx b/src/components/DateString/DateString.tsx
new file mode 100644
index 0000000..e31b52e
--- /dev/null
+++ b/src/components/DateString/DateString.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface PropTypes {
+  value: Date | string;
+}
+
+const DATE_FORMAT = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+
+const DateString: React.FC<PropTypes> = ({ value }) => {
+  const date = new Date(value);
+  const formatted = date.toLocaleString('default', DATE_FORMAT);
+
+  return <>{formatted}</>;
+};
+
+export default DateString;
-- 
cgit v1.2.3


From 31900353b6ea3e4570c15d1c1585685b4413d6d9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 21:46:45 +0300
Subject: feat: toggle between compact and full date format

---
 src/components/DateString/DateString.tsx       | 27 +++++++++++++++++---
 src/components/DateString/compactDateString.ts | 34 ++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DateString/compactDateString.ts

(limited to 'src/components/DateString')

diff --git a/src/components/DateString/DateString.tsx b/src/components/DateString/DateString.tsx
index e31b52e..3f2ceb2 100644
--- a/src/components/DateString/DateString.tsx
+++ b/src/components/DateString/DateString.tsx
@@ -1,9 +1,18 @@
-import React from 'react';
+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',
@@ -13,10 +22,20 @@ const DATE_FORMAT = {
 };
 
 const DateString: React.FC<PropTypes> = ({ value }) => {
-  const date = new Date(value);
-  const formatted = date.toLocaleString('default', DATE_FORMAT);
+  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 <>{formatted}</>;
+  return (
+    <div className={classes.root} onClick={toggleScompact}>
+      {isCompact ? compact : formatted}
+    </div>
+  );
 };
 
 export default DateString;
diff --git a/src/components/DateString/compactDateString.ts b/src/components/DateString/compactDateString.ts
new file mode 100644
index 0000000..dffd912
--- /dev/null
+++ b/src/components/DateString/compactDateString.ts
@@ -0,0 +1,34 @@
+const metrics = [
+  { name: 'minute', ratio: 60 },
+  { name: 'hour', ratio: 60 },
+  { name: 'day', ratio: 24 },
+  { name: 'week', ratio: 7 },
+  { name: 'month', ratio: 4 },
+  { name: 'year', ratio: 12 }
+];
+
+const PRECISION = 0.75;
+
+const resolve = (value: number, metricIndex = 0): string => {
+  // Recursively divide value until it's ready to be presented as a string
+  const metric = metrics[metricIndex];
+  const nextMetric = metrics[metricIndex + 1];
+  const newValue = value / metric.ratio;
+
+  if (newValue < nextMetric.ratio * PRECISION) {
+    const rounded = Math.round(newValue);
+    const isPlural = rounded > 1;
+    const count = isPlural ? rounded : 'a';
+    const ending = isPlural ? 's' : '';
+    return `${count} ${metric.name}${ending} ago`;
+  }
+  return resolve(newValue, metricIndex + 1);
+};
+
+const compactDateString = (date: Date): string => {
+  const now = new Date();
+  const diff = (now.valueOf() - date.valueOf()) / 1000;
+  return resolve(diff);
+};
+
+export default compactDateString;
-- 
cgit v1.2.3


From 4c73ebe644e7b781fee57bb295f8819bf6568628 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 9 Oct 2020 21:48:38 +0300
Subject: feat: display 'just now' if was just posted

---
 src/components/DateString/compactDateString.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/DateString')

diff --git a/src/components/DateString/compactDateString.ts b/src/components/DateString/compactDateString.ts
index dffd912..f067b1a 100644
--- a/src/components/DateString/compactDateString.ts
+++ b/src/components/DateString/compactDateString.ts
@@ -28,6 +28,7 @@ const resolve = (value: number, metricIndex = 0): string => {
 const compactDateString = (date: Date): string => {
   const now = new Date();
   const diff = (now.valueOf() - date.valueOf()) / 1000;
+  if (diff < 60) return 'just now';
   return resolve(diff);
 };
 
-- 
cgit v1.2.3


From a1a2cb59616d833d503c3c090116fc0ad1e9d542 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 10 Oct 2020 11:48:05 +0300
Subject: fix: resolve eslint errors

---
 src/components/DateString/DateString.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/DateString')

diff --git a/src/components/DateString/DateString.tsx b/src/components/DateString/DateString.tsx
index 3f2ceb2..7c824cd 100644
--- a/src/components/DateString/DateString.tsx
+++ b/src/components/DateString/DateString.tsx
@@ -32,7 +32,7 @@ const DateString: React.FC<PropTypes> = ({ value }) => {
   const compact = useMemo(() => compactDateString(date), [date]);
 
   return (
-    <div className={classes.root} onClick={toggleScompact}>
+    <div role="presentation" className={classes.root} onClick={toggleScompact}>
       {isCompact ? compact : formatted}
     </div>
   );
-- 
cgit v1.2.3


From 5ee4f42b577449a58469fd3c7892455d097a6c79 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 10 Oct 2020 12:01:01 +0300
Subject: feat: increase diff rounding precision

---
 src/components/DateString/compactDateString.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/DateString')

diff --git a/src/components/DateString/compactDateString.ts b/src/components/DateString/compactDateString.ts
index f067b1a..8bff4b7 100644
--- a/src/components/DateString/compactDateString.ts
+++ b/src/components/DateString/compactDateString.ts
@@ -7,7 +7,7 @@ const metrics = [
   { name: 'year', ratio: 12 }
 ];
 
-const PRECISION = 0.75;
+const PRECISION = 0.85;
 
 const resolve = (value: number, metricIndex = 0): string => {
   // Recursively divide value until it's ready to be presented as a string
-- 
cgit v1.2.3