Rename Movie to Group in UI (#4963)

* Replace movies with groups in the UI
* Massage menu items
* Change view names
* Rename Movie components to Group
* Refactor movie to group variable names
* Rename movie class names to group

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

@@ -1,4 +1,10 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from "react";
 import {
   defineMessages,
   FormattedMessage,
@@ -52,9 +58,9 @@ const messages = defineMessages({
     id: "images",
     defaultMessage: "Images",
   },
-  movies: {
-    id: "movies",
-    defaultMessage: "Movies",
+  groups: {
+    id: "groups",
+    defaultMessage: "Groups",
   },
   markers: {
     id: "markers",
@@ -107,9 +113,9 @@ const allMenuItems: IMenuItem[] = [
     hotkey: "g i",
   },
   {
-    name: "movies",
-    message: messages.movies,
-    href: "/movies",
+    name: "groups",
+    message: messages.groups,
+    href: "/groups",
     icon: faFilm,
     hotkey: "g v",
     userCreatable: true,
@@ -179,20 +185,26 @@ export const MainNavbar: React.FC = () => {
   const { configuration, loading } = React.useContext(ConfigurationContext);
   const { openManual } = React.useContext(ManualStateContext);
 
-  // Show all menu items by default, unless config says otherwise
-  const [menuItems, setMenuItems] = useState<IMenuItem[]>(allMenuItems);
-
   const [expanded, setExpanded] = useState(false);
 
-  useEffect(() => {
-    const iCfg = configuration?.interface;
-    if (iCfg?.menuItems) {
-      setMenuItems(
-        allMenuItems.filter((menuItem) =>
-          iCfg.menuItems!.includes(menuItem.name)
-        )
-      );
+  // Show all menu items by default, unless config says otherwise
+  const menuItems = useMemo(() => {
+    let cfgMenuItems = configuration?.interface.menuItems;
+    if (!cfgMenuItems) {
+      return allMenuItems;
     }
+
+    // translate old movies menu item to groups
+    cfgMenuItems = cfgMenuItems.map((item) => {
+      if (item === "movies") {
+        return "groups";
+      }
+      return item;
+    });
+
+    return allMenuItems.filter((menuItem) =>
+      cfgMenuItems!.includes(menuItem.name)
+    );
   }, [configuration]);
 
   // react-bootstrap typing bug