From 76e2d20e8bf7f4d1644c46a0e66ab0b6c65c718d Mon Sep 17 00:00:00 2001 From: Guilherme Moraes
Date: Fri, 2 Sep 2022 18:09:13 -0300 Subject: [PATCH] style: fix the way how posts are shown --- src/layouts/Private/styles.ts | 8 ++-- src/services/posts.api.ts | 2 +- src/styles/global/index.ts | 17 ------- .../Home/__snapshots__/tests.spec.tsx.snap | 41 ++++++++++++----- src/views/Home/template/index.tsx | 45 +++++++++++-------- src/views/Home/template/styles.ts | 17 +++++-- 6 files changed, 75 insertions(+), 55 deletions(-) diff --git a/src/layouts/Private/styles.ts b/src/layouts/Private/styles.ts index b9fe9d9..dc4c60e 100644 --- a/src/layouts/Private/styles.ts +++ b/src/layouts/Private/styles.ts @@ -12,6 +12,8 @@ export const Container = styled.div` height: 100vh; width: 100vw; + + overflow: hidden; `; export const Header = styled.header` @@ -39,15 +41,15 @@ export const PrivateContent = styled.main` flex-direction: column; - align-items: center; - justify-content: center; - padding: ${({ theme }) => theme.sizes.dimensions.spacing.xl}; gap: ${({ theme }) => theme.sizes.dimensions.spacing.xl}; width: 100%; max-width: 600px; + height: 100%; margin: auto; + + overflow-y: auto; `; diff --git a/src/services/posts.api.ts b/src/services/posts.api.ts index 620bec0..2d1d5e2 100644 --- a/src/services/posts.api.ts +++ b/src/services/posts.api.ts @@ -9,7 +9,7 @@ export interface GetPostsParams { } export interface AllPostsProps extends Post { - Users: { + users: { id: UserProps['id']; first_name: UserProps['first_name']; last_name: UserProps['last_name']; diff --git a/src/styles/global/index.ts b/src/styles/global/index.ts index 7dcc3bf..cf2b6a9 100644 --- a/src/styles/global/index.ts +++ b/src/styles/global/index.ts @@ -1,23 +1,6 @@ import { createGlobalStyle } from "styled-components"; export default createGlobalStyle` - ::-webkit-scrollbar { - width: ${({ theme }) => theme.sizes.common.x2}; - height: ${({ theme }) => theme.sizes.common.x2}; - } - - ::-webkit-scrollbar-track { - background-color: ${({ theme }) => theme.themeColors.canvasInverted}; - - border: ${({ theme }) => theme.borders.solid}; - } - - ::-webkit-scrollbar-thumb { - background-color: ${({ theme }) => theme.themeColors.canvasDark}; - - border-radius: ${({ theme }) => theme.rounded.full}; - } - * { margin: 0; padding: 0; diff --git a/src/views/Home/__snapshots__/tests.spec.tsx.snap b/src/views/Home/__snapshots__/tests.spec.tsx.snap index f99016e..741647b 100644 --- a/src/views/Home/__snapshots__/tests.spec.tsx.snap +++ b/src/views/Home/__snapshots__/tests.spec.tsx.snap @@ -155,19 +155,13 @@ exports[`Home page should render correctly 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; padding: 2.0rem; gap: 2.0rem; width: 100%; max-width: 600px; + height: 100%; margin: auto; + overflow-y: auto; } .c1 { @@ -198,8 +192,25 @@ exports[`Home page should render correctly 1`] = ` display: grid; grid-template-columns: 1fr; width: 100%; - height: 100%; gap: 1.4rem; + margin-bottom: auto; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; + width: 100%; }
- 0 / 1000 + 0 / 144
+ > +
+ You have no posts yet +
+
`; diff --git a/src/views/Home/template/index.tsx b/src/views/Home/template/index.tsx index 2cdecf7..a535621 100644 --- a/src/views/Home/template/index.tsx +++ b/src/views/Home/template/index.tsx @@ -13,6 +13,8 @@ import { PrivateContent } from 'layouts/Private/styles'; import { AllPostsProps } from 'services/posts.api'; +import { POST_MESSAGE_LENGTH } from 'constant'; + import * as Styles from './styles'; import { homeResolver, HomeResolverProps } from './validations'; @@ -45,6 +47,7 @@ const HomeTemplate = ({ error={homeMethods.formState.errors.body?.message} fullWidth {...homeMethods.register('body')} + maxLength={POST_MESSAGE_LENGTH} /> @@ -59,27 +62,31 @@ const HomeTemplate = ({
- {postsData.map((post) => ( -
-
-
-
+ {Boolean(postsData.length) ? ( + postsData.map((post) => ( +
+
+
+
-
-
-
+
+
+
-
-
-
-
- ))} +
+
+
+
+ )) + ) : ( +
You have no posts yet
+ )}
); diff --git a/src/views/Home/template/styles.ts b/src/views/Home/template/styles.ts index ea9cbc1..6015559 100644 --- a/src/views/Home/template/styles.ts +++ b/src/views/Home/template/styles.ts @@ -23,16 +23,17 @@ export const PostsWrapper = styled.div` grid-template-columns: 1fr; width: 100%; - height: 100%; gap: ${({ theme }) => theme.sizes.dimensions.spacing.md}; + + margin-bottom: auto; `; export const Post = styled.div` display: grid; grid-template-columns: 6rem auto; - grid-template-rows: 6rem auto; + grid-template-rows: 2rem auto; grid-template-areas: 'Avatar AuthorMetadata' @@ -44,7 +45,7 @@ export const Post = styled.div` border: ${({ theme }) => theme.borders.solid}; border-radius: ${({ theme }) => theme.rounded.sm}; - padding: ${({ theme }) => theme.sizes.dimensions.spacing.xs}; + padding: ${({ theme }) => theme.sizes.dimensions.spacing.sm}; `; export const AvatarWrapper = styled.div` @@ -63,3 +64,13 @@ export const AuthorMetadata = styled.section` export const PostMessage = styled.section` grid-area: PostMessage; `; + +export const Empty = styled.div` + display: flex; + + align-items: center; + justify-content: center; + + height: 100%; + width: 100%; +`;