From e5afadd82a15ca759b065f89fd24de08f735c4a0 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Tue, 19 Apr 2022 12:05:06 +0300 Subject: [PATCH] feat: post details page base --- .../Components/PostCard/Header/Header.tsx | 29 ++++++++-- .../Components/PageContent/PageContent.tsx | 15 +++++ .../PostDetailsPage.stories.tsx | 20 +++++++ .../pages/PostDetailsPage/PostDetailsPage.tsx | 58 ++++++++++++++++++- .../pages/PostDetailsPage/styles.module.css | 13 +++++ src/redux/features/ui.slice.ts | 2 +- 6 files changed, 129 insertions(+), 8 deletions(-) create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx create mode 100644 src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx create mode 100644 src/features/Posts/pages/PostDetailsPage/styles.module.css diff --git a/src/features/Posts/Components/PostCard/Header/Header.tsx b/src/features/Posts/Components/PostCard/Header/Header.tsx index d8e124e..c5584ad 100644 --- a/src/features/Posts/Components/PostCard/Header/Header.tsx +++ b/src/features/Posts/Components/PostCard/Header/Header.tsx @@ -1,5 +1,6 @@ import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'; import dayjs from 'dayjs' +import { UnionToObjectKeys } from 'src/utils/types/utils'; interface Props { author: { @@ -8,21 +9,37 @@ interface Props { image: string } date: string; - size?: 'sm' | 'md' + size?: 'sm' | 'md' | 'lg'; + showTimeAgo?: boolean; } -export default function Header({ size = 'md', ...props }: Props) { +const avatarSize: UnionToObjectKeys = { + sm: 32, + md: 40, + lg: 48 +} + +const nameSize: UnionToObjectKeys = { + sm: 'text-body5', + md: 'text-body4', + lg: 'text-body4' +} + +export default function Header({ + size = 'md', + showTimeAgo = true, + ...props }: Props) { return (
- +
-

{props.author.name}

+

{props.author.name}

{dayjs(props.date).format('MMMM DD')}

-

