Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Re design card #173

Merged
merged 6 commits into from
May 18, 2024
Merged

Re design card #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
680c4e3
add search route for display search products
May 18, 2024
6ef03dd
search the products
May 18, 2024
8627391
dependencies
May 18, 2024
fe37be0
add yarn.lock in gitignore
May 18, 2024
4317679
Merge branch 'dev' into search-products
Varsani2520 May 18, 2024
cc93723
redesign the card sucessfully
May 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ node_modules/
build
BOSS
.eslintcache
yarn.lock
137 changes: 59 additions & 78 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
import 'bootstrap/dist/css/bootstrap.min.css';
import { getDatabase, onValue, ref } from 'firebase/database';
import React, { createContext, useEffect, useState } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Loader from './assets/images/loading.gif';
import Footer from './components/footer/footer';
import Header from './components/header/header';
import About from './pages/About';
import AddProductForm from './pages/AddProd';
import DetailsPage from './pages/Details';
import Home from './pages/Home/index';
import Listing from './pages/Listing';
import NotFound from './pages/NotFound';
import SignIn from './pages/SignIn';
import SignUp from './pages/SignUp';
import ResetPassword from './pages/ResetPassword';
import Cart from './pages/cart';
import Wishlist from './pages/wishList';
import './responsive.css';
import "bootstrap/dist/css/bootstrap.min.css";
import {
getDatabase,
onValue,
ref
} from "firebase/database";
import React, { createContext, useEffect, useState } from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Loader from "./assets/images/loading.gif";
import Footer from "./components/footer/footer";
import Header from "./components/header/header";
import About from "./pages/About";
import AddProductForm from "./pages/AddProd";
import DetailsPage from "./pages/Details";
import Home from "./pages/Home/index";
import Listing from "./pages/Listing";
import NotFound from "./pages/NotFound";
import SignIn from "./pages/SignIn";
import SignUp from "./pages/SignUp";
import Cart from "./pages/cart";
import Wishlist from "./pages/wishList";
import "./responsive.css";

// import data from './data';

import { collection, doc, getDocs } from 'firebase/firestore';
import MapComponent from './components/map/ITEMmap';
import { db } from './firebase';
import SellerForm from './pages/SellerRegistration';
import GoToTop from './components/GoToTop/GoToTop';
import { Account } from './components/AccountDetails/Account';
import Compare from './pages/Compare';
import { collection, doc, getDocs } from "firebase/firestore";
import MapComponent from "./components/map/ITEMmap";
import { db } from "./firebase";
import SellerForm from "./pages/SellerRegistration";
import SearchResults from "./components/search/SearchResults";

const MyContext = createContext();

