fixed router issue, made sellstocks page

src/App.js

@@ -5,7 +5,7 @@ import Header from "./components/header/header";
 import LandingPage from "./screens/LandingPage/LandingPage";
 import SellStocks from "./screens/SellStocks";
 import BuyStocks from "./screens/BuyStocks";
-import { addStocks } from "./redux/actions";
+import { addStocks, addUserStocks } from "./redux/actions";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
@@ -53,24 +53,38 @@ function App() {
 		return () => {
 			sse && sse.close();
 		};
-	}, [sse, user, dispatch]);
+	}, [sse, dispatch]);
+	useEffect(() => {
+		const getUserStocksData = async () => {
+			fetch(`http://localhost:8090/api/investments/${user?.investorId}`)
+				.then((res) => {
+					if (res.status === 200) return res.json();
+					throw new Error("Error in fetching data");
+				})
+				.then((res) => {
+					const actionPayload = addUserStocks(res.stocks);
+					dispatch(actionPayload);
+				})
+				.catch((err) => console.error(err));
+		};
+		user?.investorId && getUserStocksData();
+	}, [user?.investorId, dispatch]);
 
 	return (
 		<div className="App">
 			<Header name={user?.name} email={user?.email} balance={user?.balance} />
 			<Routes>
-				<Route
-					path="/"
-					element={!user ? <LandingPage /> : <Navigate to="/buystocks" />}
-				/>
-				<Route
-					path="/sellstocks"
-					element={user ? <SellStocks /> : <Navigate to="/" />}
-				/>
-				<Route
-					path="/buystocks"
-					element={user ? <BuyStocks /> : <Navigate to="/" />}
-				/>
+				{!user ? (
+					<>
+						<Route path="/*" element={<LandingPage />} />
+					</>
+				) : (
+					<>
+						<Route path="/sellstocks" element={<SellStocks />} />
+						<Route path="/buystocks" element={<BuyStocks />} />
+						<Route path="/*" element={<Navigate to="/buystocks" />} />
+					</>
+				)}
 			</Routes>
 			<Footer />
 		</div>

src/components/cards/cards.css

@@ -0,0 +1,16 @@
+.my-class {
+	-webkit-animation: name 10s ease infinite;
+	animation: name 10s ease infinite;
+}
+
+@keyframes name {
+	0% {
+		color: rgb(194, 213, 16);
+	}
+	25% {
+		color: grey;
+	}
+	100% {
+		color: grey;
+	}
+}

src/components/cards/cards.js

@@ -1,4 +1,5 @@
 import React from "react";
+import "./cards.css";
 
 const Cards = ({ data }) => {
 	return (
@@ -13,7 +14,7 @@ const Cards = ({ data }) => {
 					{data.name}{" "}
 					<span className="font-light text-lg block">({data.symbol})</span>
 				</span>
-				<span className="block text-gray-500 text-xl text-center">
+				<span className="block text-gray-700 text-xl text-center ">
 					Price: ${data.value}
 				</span>
 			</div>
@@ -32,7 +33,11 @@ const Cards = ({ data }) => {
 						d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
 					/>
 				</svg>
-				<span className="">Quantity: {data.quantity}</span>
+				{
+					<span className="text-blue-400">
+						Quantity: {data.stockQuantity || data.quantity}
+					</span>
+				}
 			</div>
 		</div>
 	);

src/redux/actions.js

@@ -6,3 +6,19 @@ export const addStocks = (body) => {
 		},
 	};
 };
+export const addUser = (body) => {
+	return {
+		type: "ADD_USER",
+		payload: {
+			user: body,
+		},
+	};
+};
+export const addUserStocks = (body) => {
+	return {
+		type: "ADD_USER_STOCKS",
+		payload: {
+			userStocks: body,
+		},
+	};
+};

src/redux/reducers/stocks.js

@@ -1,26 +1,26 @@
 const initialState = {
 	stocks: [],
-	userStocksData: { stocks: [] },
+	userStocks: [],
 };
 
 const stocksDetails = (state = initialState, action) => {
 	switch (action.type) {
-		case "GET_STOCKS": {
+		case "ADD_USER_STOCKS": {
 			return {
 				...state,
-				stocks: action.payload.stocksData,
+				userStocks: action.payload.userStocks,
 			};
 		}
-		case "GET_USER_STOCKS": {
+		case "ADD_STOCKS": {
 			return {
 				...state,
-				userStocksData: action.payload.userStocksData,
+				stocks: action.payload.stocks,
 			};
 		}
-		case "ADD_STOCKS": {
+		case "ADD_USER": {
 			return {
 				...state,
-				stocks: action.payload.stocks,
+				user: action.payload.user,
 			};
 		}
 		default: {

src/screens/BuyStocks/index.js

@@ -3,11 +3,10 @@ import Cards from "../../components/cards/cards";
 import { useSelector } from "react-redux";
 
 const BuyStocks = () => {
-	const stocksData = useSelector((state) => state).stocks;
-	console.log(stocksData);
+	const { stocks } = useSelector((state) => state);
 	return (
 		<div className="m-32 grid lg:grid-cols-3 gap-32">
-			{stocksData.map((data) => (
+			{stocks.map((data) => (
 				<Cards key={data.stockId} data={data} />
 			))}
 		</div>

src/screens/SellStocks/index.js

@@ -1,7 +1,23 @@
 import React from "react";
+import { useSelector } from "react-redux";
+import Cards from "../../components/cards/cards";
 
 const SellStocks = () => {
-	return <div className="h-screen mt-10 text-6xl">SellStocksPage</div>;
+	const { stocks, userStocks } = useSelector((state) => state);
+	const userStocksData = userStocks.map((userStock) => {
+		const stock = stocks.find((item) => item.stockId === userStock.stockId);
+		const userStockData = { ...userStock, ...stock };
+		userStockData.value = userStockData.value * userStockData.stockQuantity;
+		return userStockData;
+	});
+
+	return (
+		<div className="m-32 grid lg:grid-cols-3 gap-32">
+			{userStocksData.map((data) => (
+				<Cards key={data.stockId} data={data} />
+			))}
+		</div>
+	);
 };
 
 export default SellStocks;