[Fix] Optimised Top Bar component to take functional component (#803)

* optimize component to take functional component * removed redundant react fragment --------- Co-authored-by: Jaseem Jas <[email protected]>
Zipstack · Oct 22, 2024 · 1d65ac1 · 1d65ac1
1 parent 1085364
commit 1d65ac1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 25 deletions.
diff --git a/frontend/src/components/settings/users/Users.jsx b/frontend/src/components/settings/users/Users.jsx
@@ -179,42 +179,36 @@ function Users() {
       // If an error occurs while setting custom posthog event, ignore it and continue
     }
   };
-
-  const inviteUserButtons = () => {
-    return (
-      <>
-        <CustomButton
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={handleInviteUsers}
-        >
-          Invite User
-        </CustomButton>
-        <Button
-          shape="circle"
-          icon={<ReloadOutlined />}
-          onClick={getAllUsers}
-          className="user-reload-button"
-        />
-      </>
-    );
-  };
   useEffect(() => {
     getAllUsers();
   }, []);
 
   useEffect(() => {
     setFilteredUserList(userList);
   }, [userList]);
+
   return (
     <>
       <TopBar
-        CustomButtons={inviteUserButtons}
         enableSearch={true}
         title="Manage Users"
         searchData={userList}
         setFilteredUserList={setFilteredUserList}
-      />
+      >
+        <CustomButton
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={handleInviteUsers}
+        >
+          Invite User
+        </CustomButton>
+        <Button
+          shape="circle"
+          icon={<ReloadOutlined />}
+          onClick={getAllUsers}
+          className="user-reload-button"
+        />
+      </TopBar>
       <div className="user-bg-col">
         <IslandLayout>
           <div className="user-table">

diff --git a/frontend/src/components/widgets/top-bar/TopBar.jsx b/frontend/src/components/widgets/top-bar/TopBar.jsx
@@ -8,9 +8,9 @@ import { useNavigate } from "react-router-dom";
 function TopBar({
   title,
   enableSearch,
-  CustomButtons,
   searchData,
   setFilteredUserList,
+  children,
 }) {
   const navigate = useNavigate();
   const onSearchDebounce = debounce(({ target: { value } }) => {
@@ -41,7 +41,7 @@ function TopBar({
           {enableSearch && (
             <Input placeholder="Search Users" onChange={onSearchDebounce} />
           )}
-          {CustomButtons && <CustomButtons />}
+          {children}
         </div>
       </Col>
     </Row>
@@ -51,9 +51,9 @@ function TopBar({
 TopBar.propTypes = {
   title: PropTypes.string.isRequired,
   enableSearch: PropTypes.bool.isRequired,
-  CustomButtons: PropTypes.func,
   searchData: PropTypes.array,
   setFilteredUserList: PropTypes.func,
+  children: PropTypes.element,
 };
 
 export { TopBar };