refactored component to add answers expanding functionality

.eslintignore

@@ -2,6 +2,7 @@
 **/node_modules
 tests/
 dist/
+*test*
 
 node_modules/
 # Logs

client/components/OtherItems/index.jsx

@@ -17,7 +17,9 @@ const OtherItems = ({
   return (
     <div id="otherItems">
       <div className="otherItemsContainer">
+        <h3>Related Products</h3>
         <ProductsCarousel products={relatedProducts} />
+        <h3>Your Outfit</h3>
         {/* <ProductsCarousel products={myOutfit} /> */}
       </div>
     </div>

client/components/Questions/AnswerList.jsx

@@ -1,29 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
 import { removeHTMLTags } from "../../utils"
-const AnswerList = ({ answers, expanded }) => {
-  //TODO: Add expanded var into store & allow answers to be expanded
-
-  return Object.keys(answers).map((id, index) => {
-    if (index < 2) {
-      return (
-        <span key={answers[id].id}>
-          {index === 0 ? (
-            <p id="first-answer">A: {removeHTMLTags(answers[id].body)}</p>
-          ) : (
-              <p id="more-answers">{removeHTMLTags(answers[id].body)}</p>
-            )}
-          <sub id="answerer">
-            by {answers[id].answerer_name},{" "}
-            {new Date(answers[id].date).toLocaleDateString("en-US", {
-              dateStyle: "long"
-            })}
-            &nbsp; | &nbsp; Helpful? Yes {answers[id].helpfulness}
-            &nbsp; | &nbsp; Report
+const AnswerList = ({ question }) => {
+  let [expanded, setExpanded] = useState(false);
+  return <div id="question-container" key={question.question_id}
+    onClick={() => setExpanded(!expanded)}>
+    <h2>Q: {removeHTMLTags(question.question_body)}</h2>
+    <div>
+      {Object.keys(question.answers).map((id, index) => {
+        if (index < 2 || expanded) {
+          return (
+            <span key={question.answers[id].id}>
+              {index === 0 ? (
+                <p id="first-answer">A: {removeHTMLTags(question.answers[id].body)}</p>
+              ) : (
+                  <p id="more-answers">{removeHTMLTags(question.answers[id].body)}</p>
+                )}
+              <sub id="answerer">
+                by {question.answers[id].answerer_name},{" "}
+                {new Date(question.answers[id].date).toLocaleDateString("en-US", {
+                  dateStyle: "long"
+                })}
+                &nbsp; | &nbsp; Helpful? Yes {question.answers[id].helpfulness}
+                &nbsp; | &nbsp; Report
           </sub>
-        </span>
-      );
-    }
-  });
+            </span>
+          );
+        }
+      })}
+    </div>
+  </div>
+
+
 };
 
 export default AnswerList;

client/components/Questions/QuestionList.jsx

@@ -5,11 +5,21 @@ import AddQuestionModal from "./AddQuestionModal.jsx"
 
 const QuestionList = ({ questions }) => {
   const [maxQs, setMaxQs] = useState(4);
+  const [maxAs, setMaxAs] = useState({});
   const [modalIsOpen, setIsOpen] = React.useState(false);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    if (questions.length > 0) {
+      const maxTemp = {};
+      questions.forEach((question) => maxTemp[question.question_id] = 2)
+      setMaxAs(maxTemp)
+      setLoading(false)
+    }
 
+  }, [questions])
 
   let addMoreQuestions = false;
-  if (questions.length > 0) {
+  if (!loading) {
     let count = 0;
     return (
       <div id="question-list-container">
@@ -18,18 +28,13 @@ const QuestionList = ({ questions }) => {
             Object.keys(question.answers).length > 0) {
             count++;
             return (
-              <div id="question-container" key={question.question_id}>
-                <h2>Q: {removeHTMLTags(question.question_body)}</h2>
-                <div>
-                  <AnswerList answers={question.answers} />
-                </div>
-              </div>
+              <AnswerList question={question} key={question.question_id} />
             );
           }
           if (count === maxQs) {
             count++;
             return <button className="action-button"
-              onClick={() => setMaxQs(maxQs + 2)}>
+              onClick={() => setMaxQs(maxQs + 2)} key={question.question_id}>
               More Answered Questions
             </button>
           }

client/components/Reviews/index.jsx

@@ -13,10 +13,14 @@ export default class Reviews extends Component {
       return null;
     } else {
       return (
-        <div id="reviews-container">
-          <ReviewStats productId={this.props.product.id} />
-          <ReviewList />
-        </div>
+        <>
+          <h3>Ratings & Reviews</h3>
+          <div id="reviews-container">
+
+            <ReviewStats productId={this.props.product.id} />
+            <ReviewList />
+          </div>
+        </>
       );
     }
   }

client/containers/OtherItems/index.js

@@ -9,10 +9,10 @@ const mapStateToProps = (store) => ({
 
 const mapDispatchToProps = (dispatch) => ({
   getRelatedProducts: (id) => {
-    dispatch(getRelatedProducts(id))
+    dispatch(getRelatedProducts(id));
   },
   getMyOutfit: () => {
-    dispatch(() => console.log('get outfit!')) // TODO: CREATE ACTION
+    dispatch(() => console.log('get outfit!')); // TODO: CREATE ACTION
   }
 });
 

client/containers/Overview/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Overview from '../../components/Overview';
-import store from '../../store.js';
+// import store from '../../store.js';
 
 const mapStateToProps = store => ({ product: store.product });
 

client/containers/Questions/QuestionList.js

@@ -1,6 +1,6 @@
-import { connect } from "react-redux";
-import QuestionList from "../../components/Questions/QuestionList";
-import store from "../../store.js";
+import { connect } from 'react-redux';
+import QuestionList from '../../components/Questions/QuestionList';
+// import store from '../../store.js';
 
 const mapStateToProps = (store) => ({
   questions: store.questions

client/containers/Reviews/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Reviews from '../../components/Reviews';
-import store from '../../store.js';
+// import store from '../../store.js';
 
 const mapStateToProps = store => ({ product: store.product });
 

client/greenfieldAPI/index.js

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { getProductRatings } from './reviews.js';
+// import { getProductRatings } from './reviews.js';
 
 const greenfieldRoot = 'http://3.134.102.30';
 

client/reducers/otherItems.js

@@ -1,11 +1,11 @@
-import Redux from 'redux';
+// import Redux from 'redux';
 
 const otherItemsReducer = (state = {}, action) => {
   switch (action.type) {
   case 'CHANGE_RELATED_PRODUCTS':
-    return Object.assign({}, state, {relatedProducts: action.products});
+    return Object.assign({}, state, { relatedProducts: action.products });
   case 'CHANGE_MY_OUTFIT':
-    return Object.assign({}, state, {myOutfit: action.products});
+    return Object.assign({}, state, { myOutfit: action.products });
   default:
     return state;
   }

client/reducers/product.js

@@ -1,10 +1,10 @@
-import Redux from 'redux';
+// import Redux from 'redux';
 
 export default (state = null, action) => {
   switch (action.type) {
-    case 'CHANGE_PRODUCT':
-      return action.info;
-    default:
-      return state;
+  case 'CHANGE_PRODUCT':
+    return action.info;
+  default:
+    return state;
   }
 };

client/reducers/questions.js

@@ -1,11 +1,11 @@
-import Redux from 'redux';
-import { ADD_QUESTION_LIST } from '../actions/index'
+// import Redux from 'redux';
+import { ADD_QUESTION_LIST } from '../actions/index';
 
 export default (state = {}, action) => {
-    switch (action.type) {
-        case ADD_QUESTION_LIST:
-            return action.questions
-        default:
-            return state;
-    }
+  switch (action.type) {
+  case ADD_QUESTION_LIST:
+    return action.questions;
+  default:
+    return state;
+  }
 };

client/reducers/reducerExample.js

@@ -1,4 +1,4 @@
-import Redux from 'redux';
+// import Redux from 'redux';
 
 export default (state = {}, action) => {
   switch (action.type) {

client/store.js

@@ -1,10 +1,11 @@
-import { createStore, applyMiddleware, compose } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import rootReducer from './reducers';
 
 let store = createStore(rootReducer, {}, applyMiddleware(thunk));
 
 //// Dev tools cause tests to fail
+// import {compose} from 'redux';
 // compose(applyMiddleware(thunk),
 //     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
 

client/utils/index.js

@@ -1,3 +1,3 @@
 export const removeHTMLTags = (str) => {
-    return str.replace(/(<([^>]+)>)/ig, '');
-}
+  return str.replace(/(<([^>]+)>)/ig, '');
+};

dist/styles.css

@@ -173,7 +173,6 @@ table {
   margin: 0 auto;
   display: grid;
   width: 80%;
-  height: 800px;
 }
 
 .placeholder-component {
@@ -183,7 +182,8 @@ table {
 }
 h3 {
   text-transform: uppercase;
-  font-size: 1.2em;
+  font-size: 1em;
+  margin: 2em 0 0.5em 0;
   color: var(--color);
 }
 h2 {
@@ -277,9 +277,9 @@ sub {
   align-self: center;
 }
 
-h3 {
+/* h3 {
   font-size: 24px;
-}
+} */
 
 #stars-reviews {
   display: flex;
@@ -374,6 +374,7 @@ h3 {
   display: grid;
   width: 80%;
   height: 400px;
+  overflow: scroll;
 }
 
 .otherItemsContainer {
@@ -474,6 +475,7 @@ h3 {
   border: black 1px solid;
   margin: 10px 5px 5px 10px;
   padding: 0px;
+  height: 2em
 }
 #question-list-container {
   border: black 1px solid;

tests/actions.test.js

@@ -1,12 +1,12 @@
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { changeProduct } from '../client/actions/creators/changeProduct';
+import { addQuestionList } from '../client/actions/creators/addQuestionList'
 import 'regenerator-runtime';
 
-let mockStore = configureStore([thunk]);
-let store = mockStore();
-
 describe('changeProduct action creator', () => {
+  let mockStore = configureStore([thunk]);
+  let store = mockStore();
   it('dispatches to store', () => {
     expect.assertions(1);
     return store
@@ -17,3 +17,17 @@ describe('changeProduct action creator', () => {
       .catch(e => console.error(e));
   });
 });
+
+describe('addQuestionList action creator', () => {
+  let mockStore = configureStore([thunk]);
+  let store = mockStore();
+  it('dispatches to store', () => {
+    expect.assertions(1);
+    return store
+      .dispatch(addQuestionList(1))
+      .then(() => {
+        return expect(store.getActions().length).toEqual(1);
+      })
+      .catch(e => console.error(e));
+  });
+});