feat: DF-97 | add post time (#101)

* feat: DF-97 | add post time

* feat: DF-97 | fix missing module import

src/components/common/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { Container, Menu, MenuItem, Typography } from '@mui/material';
 import { Logo } from 'components/common/Logo';
-import { CreatePostDialog } from 'components/post/CreatePost/CreatePostDialog';
+import { CreatePostDialog } from 'components/post/CreationDialog/CreatePostDialog';
 import { logout } from 'ducks/auth';
 import { selectUser } from 'ducks/auth/selectors';
 import { useModal } from 'mui-modal-provider';

src/components/post/Comment/Comment.tsx

@@ -9,8 +9,8 @@ import {
   ActionMenu,
   PostCommentMenuActions,
   PostCommentMenuItem,
-} from 'components/post/ActionMenu';
-import { CommentLike } from 'components/post/Like';
+} from 'components/post/common/ActionMenu';
+import { CommentLike } from 'components/post/common/Like';
 import { AvatarButton } from 'components/user/AvatarButton';
 import { selectUser } from 'ducks/auth/selectors';
 import { useDeleteCommentMutation } from 'ducks/comment/api';
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { CommentModel, PostModel } from 'types/post';
 
-import { CommentDate } from './CommentDate';
+import { SmartDate } from '../common/SmartDate/SmartDate';
 import {
   CommentBody,
   CommentHeader,
@@ -84,7 +84,7 @@ export const Comment = ({
         primary={
           <CommentHeader>
             <CommentUsername user={comment.user} />
-            <CommentDate timestamp={comment.created_at} />
+            <SmartDate timestamp={comment.created_at} />
             <ActionMenu visible={comment.user.id == user?.id}>
               {Object.values(preparedActions).map(action => (
                 <PostCommentMenuItem key={action.key} action={action} />

src/components/post/Comment/index.tsx

@@ -1,2 +1,2 @@
 export * from './Comment';
-export * from './CommentDate';
+export * from '../common/SmartDate/SmartDate';

src/components/post/PostCard/PostCardActions.tsx

@@ -1,5 +1,5 @@
 import { StyledActionBox as PostActions, PostProps } from 'components/post';
-import { PostLike } from 'components/post/Like';
+import { PostLike } from 'components/post/common/Like';
 
 import { ShareButton } from './ShareButton';
 

src/components/post/PostCard/PostCardDescription.tsx

@@ -1,5 +1,5 @@
 import { Box, styled } from '@mui/material';
-import { MoreText } from 'components/post/MoreText';
+import { MoreText } from 'components/common/MoreText';
 import { POST_DESCRIPTION_COLLAPSED_SIZE } from 'consts';
 import { useEffect, useRef, useState } from 'react';
 

src/components/post/PostCard/PostCardHeader.tsx

@@ -4,7 +4,7 @@ import {
   ActionMenu,
   PostCommentMenuActions,
   PostCommentMenuItem,
-} from 'components/post/ActionMenu';
+} from 'components/post/common/ActionMenu';
 import { AvatarButton } from 'components/user/AvatarButton';
 import { UsernameLinkButton } from 'components/user/UsernameLinkButton';
 import { selectUser } from 'ducks/auth/selectors';
@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { PostModel } from 'types/post';
 
+import { SmartDate } from '../Comment';
 import { PostHeader } from './styles';
 
 const postMenuActions: PostCommentMenuActions = {
@@ -54,9 +55,22 @@ export const PostCardHeader = ({ post }: { post: PostModel }) => {
 
   return (
     <PostHeader>
-      <AvatarButton user={post.user} />
-      <UsernameLinkButton user={post.user} />
-      <ActionMenu visible={post.user.id == user?.id}>
+      <AvatarButton
+        user={post.user}
+        style={{ gridRow: '1/3', gridColumn: 1 }}
+      />
+      <UsernameLinkButton
+        user={post.user}
+        style={{ gridRow: 1, gridColumn: 2 }}
+      />
+      <SmartDate
+        timestamp={post.created_at}
+        style={{ gridRow: 2, gridColumn: 2, paddingLeft: '4px' }}
+      />
+      <ActionMenu
+        visible={post.user.id == user?.id}
+        style={{ gridRow: '1', gridColumn: 3 }}
+      >
         {Object.values(preparedActions).map(action => (
           <PostCommentMenuItem key={action.key} action={action} />
         ))}

src/components/post/PostCard/ShareButton.tsx

@@ -2,7 +2,7 @@ import { getShareUrl } from 'helpers/post';
 import { useModal } from 'mui-modal-provider';
 import { useTranslation } from 'react-i18next';
 
-import { ShareDialog } from '../ShareDialog';
+import { ShareDialog } from '../ShareDialog/ShareDialog';
 import { PostProps } from '../interfaces';
 import { PostButton } from '../styles';
 

src/components/post/PostCard/styles.tsx

@@ -75,9 +75,12 @@ export const CardMediaBox = styled(Box, {
 `;
 
 export const PostHeader = styled(Box)`
-  display: flex;
+  display: grid;
   align-items: center;
-  gap: 0 1rem;
+  justify-items: flex-start;
+  grid-template-rows: 1.5rem 1rem;
+  grid-template-columns: 2.5rem auto auto;
+  gap: 0 0.25rem;
 `;
 
 export const PostUsername = styled(({ ...props }: TypographyProps) => (

src/components/post/ShareDialog/index.ts

@@ -0,0 +1 @@
+export * from './ShareDialog';

src/components/post/ActionMenu/ActionMenu.tsx → src/components/post/common/ActionMenu/ActionMenu.tsx

@@ -1,17 +1,21 @@
 import { MenuProps } from '@mui/material';
+import { CommonProps } from '@mui/material/OverridableComponent';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { VerticalMenu } from '../../common/VerticalMenu';
+import { VerticalMenu } from '../../../common/VerticalMenu';
 import { PostCommentMenuButton } from './ActionMenuButton';
 
+export interface ActionMenuProps extends CommonProps {
+  visible: boolean;
+  children: MenuProps['children'];
+}
+
 export const ActionMenu = ({
   visible,
   children,
-}: {
-  visible: boolean;
-  children: MenuProps['children'];
-}) => {
+  ...props
+}: ActionMenuProps) => {
   const { t } = useTranslation('translation', { keyPrefix: 'post' });
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -32,6 +36,7 @@ export const ActionMenu = ({
         title={t('actions') ?? ''}
         visibility={visible ? 'visible' : 'hidden'}
         onClick={handleClick}
+        {...props}
       />
       <VerticalMenu
         open={openMenu}

src/components/post/Like/Like.tsx → src/components/post/common/Like/Like.tsx

@@ -1,11 +1,9 @@
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import { styled } from '@mui/material';
+import { IconButtonProps, styled } from '@mui/material';
 import { StyledTextButton } from 'components/common/styles';
 import { useTranslation } from 'react-i18next';
 
-import { LikeProps } from './interfaces';
-
 const FavoriteIconFilled = styled(FavoriteIcon)`
   color: ${props => props.theme.palette.common.like};
 `;
@@ -18,6 +16,13 @@ const LikeButton = styled(StyledTextButton)`
   }
 `;
 
+export interface LikeProps
+  extends Pick<IconButtonProps, 'onClick' | 'disabled'> {
+  variant?: 'post' | 'comment';
+  count: number;
+  liked: boolean;
+}
+
 export const Like = ({
   count,
   liked,

src/components/post/Comment/CommentDate.tsx → src/components/post/common/SmartDate/SmartDate.tsx

@@ -1,38 +1,36 @@
 import { Tooltip, Typography, styled } from '@mui/material';
+import { CommonProps } from '@mui/material/OverridableComponent';
 import capitalize from '@mui/utils/capitalize';
 import { COMMENT_DATE_TOOLTIP_TIMEOUT, commentDateFormat } from 'consts';
 import { DateDiff, dateDiff } from 'helpers/post';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CommentModel } from 'types/post';
+import { CommentModel, PostModel } from 'types/post';
 
-const CommentDateText = styled(Typography)`
+const SmartDateText = styled(Typography)`
   white-space: nowrap;
   font-size: ${props => props.theme.typography.caption.fontSize};
   color: ${props => props.theme.palette.common.dimmed};
 ` as typeof Typography;
 
 const baseKeyPart = 'creationTime';
 
-export const CommentDate = ({
-  timestamp,
-}: {
-  timestamp: CommentModel['created_at'];
-}) => {
-  const { i18n, t } = useTranslation('translation', { keyPrefix: 'comment' });
+export interface SmartDateProps extends CommonProps {
+  timestamp: CommentModel['created_at'] | PostModel['created_at'];
+}
 
-  const { commentDate, localizedDate } = useMemo(() => {
+export const SmartDate = ({ timestamp, ...props }: SmartDateProps) => {
+  const { i18n, t } = useTranslation('translation', { keyPrefix: 'date' });
+
+  const { date, localizedDate } = useMemo(() => {
     const date = new Date(timestamp);
     return {
-      commentDate: date,
+      date,
       localizedDate: date.toLocaleString(i18n.language, commentDateFormat),
     };
   }, [i18n.language, timestamp]);
 
-  const getDateDiff = useCallback(
-    () => dateDiff(commentDate, new Date()),
-    [commentDate],
-  );
+  const getDateDiff = useCallback(() => dateDiff(date, new Date()), [date]);
 
   const [currentDiff, setCurrentDiff] = useState(getDateDiff());
 
@@ -71,13 +69,14 @@ export const CommentDate = ({
         </Typography>
       }
     >
-      <CommentDateText
+      <SmartDateText
         component="time"
-        dateTime={commentDate.toISOString()}
+        dateTime={date.toISOString()}
         onMouseMove={updateDateDiff}
+        {...props}
       >
         {displayDate}
-      </CommentDateText>
+      </SmartDateText>
     </Tooltip>
   );
 };

src/components/post/common/SmartDate/index.ts

@@ -0,0 +1 @@
+export * from './SmartDate';

src/locales/ru/translation.json

@@ -19,6 +19,27 @@
     "notFound": "Аккаунт не найден",
     "alreadyTaken": "Имя пользователя или почта уже используется"
   },
+  "date": {
+    "creationTimeSeconds": "{{count}} секунду назад",
+    "creationTimeSeconds_zero": "только что",
+    "creationTimeSeconds_few": "{{count}} секунды назад",
+    "creationTimeSeconds_many": "{{count}} секунд назад",
+    "creationTimeMinutes": "{{count}} минуту назад",
+    "creationTimeMinutes_few": "{{count}} минуты назад",
+    "creationTimeMinutes_many": "{{count}} минут назад",
+    "creationTimeHours": "{{count}} час назад",
+    "creationTimeHours_few": "{{count}} часа назад",
+    "creationTimeHours_many": "{{count}} часов назад",
+    "creationTimeDays": "{{count}} день назад",
+    "creationTimeDays_few": "{{count}} дня назад",
+    "creationTimeDays_many": "{{count}} дней назад",
+    "creationTimeWeeks": "{{count}} неделю назад",
+    "creationTimeWeeks_few": "{{count}} недели назад",
+    "creationTimeWeeks_many": "{{count}} недель назад",
+    "creationTimeMonth": "{{count}} месяц назад",
+    "creationTimeMonth_few": "{{count}} месяца назад",
+    "creationTimeMonth_many": "{{count}} месяцев назад"
+  },
   "post": {
     "share": "Поделиться",
     "reply": "Ответить",
@@ -39,25 +60,6 @@
   },
   "comment": {
     "writeComment": "Написать комментарий...",
-    "creationTimeSeconds": "{{count}} секунду назад",
-    "creationTimeSeconds_zero": "только что",
-    "creationTimeSeconds_few": "{{count}} секунды назад",
-    "creationTimeSeconds_many": "{{count}} секунд назад",
-    "creationTimeMinutes": "{{count}} минуту назад",
-    "creationTimeMinutes_few": "{{count}} минуты назад",
-    "creationTimeMinutes_many": "{{count}} минут назад",
-    "creationTimeHours": "{{count}} час назад",
-    "creationTimeHours_few": "{{count}} часа назад",
-    "creationTimeHours_many": "{{count}} часов назад",
-    "creationTimeDays": "{{count}} день назад",
-    "creationTimeDays_few": "{{count}} дня назад",
-    "creationTimeDays_many": "{{count}} дней назад",
-    "creationTimeWeeks": "{{count}} неделю назад",
-    "creationTimeWeeks_few": "{{count}} недели назад",
-    "creationTimeWeeks_many": "{{count}} недель назад",
-    "creationTimeMonth": "{{count}} месяц назад",
-    "creationTimeMonth_few": "{{count}} месяца назад",
-    "creationTimeMonth_many": "{{count}} месяцев назад",
     "edit": "Редактировать",
     "delete": "Удалить",
     "send": "Отправить"
@@ -107,4 +109,4 @@
     "matchConfirmPassword": "Пароли должны совпадать",
     "emptyPassword": "Введите пароль"
   }
-}
+}