purvasheth · purvasheth · Apr 21, 2021 · May 6, 2021 · May 7, 2021 · May 7, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "e-commercebasic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "@babel/runtime": "7.13.8",
+    "axios": "^0.21.1",
+    "faker": "^5.4.0",
+    "history": "^5.0.0",
+    "lodash": "^4.17.21",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-router-dom": "^6.0.0-beta.0",
+    "react-scripts": "4.0.0",
+    "react-toastify": "^7.0.3"
+  },
+  "devDependencies": {
+    "miragejs": "^0.1.41",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*  /index.html   200
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>CeresKart</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,40 @@
+import { Cart } from "./pages/Cart";
+import { Products } from "./pages/Products/Products";
+import "./styles.css";
+import { Wishlist } from "./pages/Wishlist";
+import { ToastContainer } from "react-toastify";
+import { SearchResults } from "./pages/SearchResults";
+import { Home } from "./pages/Home/Home";
+import { NavigationBar } from "./components/NavigationBar";
+import { Routes, Route } from "react-router-dom";
+import { NotFound } from "./pages/NotFound";
+import { Login } from "./pages/Auth/Login";
+import { Signup } from "./pages/Auth/Signup";
+import { PrivateRoute } from "./pages/Auth/PrivateRoute";
+import { ResetPassword } from "./pages/Auth/ResetPassword";
+
+export default function App() {
+  return (
+    <>
+      <ToastContainer />
+      <NavigationBar />
+      <div className="mt-3">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/login" element={<Login />} />
+          <PrivateRoute path="/cart" element={<Cart />} />
+          <PrivateRoute path="/wishlist" element={<Wishlist />} />
+          <Route path="/search" element={<SearchResults />} />
+          <Route
+            path="products/category/:categoryName"
+            element={<Products />}
+          />
+          <Route path="/products" element={<Products />} />
+          <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/AddToCartButton.js b/src/components/AddToCartButton.js
@@ -0,0 +1,50 @@
+import { checkItem } from "../utils";
+import { useData } from "../pages/data-context";
+import { ADD_CART_ITEM } from "../pages/data-reducer";
+import { useAxios } from "../useAxios";
+import { API_CART } from "../urls";
+import { useNavigate } from "react-router";
+import { useAuth } from "../pages/Auth/auth-context";
+
+export const AddToCartButton = ({ id, inStock, ...rest }) => {
+  const navigate = useNavigate();
+  const { postData, isLoading } = useAxios(API_CART);
+  const { cartItems, dataDispatch } = useData();
+  const { token } = useAuth();
+  const handleClick = async () => {
+    if (!token) {
+      navigate("/login");
+    } else {
+      if (checkItem(cartItems, id)) {
+        navigate("/cart");
+      } else {
+        const item = await postData({ id, qty: 1, inStock, ...rest });
+        dataDispatch({
+          type: ADD_CART_ITEM,
+          item,
+        });
+      }
+    }
+  };
+  const getButtonText = () => {
+    if (inStock) {
+      return checkItem(cartItems, id) ? "Go to Cart" : "Add to cart";
+    }
+    return "Out of Stock";
+  };
+  return (
+    <button
+      disabled={isLoading || !inStock}
+      className="btn bg-primary"
+      onClick={handleClick}
+    >
+      {inStock &&
+        (isLoading ? (
+          <i className="fa fa-spinner fa-pulse mr-sm" />
+        ) : (
+          <i className="fa fa-shopping-cart mr-sm" aria-hidden="true" />
+        ))}
+      {getButtonText()}
+    </button>
+  );
+};
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -0,0 +1,75 @@
+const setRatingClass = (rating) => {
+  if (+rating <= 1.5) {
+    return "bg-red-600";
+  } else if (+rating < 3.5) {
+    return "bg-yellow-600";
+  } else {
+    return "bg-green-600";
+  }
+};
+
+export const Badges = ({ rating, fastDelivery }) => (
+  <div className="card__badges">
+    <div className="rating">
+      <span className={`badge--regular ${setRatingClass(rating)}`}>
+        {rating}
+        <i className="fa fa-star ml-space"></i>
+      </span>
+    </div>
+    {fastDelivery && (
+      <span className="badge--regular bg-green-100 badge--second">
+        Fast Delivery
+      </span>
+    )}
+  </div>
+);
+
+export const Price = ({ discount, price }) => (
+  <div>
+    <i className="fa fa-inr mr-space" />
+    {discount ? (
+      <>
+        <b>{Math.round(price - price * 0.01 * discount)}</b>
+        <span className="strike-through ml-space">{Math.round(price)}</span>
+        <span className="font--success ml-space">{discount}% off</span>
+      </>
+    ) : (
+      <span>{Math.round(price)}</span>
+    )}
+  </div>
+);
+
+const Category = ({ calledFrom, category }) =>
+  calledFrom !== "cart" &&
+  calledFrom !== "wishlist" && (
+    <div>
+      <b>Category</b>: {category}
+    </div>
+  );
+
+export const CardBody = ({
+  name,
+  image,
+  price,
+  rating,
+  discount,
+  category,
+  fastDelivery,
+  calledFrom,
+}) => (
+  <>
+    <img className="img" src={image} alt={name} />
+    <div className="card__content">
+      <div className="card__heading"> {name} </div>
+      <Badges rating={rating} fastDelivery={fastDelivery} />
+      <Price discount={discount} price={price} />
+      <Category calledFrom={calledFrom} category={category} />
+    </div>
+  </>
+);
+export const Card = ({ children }) => (
+  <div className="card card--shadow">{children}</div>
+);
+export const CardFooter = ({ children }) => (
+  <div className="card__footer">{children}</div>
+);
diff --git a/src/components/CloseButton.js b/src/components/CloseButton.js
@@ -0,0 +1,5 @@
+export const CloseButton = ({ onClick }) => (
+  <button className="btn-close btn--close--card btn-lg" onClick={onClick}>
+    <i className="fa fa-times" />
+  </button>
+);
diff --git a/src/components/DeleteModal.js b/src/components/DeleteModal.js
@@ -0,0 +1,32 @@
+export const DeleteModal = ({ onCancel, onDelete, calledFrom }) => {
+  return (
+    <div className="modal-bg">
+      <div className="modal">
+        <div className="modal-content">
+          <button
+            id="close-btn"
+            className="btn-close btn-lg"
+            onClick={onCancel}
+          >
+            <i className="fa fa-times"></i>
+          </button>
+          <div className="modal--delete">
+            {`Item will be removed from ${calledFrom} permanently`}
+            <div className="modal__buttons">
+              <button id="cancel-btn" className="btn btn-sm" onClick={onCancel}>
+                Cancel
+              </button>
+              <button
+                id="delete-btn"
+                className="btn bg-red-600 btn-sm ml-1"
+                onClick={onDelete}
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};