Skip to content

Commit 311898c

Browse files
replyrereplyre
committed
second commit
1 parent 41e4855 commit 311898c

8 files changed

+405
-53
lines changed

‎package-lock.json

+16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
"@testing-library/react": "^13.4.0",
1212
"@testing-library/user-event": "^13.5.0",
1313
"axios": "^1.5.0",
14+
"chart.js": "^3.9.1",
1415
"react": "^18.2.0",
1516
"react-alice-carousel": "^2.7.1",
17+
"react-chartjs-2": "^4.3.1",
1618
"react-dom": "^18.2.0",
1719
"react-router-dom": "^6.15.0",
1820
"react-scripts": "5.0.1",

‎src/components/CoinInformation.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.containerChart {
2+
width: 100vw;
3+
display: "flex";
4+
flex-direction: column;
5+
height: 80vh;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 10px;
9+
10+
border-left: 2px solid darkgrey;
11+
}
12+
13+
.chart {
14+
height: 80vh;
15+
width: "100%";
16+
/* background-color: aqua; */
17+
}
18+
19+
@media (max-width: 500px) {
20+
.containerChart {
21+
width: "100vw";
22+
margin-top: 0px;
23+
padding: 20px;
24+
padding-top: 0;
25+
}
26+
}

‎src/components/CoinInformation.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React, { useEffect, useState } from "react";
2+
import { CryptoState } from "../pages/CrptoCoins";
3+
import axios from "axios";
4+
import { HistoricalChart } from "../config/api";
5+
import { ThemeProvider } from "react-bootstrap";
6+
import { CircularProgress, createTheme } from "@mui/material";
7+
import "./CoinInformation.css";
8+
import {
9+
Chart as ChartJS,
10+
CategoryScale,
11+
LinearScale,
12+
PointElement,
13+
LineElement,
14+
Title,
15+
Tooltip,
16+
Legend,
17+
} from "chart.js";
18+
import { Line } from "react-chartjs-2";
19+
20+
ChartJS.register(
21+
CategoryScale,
22+
LinearScale,
23+
PointElement,
24+
LineElement,
25+
Title,
26+
Tooltip,
27+
Legend
28+
);
29+
30+
export const options = {
31+
// responsive: true,
32+
plugins: {
33+
legend: {
34+
position: "top",
35+
},
36+
title: {
37+
display: true,
38+
text: "Chart.js Line Chart",
39+
},
40+
},
41+
};
42+
const CoinInformation = ({ coin }) => {
43+
const darkTheme = createTheme({
44+
palette: {
45+
mode: "dark",
46+
primary: {
47+
main: "#FFA500",
48+
},
49+
},
50+
});
51+
const [historicalData, setHistoricalData] = useState();
52+
const [days, setDays] = useState(1);
53+
const { currency } = CryptoState();
54+
const fetchHistoricalData = async () => {
55+
const { data } = await axios.get(HistoricalChart(coin?.id, days, currency));
56+
setHistoricalData(data?.prices);
57+
};
58+
59+
console.log(historicalData);
60+
useEffect(() => {
61+
fetchHistoricalData();
62+
}, [currency, days]);
63+
64+
return (
65+
<div className="containerChart">
66+
{!historicalData ? (
67+
<CircularProgress sx={{ color: "orange" }} size={250} thickness={1} />
68+
) : (
69+
<>
70+
<Line
71+
options={{
72+
elements: {
73+
point: {
74+
radius: 0,
75+
},
76+
},
77+
}}
78+
className="chart"
79+
data={{
80+
labels: historicalData?.map((coin) => {
81+
let date = new Date(coin[0]);
82+
let time =
83+
date.getHours() > 12
84+
? `${date.getHours() - 12}:${date.getMinutes()} PM`
85+
: `${date.getHours()}:${date.getMinutes()} AM`;
86+
return days === 1 ? time : String(date.toLocalDateString());
87+
}),
88+
datasets: [
89+
{
90+
borderColor: "#eeBC1D",
91+
label: `Price (Past ${days} Days) in ${currency}`,
92+
data: historicalData?.map((coi) => coi[1].toFixed()),
93+
},
94+
],
95+
}}
96+
/>
97+
</>
98+
)}
99+
</div>
100+
);
101+
};
102+
export default CoinInformation;

‎src/components/Header.js

