netlify site: https://66854fe6683e171352993406--cute-cheesecake-26c573.netlify.app/
Code
:import React, { useEffect, useState } from “react”;
import useWebSocket from “react-use-websocket”;
const PriceSection = () => {
const stockInfo = [
{ company: “Amazon”, symbol: “AMZN” },
{ company: “Microsoft”, symbol: “MSFT” },
{ company: “Netflix”, symbol: “NFLX” },
{ company: “Adobe”, symbol: “ADBE” },
{ company: “Meta”, symbol: “META” },
{ company: “Apple”, symbol: “AAPL” },
];
const prevStockPrice = {
AAPL: 0,
AMZN: 0,
ADBE: 0,
MSFT: 0,
META: 0,
NFLX: 0,
};
const initialStockPrice = {
AAPL: 0,
AMZN: 0,
ADBE: 0,
MSFT: 0,
META: 0,
NFLX: 0,
};
const [stocks, setStocks] = useState(initialStockPrice);
const [prevData, setPrevData] = useState(prevStockPrice);
const [loading, setLoading] = useState(true);
const fetchPrevData = async () => {
const data = await Promise.all(
stockInfo.map(async (stock) => {
const response = await fetch(
https://finnhub.io/api/v1/quote?symbol=${stock.symbol}&token=cptbio9r01qnvrr8s3f0cptbio9r01qnvrr8s3fg
);
const stockData = await response.json();
setPrevData((prevData) => ({
...prevData,
[stock.symbol]: stockData.c,
}));
})
);
setLoading(false);
console.log(prevData);
};
useEffect(() => fetchPrevData, );
const subscribeStocks = () => {
sendMessage(‘{“type”:“subscribe”,“symbol”:“AMZN”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“MSFT”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“NFLX”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“ADBE”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“META”}’);
sendMessage(‘{“type”:“subscribe”,“symbol”:“AAPL”}’);
};
const { sendMessage, lastMessage } = useWebSocket(
“wss://ws.finnhub.io?token=cptbio9r01qnvrr8s3f0cptbio9r01qnvrr8s3fg”
);
useEffect(() => subscribeStocks, [sendMessage]);
useEffect(() => updateStockPrices(lastMessage), [lastMessage]);
const updateStockPrices = (message) => {
const data = message && message.data;
const parsedData = JSON.parse(data);
const properData = parsedData?.type === “trade” && parsedData.data[0];
console.log(properData);
setStocks((prevData) => ({
...prevData,
[properData.s]: properData.p,
}));
};
const renderStock = (symbol) => {
return stocks[symbol]?.toFixed(2);
};
const renderPrevDay = (symbol) => {
return Number(prevData[symbol]).toFixed(3);
};
const profitLoss = (price, prevPrice) => {
return Number(price - prevPrice).toFixed(2);
};
const renderPercentage = (price, prevPrice) => {
const diff = price - prevPrice;
return Number(((diff * 1.0) / prevPrice) * 100).toFixed(2);
};
return (
<>
{stockInfo.map((stock) => {
return (
<CustomCard mb={“10px”} key={stock.symbol}>
<HStack justify={“space-between”}>
<Stack fontWeight={“medium”}>
<Text fontSize={“md”} color={“black.l”}>
{stock.company}
{renderStock(stock.symbol) == 0 ? (
(loading && <Spinner ml={“100px”} />) || (
<Text fontSize={“lg”}>
{" "}
{prevData[stock.symbol]} $
{console.log(prevData[stock.symbol])}
<HStack spacing={"4px"}></HStack>
</Stack>
)
) : (
<Stack
color={
renderPrevDay(stock.symbol) <
renderStock(stock.symbol)
? "green"
: "red"
}
>
<Text fontSize={"lg"}>
{" "}
{renderStock(stock.symbol)} ${" "}
</Text>
<HStack
spacing={"4px"}
display={
renderStock(stock.symbol) === 0 ? "none" : "flex"
}
>
{renderPrevDay(stock.symbol) <
renderStock(stock.symbol) ? (
<Icon as={LuMoveUp}></Icon>
) : (
<Icon as={LuMoveDown}></Icon>
)}
<Text>
{profitLoss(
renderStock(stock.symbol),
renderPrevDay(stock.symbol)
) > 0
? `+(${profitLoss(
renderStock(stock.symbol),
renderPrevDay(stock.symbol)
)})`
: `(${profitLoss(
renderStock(stock.symbol),
renderPrevDay(stock.symbol)
)})`}
</Text>
<Text>
{" "}
{renderPercentage(
renderStock(stock.symbol),
renderPrevDay(stock.symbol)
)}
%
</Text>
</HStack>
</Stack>
)}
</Stack>
</HStack>
</Stack>
<HStack>
<Button
leftIcon={<Icon as={FaPlusCircle}></Icon>}
bg={"purple.500"}
fontSize={{
base: "14px",
md: "18px",
lg: "18px",
}}
>
Buy
</Button>
<Button
leftIcon={<Icon as={FaMinusCircle}></Icon>}
fontSize={{
base: "14px",
md: "18px",
lg: "18px",
}}
>
Sell
</Button>
</HStack>
</HStack>
</CustomCard>
);
})}
</>
);
};
export default PriceSection;