diff options
author | eug-vs <eug-vs@keemail.me> | 2020-10-09 20:51:00 +0300 |
---|---|---|
committer | eug-vs <eug-vs@keemail.me> | 2020-10-09 20:51:00 +0300 |
commit | 7605be6c77393ed98e179c27f3bc3915afb95f5c (patch) | |
tree | e18fb51338a2efbfd521456e4d77184e43fc891f | |
parent | fcaddcd6ad8607d05279acdb87675de6180ac1cb (diff) | |
download | which-ui-7605be6c77393ed98e179c27f3bc3915afb95f5c.tar.gz |
feat: create DateString component
-rw-r--r-- | src/components/DateString/DateString.tsx | 22 | ||||
-rw-r--r-- | src/components/PollCard/PollCard.tsx | 12 |
2 files changed, 24 insertions, 10 deletions
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; 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<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) { @@ -97,7 +89,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} |