Add register page

package.json

@@ -49,6 +49,7 @@
     "@material-ui/icons": "^4.11.2",
     "@types/lodash": "^4.14.168",
     "axios": "^0.21.1",
+    "formik": "^2.2.9",
     "http-proxy-middleware": "^1.0.6",
     "lodash": "^4.17.20",
     "react": "^16.14.0",

src/Routes.tsx

 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router';
 import NewsPage from './pages/NewsPage';
+import RegisterPage from './pages/RegisterPage';
 import RulesPage from './pages/RulesPage';
 
 const Routes: React.FC = () => (
@@ -14,6 +15,9 @@ const Routes: React.FC = () => (
     <Route path="/rules">
       <RulesPage />
     </Route>
+    <Route path="/register">
+      <RegisterPage />
+    </Route>
   </Switch>
 );
 

src/components/ProfileButton.tsx

-import { Button } from '@material-ui/core';
-import React, { useState } from 'react';
-import { ProfileModal } from './ProfileModal';
-
-const ProfileButton: React.FC = () => {
-  const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(true);
-
-  const handleProfileModalOpen = () => {
-    setIsProfileModalOpen(true);
-  };
-
-  return (
-    <div>
-      <Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
-        Open Profile
-      </Button>
-      <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
-    </div>
-  );
-};
-
-export default ProfileButton;

src/components/ProfileForm.tsx

+// eslint-disable-next-line object-curly-newline
+import { Avatar, Box, Button, Container, Typography } from '@material-ui/core';
+import { Field, Form, Formik } from 'formik';
+import { isNil } from 'lodash';
+import React from 'react';
+import useRegister from '../hooks/useRegister';
+import StyledTextField from './StyledTextField';
+
+type FormValues = {
+  roomNumber: number | undefined;
+  studentCardNumber: string;
+};
+
+const ProfileForm: React.FC = () => {
+  const { mutate: register } = useRegister();
+  return (
+    <Container
+      style={{
+        padding: '15px',
+        width: '500px',
+        borderRadius: '8px',
+      }}
+    >
+      <Formik
+        initialValues={{ roomNumber: undefined, studentCardNumber: '' } as FormValues}
+        onSubmit={({ roomNumber, studentCardNumber }): void => {
+          if (!isNil(roomNumber) && !isNil(studentCardNumber)) {
+            register({ roomNumber, studentCardNumber });
+          }
+        }}
+      >
+        <Form>
+          <Box
+            fontWeight="fontWeightBold"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            pl={2}
+          >
+            <Typography variant="h5" component="h5" color="textPrimary">
+              Profilom
+            </Typography>
+          </Box>
+          <Box display="flex" justifyContent="center" my={3}>
+            <Avatar
+              alt="Profile image"
+              variant="rounded"
+              style={{ width: '200px', height: '200px' }}
+            />
+          </Box>
+          <Box px={1} mt={2} mb={1}>
+            <Box my={1}>
+              <Field
+                as={StyledTextField}
+                name="roomNumber"
+                label="Diákigazolvány szám"
+                variant="outlined"
+                color="primary"
+                fullWidth
+                size="small"
+              />
+            </Box>
+            <Box my={1}>
+              <Field
+                component={StyledTextField}
+                name="studentCardNumber"
+                label="Szobaszám"
+                variant="outlined"
+                color="secondary"
+                fullWidth
+                size="small"
+              />
+            </Box>
+            <Box display="flex" justifyContent="flex-end" mt={3}>
+              <Button type="submit" variant="contained">
+                Mentés
+              </Button>
+            </Box>
+          </Box>
+        </Form>
+      </Formik>
+    </Container>
+  );
+};
+
+export default ProfileForm;

src/components/ProfileModal.tsx

-// eslint-disable-next-line object-curly-newline
-import { Avatar, Box, Button, IconButton, TextField, Typography } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
-import React, { Dispatch, SetStateAction } from 'react';
-import { CustomModal } from './CustomModal';
-
-type Dispatcher<S> = Dispatch<SetStateAction<S>>;
-
-interface IProfileModalProps {
-  isOpen: boolean;
-  setIsOpen: Dispatcher<boolean>;
-}
-
-export const ProfileModal: React.FC<IProfileModalProps> = ({ isOpen, setIsOpen }) => {
-  const onClose = (): void => {
-    setIsOpen(false);
-  };
-  return (
-    <CustomModal
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
-      customStyle={{
-        backgroundColor: '#EBEBEB',
-        padding: '15px',
-        width: '500px',
-        borderRadius: '8px',
-      }}
-    >
-      <Box
-        fontWeight="fontWeightBold"
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        pl={2}
-      >
-        <Typography variant="h5" component="h5">
-          Profilom
-        </Typography>
-        <IconButton onClick={onClose}>
-          <CloseIcon />
-        </IconButton>
-      </Box>
-      <Box display="flex" justifyContent="center" my={3}>
-        <Avatar alt="Profile image" variant="rounded" style={{ width: '200px', height: '200px' }} />
-      </Box>
-      <Box px={1} mt={2} mb={1}>
-        <Box my={1}>
-          <TextField
-            label="Diákigazolvány szám"
-            variant="outlined"
-            color="secondary"
-            fullWidth
-            size="small"
-            style={{ backgroundColor: 'white' }}
-          />
-        </Box>
-        <Box my={1}>
-          <TextField
-            label="Szobaszám"
-            variant="outlined"
-            color="secondary"
-            fullWidth
-            size="small"
-            style={{ backgroundColor: 'white' }}
-          />
-        </Box>
-        <Box display="flex" justifyContent="flex-end" mt={3}>
-          <Button variant="contained" onClick={onClose}>
-            Mentés
-          </Button>
-        </Box>
-      </Box>
-    </CustomModal>
-  );
-};
-
-export default ProfileModal;

src/components/StyledTextField.tsx

+import { TextField, withStyles } from '@material-ui/core';
+
+const StyledTextField = withStyles(({ palette: { primary: { contrastText } } }) => ({
+  root: {
+    '& label.Mui-focused': {
+      color: contrastText,
+    },
+    '& label': {
+      color: contrastText,
+    },
+    '& .MuiOutlinedInput-root': {
+      color: contrastText,
+      '& fieldset': {
+        borderColor: contrastText,
+      },
+      '&:hover fieldset': {
+        borderColor: contrastText,
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: contrastText,
+      },
+    },
+    color: contrastText,
+  },
+}))(TextField);
+
+export default StyledTextField;

src/pages/RegisterPage.tsx

+import React from 'react';
+import ProfileForm from '../components/ProfileForm';
+import Page from './Page';
+
+const NewsPage: React.FC = () => (
+  <Page>
+    <ProfileForm />
+  </Page>
+);
+
+export default NewsPage;