Fixes #181

Author: oharsta

client/src/App.jsx

@@ -45,7 +45,7 @@ const App = () => {
 
     const [loading, setLoading] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const {impersonator} = useAppStore(state => state);
+    const impersonator= useAppStore(state => state.impersonator);
     const navigate = useNavigate();
     const currentLocation = useLocation();
 

client/src/api/index.js

@@ -138,6 +138,10 @@ export function updateOrganizationName(organizationId, newName) {
     return postPutJson("/api/v1/organizations", {id: organizationId, name: newName}, "PUT");
 }
 
+export function updateOrganizationMetaData(organizationId, metaData) {
+    return postPutJson(`/api/v1/organizations/metadata/${organizationId}`, metaData, "PUT");
+}
+
 //JoinRequest
 export function newJoinRequest(joinRequest) {
     return postPutJson("/api/v1/join/", joinRequest, "POST");

client/src/application/AppTeamManagement.jsx

@@ -13,13 +13,18 @@ import {useAppStore} from "../stores/AppStore.js";
 import MenuIcon from "../icons/menu.svg";
 import TrashIcon from "@surfnet/sds/icons/functional-icons/bin.svg";
 import SelectField from "../components/SelectField.jsx";
+import {useShallow} from "zustand/react/shallow";
 
 export const AppTeamManagement = ({
                                       application,
                                       refresh
                                   }) => {
 
-    const {user: currentUser, setFlash} = useAppStore(state => state);
+    const {user: currentUser, setFlash} = useAppStore(useShallow(state => ({
+            user: state.user,
+            setFlash: state.setFlash
+        })));
+
     const navigate = useNavigate();
 
     const [confirmation, setConfirmation] = useState({});

client/src/components/BreadCrumb.jsx

@@ -5,10 +5,15 @@ import {isEmpty, stopEvent} from "../utils/Utils";
 import DOMPurify from "dompurify";
 import ArrowRight from "../icons/arrow-right.svg";
 import {useNavigate} from "react-router";
+import {useShallow} from "zustand/react/shallow";
 
 export const BreadCrumb = () => {
 
-    const {breadcrumbPaths, clearFlash} = useAppStore(state => state);
+    const {breadcrumbPaths, clearFlash} = useAppStore(useShallow(state => ({
+        breadcrumbPaths: state.breadcrumbPaths,
+        clearFlash: state.clearFlash
+    })));
+
     const navigate = useNavigate();
 
 

client/src/components/Impersonating.jsx

@@ -7,10 +7,17 @@ import "./Impersonating.scss";
 import ImpersonateIcon from "@surfnet/sds/icons/illustrative-icons/presentation-amphitheater.svg";
 import DOMPurify from "dompurify";
 import {useAppStore} from "../stores/AppStore";
+import {useShallow} from "zustand/react/shallow";
 
 export const Impersonating = () => {
 
-    const {user: currentUser, setFlash, impersonator, stopImpersonation} = useAppStore(state => state);
+    const {user: currentUser, setFlash, impersonator, stopImpersonation} = useAppStore(useShallow(state => ({
+        user: state.user,
+        setFlash: state.setFlash,
+        impersonator: state.impersonator,
+        stopImpersonation: state.stopImpersonation
+    })));
+
     const navigate = useNavigate();
 
     const endImpersonation = () => {

client/src/components/SharedMenu.jsx

@@ -10,10 +10,16 @@ import {SharedMenuFooter} from "./SharedMenuFooter.jsx";
 import {ORGANIZATION_STATUSES} from "../utils/Manage.js";
 import {allMenuGroups} from "../utils/MenuItems.js";
 import {isEmpty} from "../utils/Utils.js";
+import {useShallow} from "zustand/react/shallow";
 
 export const SharedMenu = () => {
 
-    const {menuItems, currentOrganization, activeMenuItem} = useAppStore(state => state);
+    const {menuItems, currentOrganization, activeMenuItem} = useAppStore(useShallow(state => ({
+        menuItems: state.menuItems,
+        currentOrganization: state.currentOrganization,
+        activeMenuItem: state.activeMenuItem
+    })));
+
     const navigate = useNavigate();
 
     const filteredMenuGroups = useMemo(() => {

client/src/connection/AppInformation.jsx

@@ -41,7 +41,7 @@ export const AppInformation = ({
                                    arpInfo
                                }) => {
 
-    const {setFlash} = useAppStore(state => state);
+    const setFlash = useAppStore(state => state.setFlash);
 
     const [section, setSection] = useState(sections.logo);
     const [initial, setInitial] = useState(true);

client/src/connection/ChangeRequests.jsx

@@ -21,7 +21,7 @@ export const ChangeRequests = ({
                                    refresh,
                                    arpInfo
                                }) => {
-    const {setFlash} = useAppStore(state => state);
+    const setFlash = useAppStore(state => state.setFlash);
 
     const [isJsonDiffOpen, setIsJsonDiffOpen] = useState({});
 

client/src/connection/Contract.jsx

@@ -24,7 +24,7 @@ export const Contract = ({
                              arpInfo
                          }) => {
 
-    const {setFlash} = useAppStore(state => state);
+    const setFlash = useAppStore(state => state.setFlash);
     const [loading, setLoading] = useState(false);
 
     const submit = () => {

client/src/connection/Testing.jsx

@@ -63,6 +63,7 @@ import {useNavigate} from "react-router-dom";
 import {ConnectionAlert} from "./ConnectionAlert.jsx";
 import {createAndClickLink} from "../utils/Forms.js";
 import {ChangeRequests} from "./ChangeRequests.jsx";
+import {useShallow} from "zustand/react/shallow";
 
 const sections = {
     pendingChanges: "pendingChanges",
@@ -109,7 +110,12 @@ export const Testing = ({
                             setDirty,
                             connectionId
                         }) => {
-    const {setFlash, config} = useAppStore(state => state);
+
+    const {config, setFlash} = useAppStore(useShallow(state => ({
+        config: state.config,
+        setFlash: state.setFlash
+    })));
+
     const navigate = useNavigate();
 
     const [isCopyConnectionOpen, setIsCopyConnectionOpen] = useState(false);