Expand All @@ -50,18 +50,16 @@ function App() {
const [data, setData] = useState([]);
const [cartCount, setCartCount] = useState(0);
const [wishlistCount, setWishlistCount] = useState(0);
const [compareCount, setCompareCount] = useState(0);

useEffect(() => {
fetchCartProducts();
fetchWishlistProducts();
fetchCompareProducts();
}, [isLogin]);

const fetchCartProducts = async () => {
try {
const cartRef = doc(db, 'carts', localStorage.getItem('uid'));
const productsCollectionRef = collection(cartRef, 'products');
const cartRef = doc(db, "carts", localStorage.getItem("uid"));
const productsCollectionRef = collection(cartRef, "products");
const querySnapshot = await getDocs(productsCollectionRef);
const products = [];
querySnapshot.forEach((doc) => {
Expand All @@ -70,39 +68,43 @@ function App() {
setCartItems(products);
setCartCount(products.length); // Set the product count
} catch (error) {
console.error('Error fetching cart products:', error);
console.error("Error fetching cart products:", error);
}
};

const fetchWishlistProducts = async () => {
console.log("fetchWishlistProducts");
try {
const wishlistRef = doc(db, 'wishlists', localStorage.getItem('uid'));
const productsCollectionRef = collection(wishlistRef, 'products');
const wishlistRef = doc(db, "wishlists", localStorage.getItem("uid"));
const productsCollectionRef = collection(wishlistRef, "products");
const querySnapshot = await getDocs(productsCollectionRef);
console.log(querySnapshot);
const products = [];
querySnapshot.forEach((doc) => {
products.push({ id: doc.id, ...doc.data() });
});
console.log(products);
setWishlistItems(products);
setWishlistCount(products.length); // Set the product count
} catch (error) {
console.error('Error fetching wishlist products:', error);
console.error("Error fetching wishlist products:", error);
}
};

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(
'https://mavrick-1.github.io/DataApi/data.json'
"https://mavrick-1.github.io/DataApi/data.json"
);
if (!response.ok) {
throw new Error('Network response was not ok');
throw new Error("Network response was not ok");
}
const data = await response.json();
// //console.log("fetced data", data)
setData(data);
} catch (error) {
console.error('Error fetching data:', error);
console.error("Error fetching data:", error);
}
};

Expand All @@ -112,50 +114,37 @@ function App() {
useEffect(() => {
getData();

const is_Login = localStorage.getItem('isLogin');
const is_Login = localStorage.getItem("isLogin");
setIsLogin(is_Login);

setTimeout(() => {
setProductData(data[1]);
setIsloading(false);
}, 3000);
}, [isLogin]);
const fetchCompareProducts = async () => {
try {
const compareRef = doc(db, 'compare', uid);
const productsCollectionRef = collection(compareRef, 'products');
const querySnapshot = await getDocs(productsCollectionRef);
let products = [];
querySnapshot.forEach((doc) => {
products.push({ id: doc.id, ...doc.data() });
});
setCompareCount(products.length);
} catch (error) {
console.error('Error fetching compare products:', error);
}
};

const getData = async (url) => {
try {
// Get a reference to the database
const db = getDatabase();

// Reference to the node or path you want to fetch data from
const dataRef = ref(db, localStorage.getItem('user'));
const dataRef = ref(db, localStorage.getItem("user"));

// Fetch data from the specified path
onValue(
dataRef,
(snapshot) => {
const data = snapshot.val();
setCartItems(data);
//console.log("Data fetched successfully:", data);
},
(error) => {
console.error('Error fetching data:', error);
console.error("Error fetching data:", error);
}
);
} catch (error) {
console.error('Error:', error);
console.error("Error:", error);
}
};

Expand All @@ -165,36 +154,38 @@ function App() {
const db = getDatabase();

// Reference to the node or path you want to fetch data from
const dataRef = ref(db, localStorage.getItem('user'));
const dataRef = ref(db, localStorage.getItem("user"));

// Fetch data from the specified path
onValue(
dataRef,
(snapshot) => {
const data = snapshot.val();
setCartItems(data);
//console.log("Data fetched successfully:", data);
},
(error) => {
console.error('Error fetching data:', error);
console.error("Error fetching data:", error);
}
);
} catch (error) {
console.error('Error:', error);
console.error("Error:", error);
}
};

const addToCart = async (item) => {
try {
const user = localStorage.getItem('user');
const user = localStorage.getItem("user");
// Initialize Firebase database with the provided database URL
const db = getDatabase();
const cartRef = ref(db, user);
// Generate a unique key using the user's email and item details
const uniqueKey = user + item.id; // Modify as per your requirement
// Add item to the cart in Firebase
setCartItems([...cartItems, { ...item, quantity: 1 }]);
//console.log('Item added to cart successfully');
} catch (error) {
console.error('Error adding item to cart:', error);
console.error("Error adding item to cart:", error);
}
};

Expand All @@ -208,12 +199,12 @@ function App() {
};

const signIn = () => {
const is_Login = localStorage.getItem('isLogin');
const is_Login = localStorage.getItem("isLogin");
setIsLogin(is_Login);
};

const signOut = () => {
localStorage.removeItem('isLogin');
localStorage.removeItem("isLogin");
setIsLogin(false);
};

Expand All @@ -240,9 +231,6 @@ function App() {
setWishlistCount,
fetchCartProducts,
fetchWishlistProducts,
fetchCompareProducts,
compareCount,
setCompareCount
};

return data && data.productData ? (
Expand Down Expand Up @@ -280,20 +268,11 @@ function App() {
/>
<Route exact={true} path="/cart" element={<Cart />} />
<Route exact={true} path="/wishlist" element={<Wishlist />} />
<Route exact={true} path="/compare" element={<Compare data={data} />} />
<Route exact={true} path="/account" element={<Account />} />

{/* sign in , signup Protection */}
{isLogin === null && (
<Route exact={true} path="signIn" element={<SignIn />} />
)}
{isLogin === null && (
<Route
exact={true}
path="resetpassword"
element={<ResetPassword />}
/>
)}
{isLogin === null && (
<Route exact={true} path="signUp" element={<SignUp />} />
)}
Expand All @@ -305,9 +284,10 @@ function App() {
/>
<Route exact={true} path="/addProduct" element={<AddProductForm />} />
<Route exact={true} path="*" element={<NotFound />} />
{/* search route */}
<Route exact={true} path="/search" element={<SearchResults />} />
</Routes>
<Footer />
<GoToTop />
</MyContext.Provider>
</HashRouter>
) : (
Expand All @@ -320,3 +300,4 @@ function App() {
export default App;

export { MyContext };

Loading