test

package.json

@@ -13,9 +13,16 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "latest",
+    "axios": "^0.26.1",
+    "classnames": "^2.3.1",
+    "coingecko-api": "^1.0.10",
+    "node-sass": "^6.0.1",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "latest"
+    "react-query": "^3.35.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "latest",
+    "sass": "^1.50.1"
   },
   "browserslist": {
     "production": [

src/API/CoinService.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export default class CoinService {
+    static async getAll(limit = 9, page = 1 ) {
+        const response = await axios.get('https://api.coingecko.com/api/v3/coins/markets', {
+            params: {
+                vs_currency: 'USD',
+                per_page: limit,
+                page: page,
+            }
+        })
+        return response
+    }
+
+    static async getById(id) {
+        const response = await axios.get('https://api.coingecko.com/api/v3/coins/' + id)
+        return response
+    }
+}

src/App.js

@@ -1,118 +1,13 @@
-import * as React from "react";
-import AppBar from "@mui/material/AppBar";
-import Button from "@mui/material/Button";
-import BarChartIcon from "@mui/icons-material/BarChart";
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import CardMedia from "@mui/material/CardMedia";
-import CssBaseline from "@mui/material/CssBaseline";
-import Grid from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import React from "react";
+import {BrowserRouter} from "react-router-dom";
+import CoinRoutes from "./routes/CoinRoutes";
 
-const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+const App = () => {
+    return (
+        <BrowserRouter>
+            <CoinRoutes/>
+        </BrowserRouter>
+    );
+};
 
-const theme = createTheme();
-
-export default function Album() {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <AppBar position="relative">
-        <Toolbar>
-          <BarChartIcon sx={{ mr: 2 }} />
-          <Typography variant="h6" color="inherit" noWrap>
-            CoinGecko Market Pairs (USD)
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <main>
-        {/* Hero unit */}
-        <Box
-          sx={{
-            bgcolor: "background.paper",
-            pt: 8,
-            pb: 6,
-          }}
-        >
-          <Container maxWidth="sm">
-            <Typography
-              component="h1"
-              variant="h2"
-              align="center"
-              color="text.primary"
-              gutterBottom
-            >
-              Market Pairs (USD)
-            </Typography>
-            <Typography
-              variant="h5"
-              align="center"
-              color="text.secondary"
-              paragraph
-            >
-              The following is a list of crypto currencies with information
-              related to the USD trading pair.
-            </Typography>
-          </Container>
-        </Box>
-        <Container sx={{ py: 8 }} maxWidth="md">
-          {/* End hero unit */}
-          <Grid container spacing={4}>
-            {cards.map((card) => (
-              <Grid item key={card} xs={12} sm={6} md={4}>
-                <Card
-                  sx={{
-                    height: "100%",
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
-                >
-                  <CardMedia
-                    component="img"
-                    image="https://source.unsplash.com/random"
-                    alt="random"
-                  />
-                  <CardContent sx={{ flexGrow: 1 }}>
-                    <Typography gutterBottom variant="h5" component="h2">
-                      Currency Name
-                    </Typography>
-                    <Typography>
-                      <ul>
-                        <li>Current Price: xxx</li>
-                        <li>24h High: xxx</li>
-                        <li>24h Low: xxx</li>
-                      </ul>
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Button size="small">More</Button>
-                  </CardActions>
-                </Card>
-              </Grid>
-            ))}
-          </Grid>
-        </Container>
-      </main>
-      {/* Footer */}
-      <Box sx={{ bgcolor: "background.paper", p: 6 }} component="footer">
-        <Typography variant="h6" align="center" gutterBottom>
-          Footer
-        </Typography>
-        <Typography
-          variant="subtitle1"
-          align="center"
-          color="text.secondary"
-          component="p"
-        >
-          Something here to give the footer a purpose!
-        </Typography>
-      </Box>
-      {/* End footer */}
-    </ThemeProvider>
-  );
-}
+export default App;

src/components/Container/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.module.scss'
+import cn from 'classnames'
+
+const Container = ({children, className, ...props}) => {
+    return (
+        <div className={cn(styles.root, className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export default Container;

src/components/Container/styles.module.scss

@@ -0,0 +1,26 @@
+.root {
+    position: relative;
+    margin: 0 50px;
+    color: #444;
+    max-width: 1180px;
+    width: 100%;
+    overflow: hidden;
+}
+
+@media (max-width: 1024px) {
+    .root {
+        margin: 0 25px;
+    }
+}
+
+@media (max-width: 768px) {
+    .root {
+        margin: 0 14px;
+    }
+}
+
+@media (max-width: 560px) {
+    .root {
+        margin: 0 8px;
+    }
+}

src/components/Footer/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Container from "../Container";
+import styles from './styles.module.scss'
+
+const Index = () => {
+    return (
+        <footer className={styles.root}>
+            <Container>
+                <div className={styles.footerWrap}>
+                    Coded with
+                    <span className={styles.heart}></span>
+                    for Test
+                </div>
+            </Container>
+        </footer>
+    );
+};
+
+export default Index;

src/components/Footer/styles.module.scss

@@ -0,0 +1,41 @@
+.root {
+    width: 100%;
+    height: 80px;
+    background-color: #233140;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footerWrap {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+}
+
+.heart {
+    display: inline-block;
+    margin: 0 15px;
+}
+
+.heart:after {
+    content: "❤️";
+    display: inline-block;
+    font-size: 24px;
+    color: red;
+    animation: spin 2s infinite linear
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg)
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg)
+    }
+}

src/components/UI/button/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classes from './styles.module.scss'
+import cn from "classnames";
+
+const CustomButton = ({children, isCurrent, ...props}) => {
+    return (
+        <button className={cn(classes.root, {[classes.current]: isCurrent})} {...props}>
+            {children}
+        </button>
+    );
+};
+
+export default CustomButton;

src/components/UI/button/styles.module.css

@@ -0,0 +1,15 @@
+.root {
+    cursor: pointer;
+    border: 2px solid teal;
+    padding: 5px 15px;
+    margin: 1px;
+    background: transparent;
+    font-size: 14px;
+    font-weight: bolder;
+    color: teal;
+}
+
+.current {
+    background: bisque;
+    border: 3px solid brown;
+}

src/components/UI/button/styles.module.scss

@@ -0,0 +1,15 @@
+.root {
+    cursor: pointer;
+    border: 2px solid teal;
+    padding: 5px 15px;
+    margin: 1px;
+    background: transparent;
+    font-size: 14px;
+    font-weight: bolder;
+    color: teal;
+}
+
+.current {
+    background: bisque;
+    border: 3px solid brown;
+}

src/components/UI/loader/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classes from './styles.module.scss'
+
+const Loader = () => {
+    return (
+        <div className={classes.root}>
+
+        </div>
+    );
+};
+
+export default Loader;

src/components/UI/loader/styles.module.css

@@ -0,0 +1,17 @@
+.root {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px dashed olivedrab;
+    animation: rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg) scale(0.8);
+    }
+    to {
+        transform: rotate(360deg) scale(1.4);
+    }
+
+}

src/components/UI/loader/styles.module.scss

@@ -0,0 +1,17 @@
+.root {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px dashed olivedrab;
+    animation: rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg) scale(0.8);
+    }
+    to {
+        transform: rotate(360deg) scale(1.4);
+    }
+
+}

src/hooks/useFetching.js

@@ -0,0 +1,18 @@
+import {useState} from "react";
+
+export const useFetching = (callback) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const fetching = async () => {
+        try {
+            setIsLoading(true)
+            await callback()
+        } catch (e) {
+            setError(e.message)
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return [fetching, isLoading, error]
+}