coin list global text

Front/src/App.tsx

@@ -37,6 +37,7 @@ function App() {
 
   return (
     <div className="App">
+      <BrowserRouter>
       <ColorModeContext.Provider value={colorMode}>
         <ThemeProvider theme={theme}>
           <Header colorMode={colorMode} theme={theme} />
@@ -47,19 +48,16 @@ function App() {
                 direction="column"
                 justifyContent="center"
               >
-                {/* <Grid item xs={12}> */}
-                  <BrowserRouter>
                 <Routes>
                   <Route path="/" element={<CoinList />} />
                   <Route path="/coin/:id" element={<CoinDetails />} />
                 </Routes>
-                  </BrowserRouter>
-                {/* </Grid> */}
               </Grid>
             </Box>
           </Container>
         </ThemeProvider>
       </ColorModeContext.Provider>
+      </BrowserRouter>
     </div>
   );
 }

Front/src/Header.tsx

@@ -11,7 +11,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import { useTheme } from '@mui/material/styles';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
-import { nodeModuleNameResolver } from 'typescript';
+import { Link } from "react-router-dom";
 
 const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 
@@ -19,11 +19,13 @@ const Header = (props: any): JSX.Element => {
     const theme = useTheme();
     const colorMode = React.useContext(ColorModeContext);
     return (
-        <Box sx={{ flexGrow: 1 }}>
+        <Box style={{marginBottom: 60}} sx={{ flexGrow: 1 }}>
             <AppBar position="static">
                 <Toolbar>
                     <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                        <Link to={'/'}>
                             CoinGecko Data
+                        </Link>
                     </Typography>
                     <IconButton sx={{ ml: 1 }} onClick={props.colorMode.toggleColorMode} color="inherit">
                         {props.theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}

Front/src/coinApi.ts

@@ -4,12 +4,16 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 const baseUrl = "http://127.0.0.1:8080";
 const marketsUrl = '/coins/markets';
 const countUrl = '/count';
+const globalUrl = '/global';
 const coinInfoUrl = (id:string) => `/coin/${id}`;
 const coinChartUrl = (id:string) => `/coin/${id}/chart`;
 
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
   endpoints: (builder) => ({
+    getGlobal: builder.query<any, number | void>({
+      query: () => globalUrl,
+    }),
     getCoinsList: builder.query<any, any>({
       query: (payload: {page: number, per_page: number}) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
     }),
@@ -26,6 +30,7 @@ export const coinListApi = createApi({
 })
 
 export const {
+  useGetGlobalQuery,
   useGetCoinsListQuery,
   useGetCoinsCountQuery,
   useGetCoinInfoQuery,

Front/src/coinList/coinList.tsx

@@ -1,8 +1,6 @@
 // Route
-import {useSearchParams} from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
-
+import { Link } from "react-router-dom";
-// Redux
-import { useGetCoinsListQuery } from '../coinApi';
 
 // Material UI
 import Table from '@mui/material/Table';
@@ -12,6 +10,9 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
+// Redux
+import { useGetCoinsListQuery, useGetGlobalQuery } from '../coinApi';
+
 // components
 import Pager from './coinListPager';
 
@@ -25,15 +26,25 @@ const CoinList = (): JSX.Element => {
   const per_page = Number(searchParams.get('per_page')) || 25
 
   // For Query
-    const payload = {page, per_page}
+  const payload = { page, per_page }
-    const { data, error, isLoading, isSuccess, refetch } = useGetCoinsListQuery(payload);
+  const { data, error, isLoading, isSuccess } = useGetCoinsListQuery(payload);
+  const { data: globalData, error: globalError, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
 
   return (
     <div>
-        { isLoading && <div>Loading...</div> }
+      {isLoading && <div>Loading...</div>}
-        { data && isSuccess &&
+
-          <TableContainer >
+      {
-            <Table size="small" sx={{ marginTop: 10, marginBottom: 10 }} aria-label="simple table">
+        globalData &&
+        <span className="globalText">
+          {`The global cryptocurrency market has currently ${globalData.data.active_cryptocurrencies} active cryptocurrencies, and ${globalData.data.markets} markets`}
+          <br />
+        </span>
+      }
+
+      {data && isSuccess &&
+        <TableContainer style={{ marginTop: 20 }}>
+          <Table size="small" aria-label="simple table">
             <TableHead>
               <TableRow>
                 <TableCell
@@ -76,9 +87,11 @@ const CoinList = (): JSX.Element => {
                       {row.market_cap_rank}
                     </TableCell>
                     <TableCell align="left">
+                      <Link to={`coin/${row.id}`}>
                         <img src={row.image} width="20" height="20" />
-                      <span className="CoinName">{row.name}</span>
+                        <span className="coinName">{row.name}</span>
-                      <span className="CoinSymbol">{row.symbol}</span>
+                        <span className="coinSymbol">{row.symbol}</span>
+                      </Link>
                     </TableCell>
                     <TableCell align="right">${row.current_price}</TableCell>
                     <TableCell
@@ -107,10 +120,9 @@ const CoinList = (): JSX.Element => {
           </Table>
         </TableContainer>
       }
-
+      <Pager page={page} per_page={per_page} setSearchParams={setSearchParams} />
-        <Pager page={page} per_page={per_page} setSearchParams={setSearchParams}/>
     </div>
   )
-  }
+}
 
-  export default CoinList;
+export default CoinList;

Front/src/coinList/coinListPager.tsx

@@ -23,7 +23,7 @@ const Pager = (props:any): JSX.Element => {
     }
 
     return (
-        <Grid container justifyContent="center">
+        <Grid container justifyContent="center" style={{marginTop: 60}}>
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
                 <Button disabled={page === 1} onClick={() => navigate("/")}>First</Button>
                 <Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button>

Front/src/index.css

@@ -7,9 +7,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
+a {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  color: #444;
-    monospace;
+  text-decoration: none;
+}
+
+header a {
+  color: #fff;
+  text-decoration: none;
 }
 
 .green {
@@ -20,15 +25,24 @@ code {
   color: #e15241
 }
 
-.CoinName {
+.coinName {
   font-weight: bold;
   margin-left: 10px;
 }
 
-.CoinSymbol {
+.coinSymbol {
   font-weight: normal;
   font-size: 0.8em;
   margin-left: 5px;
   color: #777777;
   text-transform: uppercase;
 }
+
+.globalText {
+  font-weight: normal;
+  font-size: 0.9em;
+  font-style: italic;
+  margin-left: 5px;
+  color: #777777;
+  margin-bottom: 20px;
+}