diff --git a/package-lock.json b/package-lock.json
index 5254bb45302fce0a77597033336b26c0f9580076..90006535679d09ccb90996b23a14fcd69e5824f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10365,9 +10365,9 @@
}
},
"match-sorter": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.1.0.tgz",
- "integrity": "sha512-sKPMf4kbF7Dm5Crx0bbfLpokK68PUJ/0STUIOPa1ZmTZEA3lCaPK3gapQR573oLmvdkTfGojzySkIwuq6Z6xRQ==",
+ "version": "6.2.0",
+ "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.2.0.tgz",
+ "integrity": "sha512-yhmUTR5q6JP/ssR1L1y083Wp+C+TdR8LhYTxWI4IRgEUr8IXJu2mE6L3SwryCgX95/5J7qZdEg0G091sOxr1FQ==",
"requires": {
"@babel/runtime": "^7.12.5",
"remove-accents": "0.4.2"
@@ -13031,9 +13031,9 @@
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
},
"react-query": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.6.0.tgz",
- "integrity": "sha512-39ptLt4qaKO1DE+ta6SpPutweEgDvUQj/KlebC+okJ9Nxbs5ExxKV8RYlLeop6vdDFyiMmwYrt1POiF8oWGh1A==",
+ "version": "3.7.1",
+ "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.7.1.tgz",
+ "integrity": "sha512-n9Ld5UUzCWqqDDPvdRN45tvTYSBjuWHex2ninxIu+tD20pwfHR8QzPnntYPkc/h/wW4Q48m68FgXVi/co/1CKg==",
"requires": {
"@babel/runtime": "^7.5.5",
"match-sorter": "^6.0.2"
diff --git a/package.json b/package.json
index f0269bcdeaccb8b89b7e645852b2e6ae473d8b70..84dd7b32fb44853e495ed6cfa5f424e7f01dceb6 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-hook-form": "^6.14.2",
- "react-query": "^3.6.0",
+ "react-query": "^3.7.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
diff --git a/src/App.tsx b/src/App.tsx
index 5279e89bd76752473dd481d4087c9d71a3644806..8739ebcd63334457ce1cdc73d64d50a97955958e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
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>
);
}
diff --git a/src/Routes.tsx b/src/Routes.tsx
index d11cc5a1c8fa2dfad2f9f9b6dafee1d2d54aae3e..91222e78ed40c53345c35309b587f634847f2bf0 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { Route, Switch } from 'react-router';
import ProfileButton from './components/ProfileButton';
+import AboutPage from './pages/AboutPage';
import NewsPage from './pages/NewsPage';
const Routes: React.FC = () => (
@@ -8,6 +9,9 @@ const Routes: React.FC = () => (
<Route path="/" exact>
<ProfileButton />
</Route>
+ <Route path="/about" exact>
+ <AboutPage />
+ </Route>
<Route path="/news">
<NewsPage />
</Route>
diff --git a/src/client/client.ts b/src/client/client.ts
index 062ff8145dd6185b309d2d707084b75fe925bc92..b86572df8592ed5e4b1112ac49f1dc903a5eab4c 100644
--- a/src/client/client.ts
+++ b/src/client/client.ts
@@ -1,5 +1,6 @@
import { AxiosRequestConfig } from 'axios';
import { auth, AuthClient } from './auth';
+import { users, UsersClient } from './users';
const DEFAULT_BASE_URL = '';
@@ -14,10 +15,12 @@ export function createClient(
};
const client = {
auth: auth(config),
+ users: users(config),
};
return client;
}
export type Client = {
auth: AuthClient;
+ users: UsersClient;
};
diff --git a/src/client/types.ts b/src/client/types.ts
index 72d1328499665113f818ffd02f3e1204d84514fd..e78d74c55de1e929808ce82b1f8dd247041c8047 100644
--- a/src/client/types.ts
+++ b/src/client/types.ts
@@ -1,4 +1,4 @@
-import { IProfile } from '../types/Profile';
+import { IProfile, IStaff } from '../types/Profile';
export type EmptyReq = undefined;
@@ -13,3 +13,5 @@ export type RegisterReq = {
export type UserResponse = {
user: IProfile;
};
+
+export type StaffResponse = IStaff[];
diff --git a/src/client/users.ts b/src/client/users.ts
new file mode 100644
index 0000000000000000000000000000000000000000..838e1672f8653c6720d1ce05fa807574144eb837
--- /dev/null
+++ b/src/client/users.ts
@@ -0,0 +1,24 @@
+import Axios, { AxiosRequestConfig } from 'axios';
+import { StaffResponse } from './types';
+
+type StaffQuery = () => Promise<StaffResponse>;
+
+export type UsersClient = {
+ staff: StaffQuery;
+};
+
+export function users(config: AxiosRequestConfig): UsersClient {
+ const axios = Axios.create({
+ ...config,
+ baseURL: `${config.baseURL}/api/v1/users`,
+ });
+
+ const staff: StaffQuery = async (): Promise<StaffResponse> => {
+ const { data: response } = await axios.get<StaffResponse>('/staff');
+ return response;
+ };
+
+ return {
+ staff,
+ };
+}
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
index 92f96f9c71ed97039bdbbc104f377b1484d84cdc..f80dfbbed3be6aed01b94634b6a319d16b76d671 100644
--- a/src/components/Gallery.tsx
+++ b/src/components/Gallery.tsx
@@ -5,16 +5,16 @@ const Gallery: React.FC = () => {
return (
<Grid container spacing={1}>
<Grid item xs={12}>
- <img width="100%" alt="Gym1" src={`${process.env.PUBLIC_URL }img1.png`} />
+ <img width="100%" alt="Gym1" src={`${process.env.PUBLIC_URL}/img1.png`} />
</Grid>
<Grid item xs={12} sm={3}>
- <img width="100%" alt="Gym2" src={`${process.env.PUBLIC_URL }img2.png`} />
+ <img width="100%" alt="Gym2" src={`${process.env.PUBLIC_URL}/img2.png`} />
</Grid>
<Grid item xs={12} sm={5}>
- <img width="100%" alt="Gym3" src={`${process.env.PUBLIC_URL }img3.png`} />
+ <img width="100%" alt="Gym3" src={`${process.env.PUBLIC_URL}/img3.png`} />
</Grid>
<Grid item xs={12} sm={4}>
- <img width="100%" alt="Gym4" src={`${process.env.PUBLIC_URL }img4.png`} />
+ <img width="100%" alt="Gym4" src={`${process.env.PUBLIC_URL}/img4.png`} />
</Grid>
</Grid>
);
diff --git a/src/hooks/useGetStaffs.ts b/src/hooks/useGetStaffs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0deb57db96f9a46807b4ec73e6acae97a013b0d
--- /dev/null
+++ b/src/hooks/useGetStaffs.ts
@@ -0,0 +1,10 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import { StaffResponse } from '../client/types';
+import useClientContext from './useClientContext';
+
+const useGetStaff = (): UseQueryResult<StaffResponse, Error> => {
+ const { client } = useClientContext();
+ return useQuery<StaffResponse, Error>('staff', async () => client.users.staff());
+};
+
+export default useGetStaff;
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0476af9b8c57cb0d093285888b12fc6b66aee278
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,55 @@
+import { Box, CircularProgress, Typography } from '@material-ui/core';
+import React from 'react';
+import AboutCard from '../components/AboutCard';
+import Gallery from '../components/Gallery';
+import MemberCard from '../components/MemberCard';
+import useGetStaff from '../hooks/useGetStaffs';
+import Page from './Page';
+
+const AboutPage: React.FC = () => {
+ const { data, status } = useGetStaff();
+
+ if (!data || status === 'loading') {
+ return <CircularProgress />;
+ }
+
+ return (
+ <Page>
+ <Box display="flex" flexDirection="column" alignItems="center" padding={3}>
+ <Box marginY={4}>
+ <Typography variant="h4" color="textPrimary">
+ A körről
+ </Typography>
+ </Box>
+ <Box marginBottom={8}>
+ <AboutCard />
+ </Box>
+ <Box marginY={4}>
+ <Typography variant="h4" color="textPrimary">
+ Aktív tagjaink
+ </Typography>
+ </Box>
+ <Box marginBottom={8} display="flex" justifyContent="center" flexWrap="wrap">
+ {data?.map((m) => (
+ <Box m={3} key={m.email}>
+ <MemberCard
+ name={m.name}
+ email={m.email}
+ acceptedPicture={m.acceptedPicture}
+ staffMemberText={m.staffMemberText}
+ />
+ </Box>
+ ))}
+ </Box>
+ <Box marginY={4}>
+ <Typography variant="h4" color="textPrimary">
+ Galéria
+ </Typography>
+ </Box>
+ <Gallery />
+ </Box>
+ </Page>
+ );
+};
+
+export default AboutPage;
diff --git a/src/types/Profile.ts b/src/types/Profile.ts
index 190d3cbc23b0019d864b036fa3e03769787e17ac..2060fb927e79c77ab2ce159ef82c95b5d8cd95f9 100644
--- a/src/types/Profile.ts
+++ b/src/types/Profile.ts
@@ -31,3 +31,10 @@ export interface IProfile {
warnings: IWarning[];
notices: INotice[];
}
+
+export interface IStaff {
+ acceptedPicture?: string;
+ email: string;
+ name: string;
+ staffMemberText: string;
+}