Merge pull request #24 from GuiMoraesDev/style/fixTheWayTHowPostAreShown

style: fix the way how posts are shown
GuiMoraesDev · Sep 2, 2022 · 9bc356c · 9bc356c · vercel · Sep 2, 2022
2 parents ddc5d0a + 76e2d20
commit 9bc356c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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%;
 }
 
 <main
@@ -222,14 +233,14 @@ exports[`Home page should render correctly 1`] = `
             class="c5"
             data-testid="post-body-input"
             id="post-body-input"
-            maxlength="1000"
+            maxlength="144"
             name="body"
             placeholder="What’s happening?"
           />
           <p
             class="c6"
           >
-            0 / 1000
+            0 / 144
           </p>
           <span
             class="c7"
@@ -323,6 +334,12 @@ exports[`Home page should render correctly 1`] = `
   </div>
   <div
     class="c9"
-  />
+  >
+    <div
+      class="c10"
+    >
+      You have no posts yet
+    </div>
+  </div>
 </main>
 `;
diff --git 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}
 					/>
 				</Styles.PostsForm>
 
@@ -59,27 +62,31 @@ const HomeTemplate = ({
 			</Styles.PostsFormWrapper>
 
 			<Styles.PostsWrapper>
-				{postsData.map((post) => (
-					<Styles.Post key={post.id}>
-						<Styles.AvatarWrapper>
-							<Avatar
-								src={post.Users.avatar_url || ''}
-								alt={post.Users.first_name}
-							/>
-						</Styles.AvatarWrapper>
+				{Boolean(postsData.length) ? (
+					postsData.map((post) => (
+						<Styles.Post key={post.id}>
+							<Styles.AvatarWrapper>
+								<Avatar
+									src={post.users.avatar_url || ''}
+									alt={post.users.first_name}
+								/>
+							</Styles.AvatarWrapper>
 
-						<Styles.AuthorMetadata>
-							<Text
-								label={`${post.Users.first_name} ${post.Users.last_name}`}
-								isBold
-							/>
-						</Styles.AuthorMetadata>
+							<Styles.AuthorMetadata>
+								<Text
+									label={`${post.users.first_name} ${post.users.last_name}`}
+									isBold
+								/>
+							</Styles.AuthorMetadata>
 
-						<Styles.PostMessage>
-							<Text label={post.body} />
-						</Styles.PostMessage>
-					</Styles.Post>
-				))}
+							<Styles.PostMessage>
+								<Text label={post.body} />
+							</Styles.PostMessage>
+						</Styles.Post>
+					))
+				) : (
+					<Styles.Empty>You have no posts yet</Styles.Empty>
+				)}
 			</Styles.PostsWrapper>
 		</PrivateContent>
 	);

diff --git 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%;
+`;