refacto(deps): update project dependencies

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "apple-touch-icons": "off"
+  }
+}

client/components/Add/AddWineFamily/AddWineFamilyButton.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import styled from 'styled-components';
-import AddIcon from '@material-ui/icons/Add';
+import AddIcon from '@mui/icons-material/Add';
 import { Button } from '~/client/components/Toolkit';
 import AddWineFamilyModal from './AddWineFamilyModal';
 

client/components/Add/PictureStep.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Upload } from './Upload/Upload';
 import { uploadWinePicture } from '../../api';
 import { PICTURE_UPLOAD } from '~/config';

client/components/Add/Upload/Upload.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import Dropzone, { DropEvent } from 'react-dropzone';
-import AddAPhotoIcon from '@material-ui/icons/AddAPhoto';
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import { Button } from '~/client/components/Toolkit';
 
 type Props = {

client/components/Cellar/Box/BoxContainer.tsx

@@ -14,7 +14,11 @@ type Props = {
   className?: string;
 };
 
-const BoxContainer: FC<Props> = ({ boxId, children, className }) => {
+const BoxContainer: FC<React.PropsWithChildren<Props>> = ({
+  boxId,
+  children,
+  className,
+}) => {
   const box = CELLAR_SCHEMA[boxId];
   const canvasWidth = box.schema[0] * CELL_SIZE;
   const canvasHeigh = box.schema[1] * CELL_SIZE;

client/components/Favorite/AddToFavoriteButton.tsx

@@ -2,8 +2,8 @@ import React, { FC } from 'react';
 
 import { connect, ConnectedProps } from 'react-redux';
 import styled from 'styled-components';
-import FavoriteIcon from '@material-ui/icons/Favorite';
-import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { Button } from '~/client/components/Toolkit';
 import { addToFavorite, removeFromFavorite, RootState } from '~/client/store';
 import { ThunkDispatch } from 'redux-thunk';

client/components/Layout/Header.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import Link from 'next/link';
-import HomeIcon from '@material-ui/icons/Home';
-import AddIcon from '@material-ui/icons/Add';
-import SearchIcon from '@material-ui/icons/Search';
-import FolderOpenIcon from '@material-ui/icons/FolderOpen';
+import HomeIcon from '@mui/icons-material/Home';
+import AddIcon from '@mui/icons-material/Add';
+import SearchIcon from '@mui/icons-material/Search';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import styled from 'styled-components';
 import { withRouter } from 'next/router';
 import { WithRouterProps } from 'next/dist/client/with-router';
@@ -44,7 +44,7 @@ const List = styled.ul`
   display: flex;
   list-style-type: none;
 `;
-const ListItem = styled.a<{
+const ListItem = styled(Link)<{
   router: WithRouterProps['router'];
   route: RouteType;
 }>`
@@ -87,14 +87,15 @@ const Menu: FC<Props> = ({ router }) => (
     <List>
       {routes.map((route) => {
         return (
-          <Link key={route.href} href={route.href}>
-            <ListItem route={route} router={router} href={route.href}>
-              <ListItemIcon className="material-icons">
-                {route.icon}
-              </ListItemIcon>
-              <ListItemName>{route.label}</ListItemName>
-            </ListItem>
-          </Link>
+          <ListItem
+            key={route.href}
+            href={route.href}
+            route={route}
+            router={router}
+          >
+            <ListItemIcon className="material-icons">{route.icon}</ListItemIcon>
+            <ListItemName>{route.label}</ListItemName>
+          </ListItem>
         );
       })}
     </List>

client/components/Layout/Layout.tsx

@@ -37,7 +37,10 @@ type Props = {
   title: string;
 };
 
-export const Layout: FC<Props> = ({ title, children }) => {
+export const Layout: FC<React.PropsWithChildren<Props>> = ({
+  title,
+  children,
+}) => {
   return (
     <App>
       <Header />

client/components/Modal/index.tsx

@@ -9,11 +9,9 @@ type ReactModalAdapterProps = {
   modalClassName?: string;
 };
 
-const ReactModalAdapter: FC<ReactModalAdapterProps> = ({
-  className,
-  modalClassName,
-  ...props
-}) => {
+const ReactModalAdapter: FC<React.PropsWithChildren<
+  ReactModalAdapterProps
+>> = ({ className, modalClassName, ...props }) => {
   return (
     <ReactModal
       ariaHideApp={false}
@@ -79,7 +77,11 @@ type ModalProps = {
   onRequestClose: Function;
 };
 
-export const Modal: FC<ModalProps> = ({ isOpen, onRequestClose, children }) => {
+export const Modal: FC<React.PropsWithChildren<ModalProps>> = ({
+  isOpen,
+  onRequestClose,
+  children,
+}) => {
   return (
     <>
       <GlobalStyle />

client/components/Search/EmptyResults.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import SearchIcon from '@material-ui/icons/Search';
+import SearchIcon from '@mui/icons-material/Search';
 import { getWinesFiltered, RootState } from '~/client/store/';
 import { MessageManager } from '../MessageManager/MessageManager';
 

client/components/Toolkit/Checkbox.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 
 const Input = styled.input`
   position: absolute;

client/components/Toolkit/Radio.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
-import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
 
 const Input = styled.input`
   position: absolute;
@@ -33,7 +33,7 @@ type Props = {
   className?: string;
 };
 
-export const Radio: FC<Props> = ({
+export const Radio: FC<React.PropsWithChildren<Props>> = ({
   children,
   value,
   onChange,

client/components/Wine/WineCard.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import tinycolor from 'tinycolor2';
 import styled from 'styled-components';
-import MenuIcon from '@material-ui/icons/Menu';
+import MenuIcon from '@mui/icons-material/Menu';
 import fontColorContrast from 'font-color-contrast';
 import { PICTURE_UPLOAD, wineTypes } from '~/config';
 

e2e/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
   "env": {
     "cypress/globals": true,
     "browser": true,

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -11,13 +11,29 @@ const {
   SENTRY_PROJECT,
   SENTRY_AUTH_TOKEN,
   NODE_ENV,
+  GITM_PORT,
 } = process.env;
 
 module.exports = withSourceMaps({
   env: {
     GITM_OWNER: process.env.GITM_OWNER,
     SENTRY_DSN: process.env.SENTRY_DSN,
   },
+  compiler: {
+    styledComponents: true,
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/api/:path*',
+        destination: `http://localhost:${GITM_PORT}/api/:path*`,
+      },
+      {
+        source: '/sse',
+        destination: `http://localhost:${GITM_PORT}/sse`,
+      },
+    ];
+  },
   webpack: (config, options) => {
     // In `pages/_app.js`, Sentry is imported from @sentry/node. While
     // @sentry/browser will run in a Node.js environment, @sentry/node will use