Skip to content
This repository has been archived by the owner on May 15, 2024. It is now read-only.

Commit

Permalink
feat(page): render TopClientsBlockedTable table in home page
Browse files Browse the repository at this point in the history
  ## what
  - Fetch `TopBlockedClientsQueries` data from API
  - Render `TopBlockedClientsQueries` table

  ## how
  - RTK Query to fetch `TopBlockedClientsQueries` from API
  - Render `TopBlockedClientsQueries` table
    - pass `data` to component
    - pass `isLoading` to component
  - Use `Grid` to display table
    - 50% width on meduim screen and larger
    - 100% width on small screens and smaller

  ## why

  ## where
  - ./src/pages/index.tsx

  ## usage
  • Loading branch information
Clumsy-Coder committed Nov 7, 2022
1 parent ff3f0d0 commit a2a2a91
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import Summary from '@components/Summary';
import TopPermittedQueriesTable from '@components/Tables/TopPermittedQueries';
import TopBlockedQueriesTable from '@components/Tables/TopBlockedQueries';
import TopAllowedClientsTable from '@components/Tables/Clients/TopAllowedClients';
import TopBlockedClientsTable from '@components/Tables/Clients/TopBlockedClients';
import { useGetForwardedDestinationsQuery } from '@redux/ForwardedDestinations';
import { useGetQueryTypesQuery } from '@redux/QueryTypes';
import { useGetSummaryQuery } from '@redux/Summary';
import {
useGetTopPermittedQueriesQuery,
useGetTopBlockedQueriesQuery,
} from '@redux/Queries/TopQueries';
import { useGetTopAllowedClientsQuery } from '@redux/Queries/Clients';
import { useGetTopAllowedClientsQuery, useGetTopBlockedClientsQuery } from '@redux/Queries/Clients';

const Home: NextPage = () => {
const summaryQuery = useGetSummaryQuery(undefined, {
Expand All @@ -40,6 +41,10 @@ const Home: NextPage = () => {
process.env.NEXT_PUBLIC_NUM_ENTRIES_TOP_CLIENTS_ALLOWED_QUERIES,
{ pollingInterval: process.env.NEXT_PUBLIC_POLLING_TOP_CLIENTS_ALLOWED_QUERIES },
);
const topBlockedClientQueries = useGetTopBlockedClientsQuery(
process.env.NEXT_PUBLIC_POLLING_TOP_CLIENTS_BLOCKED_QUERIES,
{ pollingInterval: process.env.NEXT_PUBLIC_NUM_ENTRIES_TOP_CLIENTS_BLOCKED_QUERIES },
);

return (
<Box sx={{ flexGrow: 1 }}>
Expand Down Expand Up @@ -80,6 +85,12 @@ const Home: NextPage = () => {
isLoading={topAllowedClientQueries.isLoading}
/>
</Grid>
<Grid xs={12} md={6}>
<TopBlockedClientsTable
data={topBlockedClientQueries.data}
isLoading={topBlockedClientQueries.isLoading}
/>
</Grid>
</Grid>
</Box>
);
Expand Down

0 comments on commit a2a2a91

Please sign in to comment.