Skip to content

Commit 70633e4

Browse files
amandapolariamandapolari
committed
[style] comment page design started
1 parent 8449222 commit 70633e4

File tree

8 files changed

+139
-85
lines changed

8 files changed

+139
-85
lines changed

‎labeddit/src/components/Card/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
3737
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
3838
import { Alert, Grid } from '@mui/material';
3939
import { theme } from '../../styles';
40-
import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
4140

4241
export const Card = ({
4342
creator,
@@ -108,7 +107,7 @@ export const Card = ({
108107
}}
109108
>
110109
<TextareaEditPost
111-
// style={{display: 'none'}}
110+
// style={{display: 'none'}}
112111
value={editingContent}
113112
onChange={(event) =>
114113
setEditingContent(event.target.value)
@@ -150,7 +149,7 @@ export const Card = ({
150149
<ContainerImgComments>
151150
<ImageComment
152151
onClick={() => {
153-
goToCommentsPage(navigator, id);
152+
isFeedpage && goToCommentsPage(navigator, id);
154153
}}
155154
src={images.comment_icon}
156155
/>

‎labeddit/src/components/Card/syled.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const ContainerContentCard = styled.div`
1616
/* grid-template-rows: 12vw 20vw 1fr; */
1717
/* FUNCIONA MELHOR!!: */
1818
grid-template-rows: 0.2fr 0.5fr 0.2fr;
19-
/* align-items: center; */
2019
justify-content: center;
2120
`;
2221

@@ -52,11 +51,9 @@ export const ContainerButtons = styled.div`
5251
grid-column: 1/8;
5352
grid-row: 3/4;
5453
display: flex;
55-
/* align-items: flex-end; */
5654
display: grid;
5755
grid-template-columns: 1fr 1fr 1fr 1fr;
5856
grid-template-rows: 7vh 1fr;
59-
/* border: 1px solid blue; */
6057
6158
div {
6259
/* border: 1px solid red; */
@@ -122,18 +119,13 @@ export const ContainerAlert = styled.div`
122119
`;
123120

124121
export const ContainerEditPost = styled.div`
125-
/* border: 1px solid red; */
126122
display: grid;
127123
grid-column: 1/8;
128-
/* grid-row: 1/2; */
129124
height: 100%;
130125
131126
form {
132127
grid-column: 1/7;
133128
grid-row: 2/3;
134-
/* margin-bottom: 1rem; */
135-
/* border: 1px solid orange; */
136-
/* Arrumar depois: */
137129
margin-top: -8vh;
138130
}
139131
`;

‎labeddit/src/contexts/GlobalState.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const GlobalState = ({ children }) => {
1212
const [isCommentPage, setIsCommentPage] = useState(false);
1313
const [isSignupPage, setIsSignupPage] = useState(false);
1414
const [isFeedOrCommentsPage, setIsFeedOrCommentsPage] = useState(false);
15+
const [isPostMain, setIsPostMain] = useState(false);
1516

1617
// =============> CRUD DA API:
1718
const [isEditing, setIsEditing] = useState(false);
@@ -86,7 +87,7 @@ const GlobalState = ({ children }) => {
8687
// talvez uma lógica pra mostrar o erro PARA usuário aqui!
8788
}
8889
};
89-
90+
9091
// =============> LIKE E DISLIKE DA API:
9192
const handleLike = async (itemId, likeValue, likeOrDislikeFunction) => {
9293
const body = { like: likeValue };
@@ -138,6 +139,8 @@ const GlobalState = ({ children }) => {
138139
idPostMessageError,
139140
setIdPostMessageError,
140141
handleLike,
142+
isPostMain,
143+
setIsPostMain,
141144
};
142145

143146
return (

‎labeddit/src/pages/CommentsPage/index.js‎

Lines changed: 79 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@ import useRequestData from '../../hooks/useRequestData';
66
import { useContext, useEffect, useState } from 'react';
77
import GlobalContext from '../../contexts/GlobalContext';
88
import { urlPosts } from '../../constants/constants';
9-
import {
10-
CreateComment,
11-
DeleteComment,
12-
EditComment,
13-
LikeAndDislikeComment,
14-
} from '../../services/api';
9+
import { CreateComment } from '../../services/api';
1510
import { useForm } from '../../hooks/useForm';
1611
import { Card, Error, Header, Loading } from '../../components';
12+
import {
13+
BtnCreateComment,
14+
ContainerCommentsPage,
15+
ContainerContentCommentsPage,
16+
ContainerFormsCommentsPage,
17+
DivisorComments,
18+
TextareaCreateComment,
19+
} from './syled';
1720

1821
export const CommentsPage = () => {
1922
const [form, setForm, onChange, resetForm] = useForm({
@@ -104,65 +107,82 @@ export const CommentsPage = () => {
104107
};
105108

106109
return (
107-
<div>
110+
<ContainerCommentsPage>
108111
<Header
109112
isCommentPage={isCommentPage}
110113
isSignupPage={isSignupPage}
111114
isFeedOrCommentsPage={isFeedOrCommentsPage}
112115
/>
113-
<p>Comments Page</p>
116+
<ContainerContentCommentsPage>
117+
{errorMessage && <p>{errorMessage}</p>}
114118

115-
{errorMessage && <p>{errorMessage}</p>}
119+
{isLoading ? (
120+
<Loading />
121+
) : isError ? (
122+
<Error />
123+
) : (
124+
<div>
125+
<Card
126+
creator={
127+
posts && posts.creator && posts.creator.nickname
128+
}
129+
id={posts.id}
130+
content={posts.content}
131+
boolenIsCurrentUser={posts.isCurrentUserComment}
132+
likesCount={posts.likesCount}
133+
dislikesCount={posts.dislikesCount}
134+
postsCount={posts.postsCount}
135+
listContent={posts}
136+
commentsCount={posts.commentsCount}
137+
/>
138+
</div>
139+
)}
116140

117-
<form
118-
onSubmit={(event) => {
119-
event.preventDefault();
120-
handleSubmit();
121-
}}
122-
>
123-
<textarea
124-
placeholder='Escreva seu comentário'
125-
value={form.content}
126-
onChange={onChange}
127-
name='content'
128-
/>
129-
<br />
130-
<button type='submit'>Responder</button>
131-
</form>
132-
{isLoading ? (
133-
<Loading />
134-
) : isError ? (
135-
<Error />
136-
) : (
137-
<div>
138-
<p>
139-
CRIADOR:{' '}
140-
{posts && posts.creator && posts.creator.nickname}
141-
</p>
142-
<p>CONTEUDO: {posts && posts.content}</p>
143-
<p>LIKES: {posts && posts.likesCount}</p>
144-
<p>DISLIKES: {posts && posts.dislikesCount}</p>
145-
<p>NÚMERO DE COMENTÁRIOS: {posts && posts.commentsCount}</p>
146-
{/* <p>COMENTÁRIOS:</p> */}
147-
{posts.comments &&
148-
posts.comments.map((comment) => (
149-
<div key={comment.id}>
150-
<Card
151-
creator={comment.creator.nickname}
152-
id={comment.id}
153-
content={comment.content}
154-
boolenIsCurrentUser={
155-
comment.isCurrentUserComment
156-
}
157-
likesCount={comment.likesCount}
158-
dislikesCount={comment.dislikesCount}
159-
commentsCount={comment.commentsCount}
160-
listContent={posts}
161-
/>
162-
</div>
163-
))}{' '}
164-
</div>
165-
)}
166-
</div>
141+
<ContainerFormsCommentsPage>
142+
<form
143+
onSubmit={(event) => {
144+
event.preventDefault();
145+
handleSubmit();
146+
}}
147+
>
148+
<TextareaCreateComment
149+
placeholder='Adicionar comentário'
150+
value={form.content}
151+
onChange={onChange}
152+
name='content'
153+
/>
154+
<br />
155+
<BtnCreateComment type='submit'>
156+
Responder
157+
</BtnCreateComment>
158+
<DivisorComments />
159+
</form>
160+
</ContainerFormsCommentsPage>
161+
{isLoading ? (
162+
<Loading />
163+
) : isError ? (
164+
<Error />
165+
) : (
166+
<div>
167+
{posts.comments &&
168+
posts.comments.map((comment) => (
169+
<div key={comment.id}>
170+
<Card
171+
creator={comment.creator.nickname}
172+
id={comment.id}
173+
content={comment.content}
174+
boolenIsCurrentUser={
175+
comment.isCurrentUserComment
176+
}
177+
likesCount={comment.likesCount}
178+
dislikesCount={comment.dislikesCount}
179+
listContent={posts}
180+
/>
181+
</div>
182+
))}{' '}
183+
</div>
184+
)}
185+
</ContainerContentCommentsPage>
186+
</ContainerCommentsPage>
167187
);
168188
};

‎labeddit/src/pages/CommentsPage/syled.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import styled from 'styled-components';
2+
import { theme } from '../../styles';
3+
4+
export const ContainerCommentsPage = styled.div``;
5+
export const ContainerContentCommentsPage = styled.div`
6+
padding: 2rem;
7+
`;
8+
9+
export const ContainerFormsCommentsPage = styled.div``;
10+
11+
export const TextareaCreateComment = styled.textarea`
12+
background-color: ${theme.palette.gray[4]};
13+
border: none;
14+
border-radius: 12px;
15+
min-height: 12vh;
16+
width: 90%;
17+
color: ${theme.palette.gray[2]};
18+
font-family: 'IBM Plex Sans';
19+
font-size: 1.1rem;
20+
padding: 1rem;
21+
font-style: normal;
22+
font-weight: 400;
23+
line-height: normal;
24+
margin-bottom: 0.5rem;
25+
26+
&:focus {
27+
outline: none;
28+
}
29+
`;
30+
31+
export const BtnCreateComment = styled.button`
32+
background: ${theme.backgrounds[1]};
33+
width: 99%;
34+
border: none;
35+
border-radius: 12px;
36+
height: 2.9rem;
37+
color: ${theme.palette.white[1]};
38+
font-size: 0.9rem;
39+
font-family: 'Noto Sans';
40+
font-weight: 700;
41+
`;
42+
43+
export const DivisorComments = styled.div`
44+
height: 1px;
45+
background: ${theme.backgrounds[1]};
46+
margin: 1rem 1rem;
47+
width: 90%;
48+
`;

‎labeddit/src/pages/FeedPage/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { useNavigate } from 'react-router';
44
import { useProtectPage } from '../../hooks/useProtectPage';
55
import useRequestData from '../../hooks/useRequestData';
6-
import { Logout, urlPosts } from '../../constants/constants';
6+
import { urlPosts } from '../../constants/constants';
77
import { useContext, useEffect, useState } from 'react';
88
import { useForm } from '../../hooks/useForm';
99
import { CreatePost } from '../../services/api';

‎labeddit/src/pages/FeedPage/syled.js‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const TextareaCreatePost = styled.textarea`
66
border: none;
77
border-radius: 12px;
88
min-height: 12vh;
9-
/* width: 80vw; */
109
width: 90%;
1110
color: ${theme.palette.gray[2]};
1211
font-family: 'IBM Plex Sans';
@@ -16,27 +15,19 @@ export const TextareaCreatePost = styled.textarea`
1615
font-weight: 400;
1716
line-height: normal;
1817
margin-bottom: 0;
18+
&:focus {
19+
outline: none;
20+
}
1921
`;
2022

21-
export const ContainerFeedpage = styled.div`
22-
/* border: 3px solid red; */
23-
`;
23+
export const ContainerFeedpage = styled.div``;
2424

2525
export const ContainerContentFeedpage = styled.div`
26-
/* border: 3px solid green; */
2726
padding: 2rem;
2827
`;
2928

3029
export const ContainerFormsFeedpage = styled.div`
31-
/* border: 3px solid red; */
32-
/* display: flex;
33-
flex-direction: column;
34-
justify-content: center;
35-
align-items: center;
36-
padding: 1rem; */
37-
3830
form {
39-
/* border: 3px solid green; */
4031
margin-bottom: 2rem;
4132
display: flex;
4233
width: 100%;

‎labeddit/src/pages/LoginPage/syled.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export const ImageLogo = styled.img`
8787
`;
8888

8989
export const ContainerForms = styled.div`
90+
/* border: 1px solid red; */
9091
display: flex;
9192
flex-direction: column;
9293
align-items: center;

0 commit comments

Comments
 (0)