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

Imrove date formats

4 files changed, 89 insertions, 12 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;
diff --git a/src/components/DateString/compactDateString.ts b/src/components/DateString/compactDateString.ts
new file mode 100644
index 0000000..8bff4b7
--- /dev/null
+++ b/src/components/DateString/compactDateString.ts
@@ -0,0 +1,35 @@
+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.85;
+
+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;
+  if (diff < 60) return 'just now';
+  return resolve(diff);
+};
+
+export default compactDateString;
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 64fab34..5427fd6 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -6,6 +6,7 @@ import { useSnackbar } from 'notistack';
 
 import PercentageBar from './PercentageBar';
 import UserStrip from '../UserStrip/UserStrip';
+import DateString from '../DateString/DateString';
 import BackgroundImage from '../Image/BackgroundImage';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
@@ -15,14 +16,6 @@ interface PropTypes {
   setPoll: (poll: Poll) => void;
 }
 
-const DATE_FORMAT = {
-  month: 'long',
-  day: 'numeric',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-};
-
 const useStyles = makeStyles(theme => ({
   media: {
     display: 'flex',
@@ -56,7 +49,6 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
   const { author, contents: { left, right }, vote } = poll;
   const { enqueueSnackbar } = useSnackbar();
   const { isAuthenticated } = useAuth();
-  const date: string = new Date(poll.createdAt).toLocaleString('default', DATE_FORMAT);
 
   const handleVote = (which: Which) => () => {
     if (!isAuthenticated) {
@@ -98,7 +90,7 @@ const PollCard: React.FC<PropTypes> = React.memo(({ poll, setPoll }) => {
 
   return (
     <Card elevation={3}>
-      <UserStrip user={author} info={date} />
+      <UserStrip user={author} info={<DateString value={poll.createdAt} />} />
       {poll.description && (
         <Typography className={classes.description}>
           {poll.description}
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 1f5a103..da952e9 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { Badge, Typography, CircularProgress } from '@material-ui/core/';
 import { CameraAlt, CheckCircleOutline } from '@material-ui/icons/';
 import { makeStyles } from '@material-ui/core/styles';
@@ -92,6 +92,15 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
+const formatDate = (value: Date | string = ''): string => {
+  const date = new Date(value);
+  const day = (`0${date.getDate()}`).slice(-2);
+  const month = (`0${date.getMonth()}`).slice(-2);
+  const year = date.getFullYear();
+  return `${year}-${month}-${day}`;
+};
+
+
 const ProfileInfo: React.FC<PropTypes> = ({
   savedPolls, totalVotes, setUserInfo, userInfo
 }) => {
@@ -99,7 +108,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   const { user } = useAuth();
   const [progress, setProgress] = useState<number>(0);
 
-  const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
+  const dateSince = useMemo(() => formatDate(userInfo?.createdAt), [userInfo]);
 
   const handleUpdateAvatar = useCallback(async (file: File) => {
     if (user) {