Merge pull request #547 from topcoder-platform/issues/timor/81

fixes issue#81

Author: callmekatootie

client/src/components/GroupsSideMenu/filters.js

@@ -22,16 +22,16 @@ export default function GroupTabFilters({
   creatingGroup,
   onCreateNewGroup,
 }) {
-  const handleGroupItemClicked = (group, item, index) => {
+  const handleGroupItemClicked = (group, item) => {
     setSelectedGroup(group);
-    setSelectedIndex(index);
+    setSelectedItemId(item.id);
     if (onGroupSelected) {
       onGroupSelected(item);
     }
   };
 
   const [selectedGroup, setSelectedGroup] = useState("");
-  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [selectedItemId, setSelectedItemId] = useState(-1);
   const [myGroupsData, setMyGroupsData] = useState(myGroups);
   const [groupsData, setGroupsData] = useState(groups);
   const [searchText, setSearchText] = useState("");
@@ -89,16 +89,16 @@ export default function GroupTabFilters({
               group.name.toLowerCase().includes(searchText.toLowerCase())
             )}
             onItemClicked={handleGroupItemClicked}
-            selectedIndex={selectedGroup === "My Groups" ? selectedIndex : -1}
+            selectedItemId={selectedGroup === "My Groups" ? selectedItemId : -1}
           />
           <GroupsSection
             title={loadingGroups ? "Other Groups (Loading...)" : "Other Groups"}
             items={groupsData.filter((group) =>
               group.name.toLowerCase().includes(searchText.toLowerCase())
             )}
             onItemClicked={handleGroupItemClicked}
-            selectedIndex={
-              selectedGroup === "Other Groups" ? selectedIndex : -1
+            selectedItemId={
+              selectedGroup === "Other Groups" ? selectedItemId : -1
             }
           />
         </div>
@@ -116,12 +116,7 @@ GroupTabFilters.propTypes = {
   onCreateNewGroup: PT.func,
 };
 
-function GroupsSection({ title, items, onItemClicked, selectedIndex }) {
-  const [selected, setSelected] = useState(selectedIndex);
-  useEffect(() => {
-    setSelected(selectedIndex);
-  }, [selectedIndex]);
-
+function GroupsSection({ title, items, onItemClicked, selectedItemId }) {
   return (
     <>
       <div className={styles.sectionTitle}>{title}</div>
@@ -132,8 +127,8 @@ function GroupsSection({ title, items, onItemClicked, selectedIndex }) {
               key={`${title}${index}`}
               title={item.name}
               badge={item.count + ""}
-              action={() => onItemClicked && onItemClicked(title, item, index)}
-              selected={index === selected}
+              action={() => onItemClicked && onItemClicked(title, item)}
+              selected={item.id === selectedItemId}
             />
           );
         })}