dev

package.json

@@ -3,17 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.4",
     "@mui/styled-engine-sc": "^5.10.3",
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "antd": "^4.23.0",
     "axios": "^0.27.2",
+    "chart.js": "^3.9.1",
+    "html-react-parser": "^3.0.4",
+    "millify": "^5.0.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "sass": "^1.54.8",

src/App.jsx

@@ -1,28 +1,42 @@
-import React, { useEffect, useState } from "react";
-import Header from "./components/Header/Header";
-import Main from "./components/Main/Main";
-import Footer from "./components/Footer/Footer";
-import axios from "axios";
+import React from "react";
 import "./App.scss";
+import { Route, Routes } from "react-router-dom";
+import { Container } from "@mui/system";
+import Navbar from "./components/Navigation/Navbar";
+import Homepage from "./components/Homepage/Hompage";
+import Favorites from "./components/Favorites/Favorites";
+import Cryptocurrencies from "./components/Cryptocurrencies/Cryptocurrencies";
+import CryptoDetails from "./components/CryptoDetails/CryptoDetails";
+import News from "./components/News/News";
 
 function App() {
-	const [coins, setCoins] = useState([]);
-
-	useEffect(() => {
-		axios
-			.get(
-				`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false`
-			)
-			.then((res) => {
-				setCoins(res.data);
-			});
-	}, []);
-
 	return (
 		<div className="App">
-			<Header />
-			<Main coins={coins} />
-			<Footer />
+			<header>
+				<Navbar />
+			</header>
+			<main>
+				<Container>
+					<div className="rotes">
+						<Routes>
+							<Route path="/" element={<Homepage />}></Route>
+							<Route
+								path="/favorites"
+								element={<Favorites />}
+							></Route>
+							<Route
+								path="/cryptocurrencies"
+								element={<Cryptocurrencies />}
+							></Route>
+							<Route
+								path="/crypto/:coinId"
+								element={<CryptoDetails />}
+							></Route>
+							<Route path="/news" element={<News />}></Route>
+						</Routes>
+					</div>
+				</Container>
+			</main>
 		</div>
 	);
 }

src/App.scss

@@ -1,6 +0,0 @@
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	scroll-behavior: smooth;
-}

src/app/store.js

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { cryptoApi } from "../services/cryptoApi";
+import { cryptoNewsApi } from "../services/cryptoNewsApi";
+
+export default configureStore({
+	reducer: {
+		[cryptoApi.reducerPath]: cryptoApi.reducer,
+		[cryptoNewsApi.reducerPath]: cryptoNewsApi.reducer,
+	},
+});

src/components/Chart/LineChart.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import { Col, Row, Typography } from "antd";
+import {
+	Chart,
+	LineController,
+	LineElement,
+	PointElement,
+	LinearScale,
+	CategoryScale,
+} from "chart.js";
+
+const { Title } = Typography;
+
+const LineChart = ({ coinHistory, currentPrice, coinName }) => {
+	Chart.register(
+		LineController,
+		LineElement,
+		PointElement,
+		LinearScale,
+		CategoryScale
+	);
+	const coinPrice = [];
+	const coinTimestamp = [];
+
+	for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
+		coinPrice.push(coinHistory?.data?.history[i].price);
+	}
+
+	for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
+		coinTimestamp.push(
+			//Incorrect time data in API
+			// new Date(
+			// 	coinHistory?.data?.history[i].timestamp
+			// ).toLocaleDateString()
+			new Date().toLocaleDateString()
+		);
+	}
+
+	const data = {
+		labels: coinTimestamp,
+		datasets: [
+			{
+				label: "Price In USD",
+				data: coinPrice,
+				fill: false,
+				backgroundColor: "#0071bd",
+				borderColor: "#0071bd",
+			},
+		],
+	};
+
+	const options = {
+		scales: {
+			y: [
+				{
+					ticks: {
+						beginAtZero: true,
+					},
+				},
+			],
+		},
+	};
+
+	return (
+		<>
+			<Row className="chart-header">
+				<Title level={2} className="chart-title">
+					{coinName} Price Chart{" "}
+				</Title>
+				<Col className="price-container">
+					<Title level={5} className="price-change">
+						Change: {coinHistory?.data?.change}%
+					</Title>
+					<Title level={5} className="current-price">
+						Current {coinName} Price: $ {currentPrice}
+					</Title>
+				</Col>
+			</Row>
+			<Line data={data} options={options} />
+		</>
+	);
+};
+
+export default LineChart;