fix ui

src/views/Explore/Explore.css

@@ -41,15 +41,19 @@
 
 table {
 	width: 75%;
-	border: 1px solid var(--fill-color);
+	border: medium;
+	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 15px -3px;
 	border-radius: 5px;
-	margin: 50px 0;
+	margin-top: -120px;
+	margin-bottom: 50px;
 }
 
 thead {
 	display: flex;
 	border-bottom: 1px solid var(--form-border-color);
 	background-color: var(--fill-color);
+	border-top-right-radius: 3px;
+	border-top-left-radius: 3px;
 }
 
 thead th {
@@ -82,6 +86,10 @@ tr {
 	border-bottom: 1px solid var(--form-border-color);
 }
 
+tr:last-child {
+	border-bottom: none;
+}
+
 tr td {
 	width: 130px;
 	padding: 10px;
@@ -137,3 +145,11 @@ tr .crypto {
 .pos-change {
 	color: var(--success-color);
 }
+
+.appreciating {
+	background-color: rgba(45,192,113, 0.2);
+}
+
+.depreciating {
+	background-color: rgba(255,0,0, 0.2);
+}

src/views/Explore/Explore.js

@@ -1,24 +1,55 @@
 import { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import { getCryptocurrencies, getCurrentLimit } from "../../redux/actionCreators";
+import {
+	getAssetHistory,
+	getAssets,
+	getCurrentLimit,
+} from "../../redux/actionCreators";
 import { formatCurrency, formatPercentage } from "../../utils/formatter";
 import Button from "../../components/Button/Button";
 import "./Explore.css";
 
 const Explore = (props) => {
-	const { fetchCryptocurrencies, setCurrentLimit, loading, assets, error, currentLimit } = props;
+	const {
+		fetchAssets,
+		setCurrentLimit,
+		loading,
+		assets,
+		error,
+		currentLimit,
+		fetchAssetHistory,
+		history,
+	} = props;
 
-
+	const [assetId, setAssetId] = useState(null);
 
 	useEffect(() => {
-		fetchCryptocurrencies(currentLimit);
+		fetchAssets(currentLimit);
 
 		const intervalId = setInterval(() => {
-			fetchCryptocurrencies(currentLimit)
-		}, 60000)
+			fetchAssets(currentLimit);
+			// Fetch asset history for all assets
+			assets.forEach((asset) => {
+				console.log(asset.id);
+				fetchAssetHistory(asset.id);
+			});
+		}, 60000);
 
-		return () => clearInterval(intervalId)
-	}, [fetchCryptocurrencies, currentLimit]);
+		return () => clearInterval(intervalId);
+	}, [fetchAssets, currentLimit, fetchAssetHistory]);
+
+	// useEffect(() => {
+	// 	if (assetId) {
+	// 		fetchAssetHistory(assetId);
+	// 	}
+	// }, [fetchAssetHistory, assetId]);
+
+	const oldPriceUsd = formatCurrency(
+		parseFloat(history[history.length - 1]?.priceUsd)
+	);
+
+	// console.log(history, "history2");
+	// console.log(oldPriceUsd, "history2");
 
 	return (
 		<div className="explore-container">
@@ -63,7 +94,17 @@ const Explore = (props) => {
 				</thead>
 				<tbody>
 					{assets.map((asset) => (
-						<tr key={asset.id}>
+						<tr
+							key={asset.id}
+							onClick={() => setAssetId(asset.id)}
+							// className={
+							// 	formatCurrency(parseFloat(asset.priceUsd)) > oldPriceUsd
+							// 		? "appreciating"
+							// 		: formatCurrency(parseFloat(asset.priceUsd)) < oldPriceUsd
+							// 		? "depreciating"
+							// 		: ""
+							// }
+						>
 							<td>{asset.rank}</td>
 							<div className="crypto">
 								<img
@@ -93,20 +134,28 @@ const Explore = (props) => {
 					))}
 				</tbody>
 			</table>
-
-			<Button primary rounded onClick={() => setCurrentLimit(currentLimit + 20)}>View more</Button>
+
+			<Button
+				primary
+				rounded
+				onClick={() => setCurrentLimit(currentLimit + 20)}
+			>
+				View more
+			</Button>
 		</div>
 	);
 };
 
 const mapStateToProps = (state) => ({
-	loading: state.cryptoReducer.loading,
-	assets: state.cryptoReducer.assets,
-	error: state.cryptoReducer.error,
-	currentLimit: state.cryptoReducer.currentLimit,
+	loading: state.assets.loading,
+	assets: state.assets.assets,
+	error: state.assets.error,
+	currentLimit: state.assets.currentLimit,
+	history: state.assetHistory.history,
 });
 
 export default connect(mapStateToProps, {
-	fetchCryptocurrencies: (a) => getCryptocurrencies(a),
+	fetchAssets: (a) => getAssets(a),
 	setCurrentLimit: (a) => getCurrentLimit(a),
+	fetchAssetHistory: (a) => getAssetHistory(a),
 })(Explore);