Add hook to query news list, use it in news container

src/App.tsx

 import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { ClientContextProvider } from './context';
 import ThemeProvider from './context/ThemeProvider';
@@ -6,17 +7,21 @@ import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
 import { darkTheme } from './theme';
 
+const queryClient = new QueryClient();
+
 function App(): React.ReactElement {
   return (
-    <ClientContextProvider>
-      <UserStateProvider>
-        <ThemeProvider theme={darkTheme}>
-          <Router>
-            <Routes />
-          </Router>
-        </ThemeProvider>
-      </UserStateProvider>
-    </ClientContextProvider>
+    <QueryClientProvider client={queryClient}>
+      <ClientContextProvider>
+        <UserStateProvider>
+          <ThemeProvider theme={darkTheme}>
+            <Router>
+              <Routes />
+            </Router>
+          </ThemeProvider>
+        </UserStateProvider>
+      </ClientContextProvider>
+    </QueryClientProvider>
   );
 }
 

src/client/client.ts

 import { AxiosRequestConfig } from 'axios';
 import { auth, AuthClient } from './auth';
+import { news, NewsClient } from './news';
 
 const DEFAULT_BASE_URL = '';
 
@@ -14,10 +15,12 @@ export function createClient(
   };
   const client = {
     auth: auth(config),
+    news: news(config),
   };
   return client;
 }
 
 export type Client = {
   auth: AuthClient;
+  news: NewsClient;
 };

src/client/news.ts

@@ -4,18 +4,19 @@ import { INews } from '../types/News';
 type NewsQuery = () => Promise<INews[]>;
 
 export type NewsClient = {
-  news: NewsQuery;
+  newsList: NewsQuery;
 };
 
-const authToken = 'q98g7o6353wl7usv1a36xv6dieso6219';
+// TODO: Remove when auth flow complete
+const authToken = process.env.AUTH_TOKEN;
 
-export function users(config: AxiosRequestConfig): NewsClient {
+export function news(config: AxiosRequestConfig): NewsClient {
   const axios = Axios.create({
     ...config,
     baseURL: `${config.baseURL}/api/v1/news`,
   });
 
-  const news: NewsQuery = async (): Promise<INews[]> => {
+  const newsList: NewsQuery = async (): Promise<INews[]> => {
     const { data: response } = await axios.get<INews[]>('/', {
       headers: { Authorization: `Bearer ${authToken}` },
     });
@@ -23,6 +24,6 @@ export function users(config: AxiosRequestConfig): NewsClient {
   };
 
   return {
-    news,
+    newsList,
   };
 }

src/components/NewsContainer.tsx

 import { Box, CircularProgress, Grid, Typography } from '@material-ui/core';
 import React from 'react';
+import useGetNews from '../hooks/getNews';
 import News from './News';
 
 interface Props {}
 
 const NewsContainer: React.FC = () => {
-  const isLoading = false;
+  const { isFetching, data } = useGetNews();
 
-  return isLoading ? (
+  return isFetching ? (
     <CircularProgress />
   ) : (
     <Box paddingY={2}>
@@ -24,21 +25,18 @@ const NewsContainer: React.FC = () => {
         </Grid>
         <Grid item xs={12} sm={6}>
           <Grid container direction="column">
-            <Grid item xs={12}>
-              <Box p={2}>
-                <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
-              </Box>
-            </Grid>
-            <Grid item xs={12}>
-              <Box p={2}>
-                <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
-              </Box>
-            </Grid>
-            <Grid item xs={12}>
-              <Box p={2}>
-                <News title="ASd" author="Anonymus" content="ASDADDD" createDate="2021.01.01" />
-              </Box>
-            </Grid>
+            {data?.map((item) => (
+              <Grid item xs={12}>
+                <Box p={2}>
+                  <News
+                    title={item.title}
+                    author={item.publishedBy}
+                    content={item.text}
+                    createDate={item.publishedAt.toString()}
+                  />
+                </Box>
+              </Grid>
+            ))}
           </Grid>
         </Grid>
         <Grid container item xs={12} sm={3} justify="flex-end">

src/hooks/getNews.ts

+import { useQuery, UseQueryResult } from 'react-query';
+import { INews } from '../types/News';
+import useClientContext from './useClientContext';
+
+const useGetNews = (): UseQueryResult<INews[], Error> => {
+  const { client } = useClientContext();
+  return useQuery<INews[], Error>('news', async () => client.news.newsList());
+};
+
+export default useGetNews;