From 7605be6c77393ed98e179c27f3bc3915afb95f5c Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 9 Oct 2020 20:51:00 +0300 Subject: feat: create DateString component --- src/components/DateString/DateString.tsx | 22 ++++++++++++++++++++++ src/components/PollCard/PollCard.tsx | 12 ++---------- 2 files changed, 24 insertions(+), 10 deletions(-) create mode 100644 src/components/DateString/DateString.tsx 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 = ({ value }) => { + const date = new Date(value); + const formatted = date.toLocaleString('default', DATE_FORMAT); + + return <>{formatted}; +}; + +export default DateString; diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index a06bad8..7094d88 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', @@ -55,7 +48,6 @@ const PollCard: React.FC = 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) { @@ -97,7 +89,7 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { return ( - + } /> {poll.description && ( {poll.description} -- cgit v1.2.3