diff --git a/client/src/App.js b/client/src/App.js index 38b8463..7064f6a 100755 --- 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 index f0357d3..0b5a8f7 100644 --- 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 index 62ee8fc..dc7a25a 100644 --- 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 ( -
+ {this.props.questionReducer.question.answers.map(answer => { return (
- {answer.name} - {answer.body} - {answer.date} - {this.props.authReducer.user.id === answer.user ? - : - null - } +
{answer.body}
+ +
+ +
{answer.name}
+ + {this.props.authReducer.user.id === answer.user ? + + Delete + : + null + } +
) })} -
+ ); } } +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 index 5ee297b..0631c51 100644 --- 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 {
-

{body}

- - {this.state.errors.alreadyLiked} - - {user === id ? ( - - ) : - null - } +
+ + {this.state.errors.alreadyLiked} + + {user === id ? ( + + ) : + null + } +

+ {body} +

+
+
+
-
- -
+
) @@ -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 index 79351e2..5df28df 100644 --- a/client/src/elements/Buttons.js +++ b/client/src/elements/Buttons.js @@ -29,4 +29,9 @@ const SignUpButton = styled(Button)` } `; -Button.SignUp = SignUpButton; \ No newline at end of file +const DeleteButton = styled(Button)` + background: tomato; +` + +Button.SignUp = SignUpButton; +Button.Delete = DeleteButton; \ No newline at end of file