Skip to content

Commit

Permalink
Merge pull request #30 from RafaelBahiense/feature-followUsers
Browse files Browse the repository at this point in the history 
responsive search users
  • Loading branch information
@ronaldjunior2
ronaldjunior2 authored Jun 2, 2021
2 parents 1597b81 + fec7c89 commit a514988
Show file tree
Hide file tree
Showing 10 changed files with 667 additions and 556 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/.vscode
/node_modules
/.pnp
.pnp.js
Expand Down
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"cSpell.language": "pt,en"
}
331 changes: 174 additions & 157 deletions src/components/Post/CreatePost.js
View file
Original file line number Diff line number Diff line change
@@ -1,183 +1,200 @@
import axios from 'axios';
import { useContext, useState } from 'react';
import styled from 'styled-components';
import UserContext from '../../contexts/UserContext';
import Avatar from '../general/Avatar';
import axios from "axios";
import { useContext, useState } from "react";
import styled from "styled-components";
import UserContext from "../../contexts/UserContext";
import Avatar from "../general/Avatar";

export default function CreatePost({ refreshPosts }) {

const [text, setText] = useState("");
const [link, setLink] = useState("");
const [publishing, setPublishing] = useState(false);

const { user, token } = useContext(UserContext);

function createPost(e) {
e.preventDefault();
setPublishing(true);

const config = {
headers: {
'Authorization': `Bearer ${token}`
}
}

const data = {
"text": text,
"link": link
}

const response = axios.post(`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/posts`, data, config);

response.then(() => {
setPublishing(false);
setText("");
setLink("");
refreshPosts();
});

response.catch(() => {
setPublishing(false);
alert("Houve um erro ao publicar seu link");
})
}

return (
<CreatePostContainer>
<Avatar id={user.id} avatar={user.avatar} />
<div>
<p>O que você tem pra favoritar hoje?</p>
<form onSubmit={createPost}>
<input disabled={publishing} required value={link} onChange={(e) => setLink(e.target.value)} type="url" placeholder="http:// ..."></input>
<input disabled={publishing} value={text} onChange={(e) => setText(e.target.value)} type="text" placeholder="Muito irado esse link falando de #javascript"></input>
<button disabled={publishing} type="submit" > {publishing ? "Publicando" : "Publicar"} </button>
</form>
</div>
</CreatePostContainer>
const [text, setText] = useState("");
const [link, setLink] = useState("");
const [publishing, setPublishing] = useState(false);

const { user, token } = useContext(UserContext);

function createPost(e) {
e.preventDefault();
setPublishing(true);

const config = {
headers: {
Authorization: `Bearer ${token}`,
},
};

const data = {
text: text,
link: link,
};

const response = axios.post(
`https://mock-api.bootcamp.respondeai.com.br/api/v2/linkr/posts`,
data,
config
);

response.then(() => {
setPublishing(false);
setText("");
setLink("");
refreshPosts();
});

response.catch(() => {
setPublishing(false);
alert("Houve um erro ao publicar seu link");
});
}

return (
<CreatePostContainer>
<Avatar id={user.id} avatar={user.avatar} />
<div>
<p>O que você tem pra favoritar hoje?</p>
<form onSubmit={createPost}>
<input
disabled={publishing}
required
value={link}
onChange={(e) => setLink(e.target.value)}
type="url"
placeholder="http:// ..."
></input>
<input
disabled={publishing}
value={text}
onChange={(e) => setText(e.target.value)}
type="text"
placeholder="Muito irado esse link falando de #javascript"
></input>
<button disabled={publishing} type="submit">
{" "}
{publishing ? "Publicando" : "Publicar"}{" "}
</button>
</form>
</div>
</CreatePostContainer>
);
}

const CreatePostContainer = styled.div`
width: 100vw;
height: 164px;
background: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: "Lato", sans-serif;
padding: 12px;
display: flex;
justify-content: space-between;
margin: 16px 0;
img {
display: none;
margin-right: 18px;
}
div {
width: 100%;
height: 164px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: 'Lato', sans-serif;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
margin: 16px 0;
img{
display: none;
margin-right: 18px;
p {
font-weight: 300;
font-size: 17px;
line-height: 20px;
color: #707070;
text-align: center;
}
div{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
form {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
p{
input {
width: 100%;
height: 30px;
background: #efefef;
border-radius: 5px;
border: none;
margin-bottom: 6px;
padding: 6px 11px 8px 11px;
outline: none;
}
input:last-of-type {
height: 47px;
}
input::placeholder {
font-weight: 300;
font-size: 17px;
line-height: 20px;
color: #707070;
text-align: center;
}
form{
display: flex;
flex-direction: column;
align-items: center;
input{
width: 345px;
height: 30px;
background: #EFEFEF;
border-radius: 5px;
border: none;
margin-bottom: 6px;
padding: 6px 11px 8px 11px;
outline: none;
}
input:last-of-type{
height: 47px;
}
input::placeholder{
font-weight: 300;
font-size: 13px;
line-height: 16px;
color: #949494;
}
button{
width: 112px;
height: 22px;
background: #1877F2;
border-radius: 5px;
border: none;
font-weight: 700;
font-size: 13px;
line-height: 16px;
color: #FFFFFF;
align-self: flex-end;
cursor: pointer;
}
}
font-size: 13px;
line-height: 16px;
color: #949494;
}
button {
width: 112px;
height: 22px;
background: #1877f2;
border-radius: 5px;
border: none;
font-weight: 700;
font-size: 13px;
line-height: 16px;
color: #ffffff;
align-self: flex-end;
cursor: pointer;
}
}
}
@media (min-width: 615px){
width: 611px;
height: 209px;
border-radius: 16px;
padding: 16px 22px 16px 18px;
@media (min-width: 615px) {
width: 611px;
height: 209px;
border-radius: 16px;
padding: 16px 22px 16px 18px;
img{
display: block;
}
div{
align-items: flex-start;
img {
display: block;
}
p{
font-size: 20px;
line-height: 24px;
text-align: start;
}
div {
align-items: flex-start;
form{
p {
font-size: 20px;
line-height: 24px;
text-align: start;
}
input{
width: 503px;
}
form {
input {
width: 503px;
}
input:last-of-type{
height: 66px;
}
input:last-of-type {
height: 66px;
}
input::placeholder{
font-size: 15px;
line-height: 18px;
}
input::placeholder {
font-size: 15px;
line-height: 18px;
}
button{
height: 31px;
button {
height: 31px;
font-size: 14px;
line-height: 17px;
font-size: 14px;
line-height: 17px;
align-self: flex-end;
}
}
align-self: flex-end;
}
}
}
`;
}
`;
Loading

1 comment on commit a514988

@vercel
Copy link

@vercel vercel bot commented on a514988 Jun 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.