coin list global text

2022-12-10 20:08:33 +02:00 · 2022-12-10 20:08:33 +02:00 · 46b167a8f3
commit 46b167a8f3
parent 4f9882a389
6 changed files with 117 additions and 86 deletions
--- 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>
  );
 }
--- 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 />}
--- 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,
--- 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;
--- 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>
--- 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;
-}
+}
+
+.globalText {
+  font-weight: normal;
+  font-size: 0.9em;
+  font-style: italic;
+  margin-left: 5px;
+  color: #777777;
+  margin-bottom: 20px;
+}