diff --git a/.gitignore b/.gitignore index e69de29..2df9602 100644 --- a/.gitignore +++ b/.gitignore @@ -0,0 +1,4 @@ +client/node_modules/ +server/node_modules/ +client/.env +server/.env diff --git a/client/.env b/client/.env deleted file mode 100644 index a0ab63d..0000000 --- a/client/.env +++ /dev/null @@ -1,8 +0,0 @@ -# VITE_API_URL="http://127.0.0.1:8000" -VITE_API_URL="https://pic-prism-my-jngk.vercel.app" -VITE_CLOUDINARY_API_KEY="918647814468562" -VITE_CLOUDINARY_CLOUD_NAME="dde6ql8hv" -VITE_CLOUDINARY_UPLOAD_PRESET="pic_my" -VITE_RAZORPAY_KEY_ID=rzp_test_u5PamTnXYl5pFL -VITE_RAZORPAY_SECRET=5muvP3aW5CbkEUIyb9MIvzUj -VITE_RAZORPAY_KEY_ID \ No newline at end of file diff --git a/client/src/components/PhotoGalllary.jsx b/client/src/components/PhotoGalllary.jsx index b522816..eb5b9aa 100644 --- a/client/src/components/PhotoGalllary.jsx +++ b/client/src/components/PhotoGalllary.jsx @@ -1,258 +1,6 @@ -// import React, { useEffect } from "react"; -// import { IoIosHeart } from "react-icons/io"; -// import { FaShoppingCart } from "react-icons/fa"; -// import ImageCard from "./ImageCard"; -// import axios from "axios"; -// import { toast } from "react-hot-toast"; -// import { useDispatch, useSelector } from "react-redux"; -// import { setAllPosts } from "../../store/slices/postSlice"; -// import { Navigate, useNavigate } from "react-router-dom"; -// function PhotoGalllary() { -// const dispatch = useDispatch(); -// const navigate = useNavigate(); -// const posts = useSelector((state) => state.posts.allPosts); -// const isAuthenticated = useSelector((state) => state.auth.isAuthenticated); -// const abs = import.meta.env.VITE_RAZORPAY_KEY_ID; -// console.log("abs",abs); -// const getAllPosts = async () => { -// if (posts.length > 0) return; -// try { -// const response = await axios.get( -// `${import.meta.env.VITE_API_URL}/api/post/getAll` -// ); // Ensure the URL is correct - -// if (response.status !== 200) { -// throw new Error(`HTTP error! status: ${response.status}`); -// } - -// const { data } = response.data; - -// console.log(data); // Handle the data as needed -// dispatch(setAllPosts(data)); -// } catch (error) { -// console.error("Error fetching posts:", error.message || error); -// } -// }; - - - -// // const purchaseImage = async (price, id, postUrl, author, title) => { -// // if (!isAuthenticated) { -// // toast.error("please login to purchase image "); -// // navigate("/login"); -// // return; -// // } - -// // try { - -// // const res = await axios.post( -// // import.meta.env.VITE_API_URL + "/api/payment/generate", - -// // { -// // price: price, -// // }, -// // { -// // headers: { -// // Authorization: `Bearer ${localStorage.getItem("accessToken")}`, -// // }, -// // withCredentials: true, -// // } -// // ); - -// // const data = await res.data; -// // console.log("Razorpay data: ", data); -// // handlePaymentVerify(data, id, postUrl, author, title, price); // Open Razorpay after generating the order - -// // } catch (error) { -// // toast.error(error.response.data.message); -// // } -// // }; - -// // const handlePaymentVerify = async( -// // data, -// // id, -// // postUrl, -// // author, -// // title, -// // price - -// // )=>{ -// // const options ={ -// // key: import.meta.env.VITE_RAZORPAY_KEY_ID, // Correct usage - -// // amount :data.amount, -// // currency:data.currency, -// // name:"Anupma Gupta", -// // order_id:data.id, -// // theme:{ -// // color:"#5f63b8", -// // }, - -// // handler: async (response)=>{ -// // try { - -// // const res = await axios.post(import.meta.env.VITE_API_URL+"/api/payment/verify",{ -// // razorpay_order_id: response.razorpay_order_id, -// // razorpay_payment_id: response.razorpay_payment_id, -// // razorpay_signature: response.razorpay_signature, -// // postId:id, -// // postUrl, -// // author, -// // title, -// // price, - -// // }, - - - -// // { - -// // headers: { -// // Authorization: `Bearer ${localStorage.getItem("accessToken")}`, -// // }, - -// // withCredentials:true, -// // }); - -// // console.log(response); -// // const data = await res.data; -// // toast.success("Payment successful! Image purchased."); -// // } catch (error) { -// // toast.error(error.response.data.message); -// // } -// // } -// // }; - -// // const razorpayWindow = new window.Razorpay(options); -// // razorpayWindow.open(); -// // } - -// const purchaseImage = async (price, id, postUrl, author, title) => { -// if (!isAuthenticated) { -// toast.error("Please login to purchase image."); -// navigate("/login"); -// return; -// } - -// try { -// const res = await axios.post( -// `${import.meta.env.VITE_API_URL}/api/payment/generate`, -// { price }, -// { -// headers: { -// Authorization: `Bearer ${localStorage.getItem("accessToken")}`, -// }, -// withCredentials: true, -// } -// ); - -// const data = await res.data; -// console.log("Razorpay data: ", data); -// handlePaymentVerify(data, id, postUrl, author, title, price); // Open Razorpay after generating the order - -// } catch (error) { -// toast.error(error.response?.data?.message || "Error initiating payment."); -// } -// }; - -// const handlePaymentVerify = async ( -// data, -// id, -// postUrl, -// author, -// title, -// price -// ) => { -// const options = { -// key: import.meta.env.VITE_RAZORPAY_KEY_ID, -// amount: data.amount, -// currency: data.currency, -// name: "Anupma Gupta", -// order_id: data.id, -// theme: { color: "#5f63b8" }, -// handler: async (response) => { -// try { -// console.log("Razorpay Response: ", response); // Log for debugging - -// const res = await axios.post( -// `${import.meta.env.VITE_API_URL}/api/payment/verify`, -// { -// razorpay_order_id: response.razorpay_order_id, -// razorpay_payment_id: response.razorpay_payment_id, -// razorpay_signature: response.razorpay_signature, // Include the signature -// postId: id, -// postUrl, -// author, -// title, -// price, -// }, -// { -// headers: { -// Authorization: `Bearer ${localStorage.getItem("accessToken")}`, -// }, -// withCredentials: true, -// } -// ); - -// toast.success("Payment successful! Image purchased."); -// } catch (error) { -// toast.error(error.response?.data?.message || "Payment verification failed!"); -// } -// }, -// }; - -// const razorpayWindow = new window.Razorpay(options); -// razorpayWindow.open(); -// }; - - - - - -// useEffect(() => { -// getAllPosts(); -// },[]); - -// return ( -// <> -//
-//

