Quaran-Team · mrterranova · Aug 13, 2020 · Aug 4, 2020 · Aug 4, 2020 · Aug 4, 2020
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
-.DS_Store
+.DS_Store
+yarn.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,10 @@
     "@babel/core": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.11.0",
     "@testing-library/jest-dom": "^5.11.1",
     "axios": "^0.19.2",
@@ -42,6 +46,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
+    "react-image-magnify": "^2.7.4",
     "react-router-dom": "^5.2.0",
     "react-test-renderer": "^16.13.1",
     "request": "^2.88.2"
@@ -55,9 +60,11 @@
     "css-loader": "^3.6.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
     "http-server": "^0.12.3",
     "identity-obj-proxy": "^3.0.0",
+    "image-webpack-loader": "^6.0.0",
     "jest": "^26.1.0",
     "jest-cli": "^26.1.0",
     "jest-enzyme": "^7.1.2",

diff --git a/public/images/placement-holder.png b/public/images/placement-holder.png
diff --git a/public/images/preFoot.JPG b/public/images/preFoot.JPG
diff --git a/public/index.html b/public/index.html
@@ -15,7 +15,11 @@
   src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
   crossorigin></script>
 
+  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
+
 </head>
 <body>
     <div id="app"></div>

diff --git a/src/Css/App.css b/src/Css/App.css
@@ -0,0 +1,9 @@
+.app > * {
+	background: #eee;
+	/* padding: 1em; */
+	box-sizing: border-box;
+}
+
+.app > *:nth-child(odd) {
+	background: #ddd;
+}
diff --git a/src/components/Answers.js b/src/components/Answers.js
@@ -1,14 +1,53 @@
 import React, { Component } from 'react'
