From 46b167a8f3a28026db867cfedad777f291de6118 Mon Sep 17 00:00:00 2001
From: "ste.vaidis" <ste.vaidis@gmail.com>
Date: Sat, 10 Dec 2022 20:08:33 +0200
Subject: [PATCH] coin list global text

---
 Front/src/App.tsx                    |  14 ++-
 Front/src/Header.tsx                 |   8 +-
 Front/src/coinApi.ts                 |   7 +-
 Front/src/coinList/coinList.tsx      | 146 +++++++++++++++------------
 Front/src/coinList/coinListPager.tsx |   2 +-
 Front/src/index.css                  |  26 +++--
 6 files changed, 117 insertions(+), 86 deletions(-)

diff --git a/Front/src/App.tsx b/Front/src/App.tsx
index 4d43361..58bdd0d 100644
--- a/Front/src/App.tsx
+++ b/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> */}
+                <Routes>
+                  <Route path="/" element={<CoinList />} />
+                  <Route path="/coin/:id" element={<CoinDetails />} />
+                </Routes>
               </Grid>
             </Box>
           </Container>
         </ThemeProvider>
       </ColorModeContext.Provider>
+      </BrowserRouter>
     </div>
   );
 }
diff --git a/Front/src/Header.tsx b/Front/src/Header.tsx
index d8bf09c..89ecbec 100644
--- a/Front/src/Header.tsx
+++ b/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 }}>
-                        CoinGecko Data
+                        <Link to={'/'}>
+                            CoinGecko Data
+                        </Link>
                     </Typography>
                     <IconButton sx={{ ml: 1 }} onClick={props.colorMode.toggleColorMode} color="inherit">
                         {props.theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
diff --git a/Front/src/coinApi.ts b/Front/src/coinApi.ts
index 0692dd0..46f8365 100644
--- a/Front/src/coinApi.ts
+++ b/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}`,
     }),
@@ -25,7 +29,8 @@ export const coinListApi = createApi({
   }),
 })
 
-export const { 
+export const {
+  useGetGlobalQuery,
   useGetCoinsListQuery,
   useGetCoinsCountQuery,
   useGetCoinInfoQuery,
diff --git a/Front/src/coinList/coinList.tsx b/Front/src/coinList/coinList.tsx
index 1ee451d..85d4b89 100644
--- a/Front/src/coinList/coinList.tsx
+++ b/Front/src/coinList/coinList.tsx
@@ -1,8 +1,6 @@
 // Route
-import {useSearchParams} from 'react-router-dom';
-
-// Redux
-import { useGetCoinsListQuery } from '../coinApi';
+import { useSearchParams } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
 // Material UI
 import Table from '@mui/material/Table';
@@ -12,59 +10,72 @@ 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';
 
 
 
 const CoinList = (): JSX.Element => {
- 
-    // From URL
-    const [searchParams, setSearchParams] = useSearchParams();
-    const page = Number(searchParams.get('page')) || 1
-    const per_page = Number(searchParams.get('per_page')) || 25
 
-    // For Query
-    const payload = {page, per_page}
-    const { data, error, isLoading, isSuccess, refetch } = useGetCoinsListQuery(payload);
-    
-    return (
-      <div>
-        { isLoading && <div>Loading...</div> }
-        { data && isSuccess &&
-          <TableContainer >
-            <Table size="small" sx={{ marginTop: 10, marginBottom: 10 }} aria-label="simple table">
-              <TableHead>
-                <TableRow>
-                  <TableCell 
-                    align="left"
-                    sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
-                  >
-                    #
-                  </TableCell>
-                  <TableCell align="left">Coin</TableCell>
-                  <TableCell align="right">Current Price</TableCell>
-                  <TableCell
-                    align="right"
-                    sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
-                  >
-                    Low (24h)
-                  </TableCell>
-                  <TableCell 
-                    align="right"
-                    sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
-                  >
-                    Hight (24)
-                  </TableCell>
-                  <TableCell 
-                    sx={{ display: { xs: 'table-cell', sm: 'none', md: 'table-cell' } }}
-                    align="right">Change (24h)
-                  </TableCell>
-                </TableRow> 
-              </TableHead>
-              <TableBody>
-                {
-                  data.map((row: any, index: any) => (
+  // From URL
+  const [searchParams, setSearchParams] = useSearchParams();
+  const page = Number(searchParams.get('page')) || 1
+  const per_page = Number(searchParams.get('per_page')) || 25
+
+  // For Query
+  const payload = { page, per_page }
+  const { data, error, isLoading, isSuccess } = useGetCoinsListQuery(payload);
+  const { data: globalData, error: globalError, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
+
+  return (
+    <div>
+      {isLoading && <div>Loading...</div>}
+
+      {
+        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
+                  align="left"
+                  sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
+                >
+                  #
+                </TableCell>
+                <TableCell align="left">Coin</TableCell>
+                <TableCell align="right">Current Price</TableCell>
+                <TableCell
+                  align="right"
+                  sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
+                >
+                  Low (24h)
+                </TableCell>
+                <TableCell
+                  align="right"
+                  sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
+                >
+                  Hight (24)
+                </TableCell>
+                <TableCell
+                  sx={{ display: { xs: 'table-cell', sm: 'none', md: 'table-cell' } }}
+                  align="right">Change (24h)
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {
+                data.map((row: any, index: any) => (
                   <TableRow
                     key={row.name}
                     sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -76,24 +87,26 @@ const CoinList = (): JSX.Element => {
                       {row.market_cap_rank}
                     </TableCell>
                     <TableCell align="left">
-                      <img src={row.image} width="20" height="20" />
-                      <span className="CoinName">{row.name}</span>
-                      <span className="CoinSymbol">{row.symbol}</span>
+                      <Link to={`coin/${row.id}`}>
+                        <img src={row.image} width="20" height="20" />
+                        <span className="coinName">{row.name}</span>
+                        <span className="coinSymbol">{row.symbol}</span>
+                      </Link>
                     </TableCell>
                     <TableCell align="right">${row.current_price}</TableCell>
                     <TableCell
                       align="right"
                       sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
                     >
-                        ${row.low_24h}
+                      ${row.low_24h}
                     </TableCell>
-                    <TableCell 
+                    <TableCell
                       align="right"
                       sx={{ display: { xs: 'none', sm: 'table-cell', md: 'table-cell' } }}
                     >
-                        ${row.high_24h}
+                      ${row.high_24h}
                     </TableCell>
-                    <TableCell 
+                    <TableCell
                       align="right"
                       sx={{ display: { xs: 'table-cell', sm: 'none', md: 'table-cell' } }}
                     >
@@ -103,14 +116,13 @@ const CoinList = (): JSX.Element => {
                     </TableCell>
                   </TableRow>
                 ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        }
+            </TableBody>
+          </Table>
+        </TableContainer>
+      }
+      <Pager page={page} per_page={per_page} setSearchParams={setSearchParams} />
+    </div>
+  )
+}
 
-        <Pager page={page} per_page={per_page} setSearchParams={setSearchParams}/>
-      </div>
-    )
-  }
-  
-  export default CoinList;
+export default CoinList;
diff --git a/Front/src/coinList/coinListPager.tsx b/Front/src/coinList/coinListPager.tsx
index d8d8fe9..842d229 100644
--- a/Front/src/coinList/coinListPager.tsx
+++ b/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>
diff --git a/Front/src/index.css b/Front/src/index.css
index dfd7409..4b932cc 100644
--- a/Front/src/index.css
+++ b/Front/src/index.css
@@ -7,9 +7,14 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+a {
+  color: #444;
+  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;
-}
\ No newline at end of file
+}
+
+.globalText {
+  font-weight: normal;
+  font-size: 0.9em;
+  font-style: italic;
+  margin-left: 5px;
+  color: #777777;
+  margin-bottom: 20px;
+}