feat(RelativeTime): added switching of date display type

taskany-inc · Jun 1, 2023 · 34e2dc6 · 34e2dc6
1 parent b62ebb8
commit 34e2dc6
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@sentry/nextjs": "7.50.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.5",
-    "@taskany/bricks": "1.3.1",
+    "@taskany/bricks": "1.4.0",
     "@taskany/colors": "1.0.4",
     "@tippyjs/react": "4.2.6",
     "@trpc/client": "10.23.1",

diff --git a/src/components/CommentView/CommentView.tsx b/src/components/CommentView/CommentView.tsx
@@ -120,6 +120,11 @@ export const CommentView: FC<CommentViewProps> = ({
     const [editMode, setEditMode] = useState(false);
     const [commentDescription, setCommentDescription] = useState(description);
     const { reactionsProps } = useReactionsResource(reactions);
+    const [isRelativeTime, setIsRelativeTime] = useState(true);
+
+    const onChangeTypeDate = () => {
+        setIsRelativeTime(!isRelativeTime);
+    };
 
     const onEditClick = useCallback(() => {
         setEditMode(true);
@@ -167,11 +172,11 @@ export const CommentView: FC<CommentViewProps> = ({
                 />
             ) : (
                 <StyledCommentCard isNew={isNew} onClick={onDoubleCommentClick}>
-                    <StyledCardInfo>
+                    <StyledCardInfo onClick={onChangeTypeDate}>
                         <div>
                             <Link inline>{author?.name}</Link> —{' '}
                             <Link inline href={`#comment-${id}`}>
-                                <RelativeTime date={createdAt} />
+                                <RelativeTime isRelativeTime={isRelativeTime} date={createdAt} />
                             </Link>
                         </div>
                         <StyledCommentActions>

diff --git a/src/components/GoalPreview/GoalPreview.tsx b/src/components/GoalPreview/GoalPreview.tsx
@@ -104,6 +104,11 @@ const StyledCard = styled(Card)`
 const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete }) => {
     const { user, locale } = usePageContext();
     const { highlightCommentId, setHighlightCommentId } = useHighlightedComment();
+    const [isRelativeTime, setIsRelativeTime] = useState(true);
+
+    const onChangeTypeDate = () => {
+        setIsRelativeTime(!isRelativeTime);
+    };
 
     const archiveMutation = trpc.goal.toggleArchive.useMutation();
     const utils = trpc.useContext();
@@ -310,10 +315,10 @@ const GoalPreview: React.FC<GoalPreviewProps> = ({ preview, onClose, onDelete })
                 </StyledModalHeader>
                 <StyledModalContent ref={contentRef}>
                     <StyledCard>
-                        <CardInfo>
+                        <CardInfo onClick={onChangeTypeDate}>
                             <Link inline>{goal?.activity?.user?.name}</Link> —{' '}
                             {nullable(goal?.createdAt, (date) => (
-                                <RelativeTime date={date} />
+                                <RelativeTime isRelativeTime={isRelativeTime} date={date} />
                             ))}
                         </CardInfo>
 

diff --git a/src/components/RelativeTime/RelativeTime.tsx b/src/components/RelativeTime/RelativeTime.tsx
@@ -13,9 +13,10 @@ type RelativeTimeKind = RelativeTimeKindCommon | Capitalize<RelativeTimeKindComm
 interface RelativeTimeProps {
     date: Date;
     kind?: RelativeTimeKind;
+    isRelativeTime?: boolean;
 }
 
-const RelativeTime: React.FC<RelativeTimeProps> = ({ kind, date }) => {
+const RelativeTime: React.FC<RelativeTimeProps> = ({ kind, date, isRelativeTime = true }) => {
     const { locale, ssrTime } = usePageContext();
     const [time, setTime] = useState(ssrTime);
     const mounted = useMounted(0);
@@ -43,7 +44,9 @@ const RelativeTime: React.FC<RelativeTimeProps> = ({ kind, date }) => {
     return (
         <>
             {kind ? `${map[kind]} ` : ''}
-            <Light title={createLocaleDate(localeDate, { locale })}>{dateAgo(localeDate, time, { locale })}</Light>
+            <Light title={createLocaleDate(localeDate, { locale })}>
+                {isRelativeTime ? dateAgo(localeDate, time, { locale }) : createLocaleDate(localeDate, { locale })}
+            </Light>
         </>
     );
 };