Update dependencies

app/components/LinkContainer.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHref, useLocation, useMatch, useNavigate } from "@remix-run/react";
+
+const isModifiedEvent = (event) =>
+  !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+
+const LinkContainer = ({
+  children,
+  onClick,
+  replace = false, // eslint-disable-line no-unused-vars
+  to,
+  state,
+  activeClassName = 'active',
+  className,
+  activeStyle,
+  style,
+  isActive: getIsActive,
+  // eslint-disable-next-line comma-dangle
+  ...props
+}) => {
+  const path = typeof to === 'object' ? to.pathname || '' : to;
+  const navigate = useNavigate();
+  const href = useHref(typeof to === 'string' ? { pathname: to } : to);
+  const match = useMatch(path);
+  const location = useLocation();
+  const child = React.Children.only(children);
+
+  const isActive = !!(getIsActive
+    ? typeof getIsActive === 'function'
+      ? getIsActive(match, location)
+      : getIsActive
+    : match);
+
+  const handleClick = (event) => {
+    if (children.props.onClick) {
+      children.props.onClick(event);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    if (
+      !event.defaultPrevented && // onClick prevented default
+      event.button === 0 && // ignore right clicks
+      !isModifiedEvent(event) // ignore clicks with modifier keys
+    ) {
+      event.preventDefault();
+
+      navigate(to, {
+        replace,
+        state,
+      });
+    }
+  };
+
+  return React.cloneElement(child, {
+    ...props,
+    className: [
+      className,
+      child.props.className,
+      isActive ? activeClassName : null,
+    ]
+      .join(' ')
+      .trim(),
+    style: isActive ? { ...style, ...activeStyle } : style,
+    href,
+    onClick: handleClick,
+  });
+};
+
+LinkContainer.propTypes = {
+  children: PropTypes.element.isRequired,
+  onClick: PropTypes.func,
+  replace: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  state: PropTypes.object,
+  className: PropTypes.string,
+  activeClassName: PropTypes.string,
+  style: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ),
+  activeStyle: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  ),
+  isActive: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
+};
+
+export default LinkContainer;

app/components/cards/drink.page.tsx

@@ -1,7 +1,6 @@
 
 import { Manufacturer } from '@zenstackhq/runtime/models';
 import { Alert, Badge, Button, Col, Container, Image, Row, Table } from 'react-bootstrap';
-import { LinkContainer } from 'react-router-bootstrap';
 import { ContainerWithSection, DrinkComposite, containerTypeToString, isBeer, isDrinkWithContainersAndSection, isDrinkWithManufacturer, isDrinkWithStyle } from '~/models/types';
 import { volume } from '~/utils/conversions';
 import DrinkCard from './drink.card';
@@ -10,6 +9,7 @@ import { Link } from '@remix-run/react';
 import { Bar, Chart } from 'react-chartjs-2';
 import { ClientOnly } from 'remix-utils/client-only';
 import 'chart.js/auto';
+import LinkContainer from '../LinkContainer';
 
 interface Arguments {
     drink: DrinkComposite

app/components/filters/drink.filter.tsx

@@ -3,8 +3,7 @@ import { useSubmit } from '@remix-run/react';
 import { BeerStyle, Manufacturer, WineStyle } from '@zenstackhq/runtime/models';
 import { useRef, useState } from 'react';
 import { Form, Col, Row, Button } from 'react-bootstrap';
-import { LinkContainer } from 'react-router-bootstrap';
-import ReactSlider from 'react-slider'
+import ReactSlider from 'react-slider';
 import { ManufacturerWithDrinks } from '~/models/types';
 
 interface Arguments {

app/components/header.tsx

@@ -1,7 +1,7 @@
-import {LinkContainer} from 'react-router-bootstrap'
 import {Container, Image, Nav, Navbar, NavDropdown} from 'react-bootstrap';
 import { User } from '@zenstackhq/runtime/models';
 import { UserType } from '@prisma/client';
+import { Link } from '@remix-run/react';
 
 export type HeaderData = {user?: (User)} & {loggedin: boolean};
 
@@ -23,39 +23,25 @@ function Header(data: Arguments) {
   return (
     <Navbar collapseOnSelect expand="md" className="bg-body-tertiary mb-3">
       <Container>
-        <LinkContainer to="/">
-          <Navbar.Brand><Image src="/favicon.ico" width="25" height="25" className="d-inline-block align-middle"></Image>FRIDGE</Navbar.Brand>
-        </LinkContainer>
+          <Navbar.Brand as={Link} to="/"><Image src="/favicon.ico" width="25" height="25" className="d-inline-block align-middle"></Image>FRIDGE</Navbar.Brand>
         <Navbar.Toggle />
         <Navbar.Collapse>
           <Nav className="me-auto">
           { loggedin ? (
-            <LinkContainer to="/inventory">
-              <Nav.Link>Inventory</Nav.Link>
-            </LinkContainer>
+              <Nav.Link as={Link} to="/inventory">Inventory</Nav.Link>
             ) : "" }
-            <LinkContainer to="/inventory/stats">
-              <Nav.Link>Stats</Nav.Link>
-            </LinkContainer>
-            <LinkContainer to="/inventory/suggestions">
-              <Nav.Link>Suggestions</Nav.Link>
-            </LinkContainer>
+              <Nav.Link as={Link} to="/inventory/stats">Stats</Nav.Link>
+              <Nav.Link as={Link} to="/inventory/suggestions">Suggestions</Nav.Link>
             { showScanButtons ? (
-            <LinkContainer to="/scan">
-              <Nav.Link>Scan</Nav.Link>
-            </LinkContainer>
+              <Nav.Link as={Link} to="/scan">Scan</Nav.Link>
             ) : "" }
             { showAdminButtons ? (
-            <LinkContainer to="/admin">
-              <Nav.Link>Admin</Nav.Link>
-            </LinkContainer>
+              <Nav.Link as={Link} to="/admin">Admin</Nav.Link>
             ) : "" }
           </Nav>
           { loggedin ? (
             <Nav>
-              <LinkContainer to="/logout">
-                <Nav.Link>Logout ({username})</Nav.Link>
-              </LinkContainer>
+                <Nav.Link as={Link} to="/logout">Logout ({username})</Nav.Link>
             </Nav>
           ) : (
             <Nav>