From 524aba87d54590741faea0cd549c5d0f8ce96e4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bodor=20M=C3=A1t=C3=A9?= <bmate711@gmail.com>
Date: Sun, 7 Feb 2021 19:57:03 +0100
Subject: [PATCH] Create about page
---
package-lock.json | 12 ++++-----
package.json | 2 +-
src/App.tsx | 23 +++++++++-------
src/Routes.tsx | 4 +++
src/client/client.ts | 3 +++
src/client/types.ts | 4 ++-
src/client/users.ts | 24 +++++++++++++++++
src/components/Gallery.tsx | 8 +++---
src/hooks/useGetStaffs.ts | 10 +++++++
src/pages/AboutPage.tsx | 55 ++++++++++++++++++++++++++++++++++++++
src/types/Profile.ts | 7 +++++
11 files changed, 131 insertions(+), 21 deletions(-)
create mode 100644 src/client/users.ts
create mode 100644 src/hooks/useGetStaffs.ts
create mode 100644 src/pages/AboutPage.tsx
diff --git a/package-lock.json b/package-lock.json
index 5254bb4..9000653 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 f0269bc..84dd7b3 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 5279e89..8739ebc 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 d11cc5a..91222e7 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 062ff81..b86572d 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 72d1328..e78d74c 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 0000000..838e167
--- /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 92f96f9..f80dfbb 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 0000000..e0deb57
--- /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 0000000..0476af9
--- /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 190d3cb..2060fb9 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;
+}
--
GitLab