Upgrade javascript libraries (#516)

* Bump react-bootstrap
* Bump library versions and clean up hooks
* Bump intl libraries
* Fix image pasting

ui/v2.5/src/components/MainNavbar.tsx

@@ -1,54 +1,90 @@
 import React, { useEffect, useRef, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import {
+  defineMessages,
+  FormattedMessage,
+  MessageDescriptor,
+  useIntl,
+} from "react-intl";
 import { Nav, Navbar, Button } from "react-bootstrap";
 import { IconName } from "@fortawesome/fontawesome-svg-core";
 import { LinkContainer } from "react-router-bootstrap";
-import { Link, useLocation } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import { SessionUtils } from "src/utils";
 
 import { Icon } from "src/components/Shared";
 
 interface IMenuItem {
-  messageID: string;
+  message: MessageDescriptor;
   href: string;
   icon: IconName;
 }
 
+const messages = defineMessages({
+  scenes: {
+    id: "scenes",
+    defaultMessage: "Scenes",
+  },
+  movies: {
+    id: "movies",
+    defaultMessage: "Movies",
+  },
+  markers: {
+    id: "markers",
+    defaultMessage: "Markers",
+  },
+  performers: {
+    id: "performers",
+    defaultMessage: "Performers",
+  },
+  studios: {
+    id: "studios",
+    defaultMessage: "Studios",
+  },
+  tags: {
+    id: "tags",
+    defaultMessage: "Tags",
+  },
+  galleries: {
+    id: "galleries",
+    defaultMessage: "Galleries",
+  },
+});
+
 const menuItems: IMenuItem[] = [
   {
     icon: "play-circle",
-    messageID: "scenes",
+    message: messages.scenes,
     href: "/scenes",
   },
   {
     href: "/movies",
     icon: "film",
-    messageID: "movies",
+    message: messages.movies,
   },
   {
     href: "/scenes/markers",
     icon: "map-marker-alt",
-    messageID: "markers",
+    message: messages.markers,
   },
   {
     href: "/galleries",
     icon: "image",
-    messageID: "galleries",
+    message: messages.galleries,
   },
   {
     href: "/performers",
     icon: "user",
-    messageID: "performers",
+    message: messages.performers,
   },
   {
     href: "/studios",
     icon: "video",
-    messageID: "studios",
+    message: messages.studios,
   },
   {
     href: "/tags",
     icon: "tag",
-    messageID: "tags",
+    message: messages.tags,
   },
 ];
 
@@ -58,6 +94,7 @@ export const MainNavbar: React.FC = () => {
   // react-bootstrap typing bug
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navbarRef = useRef<any>();
+  const intl = useIntl();
 
   const maybeCollapse = (event: Event) => {
     if (
@@ -92,11 +129,11 @@ export const MainNavbar: React.FC = () => {
     path === null ? (
       ""
     ) : (
-      <LinkContainer to={path}>
+      <Link to={path}>
         <Button variant="primary">
           <FormattedMessage id="new" defaultMessage="New" />
         </Button>
-      </LinkContainer>
+      </Link>
     );
 
   function maybeRenderLogout() {
@@ -140,17 +177,10 @@ export const MainNavbar: React.FC = () => {
         <Nav className="mr-md-auto">
           {menuItems.map((i) => (
             <Nav.Link eventKey={i.href} as="div" key={i.href}>
-              <LinkContainer
-                activeClassName="active"
-                exact
-                to={i.href}
-                key={i.href}
-              >
+              <LinkContainer activeClassName="active" exact to={i.href}>
                 <Button className="minimal w-100">
                   <Icon icon={i.icon} />
-                  <span>
-                    <FormattedMessage id={i.messageID} />
-                  </span>
+                  <span>{intl.formatMessage(i.message)}</span>
                 </Button>
               </LinkContainer>
             </Nav.Link>
@@ -159,11 +189,11 @@ export const MainNavbar: React.FC = () => {
       </Navbar.Collapse>
       <Nav className="order-2 flex-row">
         <div className="d-none d-sm-block">{newButton}</div>
-        <LinkContainer exact to="/settings" onClick={() => setExpanded(false)}>
+        <NavLink exact to="/settings" onClick={() => setExpanded(false)}>
           <Button className="minimal settings-button">
             <Icon icon="cog" />
           </Button>
-        </LinkContainer>
+        </NavLink>
         {maybeRenderLogout()}
       </Nav>
     </Navbar>