question.js styling 904

nickllerandi · Jun 18, 2019 · ff741af · ff741af
1 parent 8b117cf
commit ff741af
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 35 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -13,7 +13,7 @@ import store from "./store";
 
 // CSS / Global Styles
 import GlobalStyle from './Global'
-import {black, white} from './utils'
+import {black, white, primary} from './utils'
 
 // Components
 // Layout

diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js
@@ -15,10 +15,12 @@ import {lighterblack} from '../../utils'
 
 class Homepage extends Component {
     componentDidMount() {
+        console.log('componentDidMount')
         this.props.getQuestions();
     }
 
     render() {
+        console.log('render')
         const {questions} = this.props.questionReducer;
 
         return (

diff --git a/client/src/components/questions/AnswerFeed.js b/client/src/components/questions/AnswerFeed.js
@@ -1,39 +1,91 @@
 import React, { Component } from 'react';
 import {connect} from 'react-redux';
+import styled from 'styled-components';
+import {Link} from 'react-router-dom'
 
 // Actions
 import {deleteAnswer} from '../../actions/questionActions';
 
+import {Button} from '../../elements'
+import {elevation, white} from '../../utils'
+
 class AnswerFeed extends Component {
+    componentDidMount() {
+        console.log('componentDidMount')
+    }
+
     onAnswerDeleteClick(answerId) {
         this.props.deleteAnswer(this.props.questionReducer.question._id, answerId)
     }
 
+    // {answer.name} - {answer.body} - {answer.date}
+
     render() {
+        console.log('render')
         return (
-            <div className="AnswerFeed">
+            <AnswerFeedStyled className="AnswerFeed">
                 {this.props.questionReducer.question.answers.map(answer => {
                     return (
                         <div 
+                            className='Answer'
                             key={answer._id}
                         >
-                            {answer.name} - {answer.body} - {answer.date}
-                            {this.props.authReducer.user.id === answer.user ?       
-                                <button 
-                                    onClick={this.onAnswerDeleteClick.bind(this, answer._id)}
-                                >
-                                    Delete
-                                </button> : 
-                                null
-                            }
+                            <div className='Answer__text'>{answer.body}</div>
+
+                            <div className='Answer__user'>
+                                <Link to={`/users/${answer.user}/${answer.name}`}>
+                                    <div className='Answer__user__name'>{answer.name}</div>
+                                </Link>
+                                {this.props.authReducer.user.id === answer.user ?       
+                                    <Button.Delete 
+                                        className='Answer__user__delete'
+                                        onClick={this.onAnswerDeleteClick.bind(this, answer._id)}
+                                    >
+                                        Delete
+                                    </Button.Delete> : 
+                                    null
+                                }
+                            </div>
                         </div>
                     )
                 })}
-            </div>
+            </AnswerFeedStyled>
         );
     }
 }
 
+const AnswerFeedStyled = styled.div`
+    /* background-color: yellowgreen;  */
+    flex: 1;   
+    display: flex;
+    flex-direction: column;
+
+    .Answer {
+        background-color: ${white};
+        ${elevation[2]};
+        padding: 3rem;
+        margin-bottom: 3.5rem;
+
+        &__text {
+            margin-bottom: 2rem;
+        }
+
+        &__user {
+            display: flex;
+            /* justify-content: space-between; */
+            align-items: center;
+
+            & a {
+                margin-right: auto;
+            }
+        }
+
+        &__delete {
+
+        }
+    }
+`
+
 const mapStateToProps = state => ({
     authReducer: state.authReducer,
     questionReducer: state.questionReducer

diff --git a/client/src/components/questions/Question.js b/client/src/components/questions/Question.js
@@ -11,7 +11,8 @@ import AnswerFeed from "./AnswerFeed";
 import {getQuestion, deleteQuestion, likeQuestion, clearErrors} from "../../actions/questionActions";
 
 // STYLED-COMPONENTS
-import {Card} from '../../elements'
+import {Card, Button} from '../../elements'
+import {lighterblack, white, elevation} from '../../utils'
 
 class Question extends Component {
     constructor() {
@@ -83,26 +84,30 @@ class Question extends Component {
 
                 <DetailStyled className='detail'>
                     <div className='body'>
-                        <p>{body}</p>
-                        <button 
-                            onClick={this.onLikeClick.bind(this, questionId)}
-                        >
-                            Like
-                        </button>
-                        {this.state.errors.alreadyLiked}
-
-                        {user === id ? (
-                            <button onClick={this.deleteQuestion.bind(this, questionId)}>Delete</button>    
-                        ) :
-                        null
-                        }
+                        <div className='body__question'>
+                            <Button className='body__question-button'
+                                onClick={this.onLikeClick.bind(this, questionId)}
+                            >
+                                Like
+                            </Button>
+                            {this.state.errors.alreadyLiked}
+
+                            {user === id ? (
+                                <button onClick={this.deleteQuestion.bind(this, questionId)}>Delete</button>    
+                            ) :
+                            null
+                            }
+                            <p className='paragraph'>
+                                {body}
+                            </p>
+                        </div>
 
+                        <hr/>
+
                         <Answer/>
                     </div>
 
-                    <div className='answers'>
-                        <AnswerFeed/>
-                    </div>
+                    <AnswerFeed/>
                 </DetailStyled>
             </div>
         )
@@ -112,16 +117,30 @@ class Question extends Component {
 const DetailStyled = styled.div`
     display: flex;
     padding: 4.5rem;
+    background-color: ${lighterblack};
+    font-size: 1.4rem;
 
     .body {
-        background-color: orangered;
+        background-color: ${white};
         flex: 0 0 60%;
         margin-right: 4.5rem;
-    }
+        ${elevation[2]};
+        padding: 3rem;
 
-    .answers {
-        background-color: yellowgreen;
-        flex: 1;
+        &__question {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 1rem;
+
+
+            &-button {
+                margin-right: 1rem;
+            }
+        }
+
+        & .paragraph {
+            margin-top: -4px;
+        }
     }
 `
 

diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js
@@ -29,4 +29,9 @@ const SignUpButton = styled(Button)`
     }
 `;
 
-Button.SignUp = SignUpButton;
+const DeleteButton = styled(Button)`
+    background: tomato;
+`
+
+Button.SignUp = SignUpButton;
+Button.Delete = DeleteButton;