Photos

- -//
-// {posts?.map((post) => { -// return ( -// -// purchaseImage(post.price, post._id, post.image, post.author, post.title)} - -// /> -// } -// icon2={ -// -// } -// /> -// ); -// })} -//
-//
-// -// ); -// } - -// export default PhotoGalllary; - -import React, { useEffect } from "react"; +import React, { useEffect , useState } from "react"; import { IoIosHeart } from "react-icons/io"; import { FaShoppingCart } from "react-icons/fa"; import ImageCard from "./ImageCard"; @@ -261,6 +9,7 @@ import { toast } from "react-hot-toast"; import { useDispatch, useSelector } from "react-redux"; import { setAllPosts } from "../../store/slices/postSlice"; import { useNavigate } from "react-router-dom"; +import Spinner from "./spinner"; function PhotoGalllary() { const dispatch = useDispatch(); @@ -268,7 +17,10 @@ function PhotoGalllary() { const posts = useSelector((state) => state.posts.allPosts); const isAuthenticated = useSelector((state) => state.auth.isAuthenticated); + const [loading, setLoading] = useState(false); + const getAllPosts = async () => { + setLoading(true); if (posts.length > 0) return; try { @@ -284,6 +36,8 @@ function PhotoGalllary() { } catch (error) { console.error("Error fetching posts:", error.message || error); } + + setLoading(false); }; const purchaseImage = async (price, id, postUrl, author, title) => { @@ -359,33 +113,38 @@ function PhotoGalllary() { }, []); return ( -
-

Photos

- -
- {posts?.map((post) => ( - - purchaseImage(post.price, post._id, post.image, post.author, post.title) - } - /> - } - icon2={ - - } - /> - ))} -
-
+ <> + + { + loading ? :(
+

Photos

+ +
+ {posts?.map((post) => ( + + purchaseImage(post.price, post._id, post.image, post.author, post.title) + } + /> + } + icon2={ + + } + /> + ))} +
+
) + } + ); } diff --git a/client/src/components/Spinner.jsx b/client/src/components/Spinner.jsx new file mode 100644 index 0000000..1f9e66c --- /dev/null +++ b/client/src/components/Spinner.jsx @@ -0,0 +1,19 @@ +import React from 'react' + +function spinner() { + return ( + <> + +
+ + Loading... +
+ + + ) +} + +export default spinner diff --git a/server/.env b/server/.env deleted file mode 100644 index ea809eb..0000000 --- a/server/.env +++ /dev/null @@ -1,12 +0,0 @@ -PORT=8000 -# MONGO_URI=mongodb://localhost:27017 -MONGO_URI=mongodb+srv://c2gupt:Su1lxrzId8f0snNq@cluster0.gf8as.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 -ACCESS_TOKEN_SECRET="asw345ewq23" -REFRESH_TOKEN_SECRET="fkjudhdksjdnfs" -RAZORPAY_KEY_ID=rzp_test_u5PamTnXYl5pFL -RAZORPAY_SECRET=5muvP3aW5CbkEUIyb9MIvzUj -# CLIENT_URL="http://localhost:5173" -CLIENT_URL="https://pic-prism-my.vercel.app" - - - diff --git a/server/index.js b/server/index.js index 711b724..f2c88d1 100644 --- a/server/index.js +++ b/server/index.js @@ -1,7 +1,7 @@ const express = require('express'); -const cors = require('cors'); + const { readdirSync } = require('fs'); const path = require('path'); const { connectDb } = require('./db/connection');