-import SingleAnswer from './SingleAnswer'
+import QAndADataService from '../service/QAndADataService'
+
 
 export default class Answers extends Component {
+    constructor(props){
+        super(props)
+        console.log("Hey! Props.")
+        console.log(props)
+    }
+
+    state = {
+        answers:[],
+        allAnswers:[],
+        sortedAnswers:[],
+    }
+
+    refreshAnswers = this.refreshAnswers.bind(this)
+
+    componentDidMount() {
+        this.refreshAnswers();
+    }
+
+    refreshAnswers() {
+        QAndADataService.retrieveAllAnswers()
+        .then(
+            answers => {
+                this.setState({ answers: answers.data })
+                console.log("1")
+                console.log(answers.data)
+                console.log("2")
+                console.log(this.state.allAnswers)
+                console.log("3")
+                console.log(this.state.answers)
+                this.state.sortedAnswers = this.state.allAnswers.map((a) => a.questionid)
+                console.log("Hello!")
+                console.log(this.state.allAnswers)
+            }
+        )
+    }
+
     render() {
         return (
             <div className="Answers">
-                <h4>Answer: </h4>
-                <ol>
-                    <SingleAnswer/>
-                </ol>
+                {this.state.answers.map((a) =>
+                    <div>
+                        <h4>Answer: </h4>
+                        <p>{a.answer}</p>
+                    </div>
+                )}  
             </div>
         )
     }

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,25 +1,41 @@
-import React, { Component } from 'react';
-import CustomerReviewsContainer from './CustomerReviews/CustomerReviews';
-import CWBA from './CustomerWhoBoughtAlsoCmpnt/CustomersWhoBoughtAlsoAll'
-import QAcomponent from './QAcomponent';
-import ComparisonGrid from './ComparisonGrid/ComparisonGrid.jsx';
-import CImagesAll from './CustomerImageCmpnt/CustomerImagesAll';
-import Appples from './RatingSummary/Appples';
+import React, { Component } from "react";
+import Product from "./productVariant/Product.jsx";
+import CustomerReviewsContainer from "./CustomerReviews/CustomerReviews";
+import CWBA from "./CustomerWhoBoughtAlsoCmpnt/CustomersWhoBoughtAlsoAll";
+import QAcomponent from "./QAcomponent";
+import ComparisonGrid from "./ComparisonGrid/ComparisonGrid.jsx";
+import CImagesAll from "./CustomerImageCmpnt/CustomerImagesAll";
+import Appples from "./RatingSummary/Appples";
+import PhotoGallery from "./PhotoGallery/PhotoGallery";
+import TopBar from "./TopBar/TopBar";
+import BlueSecondTopLine from "./SecondTopLine/BlueSecondTopline";
+import Footer from "./Footer/Footer";
+
+// import "../Css/App.css";
 
 class App extends Component {
-    render(){
-        return(
-            <div>
-                <CustomerReviewsContainer />
-                <QAcomponent />
-                <ComparisonGrid/>
-                <CImagesAll />
-                <CWBA/>
-                <Appples/>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className="app">
+        <div>
+          <TopBar />
+        </div>
+        <BlueSecondTopLine />
+
+        <PhotoGallery />
+        <div id="PurchaseItemContainer_Placeholder">
+          {/*place holder: replace when ready*/}
+        </div>
+        <CustomerReviewsContainer />
+        <QAcomponent />
+        <ComparisonGrid />
+        <CImagesAll />
+        <CWBA />
+        <Appples />
+        <Footer />
+      </div>
+    );
+  }
 }
 
 export default App;
-
diff --git a/src/components/ComparisonGrid/ComparisonGrid.jsx b/src/components/ComparisonGrid/ComparisonGrid.jsx
@@ -1,65 +1,93 @@
-import React from 'react';
-import { makeStyles } from "@material-ui/core/styles";
+import React from "react";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableContainer from "@material-ui/core/TableContainer";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
-import ComparisonItem from "./ComparisonItem.jsx";
+import axios from "axios";
+import { withStyles } from "@material-ui/core/styles";
 
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
+const styles = theme => ({
+  root: {
+    backgroundColor: "red"
+  }
 });
 
-function createData(name, power, autoPrograms, manPrograms, crushing) {
-  return { name, power, autoPrograms, manPrograms, crushing };
-}
+class ComparisonGrid extends React.Component {
+
+  _isMounted = false;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: [],
+    };
+  }
+  componentDidMount() {
 
-const rows = [
-  createData("Power", 1100, 1000, 1200, 1300),
-  createData("Automatic Modes", 0, 4, 4, 0),
-  createData("Manual Modes", 4, 1, 0, 4),
-  createData("Price ($USD)", 305, 307, 607, 403),
-  createData("Rating", 2, 3, 5, 3),
-  createData("Hello", 2, 3, 5, 3),
-];
+    this._isMounted = true;
 
-export default function ComparisonGrid() {
-  const classes = useStyles();
+    axios.get("http://localhost:8080/all/products/").then((response) => {
+    if (this._isMounted)  {
+      this.setState({
+        items: response.data,
+        });
+      }
+    });
+  }
 
-  return (
-    <div >
-      <ComparisonItem />
-      <TableContainer component={Paper}>
-        <Table className={classes.table} aria-label="simple table">
-          <TableHead>
-            <TableRow>
-              <TableCell data-testid="comparisonGrid">Category</TableCell>
-              <TableCell align="right">Product #1</TableCell>
-              <TableCell align="right">Product #2</TableCell>
-              <TableCell align="right">Product #3</TableCell>
-              <TableCell align="right">Product #4</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row) => (
-              <TableRow key={row.name}>
-                <TableCell component="th" scope="row">
-                  {row.name}
-                </TableCell>
-                <TableCell align="right">{row.power}</TableCell>
-                <TableCell align="right">{row.autoPrograms}</TableCell>
-                <TableCell align="right">{row.manPrograms}</TableCell>
-                <TableCell align="right">{row.crushing}</TableCell>
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  render() {
+    console.log(this.state.items);
+    const { comparisonGrid } = this.props;
+    return (
+      <div className="comparisonGrid.root">
+        <TableContainer component={Paper}>
+          <Table stickyHeader aria-label="sticky table">
+            <TableHead>
+              <TableRow>
+                <TableCell>Product</TableCell>
+                {this.state.items.map((item) => (
+                  <TableCell key={item.itemId} align="right">{item.itemName}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+              <TableCell component="th" scope="row">ID</TableCell>
+                {this.state.items.map((item) => {
+                  return <TableCell key={item.itemId} align="right">{item.itemId}</TableCell>
+                })}
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  );
+              <TableRow>
+              <TableCell component="th" scope="row">About</TableCell>
+                {this.state.items.map((item) => {
+                  return <TableCell key={item.itemId} align="right">{item.itemAbout}</TableCell>
+                })}
+              </TableRow>
+              <TableRow>
+              <TableCell component="th" scope="row">Title</TableCell>
+                {this.state.items.map((item) => {
+                  return <TableCell key={item.itemId} align="right">{item.itemTitle}</TableCell>
+                })}
+              </TableRow>
+              <TableRow>
+              <TableCell component="th" scope="row">Price</TableCell>
+                {this.state.items.map((item) => {
+                  return <TableCell key={item.itemId} align="right">{item.itemPrice}</TableCell>
+                })}
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+    );
+  }
 }
+
+export default withStyles(styles, { withTheme: true })(ComparisonGrid);
diff --git a/src/components/ComparisonGrid/ComparisonItem.jsx b/src/components/ComparisonGrid/ComparisonItem.jsx
diff --git a/src/components/CustomerImageCmpnt/CustomerImageIndividual.jsx b/src/components/CustomerImageCmpnt/CustomerImageIndividual.jsx
@@ -1,43 +1,12 @@
 import React, { Component } from 'react';
-import CustomerImageDataService from '../../service/CustomerImageDataService'
-
-
-
 class CImage extends Component {
-
-    constructor(props) {
-        super(props)
-            this.state = {
-            response: null,
-        }
-        this.refreshCourses = this.refreshCourses.bind(this)
-    }
-
-    componentDidMount() {
-        this.refreshCourses();
-    }
-
-    refreshCourses() { //retrieve data currently set to one id. not dynamic
-        CustomerImageDataService.retrieveCustomerImage(1)
-            .then(
-                response => {
-                    this.setState({ response: response.data })
-                }
-            )
-    }
-
     render(){
         return(
-            <div>
-                <img src="" 
-                    // alt="test"
-                    style={{
-                        height: "153px", 
-                        width: "153px", 
-                        backgroundColor: "grey"
-                        }}>
+                <img src={this.props.url} 
+                    alt="customer provided image"
+                    className="CImage"
+                >
                 </img>
-            </div>
         )
     }
 }