+5
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ const styles = {
2727
marginRight: 5,
2828
border: "2px solid orange",
2929
color: "orange",
30+
31+
"&:hover": {
32+
border: "2px solid orange",
33+
outline: "none",
34+
},
3035
},
3136
};
3237
const darkTheme = createTheme({

‎src/pages/CoinPage.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.container {
2+
display: flex;
3+
}
4+
5+
.sidebar {
6+
width: 30%;
7+
8+
margin-top: 25px;
9+
}
10+
11+
.marketData {
12+
}
13+
14+
@media (max-width: 800px) {
15+
.sidebar {
16+
width: 50%;
17+
flex-direction: "column";
18+
}
19+
}
20+
@media (max-width: 500px) {
21+
.container {
22+
flex-direction: column;
23+
align-items: center;
24+
}
25+
.sidebar {
26+
padding: 10px;
27+
width: 100%;
28+
flex-direction: "column";
29+
}
30+
}

‎src/pages/Coinpage.js

+139-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,144 @@
1-
import React from "react";
1+
import React, { useEffect, useState } from "react";
2+
import { useParams } from "react-router-dom";
3+
import { CryptoState } from "./CrptoCoins";
4+
import { SingleCoin } from "../config/api";
5+
import axios from "axios";
6+
import CoinInformation from "../components/CoinInformation";
7+
8+
import "./CoinPage.css";
9+
import { Typography } from "@mui/material";
10+
import { numberWithCommas } from "./Banner/Carousel";
11+
12+
const styles = {
13+
image: {
14+
width: "100%",
15+
display: "flex",
16+
alignItems: "center",
17+
justifyContent: "center",
18+
marginBottom: 20,
19+
margin: "auto",
20+
},
21+
heading: {
22+
display: "flex",
23+
marginBottom: "20px",
24+
justifyContent: "center",
25+
fontFamily: "Montserrat",
26+
fontWeight: "bold",
27+
},
28+
};
229

330
const Coinpage = () => {
4-
return <div>Coinpage</div>;
31+
const { id } = useParams();
32+
const [coin, setCoin] = useState();
33+
const { currency, symbol } = CryptoState();
34+
let obj;
35+
36+
const fetchCoin = async () => {
37+
const { data } = await axios.get(SingleCoin(id));
38+
setCoin(data);
39+
};
40+
{
41+
obj = { __html: coin?.description.en.split(". ")[0] };
42+
}
43+
console.log(coin);
44+
useEffect(() => {
45+
fetchCoin();
46+
}, []);
47+
return (
48+
<div className="container">
49+
<div className="sidebar">
50+
<div className="image" style={styles.image}>
51+
<img src={coin?.image.large} alt={coin?.name} height="200" />
52+
</div>
53+
<Typography variant="h3" sx={styles.heading}>
54+
{coin?.name}
55+
</Typography>
56+
<Typography
57+
sx={{
58+
width: "100%",
59+
fontFamily: "monospace",
60+
padding: 0.5,
61+
paddingBottom: 5,
62+
paddingTop: 0,
63+
textAlign: "justify",
64+
}}
65+
>
66+
<div dangerouslySetInnerHTML={obj}></div>
67+
</Typography>
68+
<div className="marketData">
69+
<span
70+
style={{
71+
display: "flex",
72+
justifyContent: "center",
73+
}}
74+
>
75+
<Typography variant="h5" sx={styles.heading}>
76+
Rank
77+
</Typography>{" "}
78+
&nbsp;&nbsp;
79+
<Typography
80+
variant="h5"
81+
style={{
82+
fontFamily: "Montserrat",
83+
}}
84+
>
85+
{coin?.market_cap_rank}
86+
</Typography>
87+
</span>
88+
<span
89+
style={{
90+
display: "flex",
91+
justifyContent: "center",
92+
}}
93+
>
94+
<Typography variant="h6" sx={styles.heading}>
95+
Current Price
96+
</Typography>{" "}
97+
&nbsp;&nbsp;
98+
<Typography
99+
variant="h6"
100+
style={{
101+
fontFamily: "Montserrat",
102+
}}
103+
>
104+
{" "}
105+
{symbol}{" "}
106+
{coin &&
107+
numberWithCommas(
108+
coin?.market_data.current_price[currency.toLowerCase()]
109+
)}
110+
</Typography>
111+
</span>
112+
<span
113+
style={{
114+
display: "flex",
115+
justifyContent: "center",
116+
}}
117+
>
118+
<Typography variant="h6" sx={styles.heading}>
119+
Market Cap
120+
</Typography>{" "}
121+
&nbsp;&nbsp;
122+
<Typography
123+
variant="h6"
124+
style={{
125+
fontFamily: "Montserrat",
126+
}}
127+
>
128+
{symbol}{" "}
129+
{coin &&
130+
numberWithCommas(
131+
coin?.market_data.market_cap[currency.toLowerCase()]
132+
.toString()
133+
.slice(0, -6)
134+
) + " M"}
135+
</Typography>
136+
</span>
137+
</div>
138+
</div>
139+
<CoinInformation coin={coin} />
140+
</div>
141+
);
5142
};
6143

7144
export default Coinpage;

0 commit comments

Comments
 (0)