+
+ - selling new item form
+ 
+
+ - browsing items / filtering by cost and stock availability
+ 
+ 
+
+ - purchasing items / processing payments through Stripe
+ 
+ 
+ 
diff --git a/backend_frontend_contract.md b/backend_frontend_contract.md
new file mode 100644
index 0000000..9565060
--- /dev/null
+++ b/backend_frontend_contract.md
@@ -0,0 +1,252 @@
+#Users
+
+- User object
+
+```
+{
+ id: integer,
+ username: string,
+ password: string
+}
+```
+
+
+
+## **GET /users/:id/orders**
+
+Returns all Orders associated with the specified user.
+
+- **Headers**
+ cookie: sessionId
+ **Content:**
+
+```
+{
+ orders: [
+ {
-
-
+
+
+
+
diff --git a/server.js b/server.js
index 0cd13bf..69da125 100644
--- a/server.js
+++ b/server.js
@@ -1,19 +1,454 @@
-let express = require('express')
-let app = express()
-let reloadMagic = require('./reload-magic.js')
+let express = require("express");
+let app = express();
+let reloadMagic = require("./reload-magic.js");
-reloadMagic(app)
+// database MongoDB
+let MongoClient = require("mongodb").MongoClient;
+let ObjectID = require("mongodb").ObjectID;
+let dbo = undefined;
+let url =
+ "mongodb+srv://decode:decode@cluster0-8wcxc.mongodb.net/test?retryWrites=true&w=majority";
+MongoClient.connect(url, { useNewUrlParser: true }, (err, db) => {
+ dbo = db.db("media-board");
+});
-app.use('/', express.static('build')); // Needed for the HTML and JS files
-app.use('/', express.static('public')); // Needed for local assets
+// hash passwords using sha1
+let sha1 = require("sha1");
+
+// stripe
+// I may add stuff in here
+app.post("/save-stripe-token", (req, res) => {
+ res.send(JSON.stringify({ success: true }));
+});
+
+// multer
+let multer = require("multer");
+let upload = multer({ dest: __dirname + "/uploads/" });
+reloadMagic(app);
+
+//cookie
+let cookieParser = require("cookie-parser");
+app.use(cookieParser());
+
+// variables
+// sessions = {sessionId: emailId}
+let sessions = {};
+
+app.use("/", express.static("build")); // Needed for the HTML and JS files
+
+app.use("/uploads", express.static("uploads")); // Needed for local assets
+app.use("/images", express.static("images"));
// Your endpoints go after this line
+//app.post create/update a resource and send it back after
+// loveit
+app.post("/add-a-loveIt", upload.none(), (req, res) => {
+ console.log("req.body", req.body);
-// Your endpoints go before this line
+ let numberOfLoveIt = parseInt(req.body.loveItNumber);
+
+ // dbo.collection("items").findOne({});
+ dbo.collection("items").updateOne(
+ { _id: ObjectID(req.body.itemId) },
+ {
+ $inc: {
+ loveIt: numberOfLoveIt
+ }
+ },
+ (err, result) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ res.send(JSON.stringify({ success: true }));
+ return;
+ }
+ );
+});
+
+// search item
+app.post("/search-item", (req, res) => {
+ console.log("item = req.body.name", req.body.name);
+ dbo
+ .collection("items")
+ .findOne({ name: req.body.name })
+ .toArray((err, item) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ console.log("item", item);
+ res.send(JSON.stringify(item));
+ });
+});
+
+// signup
+app.post("/signup", upload.none(), (req, res) => {
+ console.log("**** I'm in the signup endpoint");
+ console.log("this is the body", req.body);
+
+ let email = req.body.email;
+ let username = req.body.username;
+ let password = req.body.password;
+
+ dbo.collection("users").findOne({ email: email }, (err, expectedemail) => {
+ console.log("expectedemail", expectedemail);
+ if (err) {
+ res.send(JSON.stringify({ success: false }));
+ return;
+ }
+ if (expectedemail === undefined || expectedemail === null) {
+ dbo.collection("users").insertOne({
+ email: email,
+ username: username,
+ password: sha1(password)
+ });
+ res.send(JSON.stringify({ success: true }));
+ return;
+ }
+ if (expectedemail !== undefined) {
+ res.send(JSON.stringify({ success: false }));
+ return;
+ }
+ res.send(JSON.stringify({ success: false }));
+ });
+});
+
+// generate cookie
+let generateId = () => {
+ return "" + Math.floor(Math.random() * 100000000);
+};
+
+// login
+app.post("/login", upload.none(), (req, res) => {
+ console.log("**** I'm in the login endpoint");
+ console.log("this is the parsed body", req.body);
+
+ let email = req.body.email;
+ let enteredPassword = req.body.password;
+
+ dbo.collection("users").findOne({ email: email }, (err, user) => {
+ console.log("email", email);
+ console.log("enteredPassword", req.body.password);
+ console.log("users");
+ if (err) {
+ console.log("error", err);
+ res.send(JSON.stringify({ success: false }));
+ return;
+ }
+ if (user === null || user === undefined) {
+ console.log("user === null");
+ res.send(JSON.stringify({ success: false }));
+ return;
+ }
+ if (user.password === sha1(enteredPassword)) {
+ console.log("correct password");
+ let sessionId = generateId();
+ console.log("generated id", sessionId);
+ res.cookie("sid", sessionId);
+
+ sessions[sessionId] = user.email;
+ console.log("sessions", sessions);
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ }
+ res.send(JSON.stringify({ success: false }));
+ });
+});
-app.all('/*', (req, res, next) => { // needed for react router
- res.sendFile(__dirname + '/build/index.html');
-})
+// new-item
+app.post("/new-item", upload.single("itemImage"), (req, res) => {
+ console.log("request to /new-item body", req.body);
+ console.log(req.file);
+ let filePath;
+ let name = req.body.name;
+ let cost = parseInt(req.body.cost);
+ let description = req.body.description;
+ let review = "";
+ let available_quantity = parseInt(req.body.available_quantity);
+
+ if (req.file !== undefined) {
+ filePath = "/uploads/" + req.file.filename;
+ }
+
+ dbo.collection("items").insertOne({
+ filePath: filePath,
+ name: name,
+ cost: cost,
+ description: description,
+ available_quantity: available_quantity,
+ review: []
+ });
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+});
+
+// logout
+app.post("/logout", upload.none(), (req, res) => {
+ console.log("logout");
+ console.log("sessions", sessions);
+ let sessionId = req.cookies.sid;
+ console.log("sessionId", sessionId);
+ let currentUser = sessions[sessionId];
+ // delete cart
+ dbo.collection("cart").deleteMany(
+ {
+ email: currentUser
+ },
+ (err, result) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ }
+ );
+
+ // delete cookie
+ delete sessions[sessionId];
+ console.log("sessions", sessions);
+});
+
+// app.get retrieves information and send it back after
+// items - populate the database
+app.get("/items", (req, res) => {
+ // console.log("request to all items");
+ dbo
+ .collection("items")
+ .find({})
+ .toArray((err, items) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ // console.log("items", items);
+ res.send(JSON.stringify(items));
+ });
+});
+
+// retrieve all items in cart
+app.get("/cart-items", (req, res) => {
+ let sessionId = req.cookies.sid;
+ let currentUser = sessions[sessionId];
+ dbo
+ .collection("cart")
+ .find({ email: currentUser })
+ .toArray((err, cartItems) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ res.send(JSON.stringify(cartItems));
+ });
+});
+
+// cart
+app.post("/update-quantity-cart", upload.none(), (req, res) => {
+ let sessionId = req.cookies.sid;
+ let user = sessions[sessionId];
+ console.log("req.body.quantity", req.body.quantity);
+ let quantityToRestore = parseInt(req.body.quantity);
+ console.log("quantityToRestore", quantityToRestore);
+ dbo.collection("cart").updateOne(
+ { itemId: ObjectID(req.body.itemId), email: user },
+ {
+ $inc: {
+ quantity: quantityToRestore
+ }
+ }
+ );
+});
+
+app.post("/remove-from-cart", upload.none(), (req, res) => {
+ let sessionId = req.cookies.sid;
+ let user = sessions[sessionId];
+ dbo
+ .collection("cart")
+ .deleteOne(
+ { itemId: ObjectID(req.body.itemId), email: user },
+ (err, result) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ }
+ );
+});
+app.post("/add-to-cart", upload.none(), (req, res) => {
+ let sessionId = req.cookies.sid;
+ let currentUser = sessions[sessionId];
+ let quantity = parseInt(req.body.quantity);
+ dbo
+ .collection("items")
+ .findOne({ _id: ObjectID(req.body.itemId) }, (err, item) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ // update quantity in items collection
+ let quantityToRestore = quantity;
+ console.log("quantityToRestore", quantityToRestore);
+ dbo.collection("items").updateOne(
+ { _id: ObjectID(req.body.itemId) },
+ {
+ $inc: {
+ available_quantity: -quantityToRestore
+ }
+ }
+ );
+
+ dbo
+ .collection("cart")
+ .findOne(
+ { itemId: ObjectID(req.body.itemId), email: currentUser },
+ (err, cartItem) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ console.log("item._id", item._id);
+ if (cartItem === null) {
+ dbo.collection("cart").insertOne({
+ // itemId: req.body.itemId,
+ itemId: item._id,
+ email: currentUser,
+ name: item.name,
+ quantity: quantity
+ });
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ }
+ if (cartItem !== null) {
+ dbo.collection("cart").updateOne(
+ { _id: ObjectID(cartItem._id) },
+ {
+ $inc: {
+ quantity: quantity
+ }
+ }
+ );
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ }
+ }
+ );
+ });
+});
+
+// delete cart and create history cart
+app.post("/checkout", upload.none(), (req, res) => {
+ let sessionId = req.cookies.sid;
+ let currentUser = sessions[sessionId];
+
+ dbo
+ .collection("cart")
+ .find({ email: currentUser })
+ .toArray((err, cartItems) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ console.log({ cartItems });
+
+ // update quantity in items collection
+ cartItems.map(cartItem => {
+ let quantityToRestore = cartItem.quantity;
+ console.log("cartItem.quantity", cartItem.quantity);
+ dbo.collection("items").updateOne(
+ { _id: ObjectID(cartItems.itemId) },
+ {
+ $inc: {
+ quantity: -quantityToRestore
+ }
+ }
+ );
+ });
+ });
+
+ // delete cart
+ dbo.collection("cart").deleteMany({ email: currentUser }, (err, result) => {
+ if (err) {
+ console.log("error", err);
+ res.send("fail");
+ return;
+ }
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+ });
+});
+
+// reviews
+app.post("/reviews", upload.none(), (req, res) => {
+ console.log("our review: ", req.body.review);
+ let review = req.body.review;
+ let sessionId = req.cookies.sid;
+ let currentUser = sessions[sessionId];
+
+ dbo.collection("items").updateOne(
+ { _id: ObjectID(req.body.itemId) },
+ {
+ $push: {
+ review: {
+ username: currentUser,
+ message: review
+ }
+ }
+ }
+ );
+ res.send(
+ JSON.stringify({
+ success: true
+ })
+ );
+ return;
+});
+
+// Your endpoints go before this line
+app.all("/*", (req, res, next) => {
+ // needed for react router
+ res.sendFile(__dirname + "/build/index.html");
+});
-app.listen(4000, '0.0.0.0', () => { console.log("Server running on port 4000") })
+app.listen(4000, "0.0.0.0", () => {
+ console.log("Server running on port 4000");
+});
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..97bb96d
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,142 @@
+.App {
+ height: 100vh;
+ display: flex;
+ color: white;
+}
+
+.App__Aside {
+ width: 50%;
+ background-color: white;
+ background: url("/images/stores.jpg") no-repeat center center;
+ z-index: 105;
+ background-size: cover;
+}
+
+.App__Form {
+ width: 50%;
+ text-align-last: center;
+ height: 100%;
+ background-color: #101010;
+ padding: 25px 40px;
+ overflow: auto;
+ z-index: 105;
+}
+.FormCenter {
+ margin-bottom: 100px;
+}
+.or {
+ color: white;
+}
+
+.FormTitle {
+ padding-top: 20%;
+ color: black;
+ font-weight: 300;
+ margin-bottom: 50px;
+}
+
+.FormTitle__Link {
+ color: white;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 1.7em;
+ margin: 0 10px;
+ padding-bottom: 5px;
+}
+
+.FormTitle__Link:first-child {
+ margin-left: 0;
+}
+
+.FormTitle__Link--Active {
+ color: white;
+ border-bottom: 1px solid white;
+ margin-bottom: 40px;
+}
+
+.FormField {
+ margin-bottom: 40px;
+}
+
+.FormField__Label {
+ display: block;
+ text-transform: uppercase;
+ font-size: 0.9em;
+ color: white;
+}
+
+.FormField__Input:-webkit-autofill {
+ -webkit-text-fill-color: black !important;
+ -webkit-box-shadow: 0 0 0px 1000px white inset;
+ box-shadow: 0 0 0px 1000px white inset;
+ width: 50%;
+ background-color: white;
+ font-size: 0.9em;
+ border: none;
+ outline: none;
+ font-size: 1em;
+ font-weight: 300;
+ padding-bottom: 10px;
+ margin-top: 10px;
+}
+.FormField__Input {
+ text-align: left;
+ padding-top: 10px;
+ width: 50%;
+ background-color: white;
+ color: black;
+ outline: none;
+ font-size: 1em;
+ font-weight: 300;
+ padding-bottom: 10px;
+ padding-left: 15px;
+ margin-top: 10px;
+ font-family: "roboto", sans-serif;
+}
+
+.FormField__Input::placeholder {
+ color: #616e7f;
+}
+
+.FormField__Button {
+ background-color: #101010;
+ color: white;
+ border: none;
+ outline: none;
+ padding-right: 25px;
+ padding-left: 25px;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ font-size: 22px;
+ font-weight: 400;
+ min-inline-size: -webkit-fill-available;
+}
+.FormField__Button:hover {
+ cursor: pointer;
+}
+.FormField__Link {
+ color: #66707d;
+ text-decoration: none;
+ display: inline-block;
+ border-bottom: 1.5px solid #225e62;
+ padding-bottom: 5px;
+}
+
+.FormField__CheckboxLabel {
+ color: #646f7d;
+ font-size: 0.9em;
+}
+
+.FormField__Checkbox {
+ position: relative;
+ top: 1.5px;
+}
+
+.FormField__TermsLink {
+ color: white;
+ border-bottom: 1px solid #199087;
+ text-decoration: none;
+ display: inline-block;
+ padding-bottom: 2px;
+ margin-left: 5px;
+}
diff --git a/src/App.jsx b/src/App.jsx
index b3b06a2..ce2bd72 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,176 @@
-import React, { Component } from 'react'
+import React, { Component } from "react";
+import {
+ BrowserRouter as Router,
+ Route,
+ NavLink,
+ withRouter,
+ Link,
+ Redirect
+} from "react-router-dom";
+import { browserHistory } from "react-router";
+import {
+ syncHistoryWithStore,
+ routerReducer,
+ routerMiddleware,
+ push
+} from "react-router-redux";
+import { connect } from "react-redux";
-class App extends Component {
- render = () => {
- return "Hello world!"
+// components
+import Cart from "./Cart.jsx";
+import NewItem from "./NewItem.jsx";
+import Items from "./Items.jsx";
+import Signup from "./pages/Signup.jsx";
+import Login from "./pages/Login.jsx";
+import ItemDetails from "./itemDetails.jsx";
+import Checkout from "./Checkout.jsx";
+
+import "./Item.css";
+import { FiShoppingCart } from "react-icons/fi";
+import { FaHome } from "react-icons/fa";
+
+// testing cronjob
+class UnconnectedNavigation extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ email: "",
+ color: "#101010"
+ };
+ }
+ listenScrollEvent = e => {
+ if (window.scrollY > 400) {
+ this.setState({ color: "#101010" });
+ } else {
+ this.setState({ color: "#101010" });
+ }
+ };
+
+ componentDidMount() {
+ window.addEventListener("scroll", this.listenScrollEvent);
+ }
+ componentWillUnmount() {
+ window.removeEventListener("scroll", this.listenScrollEvent);
+ }
+
+ logout = async () => {
+ console.log("clicked logout");
+ let response = await (await fetch("/logout", { method: "POST" })).text();
+ let body = JSON.parse(response);
+ if (body.success) {
+ this.props.history.push("/");
}
+ };
+ render = () => {
+ console.log("this.state.email", this.state.email);
+ return (
+
+ );
+ };
+}
+
+let renderItemDetails = routerData => {
+ return (
+
+
+ );
+};
+
+class UnconnectedApp extends Component {
+ render = () => {
+ return (
+
+
+ );
+ };
}
+let mapStateToProps = state => {
+ return {
+ email: state.email,
+ loggedIn: state.loggedIn
+ };
+};
-export default App
+let Navigation = withRouter(UnconnectedNavigation);
+let App = connect(mapStateToProps)(UnconnectedApp);
+export default App;
diff --git a/src/Cart.css b/src/Cart.css
new file mode 100644
index 0000000..9264156
--- /dev/null
+++ b/src/Cart.css
@@ -0,0 +1,205 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
+.Cart {
+ position: relative;
+ justify-items: center;
+ box-sizing: inherit;
+ text-align: left;
+}
+.NavBlock {
+ z-index: 101;
+ position: absolute;
+ width: 100%;
+ background: white;
+ padding: 500px;
+ height: 80%;
+ margin-top: 150px;
+}
+.ShoppingBag {
+ z-index: 200;
+ position: absolute;
+ top: 70px;
+ margin-left: 150px;
+ width: fit-content;
+ height: fit-content;
+ margin: 80px auto;
+ background: white;
+ box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.1);
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+}
+.ShoppingBagText {
+ height: 60px;
+ border-bottom: 1px solid black;
+ padding: 0px 30px;
+ color: black;
+ font-size: 32px;
+ font-weight: 500;
+}
+.ItemFrame {
+ border-bottom: 1px solid;
+ text-align: left;
+ padding: 20px 10px;
+ height: fit-content;
+ display: flex;
+}
+
+.ItemsDetailsUl {
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ list-style-type: none;
+ text-align: left;
+}
+
+.Checkout {
+ z-index: 140;
+ position: fixed;
+ left: 803px;
+ top: 241px;
+ padding: 20px;
+ margin-left: 60px;
+}
+.CheckoutText {
+ font-weight: 500;
+ text-align: center;
+}
+.ItemsPictureFrame {
+ margin: 10px;
+ padding: 10px;
+}
+.ItemPictureCart {
+ border: transparent 10px;
+}
+.ItemsDetailsDiv {
+ margin-top: 20px;
+ margin-right: 20px;
+ width: 250px;
+}
+.ItemsDetailsDiv span:first-child {
+ margin-bottom: 10px;
+}
+.ItemsDetailsDiv span:last-child {
+ font-weight: 300;
+ margin-top: 8px;
+ color: black;
+}
+.ItemsQuantity {
+ padding-bottom: 10px;
+ margin-top: 30px;
+ text-align: center;
+ font-size: 20px;
+ font-weight: 200;
+}
+.ItemsQuantity input {
+ -webkit-appearance: none;
+ border: none;
+ text-align: center;
+ width: 32px;
+ font-size: 16px;
+ color: black;
+ font-weight: 300;
+}
+#buttonCart {
+ width: 30px;
+ height: 30px;
+ background-color: white;
+ border-radius: 6px;
+ border: none;
+ cursor: pointer;
+}
+
+#buttonCart:focus,
+input:focus {
+ outline: 0;
+}
+.RemoveItemButton {
+ background-color: white;
+ color: black;
+ border: 1px solid;
+ cursor: pointer;
+ margin-top: 45px;
+ font-size: 12px;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+.RemoveItemButton:hover {
+ box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
+ 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+.ItemPriceDiv {
+ margin-top: 20px;
+ margin-right: 60px;
+}
+.RemoveOneItemButton {
+ font-size: 24px;
+ font-weight: 300;
+ margin-right: 10px;
+}
+.AddOneItemButton {
+ font-size: 20px;
+ font-weight: 300;
+}
+
+.ItemsName {
+ display: block;
+ font-size: 22px;
+ color: Black;
+ font-weight: 500;
+}
+.ItemsDescription {
+ font-size: 16px;
+ font-weight: 100;
+ margin-bottom: 15px;
+ display: block;
+}
+.ItemsCost {
+ font-size: 22px;
+ font-weight: bolder;
+}
+.QuantityButtons {
+ text-align: center;
+}
+.SubTotalDiv {
+ margin-top: 25px;
+ text-align: center;
+}
+.SubTotalText {
+ font-size: 18px;
+ font-weight: 300;
+}
+.SubTotalNumber {
+ font-size: 18px;
+ font-weight: 400;
+}
+.StripeButtonText {
+ position: absolute;
+ top: 450px;
+ background-color: black !important;
+ background-image: none;
+ color: white;
+ border: none;
+ font-family: "Roboto", sans-serif;
+ font-size: 28px;
+ padding-left: 27px;
+ padding-right: 27px;
+ cursor: pointer;
+}
+.StripeButtonText:hover {
+ box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
+ 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+.StripeButton {
+ background-color: transparent;
+}
+.TotalText {
+ text-align: center;
+ font-weight: 300;
+}
+.TotalNumber {
+ font-weight: 500;
+}
+.ItemsAction {
+ padding-right: 20px;
+ align-content: center;
+}
diff --git a/src/Cart.jsx b/src/Cart.jsx
new file mode 100644
index 0000000..de795d3
--- /dev/null
+++ b/src/Cart.jsx
@@ -0,0 +1,257 @@
+import React, { Component } from "react";
+// import StripeCheckout from "react-stripe-checkout";
+import { connect } from "react-redux";
+import ItemDetails from "./itemDetails.jsx";
+import "./cart.css";
+
+class UnconnectedCart extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ cart: this.props.cart,
+ items: this.props.items,
+ itemId: this.props.itemId,
+ quantity: 0,
+ loggedIn: this.props.loggedIn,
+ email: this.props.email
+ };
+ }
+
+ componentDidMount = () => {
+ let updateCartItems = async () => {
+ // get all cart items from the server
+ let response = await fetch("/cart-items");
+ let responseBody = await response.text();
+ // console.log("responseBody", responseBody);
+ let parsed = JSON.parse(responseBody);
+ // console.log("parsed", parsed);
+ this.props.dispatch({ type: "set-cart", cart: parsed });
+ };
+ setInterval(updateCartItems, 500);
+ };
+
+ // componentDidMount = () => {
+ // this.reload();
+ // };
+ // componentDidUpdate = (prevProps, prevState) => {
+ // if (prevState.cart !== this.state.cart) {
+ // this.reload();
+ // }
+ // };
+
+ // reload = async () => {
+ // let response = await fetch("/cart-items");
+ // let responseBody = await response.text();
+ // let parsed = JSON.parse(responseBody);
+ // this.props.dispatch({ type: "set-cart", cart: parsed });
+ // };
+
+ // onToken = token => {
+ // fetch("/save-stripe-token", {
+ // method: "POST",
+ // body: JSON.stringify(token)
+ // }).then(response => {
+ // response.json().then(data => {
+ // // alert(`Thank you for your purchase! ${data.email}`);
+ // // add username/email below
+ // alert(`Thank you for your purchase ${this.props.email}! `);
+ // });
+ // });
+ // };
+
+ removeOneFromCart = async itemId => {
+ this.setState(
+ {
+ ...this.state,
+ itemId: itemId,
+ quantity: (this.state.quantity -= 1)
+ },
+ async () => {
+ console.log("this.state.itemId", itemId);
+ console.log("this.props.itemId", this.props.itemId);
+
+ let data = new FormData();
+ data.append("itemId", itemId);
+ data.append("quantity", -1);
+ let response = await (await fetch("/update-quantity-cart", {
+ method: "POST",
+ body: data
+ })).text();
+ let body = JSON.parse(response);
+ }
+ );
+ };
+
+ addOneToCart = async itemId => {
+ this.setState(
+ {
+ ...this.state,
+ itemId: itemId,
+ quantity: (this.state.quantity += 1)
+ },
+ async () => {
+ let data = new FormData();
+ data.append("itemId", itemId);
+
+ data.append("quantity", +1);
+ let response = await (await fetch("/update-quantity-cart", {
+ method: "POST",
+ body: data
+ })).text();
+ let body = JSON.parse(response);
+ }
+ );
+ };
+ removeFromCart = async itemId => {
+ this.setState(
+ {
+ ...this.state,
+ itemId: itemId
+ // itemId: this.props.itemId
+ },
+ async () => {
+ let data = new FormData();
+ // data.append("itemId", this.state.itemId);
+ data.append("itemId", itemId);
+ let response = await (await fetch("/remove-from-cart", {
+ method: "POST",
+ body: data
+ })).text();
+ let body = JSON.parse(response);
+ }
+ );
+ };
+
+ clearCart = async () => {
+ let response = await (await fetch("/checkout", {
+ method: "POST"
+ })).text();
+ let body = JSON.parse(response);
+ };
+
+ handleCheckout = () => {
+ this.props.history.push("/checkout");
+ return;
+ };
+
+ render = () => {
+ let subTotal = 0;
+ return (
+
+
+
+
+
+
+
+ );
+ };
+}
+
+let mapStateToProps = state => {
+ return {
+ email: state.email,
+ cart: state.cart,
+ items: state.items,
+ itemId: state.itemId,
+ loggedIn: state.loggedIn
+ };
+};
+let Cart = connect(mapStateToProps)(UnconnectedCart);
+export default Cart;
diff --git a/src/Checkout.jsx b/src/Checkout.jsx
new file mode 100644
index 0000000..24a7d9b
--- /dev/null
+++ b/src/Checkout.jsx
@@ -0,0 +1,99 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import StripeCheckout from "react-stripe-checkout";
+import "./main.css";
+
+class UnconnectedCheckout extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ email: this.props.email
+ };
+ }
+ onToken = token => {
+ fetch("/save-stripe-token", {
+ method: "POST",
+ body: JSON.stringify(token)
+ }).then(response => {
+ response.json().then(data => {
+ // alert(`Thank you for your purchase! ${data.email}`);
+ // add username/email below
+ alert(`Thank you for your purchase ${this.props.email}! `);
+ });
+ });
+ };
+
+ render = () => {
+ return (
+
+
+ Shopping Bag
+ {this.props.cart.map(cartItem => {
+ let itemDetails = this.props.items.filter(item => {
+ return item._id === cartItem.itemId;
+ })[0];
+
+ return (
+
+
+ 
+
+
+ );
+ })}
+
+ {itemDetails.name}
+
+ {itemDetails.description}
+
+ {itemDetails.cost + "$ "}
+
+
+
+
+
+ Sub total:⠀
+
+ {cartItem.quantity * itemDetails.cost}$
+
+
+
+ {(subTotal += cartItem.quantity * itemDetails.cost)}
+
+ {console.log("subTotal", subTotal)}
+
+
+
+
+
+
+ quantity: {cartItem.quantity}
+
+
+
+
+
+
+
*/}
+
+
+ Checkout
++ Total: + {subTotal}$ +
+ {/*
+
+ }
+ ComponentClass="div"
+ token={this.onToken}
+ stripeKey="pk_test_O9HT5wBse32v6Ev3y8xDbYnQ00SpdfFqSl"
+ >
+
+
+
+
+
+
*/}
+
+
+
+
+
+ );
+ };
+}
+
+let mapStateToProps = state => {
+ return { email: state.email };
+};
+
+let Checkout = connect(mapStateToProps)(UnconnectedCheckout);
+
+export default Checkout;
diff --git a/src/Item.css b/src/Item.css
new file mode 100644
index 0000000..bf88e33
--- /dev/null
+++ b/src/Item.css
@@ -0,0 +1,375 @@
+@import url("https://fonts.googleapis.com/css?family=Crimson+Text|Libre+Caslon+Display|Quicksand&display=swap");
+@import url("https://fonts.googleapis.com/css?family=EB+Garamond|Cardo:400italic");
+.Wrapper {
+ z-index: 100;
+ text-align: center;
+ position: relative;
+ top: 85px;
+ display: flex;
+ justify-content: center;
+ background-color: white;
+}
+.HeaderNavBar {
+ text-align: center;
+ height: auto;
+ justify-content: center;
+ display: flex;
+ left: 30%;
+}
+
+.secondWrapper {
+ justify-content: center;
+ position: relative;
+ text-align: center;
+}
+
+video {
+ background-color: #101010;
+ z-index: 104;
+}
+@media all and (min-width: 600px) {
+ video {
+ width: 100%;
+ height: 100%;
+ background: contain;
+ background-color: #101010;
+ }
+}
+.myNavbar {
+ background: black;
+}
+
+.secondPart {
+ position: absolute;
+ right: 5%;
+ top: 6%;
+ font-size: 20px;
+ display: flex;
+}
+
+.entryNav {
+ position: absolute;
+ left: 5%;
+ top: 6%;
+ font-size: 20px;
+}
+
+.stylelogo {
+ color: #fff;
+ font-family: "Cardo", serif;
+
+ font-weight: normal;
+ font-style: italic;
+ letter-spacing: 0.1em;
+ line-height: 4px;
+ margin: auto;
+ text-align: center;
+ position: relative;
+}
+
+em {
+ font-family: "EB Garamond", serif;
+ font-size: 38px;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ display: block;
+ font-style: normal;
+
+ text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ background: #101010;
+ z-index: 99;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ /* text-align: center; */
+}
+
+.hvr-bounce-to-right {
+ font-family: "Libre Caslon Display", serif;
+ color: #eee;
+ text-decoration: none;
+ padding: 20px;
+ flex-grow: 1;
+ background: #101010;
+ font-size: 26px;
+}
+button.hvr-bounce-to-right {
+ border: none;
+ font-family: "Libre Caslon Display", serif;
+ background: transparent;
+ text-decoration: none;
+ padding: 20px;
+ flex-grow: 1;
+
+ font-size: 26px;
+}
+
+.hvr-bounce-to-right {
+ display: inline-block;
+ vertical-align: middle;
+ -webkit-transform: perspective(1px) translateZ(0);
+ transform: perspective(1px) translateZ(0);
+ /* box-shadow: 0 0 1px rgba(0, 0, 0, 0); */
+ position: relative;
+ -webkit-transition-property: color;
+ transition-property: color;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+}
+.hvr-bounce-to-right:before {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: gray;
+
+ -webkit-transform: scaleX(0);
+ transform: scaleX(0);
+ -webkit-transform-origin: 0 50%;
+ transform-origin: 0 50%;
+ -webkit-transition-property: transform;
+ transition-property: transform;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ -webkit-transition-timing-function: ease-out;
+ transition-timing-function: ease-out;
+}
+
+.hvr-bounce-to-right:hover,
+.hvr-bounce-to-right:focus,
+.hvr-bounce-to-right:active {
+ color: white;
+}
+.hvr-bounce-to-right:hover:before,
+.hvr-bounce-to-right:focus:before,
+.hvr-bounce-to-right:active:before {
+ -webkit-transform: scaleX(1);
+ transform: scaleX(1);
+ -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+ transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+}
+.FiltersArea {
+ font-weight: 500;
+ display: inline-flex;
+ text-align-last: center;
+}
+.filterArea {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ top: 65px;
+}
+.UserDisplay {
+ top: -40px;
+ border: none;
+ justify-content: center;
+ position: relative;
+ color: black;
+ padding: 5px;
+}
+.FilterButton {
+ border: none;
+ background: black;
+ justify-content: center;
+ position: relative;
+ color: white;
+ padding: 5px;
+}
+.SearchBar {
+ position: relative;
+ justify-content: center;
+ margin-right: 40px;
+}
+
+.InputSearchBar {
+ display: inline-block;
+ position: relative;
+ height: 35px;
+ width: 35px;
+ box-sizing: border-box;
+ margin: 0px 8px 7px 0px;
+ padding: 7px 9px 0px 9px;
+ border: 3px solid #ffffff;
+ border-radius: 25px;
+ transition: all 200ms ease;
+ cursor: text;
+}
+
+.InputSearchBar:after {
+ content: "";
+ position: absolute;
+ width: 3px;
+ height: 20px;
+ right: -5px;
+ top: 21px;
+ background: #ffffff;
+ border-radius: 3px;
+ transform: rotate(-45deg);
+ transition: all 200ms ease;
+}
+
+.InputSearchBar.active,
+.InputSearchBar:hover {
+ width: 200px;
+ margin-right: 0px;
+}
+
+.InputSearchBar:after {
+ height: 0px;
+}
+
+input {
+ width: 100%;
+ border: none;
+ box-sizing: border-box;
+ font-family: Helvetica;
+ font-size: 15px;
+ color: inherit;
+ background: transparent;
+ outline-width: 0px;
+}
+
+.NavUl {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ background-color: white;
+}
+
+.NavLi {
+ float: left;
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 10px;
+ text-decoration: none;
+}
+.ItemsField {
+ align-items: center;
+ position: relative;
+ height: fit-content;
+ list-style-type: none;
+ text-align: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ min-height: -webkit-fill-available;
+ grid-row-gap: 70px;
+ width: fit-content;
+ background-color: white;
+ inline-size: -webkit-fill-available;
+ align-self: center;
+ z-index: 104;
+
+ height: auto;
+ top: 200px;
+}
+.ItemsFields {
+ position: relative;
+ padding: 20px;
+ font-size: 20px;
+ text-align: center;
+ min-width: 33%;
+ z-index: 104;
+ width: fit-content;
+ display: flex;
+ flex-direction: column;
+}
+.ItemName {
+ font-style: italic;
+ font-weight: bold;
+ font-family: "Nunito", sans-serif;
+}
+.ItemDescription {
+ font-size: 25px;
+}
+.ItemQuantities {
+ color: red;
+ font-size: 28px;
+ transform: rotate(20deg);
+ display: block;
+ position: absolute;
+ right: 35%;
+ top: 26%;
+ font-size: 25px;
+ font-weight: bolder;
+}
+.itemPrice {
+ font-weight: 100;
+}
+.ItemDescriptionLink {
+ background-color: Transparent;
+ background-repeat: no-repeat;
+ border: none;
+
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.ItemDescriptionLink a {
+ color: white;
+}
+.PaginationDiv {
+ inline-size: -webkit-fill-available;
+ display: flex;
+ justify-content: center;
+}
+.PagePrevious {
+ padding-bottom: 10px;
+ background: transparent;
+ background-color: transparent;
+ border: none;
+ font-size: 20px;
+ margin-right: 10px;
+ margin-top: 15px;
+}
+.PageNumber {
+ padding-bottom: 10px;
+ background: transparent;
+ background-color: transparent;
+ border: none;
+ font-size: 20px;
+ margin-right: 10px;
+ margin-top: 15px;
+}
+.PageNext {
+ padding-bottom: 10px;
+ background: transparent;
+ background-color: transparent;
+ border: none;
+ font-size: 20px;
+ margin-right: 10px;
+ margin-top: 15px;
+}
+
+
+@media screen and (max-width: 480px) {
+ .ItemsFields {
+ width: 50%;
+ }
+}
+@media screen and (max-width: 568px) {
+ .ItemsFields {
+ width: 33.3%;
+ }
+}
+@media screen and (max-width: 768px) {
+ .ItemsFields {
+ width: 33.3%;
+ }
+}
+@media screen and (max-width: 1024px) {
+ .ItemsFields {
+ width: 25%;
+ }
+}
diff --git a/src/ItemDetails.css b/src/ItemDetails.css
new file mode 100644
index 0000000..a206578
--- /dev/null
+++ b/src/ItemDetails.css
@@ -0,0 +1,52 @@
+.ItemPicture {
+ position: absolute;
+ top: 25%;
+ left: 10%;
+}
+.itemInfo {
+ position: absolute;
+ top: 50%;
+ left: 60%;
+}
+.formInput {
+ border: 1px solid black;
+ height: 50px;
+ padding: 15px;
+}
+.divTitle {
+ padding-bottom: 15px;
+}
+
+.reviewBox {
+ position: absolute;
+ height: auto;
+ padding: 10px;
+ /* border: 1px solid; */
+ top: 700px;
+ left: 60%;
+}
+.newReview {
+ margin-bottom: 25px;
+}
+.addButton {
+ margin-top: 10px;
+ font-size: 20px;
+ height: 45px;
+ padding-bottom: 25px;
+ border: none;
+}
+.newButton {
+ background-color: #181818;
+ color: white;
+ height: 30px;
+ border: none;
+}
+
+.reviewForm {
+ position: absolute;
+ height: auto;
+ padding: 10px;
+ /* border: 1px solid; */
+ top: 650px;
+ left: 10%;
+}
diff --git a/src/Items.jsx b/src/Items.jsx
new file mode 100644
index 0000000..845c668
--- /dev/null
+++ b/src/Items.jsx
@@ -0,0 +1,301 @@
+import React, { Component } from "react";
+import "./Item.css";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import ItemDetails from "./itemDetails.jsx";
+import { IoMdSearch, IoIosThumbsDown } from "react-icons/io";
+import { IconContext } from "react-icons";
+class UnconnectedItems extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ searchItem: "",
+ items: this.props.items,
+ displayFilters: false,
+ filterCost: 0,
+ filterMaxCost: 10000,
+ filterInStock: false,
+ itemName: "",
+ email: "",
+ itemFound: "",
+ quantity: 0,
+ item: {},
+ loveIt: 0,
+ page: 0
+ };
+ }
+ componentDidMount = () => {
+ let updateItems = async () => {
+ // get all items from the server
+ let response = await fetch("/items");
+ let responseBody = await response.text();
+ // console.log("responseBody", responseBody);
+ let parsed = JSON.parse(responseBody);
+ console.log("parsed", parsed);
+ this.props.dispatch({ type: "set-items", items: parsed });
+ };
+ setInterval(updateItems, 500);
+ };
+ // componentDidMount = () => {
+ // this.reload();
+ // };
+ // componentDidUpdate = (prevProps, prevState) => {
+ // if (prevState.items !== this.state.items) {
+ // this.reload();
+ // }
+ // };
+ // reload = async () => {
+ // let response = await fetch("/items");
+ // let responseBody = await response.text();
+ // let parsed = JSON.parse(responseBody);
+ // this.props.dispatch({ type: "set-items", items: parsed });
+ // };
+ gotoCart = () => {
+ this.props.history.push("/cart");
+ };
+ displayFilters = () => {
+ this.setState({
+ ...this.state,
+ displayFilters: !this.state.displayFilters
+ });
+ console.log("this.state.displayFilters", this.state.displayFilters);
+ };
+ handleOnChangeSearch = event => {
+ event.preventDefault();
+ console.log("searched item", event.target.value);
+ this.setState({ ...this.state, itemFound: event.target.value });
+ };
+ submitFilters = event => {
+ // fetch this '/filter-items'
+ };
+ maxCostOnChange = event => {
+ event.preventDefault();
+ this.setState({ filterMaxCost: event.target.value });
+ };
+ minCostOnChange = event => {
+ event.preventDefault();
+ if (event.target.value === "") {
+ this.setState({ filterCost: 0 });
+ }
+ let cost = parseInt(event.target.value);
+ if (isNaN(cost)) return 0;
+ this.setState({ filterCost: cost });
+ };
+ inStockOnChange = event => {
+ // event.preventDefault();
+ console.log("event.target.checked", event.target.checked);
+ this.setState({ ...this.state, filterInStock: event.target.checked });
+ };
+ goBackToPreviousPage = () => {
+ this.setState({ ...this.state, page: this.state.page - 1 });
+ };
+ goToNextPage = () => {
+ this.setState({ ...this.state, page: this.state.page + 1 });
+ };
+ goToPage = i => {
+ this.setState({ ...this.state, page: i });
+ };
+ render = () => {
+ console.log("rendering items");
+ let displayedItems = this.props.items;
+ console.log("this.props.items", this.props.items);
+ console.log("this.state.itemFound", this.state.itemFound);
+ if (this.state.itemFound !== "") {
+ console.log("I am filtering");
+ displayedItems = displayedItems.filter(item => {
+ return item.name.includes(this.state.itemFound);
+ });
+ }
+ let maxCost = parseInt(this.state.filterMaxCost);
+ displayedItems = displayedItems.filter(item => {
+ return item.cost > this.state.filterCost && item.cost < maxCost;
+ });
+ if (this.state.filterInStock) {
+ displayedItems = displayedItems
+ .slice(this.state.page * 6, this.state.page * 6 + 6)
+ .filter(item => {
+ return (
+ item.cost > this.state.filterCost &&
+ item.cost < maxCost &&
+ item.available_quantity > 0
+ );
+ });
+ } else {
+ displayedItems = displayedItems
+ .slice(this.state.page * 6, this.state.page * 6 + 6)
+ .filter(item => {
+ return item.cost > this.state.filterCost && item.cost < maxCost;
+ });
+ }
+
+ // displayedItems = displayedItems
+ // .slice(this.state.page * 6, this.state.page * 6 + 6)
+ // .filter(item => {
+ // return item.cost > this.state.filterCost && item.cost < maxCost;
+ // });
+ let indexPage = [];
+ for (let index = 1; index <= this.props.items.length / 6; index += 6) {
+ console.log(index);
+ indexPage.push(index);
+ }
+ console.log("displayedItems", displayedItems);
+ return (
+ Checkout
+SHIPPING ADDRESS
+
+
+
+
+ }
+ ComponentClass="div"
+ token={this.onToken}
+ stripeKey="pk_test_O9HT5wBse32v6Ev3y8xDbYnQ00SpdfFqSl"
+ >
+
+
+
+
+
+
+
+
+
+ );
+ };
+}
+let mapStateToProps = state => {
+ return {
+ email: state.email,
+ items: state.items,
+ itemFound: state.itemFound,
+ minPrice: state.min
+ };
+};
+let Items = connect(mapStateToProps)(UnconnectedItems);
+export default Items;
diff --git a/src/NewItem.jsx b/src/NewItem.jsx
new file mode 100644
index 0000000..cda4dc8
--- /dev/null
+++ b/src/NewItem.jsx
@@ -0,0 +1,145 @@
+//import necessary libraries
+
+import React, { Component } from "react";
+import { Link, withRouter } from "react-router-dom";
+import "./main.css";
+
+//you will create a listing on this page
+// it send the information about the item to the backend, so that backend can store it
+//upon submitting the form the url is changed, upon that change the listingSubmitted component is rendered
+
+//here i am creating a constructor and state prop so that i can use setState later
+class newItemForm extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ inputItemName: "",
+ inputItemDesc: "",
+ inputUrl: "",
+ inputItemPrice: "",
+ inputItemQuantity: ""
+ };
+ }
+
+ handleItemName = event => {
+ this.setState({ inputItemName: event.target.value });
+ };
+
+ handleItemDesc = event => {
+ this.setState({ inputItemDesc: event.target.value });
+ };
+
+ handleItemPrice = event => {
+ this.setState({ inputItemPrice: event.target.value });
+ };
+ handleItemUrl = event => {
+ this.setState({ inputItemUrl: event.target.value });
+ };
+
+ uploadFile = e => {
+ this.setState({ inputItemImage: e });
+ };
+ handleItemQuantity = event => {
+ this.setState({ inputItemQuantity: event.target.value });
+ };
+
+ handleSubmit = () => {
+ let formData = new FormData();
+ formData.append("name", this.state.inputItemName);
+ formData.append("description", this.state.inputItemDesc);
+ formData.append("cost", this.state.inputItemPrice);
+ formData.append("itemImage", this.state.inputItemImage);
+ formData.append("available_quantity", this.state.inputItemQuantity);
+ fetch("/new-item", {
+ method: "POST",
+ body: formData
+ })
+ .then(response => response.text())
+ .then(response => {
+ let itemId = JSON.parse(response);
+ this.setState({ itemId: itemId });
+ this.props.getItemId(itemId);
+ // receives the itemID from the backend
+ });
+
+ this.props.history.push("/all-items");
+ };
+
+ render() {
+ return (
+
+ {/* NavBar includes : SearchBar, Logout/Login(if not connected)
+ , cart and User Display */}
+
+ {/* SearchBar */}
+
+ {/* Filter goes here */}
+
+
+
+
+
+
+
+
+
+ {" "}
+ {/*
+ hi {" " + this.props.email}
*/}
+
+
+ min cost:
+
+ max cost:
+
+ In stock{" "}
+
+
+
+ {displayedItems.map(item => {
+ return (
+
+
+
+
+ );
+ })}
+ {/* pagination */}
+
+ {item.name}
+ {item.description}
+
+ SOLD OUT
+
+ {item.cost + "$ "}
+ 0 ? "block" : "none"
+ }}
+ >
+
+
+
+ {item.loveIt}
+ {item.loveIt > 1 ? " love it! " : " loves it!"}
+
+
+
+ {indexPage.map(i => {
+ return (
+
+ );
+ })}
+ {/* other numbers coming */}
+
+
+
+
+ );
+ }
+}
+
+let NewItem = withRouter(newItemForm);
+export default NewItem;
diff --git a/src/Users.jsx b/src/Users.jsx
new file mode 100644
index 0000000..fe0d805
--- /dev/null
+++ b/src/Users.jsx
@@ -0,0 +1,34 @@
+import React, { Component } from "react";
+import "./main.css";
+import { connect } from "react-redux";
+
+class UnconnectedUsers extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ users: this.props.users,
+ loggedIn: this.props.loggedIn
+ };
+ }
+
+ clearCart = async () => {
+ let response = await (await fetch("/checkout", {
+ method: "POST"
+ })).text();
+ let body = JSON.parse(response);
+ };
+
+ render = () => {
+ return ;
+ };
+}
+let mapStateToProps = state => {
+ return {
+ users: state.users,
+ loggedIn: state.loggedIn
+ };
+};
+
+let Users = connect(mapStateToProps)(UnconnectedUsers);
+
+export default Users;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..0787062
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,15 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+
+* {
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.mr-20 {
+ margin-right: 20px !important;
+}
diff --git a/src/index.jsx b/src/index.jsx
index 2d6650e..083e299 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,9 +1,78 @@
-import ReactDOM from 'react-dom'
-import './main.css'
-import App from './App.jsx'
-import React from 'react'
+import ReactDOM from "react-dom";
+import "./main.css";
+import "./index.css";
+import App from "./App.jsx";
+import React from "react";
+import { Provider } from "react-redux";
+import { createStore } from "redux";
+import { Link } from "react-router-dom";
-import reloadMagic from './reload-magic-client.js' // automatic reload
-reloadMagic() // automatic reload
+import reloadMagic from "./reload-magic-client.js"; // automatic reload
+reloadMagic(); // automatic reload
-ReactDOM.render(
+
+
+
+
+ Create a listing for your item
+ +
+
+ );
+ };
+}
+
+let mapStateToProps = state => {
+ return {
+ items: state.items,
+ email: state.email,
+ // cart: state.cart,
+ itemId: state.itemId,
+ reviews: state.reviews
+ };
+};
+
+let ItemDetails = connect(mapStateToProps)(UnconnectedItemDetails);
+// let Navigation = withRouter(UnconnectedNavigation);
+export default ItemDetails;
diff --git a/src/main.css b/src/main.css
index af8ab38..a74af5b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,23 +1,142 @@
body {
- background-color: #bbb;
- margin: 0;
+ background-color: white;
+ margin: 0;
}
.overlay {
- z-index:50;
- position: fixed;
- left:0;
- right:0;
- top:0;
- bottom:0;
- background-color:rgba(0,0,0,0.5);
+ z-index: 50;
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
}
.popup {
- z-index:100;
- position: fixed;
- top:200px;
- left:200px;
- right:200px;
- background-color:white
-}
\ No newline at end of file
+ z-index: 100;
+ position: fixed;
+ top: 200px;
+ left: 200px;
+ right: 200px;
+ background-color: white;
+}
+
+/* .cart {
+ display: flex;
+ position: relative;
+ justify-items: center;
+}
+
+.shopping-bag {
+ position: absolute;
+ top: 200px;
+ margin-left: 150px;
+}
+
+.checkout {
+ position: absolute;
+ left: 700px;
+ top: 200px;
+ margin-left: 100px;
+}
+#stripeButton {
+ position: fixed;
+ top: 300px;
+ left: 700px;
+ margin-left: 100px;
+} */
+.NewItemPage {
+ position: absolute;
+ display: flex;
+ background: black;
+ width: 100%;
+ height: -webkit-fill-available;
+}
+.VideoLeftSide {
+ width: 65%;
+ bottom: 43px;
+ background: #000;
+ position: relative;
+ background-size: cover;
+ margin-top: auto;
+}
+
+.createAListingForm {
+ margin-top: auto;
+ position: relative;
+ z-index: 300;
+ width: 35%;
+ padding-left: 30px;
+ padding-right: 30px;
+}
+.createAListingForm h2 {
+ font-weight: normal;
+ font-family: "roboto", sans-serif;
+ color: white;
+ font-size: 27px;
+}
+input[name="mytext"] {
+ text-align: -webkit-center;
+ width: 75%;
+ padding: 5px 0px 5px;
+ margin: 6px 0 20px;
+ display: block;
+ border: none;
+ font-size: 20px;
+ color: #000;
+ background: #eee;
+ transition: all 0.3s;
+}
+
+input[name="mytext"]:focus {
+ width: 100%;
+ background: lightgray;
+ color: #fff;
+ outline: none;
+ border-bottom: 1px dotted #333;
+}
+
+input[type="submit"] {
+ display: block;
+ width: 100%;
+ background-color: #181818;
+ color: white;
+ padding: 14px 20px;
+ margin: 14px 10px 14px 0;
+ outline: none;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 22px;
+ font-family: Georgia, "Times New Roman", Times, serif;
+ transition: all 0.3s;
+}
+
+input[type="submit"]:hover,
+input[type="submit"]:focus,
+input[type="reset"]:hover,
+input[type="reset"]:focus {
+ background-color: black;
+}
+.FormNameListing {
+ text-transform: lowercase;
+}
+.FormDescriptionListing {
+ text-transform: lowercase;
+}
+.textspacing {
+ scroll-snap-align: center;
+ color: white;
+ background: black;
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+.buttontoadd {
+ background: black;
+}
+
+.shipping {
+ top: 130px;
+ position: absolute;
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..97bf1aa
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { Link, NavLink } from "react-router-dom";
+import { connect } from "react-redux";
+import "../App.css";
+class UnconnectedLogin extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ email: "",
+ password: ""
+ };
+ }
+ handleEmailChange = event => {
+ console.log("new account email: ", event.target.value);
+ this.setState({ email: event.target.value });
+ };
+ handlePasswordChange = event => {
+ console.log("new password", event.target.value);
+ this.setState({ password: event.target.value });
+ };
+ submitHandler = async event => {
+ event.preventDefault();
+ console.log("login form submitted");
+ let data = new FormData();
+ data.append("email", this.state.email);
+ data.append("password", this.state.password);
+ let response = await fetch("/login", {
+ method: "POST",
+ body: data,
+ credentials: "include"
+ });
+ let responseBody = await response.text();
+ console.log("responseBody from login: ", responseBody);
+ let body = JSON.parse(responseBody);
+ if (body.success) {
+ console.log("logIn successful");
+ this.setState({ email: this.state.email });
+ this.props.dispatch({
+ type: "login-successful",
+ email: this.state.email
+ });
+ this.props.history.push("/all-items");
+ return;
+ }
+ this.setState({ email: "", password: "" });
+ alert("Oops, wrong username or password, please try again");
+ };
+ render = () => {
+ console.log("I am in the loggin endpoint");
+ return (
+
+ {displayItem.map(item => {
+ return (
+
+
+
+
+ {console.log("item.review", item.review)} +
+ );
+ })}
+
+ 
+
+
+
+ {item.name}
+ {item.description}
+ {item.cost + "$"}
{" "}
+
+ SOLD OUT
+
+
+
+
+
+
+
+
+
+ = 1 ? "block" : "none"
+ }}
+ >
+
+
+
+ + {console.log("item.review", item.review)} +
+
+
+ {item.review + ? item.review.map(UniqueReview => { + return ( +
+ +
Reviews
+ {item.review + ? item.review.map(UniqueReview => { + return ( +
+ {UniqueReview.username}
+ {UniqueReview.message} +
+ );
+ })
+ : null}
+ + {UniqueReview.message} +
+
+
+
+
+
+
+ );
+ };
+}
+let Login = connect()(UnconnectedLogin);
+export default Login;
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
new file mode 100644
index 0000000..6966aa2
--- /dev/null
+++ b/src/pages/Signup.jsx
@@ -0,0 +1,151 @@
+//Import the libraries
+import React, { Component } from "react";
+import { Link, NavLink } from "react-router-dom";
+import { connect } from "react-redux";
+import "../App.css";
+
+//Create class for the Signup
+class UnconnectedSignUp extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ email: "",
+ password: "",
+ username: ""
+ };
+ }
+ //Handler for the email
+ emailChangeHandler = event => {
+ console.log(event.target.value);
+ this.setState({ email: event.target.value });
+ };
+ //Handler for the password
+ passwordChangeHandler = event => {
+ console.log(event.target.value);
+ this.setState({ password: event.target.value });
+ };
+ //Handler for the username
+ usernameChangeHandler = event => {
+ console.log(event.target.value);
+ this.setState({ username: event.target.value });
+ };
+ //This will create a new form that will have add
+ // The username, the email and the password to the body
+ // of the response for the backend
+ submitHandler = async event => {
+ event.preventDefault();
+ console.log("The form was submitted with the following body");
+ console.log(this.state);
+ let data = new FormData();
+ data.append("email", this.state.email);
+ data.append("username", this.state.username);
+ data.append("password", this.state.password);
+ let response = await fetch("/signup", {
+ method: "POST",
+ body: data,
+ credentials: "include"
+ });
+ let responseBody = await response.text();
+ let body = JSON.parse(responseBody);
+ console.log("body.success", body.success);
+ if (body.success === false) {
+ alert("This username is alreay taken");
+ return;
+ }
+
+ this.props.dispatch({
+ type: "signup-successful"
+ });
+ // this.props.history.push("/login");
+ this.props.history.push("/");
+ return;
+ };
+ render = () => {
+ return (
+
+
+
+
{" "}
+
+
{" "}
+
+
+ Log In
+ {" "}
+ or{" "}
+
+ Sign Up
+
+
+
+
+
+
+ );
+ };
+}
+let SignUp = connect()(UnconnectedSignUp);
+export default SignUp;
diff --git a/uploads/0087c3301fa4cc59eff5784083bd7168 b/uploads/0087c3301fa4cc59eff5784083bd7168
new file mode 100644
index 0000000..b4dfec4
Binary files /dev/null and b/uploads/0087c3301fa4cc59eff5784083bd7168 differ
diff --git a/uploads/08a7bc0d2f35e724cc9b79c4c2852c72 b/uploads/08a7bc0d2f35e724cc9b79c4c2852c72
new file mode 100644
index 0000000..67b296c
Binary files /dev/null and b/uploads/08a7bc0d2f35e724cc9b79c4c2852c72 differ
diff --git a/uploads/177afc42a9d1b83b90d0c0890b4f13e3 b/uploads/177afc42a9d1b83b90d0c0890b4f13e3
new file mode 100644
index 0000000..c853a1e
Binary files /dev/null and b/uploads/177afc42a9d1b83b90d0c0890b4f13e3 differ
diff --git a/uploads/1a93f6e0a4b4b9016e045ed9da7e6f16 b/uploads/1a93f6e0a4b4b9016e045ed9da7e6f16
new file mode 100644
index 0000000..cbdcde2
Binary files /dev/null and b/uploads/1a93f6e0a4b4b9016e045ed9da7e6f16 differ
diff --git a/uploads/289451df09e625de6fcd4b67598446a0 b/uploads/289451df09e625de6fcd4b67598446a0
new file mode 100644
index 0000000..3ba9a8f
Binary files /dev/null and b/uploads/289451df09e625de6fcd4b67598446a0 differ
diff --git a/uploads/3cb7e6077762b73d44ea2f3953a7e379 b/uploads/3cb7e6077762b73d44ea2f3953a7e379
new file mode 100644
index 0000000..b10d16e
Binary files /dev/null and b/uploads/3cb7e6077762b73d44ea2f3953a7e379 differ
diff --git a/uploads/3e9f2d93bb913dd4504805d7ebc62d69 b/uploads/3e9f2d93bb913dd4504805d7ebc62d69
new file mode 100644
index 0000000..245f8eb
Binary files /dev/null and b/uploads/3e9f2d93bb913dd4504805d7ebc62d69 differ
diff --git a/uploads/44f0a3b3bac8ee4dfeaf5b2d8ed94d2e b/uploads/44f0a3b3bac8ee4dfeaf5b2d8ed94d2e
new file mode 100644
index 0000000..67b296c
Binary files /dev/null and b/uploads/44f0a3b3bac8ee4dfeaf5b2d8ed94d2e differ
diff --git a/uploads/4d1ddedae6426aa13c401536c3865c74 b/uploads/4d1ddedae6426aa13c401536c3865c74
new file mode 100644
index 0000000..25bff77
Binary files /dev/null and b/uploads/4d1ddedae6426aa13c401536c3865c74 differ
diff --git a/uploads/5a53d5bcbbcf755f0f8f6b2536f4872f b/uploads/5a53d5bcbbcf755f0f8f6b2536f4872f
new file mode 100644
index 0000000..c77a15b
Binary files /dev/null and b/uploads/5a53d5bcbbcf755f0f8f6b2536f4872f differ
diff --git a/uploads/5f908a15f6f87ae2cc9992ca9b525769 b/uploads/5f908a15f6f87ae2cc9992ca9b525769
new file mode 100644
index 0000000..42cfaed
Binary files /dev/null and b/uploads/5f908a15f6f87ae2cc9992ca9b525769 differ
diff --git a/uploads/66a47d91fd3184fc7ba9d81a1fa9759c b/uploads/66a47d91fd3184fc7ba9d81a1fa9759c
new file mode 100644
index 0000000..6ac54f3
Binary files /dev/null and b/uploads/66a47d91fd3184fc7ba9d81a1fa9759c differ
diff --git a/uploads/6a3b3c795e9038a858f1fb4313acb696 b/uploads/6a3b3c795e9038a858f1fb4313acb696
new file mode 100644
index 0000000..ec5d8d7
Binary files /dev/null and b/uploads/6a3b3c795e9038a858f1fb4313acb696 differ
diff --git a/uploads/7192c9d8ea7a5ae7082795d036c3459d b/uploads/7192c9d8ea7a5ae7082795d036c3459d
new file mode 100644
index 0000000..787ba4e
Binary files /dev/null and b/uploads/7192c9d8ea7a5ae7082795d036c3459d differ
diff --git a/uploads/84e810840ccc535f0522ae2d794acc95 b/uploads/84e810840ccc535f0522ae2d794acc95
new file mode 100644
index 0000000..6cbb511
Binary files /dev/null and b/uploads/84e810840ccc535f0522ae2d794acc95 differ
diff --git a/uploads/8804a38d740ad2c7f6d34293dcdc1a3c b/uploads/8804a38d740ad2c7f6d34293dcdc1a3c
new file mode 100644
index 0000000..f65f9bb
Binary files /dev/null and b/uploads/8804a38d740ad2c7f6d34293dcdc1a3c differ
diff --git a/uploads/8bfaef93db67664da4bc287c6119ca33 b/uploads/8bfaef93db67664da4bc287c6119ca33
new file mode 100644
index 0000000..b568699
Binary files /dev/null and b/uploads/8bfaef93db67664da4bc287c6119ca33 differ
diff --git a/uploads/9ab6763bfffcfed185f3a0400894d0d8 b/uploads/9ab6763bfffcfed185f3a0400894d0d8
new file mode 100644
index 0000000..39d71ee
Binary files /dev/null and b/uploads/9ab6763bfffcfed185f3a0400894d0d8 differ
diff --git a/uploads/9e3b0fccb2543a8103d906a209d8c9fa b/uploads/9e3b0fccb2543a8103d906a209d8c9fa
new file mode 100644
index 0000000..67b296c
Binary files /dev/null and b/uploads/9e3b0fccb2543a8103d906a209d8c9fa differ
diff --git a/uploads/a43584fdebea2229c451effd38bfc3b1 b/uploads/a43584fdebea2229c451effd38bfc3b1
new file mode 100644
index 0000000..cad35dc
Binary files /dev/null and b/uploads/a43584fdebea2229c451effd38bfc3b1 differ
diff --git a/uploads/a5442d8ee243082ff866954b9864c4cd b/uploads/a5442d8ee243082ff866954b9864c4cd
new file mode 100644
index 0000000..d3476f9
Binary files /dev/null and b/uploads/a5442d8ee243082ff866954b9864c4cd differ
diff --git a/uploads/bace80f94020377191d7780e99a9db2c b/uploads/bace80f94020377191d7780e99a9db2c
new file mode 100644
index 0000000..a748663
Binary files /dev/null and b/uploads/bace80f94020377191d7780e99a9db2c differ
diff --git a/uploads/bdda88cacceb4947f76c251ca918e7f6 b/uploads/bdda88cacceb4947f76c251ca918e7f6
new file mode 100644
index 0000000..b07f513
Binary files /dev/null and b/uploads/bdda88cacceb4947f76c251ca918e7f6 differ
diff --git a/uploads/d0069e84260223cd74d27d30d161f3d6 b/uploads/d0069e84260223cd74d27d30d161f3d6
new file mode 100644
index 0000000..c7c1891
Binary files /dev/null and b/uploads/d0069e84260223cd74d27d30d161f3d6 differ
diff --git a/uploads/dd26709196885f8be6c8da9caff9ba7a b/uploads/dd26709196885f8be6c8da9caff9ba7a
new file mode 100644
index 0000000..02e0884
Binary files /dev/null and b/uploads/dd26709196885f8be6c8da9caff9ba7a differ
diff --git a/uploads/e1d241952a33b853867a6e468fe6efc4 b/uploads/e1d241952a33b853867a6e468fe6efc4
new file mode 100644
index 0000000..5391e8e
Binary files /dev/null and b/uploads/e1d241952a33b853867a6e468fe6efc4 differ
diff --git a/uploads/e2d985696ef727c70d03d5e1339e0c70 b/uploads/e2d985696ef727c70d03d5e1339e0c70
new file mode 100644
index 0000000..4967a22
Binary files /dev/null and b/uploads/e2d985696ef727c70d03d5e1339e0c70 differ
diff --git a/uploads/e4ee5834da86d3e379c1fe6ef36b8a5f b/uploads/e4ee5834da86d3e379c1fe6ef36b8a5f
new file mode 100644
index 0000000..67b296c
Binary files /dev/null and b/uploads/e4ee5834da86d3e379c1fe6ef36b8a5f differ
diff --git a/uploads/f581b54e12e2e72921307fead32021b1 b/uploads/f581b54e12e2e72921307fead32021b1
new file mode 100644
index 0000000..6cbb511
Binary files /dev/null and b/uploads/f581b54e12e2e72921307fead32021b1 differ
diff --git a/uploads/f5e673d88999a73166ff75d5fe398426 b/uploads/f5e673d88999a73166ff75d5fe398426
new file mode 100644
index 0000000..843fa2a
Binary files /dev/null and b/uploads/f5e673d88999a73166ff75d5fe398426 differ
diff --git a/webpack.config.js b/webpack.config.js
index 494eb19..10d0665 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,8 @@
-const HtmlWebPackPlugin = require("html-webpack-plugin")
-const InjectPlugin = require('webpack-inject-plugin').default;
-const path = require("path")
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const InjectPlugin = require("webpack-inject-plugin").default;
+const path = require("path");
-let pollServer =
- ` let __init_status = false
+let pollServer = ` let __init_status = false
let __init_magic_reload = async () => {
@@ -59,8 +58,7 @@ let pollServer =
}
__init_magic_reload()
-`
-
+`;
module.exports = {
watchOptions: {
@@ -70,8 +68,8 @@ module.exports = {
mode: "development",
devtool: "source-map",
output: {
- publicPath: '/',
- path: path.join(__dirname, "build"),
+ publicPath: "/",
+ path: path.join(__dirname, "build")
},
devServer: {
port: 3000,
@@ -80,50 +78,55 @@ module.exports = {
errors: true
},
historyApiFallback: {
- index: '/index.html'
+ index: "/index.html"
},
contentBase: path.join(__dirname, "public"),
hot: true
},
module: {
- rules: [{
- test: /\.(js|jsx)$/,
- exclude: /node_modules/,
- use: {
- loader: "babel-loader"
- }
- },
- {
- test: /\.html$/,
- use: [{
- loader: "html-loader"
- }]
- },
- {
- test: /\.css$/,
- use: ["style-loader", "css-loader"]
- },
- {
- test: /\.(jpe?g|png|gif|svg)$/i,
- use: [{
- loader: "url-loader",
- options: {
- limit: 30000,
- name: "[name].[ext]"
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader"
}
- }]
- }
+ },
+ {
+ test: /\.html$/,
+ use: [
+ {
+ loader: "html-loader"
+ }
+ ]
+ },
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ },
+ {
+ test: /\.(jpe?g|png|gif|svg)$/i,
+ use: [
+ {
+ loader: "url-loader",
+ options: {
+ limit: 30000,
+ name: "[name].[ext]"
+ }
+ }
+ ]
+ }
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
- }),
+ })
],
entry: {
javascript: "./src/index.jsx",
html: "./public/index.html"
}
-}
+};
+
+
+
+
+
+
+
+ Log In
+ {" "}
+ or{" "}
+
+ Sign Up
+
+
+
+