Skip to content

Commit

Permalink
Merge pull request #63 from AmanNegi/dev-react
Browse files Browse the repository at this point in the history 
fix: dev react
  • Loading branch information
@AmanNegi
AmanNegi authored Apr 16, 2023
2 parents 9b8d1b5 + d63e3bb commit 726ac36
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 86 deletions.
139 changes: 76 additions & 63 deletions frontend/react/Agro-Millets/src/components/ShopItem.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,100 @@
import { motion } from "framer-motion";
import { useState } from "react";
import { useEffect, useState } from "react";
import Rating from "react-rating";
import { useNavigate } from "react-router-dom";
import appState from "../data/AppState";
import { toast } from "react-toastify";
import { addToCart } from "../pages/Cart/application/cart";
import { getItem } from "../pages/shop/application/shop";

function ShopItem({ item }) {
function ShopItem({ itemId }) {
var [count, setCount] = useState(1);
var [item, setItem] = useState(undefined);

useEffect(() => {
getItem(itemId).then((data) => {
setItem(data);
});
}, []);

var navigate = useNavigate();
return (
<>
<motion.div
key={item._id}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 0.25, duration: 0.25 }}
viewport={{ once: true }}
className="border border-slate-300 relative transition duration-500 rounded-lg hover:shadow-m d bg-white "
>
<img
onClick={() => navigate("/item/" + item._id)}
className="h-40 w-[100%] rounded-t-lg object-cover"
src={item.images[0]}
alt=""
/>
<div className="px-4 py-2 rounded-lg ">
<h1 className="text-xl font-bold text-gray-700 hover:text-gray-900 hover:cursor-pointer">
{item.name}
</h1>
{item && (
<motion.div
key={item._id}
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ delay: 0.25, duration: 0.25 }}
viewport={{ once: true }}
className="border border-slate-300 relative transition duration-500 rounded-lg hover:shadow-m d bg-white "
>
<img
onClick={() => navigate("/item/" + item._id)}
className="h-40 w-[100%] rounded-t-lg object-cover"
src={item.images[0]}
alt=""
/>
<div className="px-4 py-2 rounded-lg ">
<h1 className="text-xl font-bold text-gray-700 hover:text-gray-900 hover:cursor-pointer">
{item.name}
</h1>

<p className="text-lg text-green-500 font-bold">
{`₹ ` + item.price + "/kg"}
</p>
<p className="text-lg text-green-500 font-bold">
{`₹ ` + item.price + "/kg"}
</p>

<div className="h-[1vh]"></div>
<Rating
initialRating={4.0}
fullSymbol="fa-solid fa-star text-amber-400 "
emptySymbol="fa-regular fa-star text-gray-300"
/>
{/* <RatingComponent /> */}
<div className="h-[1vh]"></div>
<Rating
initialRating={4.0}
fullSymbol="fa-solid fa-star text-amber-400 "
emptySymbol="fa-regular fa-star text-gray-300"
/>
{/* <RatingComponent /> */}

<div className="h-[1vh]"></div>
<div className="flex flex-row">
<div className="w-[40%] h-[40px] flex flex-row items-center justify-center border border-gray-300 rounded-md px-2">
<div
onClick={() => {
if (count > 0) {
setCount((count) => {
return count - 1;
});
}
}}
className="cursor-pointer flex-1 h-[100%] flex justify-center items-center"
>
<i className="fa-solid fa-minus"></i>
</div>
<div className="flex-1 h-[100%] flex justify-center items-center text-center bg-slate-200">
{count}
<div className="h-[1vh]"></div>
<div className="flex flex-row">
<div className="w-[40%] h-[40px] flex flex-row items-center justify-center border border-gray-300 rounded-md px-2">
<div
onClick={() => {
if (count > 0) {
setCount((count) => {
return count - 1;
});
}
}}
className="cursor-pointer flex-1 h-[100%] flex justify-center items-center"
>
<i className="fa-solid fa-minus"></i>
</div>
<div className="flex-1 h-[100%] flex justify-center items-center text-center bg-slate-200">
{count}
</div>
<div
onClick={() => {
setCount((count) => count + 1);
console.log(count);
}}
className="cursor-pointer flex-1 h-[100%] flex justify-center items-center text-center"
>
<i className="fa-solid fa-plus"></i>
</div>
</div>
<div
onClick={() => {
setCount((count) => count + 1);
console.log(count);
addToCart(item._id, count);
// appState.addItemToCart(item);
toast.success("Item added to cart");
}}
className="cursor-pointer flex-1 h-[100%] flex justify-center items-center text-center"
className="ml-4 w-[40px] h-[40px] bg-green-400 flex justify-center items-center rounded-md"
>
<i className="fa-solid fa-plus"></i>
<i className="fa-solid fa-cart-shopping text-white"></i>
</div>
</div>
<div
onClick={() => {
appState.addItemToCart(item);
toast.success("Item added to cart");
}}
className="ml-4 w-[40px] h-[40px] bg-green-400 flex justify-center items-center rounded-md"
>
<i className="fa-solid fa-cart-shopping text-white"></i>
</div>
</div>
</div>
<div className="h-[1vh]"></div>
</motion.div>
<div className="h-[1vh]"></div>
</motion.div>
)}
</>
);
}
Expand Down
25 changes: 6 additions & 19 deletions frontend/react/Agro-Millets/src/data/AppState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,35 @@ const APP_STATE_KEY = "AgroMillets-AppState";
class AppState {
userData = {};
isLoggedIn = false;
cart = [];

__init__() {
console.log("In __init__ AppState.js...");
var data = JSON.parse(localStorage.getItem(APP_STATE_KEY)) ?? {};
console.log("Local AppState Data: ", data);
this.userData = data.userData ?? {};
this.isLoggedIn = data.isLoggedIn ?? false;
this.cart = data.cart ?? [];
}

/**
* @param {Map} userData
* @param {boolean} isLoggedIn
* @param {List} cart
*/
saveUserData(userData, isLoggedIn, cart) {
saveUserData(userData, isLoggedIn) {
this.userData = userData;
this.isLoggedIn = isLoggedIn;
this.cart = cart;
localStorage.setItem(
APP_STATE_KEY,
JSON.stringify({ userData, isLoggedIn, cart })
JSON.stringify({ userData, isLoggedIn })
);
}

addItemToCart(item) {
var exists = this.cart.filter((e) => e._id == item._id);
if (exists) {
//TODO: Simply increase the count here
console.log("Item Prexists in Cart");
return;
}
this.saveUserData(this.userData, this.isLoggedIn, [...this.cart, item]);
}

logOutUser() {
this.saveUserData({}, false, []);
this.saveUserData({}, false);
}

isUserLoggedIn() {
if (!this.loggedIn || this.userData == null) return false;
// console.log("IS USER LOGGED IN : ", this.loggedIn, this.userData);
if (!this.isLoggedIn || !this.userData) return false;
return true;
}

Expand All @@ -53,7 +40,7 @@ class AppState {
}

setUserData(data) {
this.saveUserData(data, this.isLoggedIn, this.cart);
this.saveUserData(data, this.isLoggedIn);
}
}

Expand Down
42 changes: 42 additions & 0 deletions frontend/react/Agro-Millets/src/pages/Cart/application/cart.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import axios from "axios";
import { API_URL } from "../../../constants";
import { toast } from "react-toastify";
import appState from "../../../data/AppState";

// Gets user cart
export default async function getCart() {
if (!appState.isUserLoggedIn()) {
toast.error("You must be logged in to view your cart");
return null;
}

var id = appState.userData._id;
var res = await axios.get(API_URL + `/cart/get/${id}`);

console.log(res);
return res.data.data.items;
}

// Gets millet item
export async function getItem(id) {
var res = await axios.get(API_URL + "/list/getItem/" + id);
console.log(res);
return res.data.data;
}

// Adds item to cart
export async function addToCart(itemId, count) {
if (!appState.isUserLoggedIn()) {
toast.error("You must be logged in to add item to cart");
return 0;
}

var res = await axios.post(API_URL + "/cart/add", {
userId: appState.userData._id,
item: itemId,
count: count,
});

console.log(res);
return 1;
}
18 changes: 16 additions & 2 deletions frontend/react/Agro-Millets/src/pages/Cart/presentation/Cart.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,30 @@
import { useEffect, useState } from "react";
import NavBar from "../../../components/NavBar";
import ShopItem from "../../../components/ShopItem";
import appState from "../../../data/AppState";
import getCart from "../application/cart";

function CartPage() {
const [cartItems, setCartItems] = useState([]);

useEffect(() => {
window.scrollTo(0, 0);
getCart().then((e) => {
if (e) setCartItems(e);
console.log("Set List to ", e);
});

return () => {};
}, []);

return (
<>
<NavBar />
<section className="h-screen mt-[8vh] flex flex-col bg-accentColor bg-opacity-10">
<h1 className="text-5xl font-bold mt-5 pl-5 md:pl-10">Your Cart</h1>
<div className=" w-[100%] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 p-8 lg:p-10 ">
{appState.cart.map((e, i) => {
return <ShopItem key={i} item={e} />;
{cartItems.map((e, i) => {
return <ShopItem key={i} itemId={e.item} />;
})}
</div>
</section>
Expand Down
2 changes: 1 addition & 1 deletion frontend/react/Agro-Millets/src/pages/Login/application/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ export default async function login(email, password) {
} else {
toast.error(res.data.message);
}
appState.setUserData(res.data.data, true, {});
appState.saveUserData(res.data.data, true);
return res.data;
}
2 changes: 1 addition & 1 deletion frontend/react/Agro-Millets/src/pages/shop/presentation/Shop.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function Shop() {
<section className="w-[100%] mt-[8vh] bg-white min-h-screen">
<div className=" w-[100%] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 p-8 lg:p-10 ">
{list.map((e, i) => {
return <ShopItem key={i} item={e} />;
return <ShopItem key={i} itemId={e._id} />;
})}
</div>
</section>
Expand Down

0 comments on commit 726ac36

Please sign in to comment.