Merge pull request #51 from Kartify-Team/q-and-a

Q and a

.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/QuestionCard.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { removeHTMLTags } from "../../utils"
+const QuestionCard = ({ 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>
+          );
+        }
+      })}
+    </div>
+  </div>
+
+
+};
+
+export default QuestionCard;

client/components/Questions/QuestionList.jsx

@@ -1,15 +1,25 @@
 import React, { useState, useEffect } from "react";
 import { removeHTMLTags } from "../../utils"
-import AnswerList from "./AnswerList";
+import QuestionCard from "./QuestionCard";
 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>
+              <QuestionCard 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) {