Refactor registration

babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
 };

package.json

@@ -1,65 +1,65 @@
-{
-  "name": "puppylog",
-  "version": "0.1.1",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/pickers": "^3.3.10",
-    "@material-ui/styles": "^4.11.4",
-    "@mui/icons-material": "^5.3.0",
-    "@mui/lab": "^5.0.0-alpha.66",
-    "@mui/material": "^5.2.8",
-    "@mui/styles": "^5.3.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "date-fns": "^2.28.0",
-    "prettier": "^2.5.1",
-    "firebase": "^9.6.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hooks": "^1.0.1",
-    "react-loader-spinner": "^5.1.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
-    "react-toastify": "^8.1.0",
-    "sass": "^1.48.0",
-    "start": "^5.1.0",
-    "web-vitals": "^2.1.3",
-    "yarn": "^1.22.17"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "babel-jest": "^27.4.6",
-    "jest": "^27.4.7",
-    "react-test-renderer": "^17.0.2"
-  }
-}
+{
+  "name": "puppylog",
+  "version": "0.1.1",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/pickers": "^3.3.10",
+    "@material-ui/styles": "^4.11.4",
+    "@mui/icons-material": "^5.3.0",
+    "@mui/lab": "^5.0.0-alpha.66",
+    "@mui/material": "^5.2.8",
+    "@mui/styles": "^5.3.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "date-fns": "^2.28.0",
+    "prettier": "^2.5.1",
+    "firebase": "^9.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hooks": "^1.0.1",
+    "react-loader-spinner": "^5.1.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
+    "react-toastify": "^8.1.0",
+    "sass": "^1.48.0",
+    "start": "^5.1.0",
+    "web-vitals": "^2.1.3",
+    "yarn": "^1.22.17"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "babel-jest": "^27.4.6",
+    "jest": "^27.4.7",
+    "react-test-renderer": "^17.0.2"
+  }
+}

src/components/Banner/Banner.jsx

@@ -1,20 +1,20 @@
-import React, { useContext } from 'react';
-
-import { Box, Container, Typography } from '@mui/material';
-import { useStyles } from './BannerStyle';
-import { AppContext } from '../../context/AppContext';
-
-export const Banner = () => {
-  const classes = useStyles();
-  const { userName } = useContext(AppContext);
-
-  return (
-    <Box className={classes.box}>
-      <Container maxWidth="xl">
-        <Typography variant="h4" color={'#FDC161'}>
-          {`Welcome ${userName} !`}
-        </Typography>
-      </Container>
-    </Box>
-  );
-};
+import React, { useContext } from 'react';
+
+import { Box, Container, Typography } from '@mui/material';
+import { useStyles } from './BannerStyle';
+import { AppContext } from '../../context/AppContext';
+
+export const Banner = () => {
+  const classes = useStyles();
+  const { userName } = useContext(AppContext);
+
+  return (
+    <Box className={classes.box}>
+      <Container maxWidth="xl">
+        <Typography variant="h4" color={'#FDC161'}>
+          {`Welcome ${userName} !`}
+        </Typography>
+      </Container>
+    </Box>
+  );
+};

src/components/Banner/BannerStyle.js

@@ -1,13 +1,13 @@
-import { makeStyles } from '@mui/styles';
-
-export const useStyles = makeStyles({
-  box: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '80px',
-    paddingLeft: '7vw',
-    marginTop: '10px',
-    backgroundColor: '#ffffff33',
-    boxShadow: '0px 0px 8px 4px rgba(0, 0, 0, 0.1);',
-  },
-});
+import { makeStyles } from '@mui/styles';
+
+export const useStyles = makeStyles({
+  box: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '80px',
+    paddingLeft: '7vw',
+    marginTop: '10px',
+    backgroundColor: '#ffffff33',
+    boxShadow: '0px 0px 8px 4px rgba(0, 0, 0, 0.1);',
+  },
+});

src/components/Button/CustomButton.jsx

