From 9e96b10ba78391d5ffca023f079e1c951c0afb37 Mon Sep 17 00:00:00 2001
From: mshriver <mshriver@redhat.com>
Date: Wed, 22 Jan 2025 08:33:21 -0500
Subject: [PATCH] Update sidebar, use context

Context wasn't being used correctly in sidebar
Move behavior to useEffect to fetch views on project selection
---
 frontend/src/components/sidebar.js | 39 ++++++++++++------------------
 1 file changed, 16 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index 2b8cecb0..83d4166d 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -1,6 +1,5 @@
 
-import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { Link } from 'react-router-dom';
 import { IbutsuContext } from '../services/context';
@@ -12,32 +11,26 @@ import {  PageSidebar,
 import { HttpClient } from '../services/http';
 import { Settings } from '../settings';
 
-
-const IbutsuSidebar = (props) => {
+function IbutsuSidebar() {
     const context = useContext(IbutsuContext);
-    const [views, setViews] = useState();
-    props.eventEmitter.on('projectChange', (project) => {
-        setProjectViews(project);
-    })
-    // TODO: useEffect for view reset on project change
+    const { primaryType, primaryObject } = context;
 
+    const [views, setViews] = useState();
 
-    function setProjectViews(project) {
-        const { primaryObject } = context;
-        const targetProject = project ?? primaryObject;
-        if (!targetProject) {return;}
+    const setProjectViews = useCallback(() => {
+        if (!primaryObject) {return;}
 
         let params = {'filter': ['type=view', 'navigable=true']};
 
         // read selected project from location
-        params['filter'].push('project_id=' + targetProject.id);
+        params['filter'].push('project_id=' + primaryObject.id);
 
         HttpClient.get([Settings.serverUrl, 'widget-config'], params)
         .then(response => HttpClient.handleResponse(response))
         .then(data => {
             data.widgets.forEach(widget => {
-            if (targetProject) {
-                widget.params['project'] = targetProject.id;
+            if (primaryObject) {
+                widget.params['project'] = primaryObject.id;
             }
             else {
                 delete widget.params['project'];
@@ -45,11 +38,15 @@ const IbutsuSidebar = (props) => {
             });
             setViews(data.widgets)})
         .catch(error => console.log(error));
-    }
+    }, [primaryObject]);
+
+    useEffect(() => {
+        // When the project selection changes, fetch views to include unique sidebar items.
+        setProjectViews();
+    }, [primaryObject, setProjectViews])
+
 
-    const { primaryType, primaryObject } = context;
     if ( primaryType == 'project' && primaryObject  ) {
-        if (! views ) {setProjectViews(primaryObject);}
         return (
         <PageSidebar theme="dark" >
             <PageSidebarBody>
@@ -82,8 +79,4 @@ const IbutsuSidebar = (props) => {
     }
 };
 
-IbutsuSidebar.propTypes = {
-    eventEmitter: PropTypes.object,
-};
-
 export default IbutsuSidebar;