Merge pull request #10 from future4code/Poster

acabou

Author: feliperdi

app/src/components/CardPostStyles.js

@@ -68,4 +68,9 @@ export const PostComment = styled.div`
 export const LikeNumber = styled.div`
     display: flex;
     justify-content: center;
-`;
+`;
+
+
+export const Comments = styled.div`
+    color: #757575;
+`;

app/src/components/CreatePost.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import Axios from 'axios';
+
+import {
+    Container,
+    Form,
+    Button,
+    InputTitle,
+    InputText,
+
+    } from './CreatePostStyle'
+
+
+
+const baseUrl = 'https://us-central1-labenu-apis.cloudfunctions.net/labEddit/posts'
+
+export default props =>{
+    const {token, getAllPost} = props;
+    const [title, setTitle] = useState('');
+    const [text, setText] = useState('');
+    
+    const onChange = event =>{
+        const {name, value} = event.target;
+            switch(name){
+                case 'titulo':
+                    setTitle(value);
+                    break;
+                case 'text':
+                    setText(value);
+                    break;
+            }
+    }
+
+    const criarPost = event =>{
+        event.preventDefault();
+        const auth  = {
+            headers :{
+                 Authorization: token
+            }
+         }
+
+         const body = {title, text, }
+
+        Axios.post(baseUrl, body ,auth)
+        .then( response => {  
+            setTitle('');
+            setText('');
+            getAllPost(token);
+        })
+        .catch( err => console.log(err.menssage))
+    }
+
+
+    return (
+        <Container>
+            <Form onSubmit={criarPost} >
+                <InputTitle 
+                    placeholder={'Titulo do Post'} 
+                    value={title}
+                    onChange={onChange}
+                    name={'titulo'}
+                    required={true}
+                />
+                <InputText 
+                    placeholder={'Post'}
+                    onChange={onChange}
+                    value={text}
+                    name={'text'}
+                    cols="40" 
+                    rows="5"
+                    required={true}
+                />
+                <Button>Criar Post</Button>
+            </Form>
+        </Container>
+    );
+}

app/src/components/CreatePostStyle.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+
+export const Container = styled.div`
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+`;
+
+export const Form = styled.form`
+    height: fit-content;
+    display: flex;
+    width: fit-content;
+    flex-direction: column;
+    width: fit-content;
+`;
+
+export const Button = styled.button`
+    align-self: center;
+    margin: 1vh;
+`
+
+export const InputTitle = styled.input`
+    font-weight: 700;
+    height: 20%;
+    margin: 0.5vh;
+`;
+
+
+export const InputText = styled.textarea`
+    resize: none;
+`;

app/src/components/Post.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import {
     Card, 
@@ -10,6 +11,7 @@ import {
     PostTitle,
     PostText,
     PostComment,
+    Comments,
      } from './CardPostStyles';
 
 
@@ -41,8 +43,8 @@ const useStyles = makeStyles({
 
 export default props =>{
     const {post, vote} = props || {}
+    const history = useHistory();
     const classes = useStyles(props);
-    
 
     return <Card>
        <CardContent>
@@ -66,9 +68,10 @@ export default props =>{
                     {post.text}
                 </PostText>
                 <PostComment>
-                    <IconButton>
-                        <CommentIcon    />
+                    <IconButton onClick={ () => history.push(`/PostDetails/${post.id}`)}>
+                        <CommentIcon/>
                     </IconButton>
+                        <Comments>{post.commentsCount}</Comments>
                 </PostComment>
             </PostContent>
            </CardContent>

app/src/pages/TimeLinePostPage.jsx

@@ -9,6 +9,7 @@ import styled from 'styled-components';
 
 import Post from '../components/Post';
 import { ListItemText } from '@material-ui/core';
+import CreatePost from '../components/CreatePost';
 
 const Container = styled.div`
     height: fit-content;
@@ -20,6 +21,11 @@ const Container = styled.div`
     background-color: #DAE0E6;
 `;
 
+const LogOut = styled.button`
+    align-self: flex-end;
+
+`
+
 
 
 
@@ -29,6 +35,13 @@ export default props =>{
     const [post, setPost] = useState([]);
     const [token , setToken] = useState('');
     const [like , setLike] = useState('');
+    const history = useHistory();
+
+
+    const doLogOut = () =>{
+        localStorage.removeItem('token');
+        history.push('/')
+    }
 
     const getAllPost = (token) =>{
         const auth  = {
@@ -79,6 +92,8 @@ export default props =>{
     },[token,like])
 
     return <Container>
+            <LogOut onClick={doLogOut}>LogOut</LogOut>
+            <CreatePost token={token} getAllPost={getAllPost} />
             {post && post.map( post => {
                 return <Post 
                             key={post.id}