+ {showTimeAgo &&

{dayjs().diff(props.date, 'hour') < 24 ? `${dayjs().diff(props.date, 'hour')}h ago` : undefined} -

+

}
) } diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx new file mode 100644 index 0000000..b2b2567 --- /dev/null +++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.tsx @@ -0,0 +1,15 @@ +import Header from "src/features/Posts/Components/PostCard/Header/Header" +import { Post } from "src/features/Posts/types" + + +interface Props { + post: Post +} + +export default function PageContent({ post }: Props) { + return ( +
+
+
+ ) +} diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx new file mode 100644 index 0000000..ecd056e --- /dev/null +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.stories.tsx @@ -0,0 +1,20 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import PostDetailsPage from './PostDetailsPage'; + +export default { + title: 'Posts/Post Details Page', + component: PostDetailsPage, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as ComponentMeta; + + +const Template: ComponentStory = (args) => + +export const Default = Template.bind({}); +Default.args = { +} + + diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx index 3deda80..8e28a87 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx @@ -1 +1,57 @@ -export { } \ No newline at end of file + +import { useFeedQuery } from 'src/graphql' +import { MOCK_DATA } from 'src/mocks/data' +import { useAppSelector, useInfiniteQuery } from 'src/utils/hooks' +import PostsList from '../../Components/PostsList/PostsList' +import TrendingCard from '../../Components/TrendingCard/TrendingCard' +import AuthorCard from './Components/AuthorCard/AuthorCard' +import PostActions from './Components/PostActions/PostActions' +import styles from './styles.module.css' + + +export default function PostDetailsPage() { + + // const feedQuery = useFeedQuery({ + // variables: { + // take: 10, + // skip: 0 + // }, + // }) + // const { fetchMore, isFetchingMore } = useInfiniteQuery(feedQuery, 'getFeed') + const post = MOCK_DATA.posts.stories[0] + const { navHeight } = useAppSelector((state) => ({ + navHeight: state.ui.navHeight + })); + + return ( +
+ + +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt, tenetur sapiente magnam pariatur, optio, veniam debitis ab earum tempora repellendus vel? Sed quidem commodi deserunt dolore ex cupiditate ab obcaecati et nisi incidunt facilis repellat ea voluptatem molestiae, minima placeat dolorem expedita dolor quas esse. At mollitia perferendis nihil iste quisquam facilis fuga cupiditate vero, repellat eveniet ipsam, voluptatem ea in voluptatibus alias voluptates est soluta assumenda quam quaerat consequatur? Nobis aliquid atque facere, nostrum velit obcaecati earum eaque dolores et tempora repellendus ratione explicabo repellat, porro tempore unde totam molestiae quia voluptatum officia, ipsum dolorem non pariatur? Possimus esse voluptatem debitis, quod odit nobis optio reiciendis ullam repudiandae cum ratione animi sequi a? Soluta animi sit facere sint facilis incidunt aspernatur quia distinctio suscipit laboriosam magnam ex maxime, vel quas voluptate harum ut. Voluptatum quasi nemo itaque autem repellat possimus ab enim recusandae libero suscipit quas labore, saepe praesentium nesciunt pariatur velit cupiditate soluta! Possimus vel provident incidunt aperiam quaerat impedit consequatur nesciunt consectetur. Facere modi sequi itaque, tempore ea nemo similique aliquam harum, molestiae officia ullam animi repellat consequuntur odio. Provident tenetur voluptas error temporibus porro, sequi reiciendis fugiat id. Laboriosam minima aperiam error, commodi doloribus odit libero alias ipsa molestiae maiores non tempore dolorem veniam quod quo ex id, velit necessitatibus neque sed? Sit dicta maxime neque amet non architecto ab cum eaque provident. Aut, omnis veniam ex ut quod repellat. Minus eius magni ipsum ducimus, tempora nemo suscipit perspiciatis facilis vitae placeat impedit? Accusamus natus iusto nisi, repudiandae minus quibusdam hic? Vero magni tenetur ipsum voluptate suscipit eos, pariatur nulla labore corrupti atque repellat provident velit ab iusto perspiciatis error eum, earum facilis ut ea, quas quod magnam. Suscipit iusto in magni ratione doloribus corrupti, quis esse repellat odit fugiat minus at, pariatur aliquid voluptate id perspiciatis provident ad dolores accusantium similique ea. Quos numquam officiis ad rem repellendus. Tempora quae totam suscipit dolorem non aperiam repellat consectetur tenetur nemo harum asperiores deserunt veniam, laboriosam iusto quas molestiae modi! Fugiat ea recusandae libero provident veritatis modi vel dolor consectetur similique officiis quo veniam quos mollitia, cumque autem ex eius quis aliquam dignissimos vero. Deserunt, iure, ducimus ipsam minima dolor corporis blanditiis incidunt vitae velit saepe obcaecati accusamus libero, optio quidem atque totam doloremque natus harum alias consectetur odit. Ea, temporibus alias ex tempore, similique praesentium aliquam, inventore corrupti nulla repellat autem esse. Nisi at aperiam reprehenderit, maiores mollitia exercitationem provident ipsa odio sed nihil iste quo aspernatur vero architecto repudiandae! Tempora, doloribus cupiditate itaque eveniet corporis corrupti et molestias. Nulla consequatur neque pariatur laboriosam provident vero exercitationem eligendi numquam, corporis eius aliquam accusamus a minima cumque quia, molestias atque at, quidem aperiam! Aut ullam vel eligendi. Vitae nobis ad minus sed exercitationem? Expedita, laudantium ipsum nemo adipisci qui quam distinctio aliquid facere eligendi consequatur repellat, animi ex a assumenda dicta temporibus illo voluptatum aspernatur non architecto natus iste pariatur. Error fugit cumque impedit doloribus qui, iste laudantium voluptate aspernatur, quod voluptatibus corrupti, quidem nostrum. Aperiam fugit dicta error, molestias tempore officiis, repellat nisi nam adipisci optio in iusto totam. Tempore optio facilis blanditiis velit eum ut, asperiores et numquam, aperiam quidem veritatis aliquid! Cupiditate exercitationem quibusdam consequuntur optio nemo velit, at quo obcaecati voluptates repellat beatae rerum pariatur nostrum officiis culpa molestiae dolorum sapiente dignissimos facilis ullam quisquam consequatur, accusantium vitae? Temporibus odio similique aspernatur autem, culpa est ratione quaerat eum vel accusamus distinctio eius adipisci animi unde iure debitis eos doloremque officia optio aliquam consequuntur nihil ducimus consequatur. Blanditiis dolor, maiores dolore suscipit ipsam officia ad. Corporis et ratione voluptate ut tempora voluptatem, quisquam aspernatur animi labore aut eius modi beatae ipsam obcaecati numquam voluptatum reiciendis excepturi dignissimos at fugiat natus quidem ad necessitatibus. Expedita inventore dignissimos neque quis dolorum iure non veniam quia, voluptas sint itaque sed cum enim. Ut nesciunt delectus ipsam? Delectus sunt ab enim dolores natus? Libero animi assumenda sint cupiditate nulla id deserunt unde error praesentium omnis suscipit nisi veritatis laudantium aperiam, impedit alias temporibus velit eligendi incidunt? Impedit voluptatibus voluptates nostrum tempora tenetur magni totam quo hic ab quod non, minima, aliquam officia commodi temporibus nisi pariatur rerum voluptatum! Nobis, cumque voluptatibus quisquam tempora corrupti dolore perspiciatis quis culpa? +

+ +
+ ) +} diff --git a/src/features/Posts/pages/PostDetailsPage/styles.module.css b/src/features/Posts/pages/PostDetailsPage/styles.module.css new file mode 100644 index 0000000..f9b341d --- /dev/null +++ b/src/features/Posts/pages/PostDetailsPage/styles.module.css @@ -0,0 +1,13 @@ +.grid{ + grid-template-columns: auto 1fr 326px; +} + +@media screen and (max-width:680px) { + aside{ + display: none; + } + + .grid{ + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/src/redux/features/ui.slice.ts b/src/redux/features/ui.slice.ts index 0640092..c1164b4 100644 --- a/src/redux/features/ui.slice.ts +++ b/src/redux/features/ui.slice.ts @@ -7,7 +7,7 @@ interface StoreState { } const initialState = { - navHeight: 88, + navHeight: 0, isMobileScreen: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || window.innerWidth < 480, isSearchOpen: false, } as StoreState;