@@ -1,22 +1,22 @@
-import { ThemeProvider } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-
-import { ButtonTheme } from '../../styles/themes/CustomButtonTheme';
-
-export const CustomButton = ({ text, color, size, clickAction, disabled }) => {
-  const handleClick = () => clickAction && clickAction();
-
-  return (
-    <ThemeProvider theme={ButtonTheme}>
-      {clickAction ? (
-        <Button variant="contained" color={color} size={size} onClick={handleClick} disabled={disabled}>
-          {text}
-        </Button>
-      ) : (
-        <Button type="submit" variant="contained" color={color} size={size} disabled={disabled}>
-          {text}
-        </Button>
-      )}
-    </ThemeProvider>
-  );
-};
+import { ThemeProvider } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+import { ButtonTheme } from '../../styles/themes/CustomButtonTheme';
+
+export const CustomButton = ({ text, color, size, clickAction, disabled }) => {
+  const handleClick = () => clickAction && clickAction();
+
+  return (
+    <ThemeProvider theme={ButtonTheme}>
+      {clickAction ? (
+        <Button variant="contained" color={color} size={size} onClick={handleClick} disabled={disabled}>
+          {text}
+        </Button>
+      ) : (
+        <Button type="submit" variant="contained" color={color} size={size} disabled={disabled}>
+          {text}
+        </Button>
+      )}
+    </ThemeProvider>
+  );
+};

src/components/DatePicker/DatePicker.jsx

@@ -1,49 +1,49 @@
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import CalendarPicker from '@mui/lab/CalendarPicker';
-import { ThemeProvider } from '@mui/material/styles';
-import PickersDay from '@mui/lab/PickersDay';
-import isSameDay from 'date-fns/isSameDay';
-import { styled } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-
-import { DatePickerTheme } from '../../styles/themes/DatePickerTheme';
-
-const CustomPickersDay = styled(PickersDay, { shouldForwardProp: (prop) => prop !== 'hasVisit' })(({ hasVisit }) => ({
-  ...(hasVisit && {
-    border: '1px solid #16bac6',
-  }),
-}));
-
-export const DatePicker = ({ visits, date, selected, onChange }) => {
-  const renderDay = (date, selectedDates, pickersDayProps) => {
-    if (!date) {
-      return <PickersDay {...pickersDayProps} />;
-    }
-
-    const hasVisit = visits.find((e) => isSameDay(date, e));
-
-    return <CustomPickersDay {...pickersDayProps} hasVisit={!!hasVisit} />;
-  };
-
-  return (
-    <ThemeProvider theme={DatePickerTheme}>
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <CalendarPicker
-          selected={selected}
-          visits={visits}
-          date={date}
-          minDate={new Date('January 1, 2021 00:00:00')}
-          onChange={onChange}
-          wrapperClassName="date-picker"
-          sx={{ backgroundColor: '#fdc161' }}
-          renderDay={renderDay}
-          showDaysOutsideCurrentMonth
-          renderInput={(params) => {
-            return <TextField {...params} />;
-          }}
-        />
-      </LocalizationProvider>
-    </ThemeProvider>
-  );
-};
+import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import CalendarPicker from '@mui/lab/CalendarPicker';
+import { ThemeProvider } from '@mui/material/styles';
+import PickersDay from '@mui/lab/PickersDay';
+import isSameDay from 'date-fns/isSameDay';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+
+import { DatePickerTheme } from '../../styles/themes/DatePickerTheme';
+
+const CustomPickersDay = styled(PickersDay, { shouldForwardProp: (prop) => prop !== 'hasVisit' })(({ hasVisit }) => ({
+  ...(hasVisit && {
+    border: '1px solid #16bac6',
+  }),
+}));
+
+export const DatePicker = ({ visits, date, selected, onChange }) => {
+  const renderDay = (date, selectedDates, pickersDayProps) => {
+    if (!date) {
+      return <PickersDay {...pickersDayProps} />;
+    }
+
+    const hasVisit = visits.find((e) => isSameDay(date, e));
+
+    return <CustomPickersDay {...pickersDayProps} hasVisit={!!hasVisit} />;
+  };
+
+  return (
+    <ThemeProvider theme={DatePickerTheme}>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <CalendarPicker
+          selected={selected}
+          visits={visits}
+          date={date}
+          minDate={new Date('January 1, 2021 00:00:00')}
+          onChange={onChange}
+          wrapperClassName="date-picker"
+          sx={{ backgroundColor: '#fdc161' }}
+          renderDay={renderDay}
+          showDaysOutsideCurrentMonth
+          renderInput={(params) => {
+            return <TextField {...params} />;
+          }}
+        />
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};