From 2df2c6e6a744cda38be08dd692ed2ebf225c72cc Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Sun, 14 Nov 2021 08:22:41 -0700
Subject: [PATCH 1/7] forgot I was on master; need to move this to another
 branch and clean master

---
 .../ObjectAdmin/pages/dialogs/AddMembers      | 61 +++++++++++++++++++
 src/tools/PushDebug/pages/ManageDevice.js     | 18 ------
 2 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 src/tools/ObjectAdmin/pages/dialogs/AddMembers

diff --git a/src/tools/ObjectAdmin/pages/dialogs/AddMembers b/src/tools/ObjectAdmin/pages/dialogs/AddMembers
new file mode 100644
index 0000000..8bdd7b0
--- /dev/null
+++ b/src/tools/ObjectAdmin/pages/dialogs/AddMembers
@@ -0,0 +1,61 @@
+// import { useState, useRef } from "react";
+
+// reactstrap components
+import {
+  Button,
+  Input,
+  Modal, 
+  ModalHeader, 
+  ModalBody, 
+  ModalFooter,
+} from "reactstrap";
+
+// core components
+
+
+const AddMembers = (props) => {
+
+  const handleClick = (e, isConfirmed) => {
+    e.preventDefault();
+    props.addChannels(isConfirmed);
+  }
+
+  return (
+    <div>
+      <Modal 
+        isOpen={props.modal} 
+        className="modal-dialog-centered"
+      >
+        <ModalHeader>
+          <h2>Add New Channels</h2>
+        </ModalHeader>
+        <ModalBody>
+          {/* TODO: allow comma separated values */}
+          <div>
+            <label
+              className="form-control-label"
+              htmlFor="input-new-channels"
+            >
+              New Channels (one per line)
+            </label>
+          </div>
+          <Input
+            className="form-control-alternative"
+            id="input-new-channels"
+            placeholder="Add one channel name per line"
+            type="textarea"
+            defaultValue={props.newChannels.current}
+            onChange={(e) => props.newChannels.current = e.target.value}
+            rows="10"
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" onClick={(e) => handleClick(e, true)}>Submit</Button>{' '}
+          <Button color="secondary" onClick={(e) => handleClick(e, false)}>Cancel</Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+}
+
+export default AddMembers;
\ No newline at end of file
diff --git a/src/tools/PushDebug/pages/ManageDevice.js b/src/tools/PushDebug/pages/ManageDevice.js
index 22e548f..0ef3f91 100755
--- a/src/tools/PushDebug/pages/ManageDevice.js
+++ b/src/tools/PushDebug/pages/ManageDevice.js
@@ -500,24 +500,6 @@ function ChannelRows(props) {
   const rows = channels.map((ch, index) =>
     <tr key={index}>
       <td width="100%">{ch}</td>
-      {/* <td>
-        <UncontrolledTooltip
-          delay={0}
-          placement="top"
-          target={index}
-        >
-          Future Feature<br/>(will nav to Inspect Channel)
-        </UncontrolledTooltip>
-        <Button
-          id={hashIt(ch)}
-          color="primary"
-          // onClick={listDevices(`${channel}`)}
-          // disabled
-          size="sm"
-        >
-          List Devices
-        </Button>
-      </td> */}
       <td>
         <Button
           color="warning"

From 842b1b27aaa3d4bfca18fcdf8ab68e2262001568 Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Sun, 14 Nov 2021 23:01:24 -0700
Subject: [PATCH 2/7] trying to get add members to work and then members search
 but the setChannelMembers is not working as I expect it would

---
 src/tools/ObjectAdmin/ObjectAdminProvider.js  |  20 +++-
 src/tools/ObjectAdmin/pages/ChannelForm.js    | 101 +++++++++++++++++-
 src/tools/ObjectAdmin/pages/ChannelsSearch.js |   2 +-
 .../{MembersList.js => MembersSearch.js}      |  30 ++++--
 .../{AddMembers => AddMembersDialog.js}       |  24 +++--
 src/tools/ObjectAdmin/routesObjectAdmin.js    |  18 ++--
 6 files changed, 155 insertions(+), 40 deletions(-)
 rename src/tools/ObjectAdmin/pages/{MembersList.js => MembersSearch.js} (96%)
 rename src/tools/ObjectAdmin/pages/dialogs/{AddMembers => AddMembersDialog.js} (65%)

diff --git a/src/tools/ObjectAdmin/ObjectAdminProvider.js b/src/tools/ObjectAdmin/ObjectAdminProvider.js
index 005c7d7..5fc5d32 100644
--- a/src/tools/ObjectAdmin/ObjectAdminProvider.js
+++ b/src/tools/ObjectAdmin/ObjectAdminProvider.js
@@ -12,7 +12,7 @@ export const ObjectAdminProvider = ({ children }) => {
   const [channelUpdated, setChannelUpdated] = useState([]);
   const [channelEtag, setChannelEtag] = useState([]);
 
-   // UserMetadata State
+   // UserForm State
    const [userId, setUserId] = useState();
    const [userName, setUserName] = useState([]);
    const [userExternalId, setUserExternalId] = useState([]);
@@ -22,16 +22,22 @@ export const ObjectAdminProvider = ({ children }) => {
    const [userUpdated, setUserUpdated] = useState([]);
    const [userEtag, setUserEtag] = useState([]); 
 
-  // ChannelsList State
+  // ChannelsSearch State
   const [channelFilter, setChannelFilter] = useState('name LIKE "*"');
   const [maxRows, setMaxRows] = useState(500);
   const [channelMetadataResults, setChannelMetadataResults] = useState([]);
 
-  // UsersList State
+  // UsersSearch State
   const [userFilter, setUserFilter] = useState('name LIKE "*"');
   // share ChannelsList state: const [maxRows, setMaxRows] = useState(500);
   const [userMetadataResults, setUserMetadataResults] = useState([]);
 
+  // ChannelMembersSearch State
+  // share UsersSearch state: const [userFilter, setUserFilter] = useState('name LIKE "*"');
+  // share ChannelsSearch state: const [maxRows, setMaxRows] = useState(500);
+  const [channelMembersResults, setChannelMembersResults] = useState([]);
+
+
   // expose data/functions to context users
   /////////////////////////////////////////
 
@@ -54,17 +60,21 @@ export const ObjectAdminProvider = ({ children }) => {
     userUpdated, setUserUpdated,
     userEtag, setUserEtag,
 
-    // ChannelsList State
+    // ChannelsSearch State
     channelFilter, setChannelFilter,
     maxRows, setMaxRows,
     channelMetadataResults, setChannelMetadataResults,
 
-    // UsersList State
+    // UsersSearch State
     userFilter, setUserFilter,
     // share ChannelsList state: maxRows, setMaxRows,
     userMetadataResults, setUserMetadataResults,
+
+    // ChannelMembersSearch State
+    channelMembersResults, setChannelMembersResults,
   }
 
+  
   return <Context.Provider value={useObjectAdminData}> {children} </Context.Provider>
 }
 
diff --git a/src/tools/ObjectAdmin/pages/ChannelForm.js b/src/tools/ObjectAdmin/pages/ChannelForm.js
index d364418..ac37abb 100755
--- a/src/tools/ObjectAdmin/pages/ChannelForm.js
+++ b/src/tools/ObjectAdmin/pages/ChannelForm.js
@@ -16,8 +16,11 @@
 
 */
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 // import classnames from "classnames";
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 
 // reactstrap components
 import {
@@ -31,14 +34,17 @@ import {
   Input,
   Row,
   Col,
-  // ButtonGroup,
   CardFooter,
 } from "reactstrap";
 
+import ReactBSAlert from "react-bootstrap-sweetalert";
+
 // // core components
 import { useKeySetData } from "../../KeySetProvider";
 import { useObjectAdminData } from "../ObjectAdminProvider";
-import ReactBSAlert from "react-bootstrap-sweetalert";
+
+import AddMembersDialog from "./dialogs/AddMembersDialog.js";
+
 
 const ChannelForm = () => {
   const keySetContext = useKeySetData();
@@ -49,6 +55,67 @@ const ChannelForm = () => {
 
   const [channelId, setChannelId] = useState(objectAdminContext.channelId);
   const [sweetAlert, setSweetAlert] = useState(null);
+  const [modal, setModal] = useState(false);
+  const toggle = () => setModal(!modal);
+  const newMembers = useRef([]);
+
+  async function addMembers(isConfirmed) {
+    console.log("addMembers: isConfirmed = ", isConfirmed);
+    
+    toggle(); // dismiss the modal
+    if (!isConfirmed) return;
+    
+    if (newMembers.current == null || newMembers.current.length === 0) {
+      toastNotify("info", "No New Channel Members provided.")
+      return;
+    }
+
+    console.log("    new members", newMembers);
+
+    try {
+      const result = await keySetContext.pubnub.objects.setChannelMembers({
+        channel: channelId,
+        uuids: newMembers,
+      });
+
+      console.log("    setChannelMembers result", result)
+    } 
+    catch (status) {
+      console.log("operation failed w/ error:", status);
+    }
+  
+
+    // const result = await keySetContext.pubnub.objects.setMemberships({
+    //   "channels": channels}),
+    //   (status) => {
+    //     console.log("status", status);
+
+    //     if (!status.error) {
+    //       toastNotify("success", "Channels added.");
+    //       listChannels();
+    //     }
+    //     else {
+    //       toastNotify("error", status.errorData.error);
+    //     }
+    // });
+  }
+
+  const toastNotify = (type, title) => {
+    const params = {
+      position: "top-center",
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    };
+
+    if (type === "success") toast.success(title, params);
+    else if (type === "error") toast.error(title, params);
+    else toast.info(title, params);
+  }
+
 
   async function getChannelObject() {
     // console.log("channelId", channelId);
@@ -157,6 +224,24 @@ const ChannelForm = () => {
   return (
     <>
       {sweetAlert}
+      <AddMembersDialog
+        // toggle={toggle}
+        modal={modal}
+        newItems={newMembers}
+        addMembers={addMembers}
+      />
+      <ToastContainer
+        position="top-center"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+
       <Container className="mt--7" fluid>
         <Row className="mt-0">
           <Col className="order-xl-2">
@@ -383,7 +468,15 @@ const ChannelForm = () => {
                       Save Metadata
                     </Button>
                   </Col>
-                  <Col lg="3" className="text-center"></Col>
+                  <Col lg="3" className="text-center">
+                    <Button
+                      color="info"
+                      onClick={toggle}
+                      disabled = {keySetContext.pubnub == null || channelId === ""}
+                    >
+                      Add Members
+                    </Button>
+                  </Col>
                 </Row> 
               </CardFooter>
             </Card>
diff --git a/src/tools/ObjectAdmin/pages/ChannelsSearch.js b/src/tools/ObjectAdmin/pages/ChannelsSearch.js
index 4dc338f..8e6f6a3 100755
--- a/src/tools/ObjectAdmin/pages/ChannelsSearch.js
+++ b/src/tools/ObjectAdmin/pages/ChannelsSearch.js
@@ -484,7 +484,7 @@ const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
         )}
 
         <TableCell>{row.updated}</TableCell>
-
+        
         <TableCell align="center">
           <IconButton aria-label="edit" size="small" onClick={(e) => handleEdit(e, row, index)}>
             <EditIcon/>
diff --git a/src/tools/ObjectAdmin/pages/MembersList.js b/src/tools/ObjectAdmin/pages/MembersSearch.js
similarity index 96%
rename from src/tools/ObjectAdmin/pages/MembersList.js
rename to src/tools/ObjectAdmin/pages/MembersSearch.js
index 689dc11..18a3b1a 100755
--- a/src/tools/ObjectAdmin/pages/MembersList.js
+++ b/src/tools/ObjectAdmin/pages/MembersSearch.js
@@ -58,7 +58,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import GroupIcon from '@mui/icons-material/Group';
 import ReactBSAlert from "react-bootstrap-sweetalert";
 
-const MembersList = () => {
+const MembersSearch = () => {
   const keySetContext = useKeySetData();
   const objectAdminContext = useObjectAdminData();
 
@@ -85,7 +85,7 @@ const MembersList = () => {
   // page state
   const [channelId, setChannelId] = useState(objectAdminContext.channelId);
   const [channelFilter, setChannelFilter] = useState(objectAdminContext.channelFilter);
-
+  
   const [isTruncate, setIsTruncate] = useState(true);
   const [sweetAlert, setSweetAlert] = useState(null);
   const history = useHistory();
@@ -96,6 +96,9 @@ const MembersList = () => {
     let more = true;
     let results = [];
     let next = null;
+    let totalRecords = 0;
+
+    confirmAlert("Searching Channel Members", "Searching for Channel Members, please wait...");
     const limit = objectAdminContext.maxRows < 100 ? objectAdminContext.maxRows : 100;
 
     do {
@@ -105,23 +108,24 @@ const MembersList = () => {
           filter : channelFilter, // || 'id = channel"*"',
           include: {
             totalCount: true,
-            customFields: true,
-            UUIDFields: true
+            customFields: true,            
+            UUIDFields: true,
+            customUUIDFields: true
           },
           page: {next: next}
         });
 
+        totalRecords = result.totalCount;
+
         if (result != null && result.data.length > 0) {
           results = results.concat(result.data);
           more = result.data.length >= limit;
           next = result.next;
         }
-        else {
-          more = false;
-          timerAlert("No Records Found!", "Your filter found 0 records.", 3);
-        }
+        else more = false;
       } 
       catch (status) {
+        hideAlert(); // hide the please wait dialog
         confirmAlert(status.status.errorData.error.message, 
           status.status.errorData.error.details[0].message,
           "Dismiss", ()=>hideAlert()
@@ -132,7 +136,13 @@ const MembersList = () => {
       }
     } while (more);
 
-    objectAdminContext.setChannelMetadataResults(results);
+    hideAlert(); // hide the "searching please wait" dialog
+    
+    totalRecords === 0 
+      ? timerAlert("No Members Found!", "Your filter found none Channel Members.", 3)
+      : timerAlert("Channel Members Found!", `${totalRecords} Channel Members Found.`, 2);
+
+    objectAdminContext.setChannelMembersResults(results);
   }
 
   const handleEdit = (e, record, index) => {
@@ -355,7 +365,7 @@ const MembersList = () => {
   );
 };
 
-export default MembersList;
+export default MembersSearch;
 
 
 const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage, handleChangeRowsPerPage, isTruncate, setIsTruncate, handleRemove, handleEdit}) => {
diff --git a/src/tools/ObjectAdmin/pages/dialogs/AddMembers b/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
similarity index 65%
rename from src/tools/ObjectAdmin/pages/dialogs/AddMembers
rename to src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
index 8bdd7b0..29bb936 100644
--- a/src/tools/ObjectAdmin/pages/dialogs/AddMembers
+++ b/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
@@ -12,12 +12,14 @@ import {
 
 // core components
 
+const AddMembersDialog = (props) => {
 
-const AddMembers = (props) => {
-
+  let newItems = null;
   const handleClick = (e, isConfirmed) => {
+debugger;
     e.preventDefault();
-    props.addChannels(isConfirmed);
+    props.newItems.current = (newItems == null || newItems === "") ? null : newItems.split("\n");
+    props.addMembers(isConfirmed);
   }
 
   return (
@@ -27,25 +29,25 @@ const AddMembers = (props) => {
         className="modal-dialog-centered"
       >
         <ModalHeader>
-          <h2>Add New Channels</h2>
+          <h2>Add New Members</h2>
         </ModalHeader>
         <ModalBody>
           {/* TODO: allow comma separated values */}
           <div>
             <label
               className="form-control-label"
-              htmlFor="input-new-channels"
+              htmlFor="input-new-members"
             >
-              New Channels (one per line)
+              New Members (one UUID per line)
             </label>
           </div>
           <Input
             className="form-control-alternative"
-            id="input-new-channels"
-            placeholder="Add one channel name per line"
+            id="input-new-members"
+            placeholder="Add one member UUID per line"
             type="textarea"
-            defaultValue={props.newChannels.current}
-            onChange={(e) => props.newChannels.current = e.target.value}
+            // defaultValue={props.newMembers.current}
+            onChange={(e) => newItems = e.target.value}
             rows="10"
           />
         </ModalBody>
@@ -58,4 +60,4 @@ const AddMembers = (props) => {
   );
 }
 
-export default AddMembers;
\ No newline at end of file
+export default AddMembersDialog;
\ No newline at end of file
diff --git a/src/tools/ObjectAdmin/routesObjectAdmin.js b/src/tools/ObjectAdmin/routesObjectAdmin.js
index 079e6d3..8192ecd 100644
--- a/src/tools/ObjectAdmin/routesObjectAdmin.js
+++ b/src/tools/ObjectAdmin/routesObjectAdmin.js
@@ -10,7 +10,7 @@ import ChannelsSearch from './pages/ChannelsSearch';
 import UserForm from './pages/UserForm';
 import UsersSearch from './pages/UsersSearch';
 
-// import MembersList from './pages/MembersList';
+import MembersSearch from './pages/MembersSearch';
 
 import ImportChannels from './pages/ImportChannels';
 import ImportUsers from './pages/ImportUsers';
@@ -53,14 +53,14 @@ var routesObjectAdmin = {
       layout: "/admin",
     },
     {divider: true,},
-    // {
-    //   path: "/objects/members-list",
-    //   name: "Get Members",
-    //   component: MembersList,
-    //   parent: ObjectAdminProvider,
-    //   layout: "/admin",
-    // },
-    // {divider: true,},
+    {
+      path: "/objects/members-search",
+      name: "Members Search",
+      component: MembersSearch,
+      parent: ObjectAdminProvider,
+      layout: "/admin",
+    },
+    {divider: true,},
     {
       path: "/objects/import-channels",
       name: "Import Channels",

From 84bcc72e9522e80025a11855498a65f379ea08a6 Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Mon, 15 Nov 2021 20:03:16 -0700
Subject: [PATCH 3/7] add channel members and members search done but needs
 refactoring

---
 src/tools/ObjectAdmin/ObjectAdminProvider.js  |   2 +
 src/tools/ObjectAdmin/pages/ChannelForm.js    |   5 +-
 src/tools/ObjectAdmin/pages/MembersSearch.js  | 208 +++++++++---------
 src/tools/ObjectAdmin/pages/UsersSearch.js    |   6 +-
 .../pages/dialogs/AddMembersDialog.js         |   7 +-
 5 files changed, 115 insertions(+), 113 deletions(-)

diff --git a/src/tools/ObjectAdmin/ObjectAdminProvider.js b/src/tools/ObjectAdmin/ObjectAdminProvider.js
index 5fc5d32..fe91d59 100644
--- a/src/tools/ObjectAdmin/ObjectAdminProvider.js
+++ b/src/tools/ObjectAdmin/ObjectAdminProvider.js
@@ -36,6 +36,7 @@ export const ObjectAdminProvider = ({ children }) => {
   // share UsersSearch state: const [userFilter, setUserFilter] = useState('name LIKE "*"');
   // share ChannelsSearch state: const [maxRows, setMaxRows] = useState(500);
   const [channelMembersResults, setChannelMembersResults] = useState([]);
+  const [memberFilter, setMemberFilter] = useState();
 
 
   // expose data/functions to context users
@@ -72,6 +73,7 @@ export const ObjectAdminProvider = ({ children }) => {
 
     // ChannelMembersSearch State
     channelMembersResults, setChannelMembersResults,
+    memberFilter, setMemberFilter,
   }
 
   
diff --git a/src/tools/ObjectAdmin/pages/ChannelForm.js b/src/tools/ObjectAdmin/pages/ChannelForm.js
index ac37abb..cc3908c 100755
--- a/src/tools/ObjectAdmin/pages/ChannelForm.js
+++ b/src/tools/ObjectAdmin/pages/ChannelForm.js
@@ -75,7 +75,7 @@ const ChannelForm = () => {
     try {
       const result = await keySetContext.pubnub.objects.setChannelMembers({
         channel: channelId,
-        uuids: newMembers,
+        uuids: newMembers.current,
       });
 
       console.log("    setChannelMembers result", result)
@@ -228,7 +228,8 @@ const ChannelForm = () => {
         // toggle={toggle}
         modal={modal}
         newItems={newMembers}
-        addMembers={addMembers}
+        addItems={addMembers}
+        newMembers={newMembers}
       />
       <ToastContainer
         position="top-center"
diff --git a/src/tools/ObjectAdmin/pages/MembersSearch.js b/src/tools/ObjectAdmin/pages/MembersSearch.js
index 18a3b1a..4e0f93d 100755
--- a/src/tools/ObjectAdmin/pages/MembersSearch.js
+++ b/src/tools/ObjectAdmin/pages/MembersSearch.js
@@ -55,7 +55,7 @@ import { useObjectAdminData } from "../ObjectAdminProvider";
 import { DeleteForever, FirstPage, KeyboardArrowDown, KeyboardArrowRight, KeyboardArrowLeft, LastPage } from "@mui/icons-material";
 import { Switch, FormControlLabel } from "@mui/material";
 import EditIcon from '@mui/icons-material/Edit';
-import GroupIcon from '@mui/icons-material/Group';
+// import GroupIcon from '@mui/icons-material/Group';
 import ReactBSAlert from "react-bootstrap-sweetalert";
 
 const MembersSearch = () => {
@@ -84,28 +84,29 @@ const MembersSearch = () => {
 
   // page state
   const [channelId, setChannelId] = useState(objectAdminContext.channelId);
-  const [channelFilter, setChannelFilter] = useState(objectAdminContext.channelFilter);
+  const [memberFilter, setMemberFilter] = useState(objectAdminContext.memberFilter);
   
   const [isTruncate, setIsTruncate] = useState(true);
   const [sweetAlert, setSweetAlert] = useState(null);
   const history = useHistory();
 
   async function retrieveMetadata() {
-    console.log("retrieveMetadata", channelId, channelFilter);
+    console.log("retrieveMetadata", channelId, memberFilter);
 
     let more = true;
     let results = [];
     let next = null;
     let totalRecords = 0;
 
-    confirmAlert("Searching Channel Members", "Searching for Channel Members, please wait...");
     const limit = objectAdminContext.maxRows < 100 ? objectAdminContext.maxRows : 100;
 
+    confirmAlert("Searching Channel Members", "Searching for Channel Members, please wait...");
+
     do {
       try {
         const result = await keySetContext.pubnub.objects.getChannelMembers({
           channel: channelId,
-          filter : channelFilter, // || 'id = channel"*"',
+          filter : memberFilter, 
           include: {
             totalCount: true,
             customFields: true,            
@@ -142,42 +143,48 @@ const MembersSearch = () => {
       ? timerAlert("No Members Found!", "Your filter found none Channel Members.", 3)
       : timerAlert("Channel Members Found!", `${totalRecords} Channel Members Found.`, 2);
 
+    console.log("    members found", results);
     objectAdminContext.setChannelMembersResults(results);
   }
 
   const handleEdit = (e, record, index) => {
-    objectAdminContext.setChannelId(record.id);
-    objectAdminContext.setChannelName(record.name);
-    objectAdminContext.setChannelDesc(record.description);
-    objectAdminContext.setChannelCustom(JSON.stringify(record.custom, null, 2));
-    objectAdminContext.setChannelUpdated(record.updated);
-    objectAdminContext.setChannelEtag(record.eTag);
-
-    history.push("/admin/channel-metadata");
+    // objectAdminContext.setUserId(record.id);
+    // objectAdminContext.setUserName(record.name);
+    // objectAdminContext.setUserExternalId(record.externalId);
+    // objectAdminContext.setUserProfileUrl(record.profileUrl);
+    // objectAdminContext.setUserEmail(record.email);
+    // objectAdminContext.setUserCustom(JSON.stringify(record.custom, null, 2));
+    // objectAdminContext.setUserUpdated(record.updated);
+    // objectAdminContext.setUserEtag(record.eTag);
+
+    // history.push("/admin/objects/user-form");
   }
 
 
-  const handleRemove = (e, channel, index) => {
+  const handleRemove = (e, userId, index) => {
     e.preventDefault();
 
-    confirmAlert("Confirm Remove Metadata?", 
-      `${index} - ${channel}`,
-      "Confirm", ()=>removeMetadata(channel, index), "Cancel", ()=>hideAlert()
+    confirmAlert("Confirm Remove Member?", 
+      `${index} - ${userId}`,
+      "Confirm", ()=>removeUser(userId, index), "Cancel", ()=>hideAlert()
     );
   }
 
-  async function removeMetadata(channel, index) {
-    // console.log("removeChannelMetadata", channel);
-    hideAlert();
+  async function removeUser(userId, index) {
+    console.log("removeUser", userId);
 
+    hideAlert();
     try {
-      const result = await keySetContext.pubnub.objects.removeChannelMetadata({channel : channel});
-      timerAlert("Remove Success!", "ChannelMetadata removed.", 2);
+      const result = await keySetContext.pubnub.objects.removeUUIDMetadata({
+        channel: channelId,
+        uuid : userId
+      });
+      timerAlert("Remove Success!", "User removed.", 2);
       
-      let temp = Array.from(objectAdminContext.channelMetadataResults);
+      let temp = Array.from(objectAdminContext.channelMembersResults);
       temp.splice(index, 1);
 
-      objectAdminContext.setChannelMetadataResults(temp);
+      objectAdminContext.setChannelMembersResults(temp);
     } 
     catch (status) {
       confirmAlert(status.status.errorData.error.message, 
@@ -213,6 +220,7 @@ const MembersSearch = () => {
           style={{ display: "block", marginTop: "100px" }}
           title={title}
           onConfirm={confirmFn}
+          showConfirm={confirmButton != null}
           confirmBtnBsStyle="danger"
           confirmBtnText={confirmButton}
           onCancel={cancelFn}
@@ -270,18 +278,18 @@ const MembersSearch = () => {
                         <FormGroup>
                           <label
                             className="form-control-label"
-                            htmlFor="input-channel-filter"
+                            htmlFor="input-member-filter"
                           >
-                            Channel Filter Expression
+                            Member Filter Expression
                           </label>
                           <Input
                             className="form-control-alternative"
-                            id="input-channel-filter"
+                            id="input-member-filter"
                             placeholder="Enter a filter expression"
                             type="textarea"
                             rows="4"
-                            value={channelFilter}
-                            onChange={(e) => setChannelFilter(e.target.value)}
+                            value={memberFilter}
+                            onChange={(e) => setMemberFilter(e.target.value)}
                           />
                         </FormGroup>
                       </Col>
@@ -314,7 +322,7 @@ const MembersSearch = () => {
                             onClick={retrieveMetadata}
                             disabled = {keySetContext.pubnub == null || channelId == null}
                           >
-                            Get Metadata
+                            Search Members
                           </Button>
                         </Row>
                       </Col>
@@ -339,7 +347,7 @@ const MembersSearch = () => {
 
               <CardBody>
                 <MetadataTable 
-                  metadata={objectAdminContext.channelMetadataResults}
+                  metadata={objectAdminContext.channelMembersResults}
                   rowsPerPage={rowsPerPage}
                   page={page}
                   emptyRows={emptyRows}
@@ -407,10 +415,10 @@ const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage
             <TableRow>
               <TableCell/>
               <TableCell align="right">#</TableCell>
-              <TableCell>Channel ID</TableCell>
-              <TableCell>Channel Name</TableCell>
-              <TableCell>Description</TableCell>
-              <TableCell>Custom Field Data</TableCell>
+              <TableCell>User ID</TableCell>
+              <TableCell>User Name</TableCell>
+              {/* <TableCell>Email</TableCell> */}
+              <TableCell>Custom Membership Data</TableCell>
               <TableCell>Last Updated</TableCell>
               <TableCell align="center">Actions</TableCell>
             </TableRow>
@@ -421,12 +429,10 @@ const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage
               ? metadata.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               : metadata
             ).map((row, index) => (
-
               <MetadataRow index={(index + (page * rowsPerPage))} row={row} isTruncate={isTruncate} 
                 handleRemove={handleRemove} 
                 handleEdit={handleEdit}
               />
-            
             ))}
 
             {emptyRows > 0 && (
@@ -471,9 +477,7 @@ const truncate = (data, size, noDots) => {
 }
 
 const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
-  console.log("MetadataRow", row);
-
-  // const {row} = props;
+  // console.log("MetadataRow", row);
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -492,17 +496,17 @@ const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
         <TableCell align="right">{index}</TableCell>
         {isTruncate && (
           <>
-            <TableCell>{truncate(row.id, 40)}</TableCell>
-            <TableCell>{truncate(row.name, 40)}</TableCell>
-            <TableCell>{truncate(row.description, 40)}</TableCell>
+            <TableCell>{truncate(row.uuid.id, 40)}</TableCell>
+            <TableCell>{truncate(row.uuid.name, 40)}</TableCell>
+            {/* <TableCell>{truncate(row.email, 40)}</TableCell> */}
             <TableCell>{truncate(JSON.stringify(row.custom), 40)}</TableCell>
           </>
         )}
         {!isTruncate && (
           <>
-            <TableCell component="th" scope="row">{row.id}</TableCell>
-            <TableCell>{row.name}</TableCell>
-            <TableCell>{row.description}</TableCell>
+            <TableCell component="th" scope="row">{row.uuid.id}</TableCell>
+            <TableCell>{row.uuid.name}</TableCell>
+            {/* <TableCell>{row.email}</TableCell> */}
             <TableCell>{JSON.stringify(row.custom, null, 2)}</TableCell>
           </>
         )}
@@ -513,11 +517,11 @@ const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
           <IconButton aria-label="edit" size="small" onClick={(e) => handleEdit(e, row, index)}>
             <EditIcon/>
           </IconButton>
-          <IconButton aria-label="members" size="small" 
+          {/* <IconButton aria-label="members" size="small" 
             // onClick={(e) => handleMembership(e, row.id, index)}
             >
             <GroupIcon/>
-          </IconButton>
+          </IconButton> */}
           <IconButton aria-label="delete" size="small" onClick={(e) => handleRemove(e, row.id, index)}>
             <DeleteForever/>
           </IconButton>
@@ -533,30 +537,74 @@ const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
                 <TableBody>
                 <TableRow>
                     <TableCell width="5%"></TableCell>
-                    <TableCell><strong>Channel ID</strong></TableCell>
-                    <TableCell width="95%">{row.id}</TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell><strong>User ID</strong></TableCell>
+                    <TableCell width="95%">{row.uuid.id}</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell><strong>User Name</strong></TableCell>
+                    <TableCell width="95%">{row.uuid.name}</TableCell>
                   </TableRow>
                   <TableRow>
                     <TableCell width="5%"></TableCell>
-                    <TableCell><strong>Channel Name</strong></TableCell>
-                    <TableCell width="95%">{row.name}</TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell><strong>Email</strong></TableCell>
+                    <TableCell width="95%">{row.uuid.email}</TableCell>
                   </TableRow>
                   <TableRow>
                     <TableCell width="5%"></TableCell>
-                    <TableCell><strong>Description</strong></TableCell>
-                    <TableCell width="95%">{row.description}</TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell><strong>External ID</strong></TableCell>
+                    <TableCell width="95%">{row.uuid.externalId}</TableCell>
                   </TableRow>
                   <TableRow>
                     <TableCell width="5%"></TableCell>
-                    <TableCell colSpan="2" component="th" width="5%"><strong>Custom Fields</strong></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell><strong>Profile URL</strong></TableCell>
+                    <TableCell width="95%">{row.uuid.profileUrl}</TableCell>
                   </TableRow>
-                  {Object.keys(row.custom).map((key) => (
+                  <TableRow>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell colSpan="2" component="th" width="5%"><strong>Custom User Fields</strong></TableCell>
+                  </TableRow>
+
+                  {Object.keys(row.uuid.custom).map((key) => (
                     <TableRow>
+                      <TableCell width="5%"></TableCell>
+                      <TableCell width="5%"></TableCell>
+                      <TableCell width="5%"></TableCell>
+                      <TableCell>{key}</TableCell>
+                      <TableCell width="95%" colSpan="2">{row.uuid.custom[key]}</TableCell>
+                    </TableRow>
+                  ))}
+
+                  <TableRow>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell width="5%"></TableCell>
+                    <TableCell colSpan="2" component="th" width="5%"><strong>Custom Membership Fields</strong></TableCell>
+                  </TableRow>
+
+                  {row.custom &&
+                  Object.keys(row.custom).map((key) => (
+                    <TableRow>
+                      <TableCell width="5%"></TableCell>
+                      <TableCell width="5%"></TableCell>
                       <TableCell width="5%"></TableCell>
                       <TableCell>{key}</TableCell>
                       <TableCell width="95%" colSpan="2">{row.custom[key]}</TableCell>
                     </TableRow>
                   ))}
+
                 </TableBody>
               </Table>
             </Box>
@@ -627,51 +675,3 @@ TablePaginationActions.propTypes = {
   page: PropTypes.number.isRequired,
   rowsPerPage: PropTypes.number.isRequired,
 };
-
-
-// const TruncateSwitch = ({isTruncate, setIsTruncate}) => {
-  //   return(
-  //     <>
-  //     <label
-  //       className="form-control-label"
-  //       htmlFor="input-truncate"
-  //     >
-  //       Truncate Large Values?
-  //     </label>
-  //     <br/>
-  //     <ButtonGroup 
-  //       className="btn-group-toggle" 
-  //       data-toggle="buttons"
-  //     >
-  //       <Button 
-  //         className={classnames({ active: isTruncate })} 
-  //         color="danger" 
-  //         onClick={() => setIsTruncate(!isTruncate)}
-  //       >
-  //         <input
-  //           autoComplete="off"
-  //           name="options"
-  //           type="radio"
-  //           value={!isTruncate}
-  //           size="small"
-  //         />
-  //         No
-  //       </Button>
-  //       <Button 
-  //         className={classnames({ active: isTruncate })} 
-  //         color="danger" 
-  //         onClick={() => setIsTruncate(true)}
-  //       >
-  //         <input
-  //           autoComplete="off"
-  //           name="options"
-  //           type="radio"
-  //           value={isTruncate}
-  //           size="small"
-  //         />
-  //         Yes
-  //       </Button>
-  //     </ButtonGroup>
-  //     </>
-  //   );
-  // }
\ No newline at end of file
diff --git a/src/tools/ObjectAdmin/pages/UsersSearch.js b/src/tools/ObjectAdmin/pages/UsersSearch.js
index 54b4a49..3a66ec4 100755
--- a/src/tools/ObjectAdmin/pages/UsersSearch.js
+++ b/src/tools/ObjectAdmin/pages/UsersSearch.js
@@ -159,7 +159,7 @@ const UsersSearch = () => {
   const handleRemove = (e, userId, index) => {
     e.preventDefault();
 
-    confirmAlert("Confirm Remove Metadata?", 
+    confirmAlert("Confirm Remove User?", 
       `${index} - ${userId}`,
       "Confirm", ()=>removeUser(userId, index), "Cancel", ()=>hideAlert()
     );
@@ -400,7 +400,7 @@ const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage
               ? metadata.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               : metadata
             ).map((row, index) => (
-              <MetadataRow index={(index + (page * rowsPerPage))} row={row} isTruncate={isTruncate} 
+              <MetadataRow index={(index + (page * rowsPerPage))} row={row.uuid} isTruncate={isTruncate} 
                 handleRemove={handleRemove} 
                 handleEdit={handleEdit}
               />
@@ -520,7 +520,7 @@ const MetadataRow = ({index, row, isTruncate, handleRemove, handleEdit}) => {
                   <TableRow>
                     <TableCell width="5%"></TableCell>
                     <TableCell><strong>Email</strong></TableCell>
-                    <TableCell width="95%">{row.description}</TableCell>
+                    <TableCell width="95%">{row.email}</TableCell>
                   </TableRow>
                   <TableRow>
                     <TableCell width="5%"></TableCell>
diff --git a/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js b/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
index 29bb936..8802327 100644
--- a/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
+++ b/src/tools/ObjectAdmin/pages/dialogs/AddMembersDialog.js
@@ -13,13 +13,12 @@ import {
 // core components
 
 const AddMembersDialog = (props) => {
-
   let newItems = null;
+
   const handleClick = (e, isConfirmed) => {
-debugger;
     e.preventDefault();
     props.newItems.current = (newItems == null || newItems === "") ? null : newItems.split("\n");
-    props.addMembers(isConfirmed);
+    props.addItems(isConfirmed);
   }
 
   return (
@@ -46,7 +45,7 @@ debugger;
             id="input-new-members"
             placeholder="Add one member UUID per line"
             type="textarea"
-            // defaultValue={props.newMembers.current}
+            defaultValue={props.newMembers.current}
             onChange={(e) => newItems = e.target.value}
             rows="10"
           />

From f5b300a13479b9ccd2343f6fb5c0d91a34f4658e Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Mon, 15 Nov 2021 21:40:27 -0700
Subject: [PATCH 4/7] moved add member dialog to MemberSearch page and is
 working

---
 src/tools/ObjectAdmin/pages/ChannelForm.js   | 101 +------------------
 src/tools/ObjectAdmin/pages/MembersSearch.js |  99 ++++++++++++++++--
 src/tools/ObjectAdmin/pages/UsersSearch.js   |   5 +-
 3 files changed, 94 insertions(+), 111 deletions(-)

diff --git a/src/tools/ObjectAdmin/pages/ChannelForm.js b/src/tools/ObjectAdmin/pages/ChannelForm.js
index cc3908c..5aebf82 100755
--- a/src/tools/ObjectAdmin/pages/ChannelForm.js
+++ b/src/tools/ObjectAdmin/pages/ChannelForm.js
@@ -16,11 +16,8 @@
 
 */
 
-import { useState, useRef } from "react";
+import { useState } from "react";
 // import classnames from "classnames";
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-
 
 // reactstrap components
 import {
@@ -43,8 +40,6 @@ import ReactBSAlert from "react-bootstrap-sweetalert";
 import { useKeySetData } from "../../KeySetProvider";
 import { useObjectAdminData } from "../ObjectAdminProvider";
 
-import AddMembersDialog from "./dialogs/AddMembersDialog.js";
-
 
 const ChannelForm = () => {
   const keySetContext = useKeySetData();
@@ -55,69 +50,8 @@ const ChannelForm = () => {
 
   const [channelId, setChannelId] = useState(objectAdminContext.channelId);
   const [sweetAlert, setSweetAlert] = useState(null);
-  const [modal, setModal] = useState(false);
-  const toggle = () => setModal(!modal);
-  const newMembers = useRef([]);
-
-  async function addMembers(isConfirmed) {
-    console.log("addMembers: isConfirmed = ", isConfirmed);
-    
-    toggle(); // dismiss the modal
-    if (!isConfirmed) return;
-    
-    if (newMembers.current == null || newMembers.current.length === 0) {
-      toastNotify("info", "No New Channel Members provided.")
-      return;
-    }
-
-    console.log("    new members", newMembers);
-
-    try {
-      const result = await keySetContext.pubnub.objects.setChannelMembers({
-        channel: channelId,
-        uuids: newMembers.current,
-      });
-
-      console.log("    setChannelMembers result", result)
-    } 
-    catch (status) {
-      console.log("operation failed w/ error:", status);
-    }
-  
-
-    // const result = await keySetContext.pubnub.objects.setMemberships({
-    //   "channels": channels}),
-    //   (status) => {
-    //     console.log("status", status);
 
-    //     if (!status.error) {
-    //       toastNotify("success", "Channels added.");
-    //       listChannels();
-    //     }
-    //     else {
-    //       toastNotify("error", status.errorData.error);
-    //     }
-    // });
-  }
-
-  const toastNotify = (type, title) => {
-    const params = {
-      position: "top-center",
-      autoClose: 5000,
-      hideProgressBar: false,
-      closeOnClick: true,
-      pauseOnHover: true,
-      draggable: true,
-      progress: undefined,
-    };
-
-    if (type === "success") toast.success(title, params);
-    else if (type === "error") toast.error(title, params);
-    else toast.info(title, params);
-  }
-
-
-  async function getChannelObject() {
+  const getChannelObject = async () => {
     // console.log("channelId", channelId);
     try {
       const result = await keySetContext.pubnub.objects.getChannelMetadata({
@@ -132,7 +66,6 @@ const ChannelForm = () => {
         : timerAlert("No Records Found!", "Your filter found 0 records.", 3);
     }
     catch (status) {
-
       confirmAlert("Get Channel Failed", 
         // for some reason, the status.errorData.error is null
         // even though the console shows it has a value????
@@ -143,7 +76,7 @@ const ChannelForm = () => {
     }
   }
 
-  async function saveChannelObject() {
+  const saveChannelObject = async () => {
     // console.log("channelId", channelId);
     try {
       const result = await keySetContext.pubnub.objects.setChannelMetadata({
@@ -224,25 +157,6 @@ const ChannelForm = () => {
   return (
     <>
       {sweetAlert}
-      <AddMembersDialog
-        // toggle={toggle}
-        modal={modal}
-        newItems={newMembers}
-        addItems={addMembers}
-        newMembers={newMembers}
-      />
-      <ToastContainer
-        position="top-center"
-        autoClose={3000}
-        hideProgressBar={false}
-        newestOnTop={false}
-        closeOnClick
-        rtl={false}
-        pauseOnFocusLoss
-        draggable
-        pauseOnHover
-      />
-
       <Container className="mt--7" fluid>
         <Row className="mt-0">
           <Col className="order-xl-2">
@@ -469,15 +383,6 @@ const ChannelForm = () => {
                       Save Metadata
                     </Button>
                   </Col>
-                  <Col lg="3" className="text-center">
-                    <Button
-                      color="info"
-                      onClick={toggle}
-                      disabled = {keySetContext.pubnub == null || channelId === ""}
-                    >
-                      Add Members
-                    </Button>
-                  </Col>
                 </Row> 
               </CardFooter>
             </Card>
diff --git a/src/tools/ObjectAdmin/pages/MembersSearch.js b/src/tools/ObjectAdmin/pages/MembersSearch.js
index 4e0f93d..cfd2a40 100755
--- a/src/tools/ObjectAdmin/pages/MembersSearch.js
+++ b/src/tools/ObjectAdmin/pages/MembersSearch.js
@@ -16,8 +16,10 @@
 
 */
 
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import { useHistory } from "react-router-dom";
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 // reactstrap components
 import {
@@ -57,6 +59,7 @@ import { Switch, FormControlLabel } from "@mui/material";
 import EditIcon from '@mui/icons-material/Edit';
 // import GroupIcon from '@mui/icons-material/Group';
 import ReactBSAlert from "react-bootstrap-sweetalert";
+import AddMembersDialog from "./dialogs/AddMembersDialog";
 
 const MembersSearch = () => {
   const keySetContext = useKeySetData();
@@ -90,7 +93,58 @@ const MembersSearch = () => {
   const [sweetAlert, setSweetAlert] = useState(null);
   const history = useHistory();
 
-  async function retrieveMetadata() {
+  const [modal, setModal] = useState(false);
+  const toggle = () => setModal(!modal);
+  const newMembers = useRef([]);
+
+  const addMembers = async (isConfirmed) => {
+    console.log("addMembers: isConfirmed = ", isConfirmed);
+    
+    toggle(); // dismiss the modal
+    if (!isConfirmed) return;
+    
+    if (newMembers.current == null || newMembers.current.length === 0) {
+      toastNotify("info", "No New Channel Members provided.")
+      return;
+    }
+
+    console.log("    new members", newMembers);
+
+    try {
+      const result = await keySetContext.pubnub.objects.setChannelMembers({
+        channel: channelId,
+        uuids: newMembers.current
+      });
+
+      retrieveMetadata();
+
+      // let temp = Array.from(objectAdminContext.channelMembersResults);
+      // objectAdminContext.setChannelMembersResults(temp.concat(result));
+
+      console.log("    setChannelMembers result", result)
+    } 
+    catch (status) {
+      console.log("operation failed w/ error:", status);
+    }
+  }
+
+  const toastNotify = (type, title) => {
+    const params = {
+      position: "top-center",
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    };
+
+    if (type === "success") toast.success(title, params);
+    else if (type === "error") toast.error(title, params);
+    else toast.info(title, params);
+  }
+
+  const retrieveMetadata = async () => {
     console.log("retrieveMetadata", channelId, memberFilter);
 
     let more = true;
@@ -170,7 +224,7 @@ const MembersSearch = () => {
     );
   }
 
-  async function removeUser(userId, index) {
+  const removeUser = async (userId, index) => {
     console.log("removeUser", userId);
 
     hideAlert();
@@ -238,6 +292,24 @@ const MembersSearch = () => {
   return (
     <>
       {sweetAlert}
+      <AddMembersDialog
+        // toggle={toggle}
+        modal={modal}
+        newItems={newMembers}
+        addItems={addMembers}
+        newMembers={newMembers}
+      />
+      <ToastContainer
+        position="top-center"
+        autoClose={3000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
       <Container className="mt--7" fluid>
         <Row className="mt-0">
           <Col className="order-xl-2">
@@ -315,7 +387,6 @@ const MembersSearch = () => {
                         </FormGroup>
                         </Row>
                         <Row>
-                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                           <Button 
                             className="form-control-alternative text-align-right"
                             color="danger"
@@ -337,12 +408,20 @@ const MembersSearch = () => {
             <Card className="bg-secondary shadow"> 
               <CardHeader className="border-0">
                 <Row className="align-items-center">
-                  <div className="col">
-                    <h3 className="mb-0">Channel Metadata Results</h3>
-                  </div>
-                  <div className="col text-right">
-                  </div>
+                  <Col>
+                    <h3 className="mb-0">Channel Members Results</h3>
+                  </Col>
+                  <Col lg="2" className="text-center">
+                    <Button
+                      color="info"
+                      onClick={toggle}
+                      disabled = {keySetContext.pubnub == null || channelId === ""}
+                    >
+                      Add Members
+                    </Button>
+                  </Col>
                 </Row>
+                
               </CardHeader>      
 
               <CardBody>
@@ -379,7 +458,7 @@ export default MembersSearch;
 const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage, handleChangeRowsPerPage, isTruncate, setIsTruncate, handleRemove, handleEdit}) => {
   console.log("MetadataTable", metadata);
 
-  if (metadata == null || metadata.length ===0) return <><h2>No Results</h2></>;
+  if (metadata == null || metadata.length ===0) return <>No Results</>;
 
   return (
     <Paper sx={{ width: '100%', overflow: 'hidden' }}>
diff --git a/src/tools/ObjectAdmin/pages/UsersSearch.js b/src/tools/ObjectAdmin/pages/UsersSearch.js
index 3a66ec4..58b517a 100755
--- a/src/tools/ObjectAdmin/pages/UsersSearch.js
+++ b/src/tools/ObjectAdmin/pages/UsersSearch.js
@@ -88,7 +88,7 @@ const UsersSearch = () => {
   const [sweetAlert, setSweetAlert] = useState(null);
   const history = useHistory();
 
-  async function retrieveUser() {
+  const retrieveUser = async () => {
     console.log("userFilter", userFilter);
 
     let more = true;
@@ -356,7 +356,6 @@ const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage
     <Paper sx={{ width: '100%', overflow: 'hidden' }}>
       <TableContainer >
         <Table stickyHeader>
-
           <TableHead>
             <TableRow>
               <TableCell colSpan="4">
@@ -400,7 +399,7 @@ const MetadataTable = ({metadata, rowsPerPage, page, emptyRows, handleChangePage
               ? metadata.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
               : metadata
             ).map((row, index) => (
-              <MetadataRow index={(index + (page * rowsPerPage))} row={row.uuid} isTruncate={isTruncate} 
+              <MetadataRow index={(index + (page * rowsPerPage))} row={row} isTruncate={isTruncate} 
                 handleRemove={handleRemove} 
                 handleEdit={handleEdit}
               />

From 46d86485f0f60fddd709da0d5c0126e8a8d8127e Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Mon, 15 Nov 2021 21:49:48 -0700
Subject: [PATCH 5/7] nothing really

---
 src/tools/ObjectAdmin/pages/MembersSearch.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/tools/ObjectAdmin/pages/MembersSearch.js b/src/tools/ObjectAdmin/pages/MembersSearch.js
index cfd2a40..31a8cdc 100755
--- a/src/tools/ObjectAdmin/pages/MembersSearch.js
+++ b/src/tools/ObjectAdmin/pages/MembersSearch.js
@@ -116,12 +116,9 @@ const MembersSearch = () => {
         uuids: newMembers.current
       });
 
+      // console.log("    result", result);
       retrieveMetadata();
-
-      // let temp = Array.from(objectAdminContext.channelMembersResults);
-      // objectAdminContext.setChannelMembersResults(temp.concat(result));
-
-      console.log("    setChannelMembers result", result)
+      // objectAdminContext.setChannelMembersResults(result.data);
     } 
     catch (status) {
       console.log("operation failed w/ error:", status);

From f6c16df1cade5d73c384866916a5672b04f8b18d Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Tue, 16 Nov 2021 06:05:51 -0700
Subject: [PATCH 6/7] changed object icon; added auth token to key set init and
 moved initialize button to top of form

---
 src/tools/KeySet.js                          | 36 ++++++++++++++++++--
 src/tools/KeySetProvider.js                  |  8 +++--
 src/tools/ObjectAdmin/pages/MembersSearch.js |  6 ++--
 src/tools/ObjectAdmin/routesObjectAdmin.js   |  4 +--
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/tools/KeySet.js b/src/tools/KeySet.js
index 24ad1fe..7c5d432 100755
--- a/src/tools/KeySet.js
+++ b/src/tools/KeySet.js
@@ -57,6 +57,7 @@ const KeySet = () => {
   const [pubKey, setPubKey] = useState(keySetContext.pubKey);
   const [secKey, setSecKey] = useState(keySetContext.secKey);
   const [uuid, setUuid] = useState(keySetContext.uuid);
+  const [authToken, setAuthToken] = useState(keySetContext.authToken);
 
   // const [authKey, setAuthKey] = useState();
   const [tab, setTab] = useState(2);
@@ -83,7 +84,7 @@ const KeySet = () => {
       subKey: subKey,
       secKey: secKey,
       uuid: uuid,
-      // authKey: authKey,
+      authKey: authToken,
     });
   }
 
@@ -305,6 +306,15 @@ const KeySet = () => {
                                       keySetName={keySetContext.keySetName}
                                     />
                                   </Col>
+                                  <div className="col text-right">
+                                    <Button
+                                      color="danger"
+                                      disabled={subKey === ""}
+                                      onClick={submitForm}
+                                    >
+                                      Initialize
+                                    </Button>
+                                  </div>
                                 </Row>
                                 <Row>
                                   <Col>
@@ -389,10 +399,30 @@ const KeySet = () => {
                                     </FormGroup>
                                   </Col>
                                 </Row>
+                                <Row>
+                                  <Col>
+                                    <FormGroup>
+                                      <label
+                                        className="form-control-label"
+                                        htmlFor="input-auth-token"
+                                      >
+                                        Auth Token (Auth Key)
+                                      </label>
+                                      <Input
+                                        className="form-control-alternative"
+                                        id="input-auth-token"
+                                        placeholder="Enter auth token/key if required"
+                                        type="text"
+                                        name="auth-token"
+                                        onChange={(e) => setAuthToken(e.target.value)}
+                                      />
+                                    </FormGroup>
+                                  </Col>
+                                </Row>
                               </div>
                             </CardBody>
                             <CardFooter>
-                            <div className="col text-right">
+                            {/* <div className="col text-right">
                                 <Button
                                   color="danger"
                                   disabled={subKey === ""}
@@ -400,7 +430,7 @@ const KeySet = () => {
                                 >
                                   Initialize
                                 </Button>
-                              </div>
+                              </div> */}
                             </CardFooter>
                           </Form>
                         </Card>
diff --git a/src/tools/KeySetProvider.js b/src/tools/KeySetProvider.js
index 7fc4ec2..755cf05 100644
--- a/src/tools/KeySetProvider.js
+++ b/src/tools/KeySetProvider.js
@@ -11,14 +11,16 @@ export const KeySetProvider = ({ children }) => {
   const [subKey, setSubKey] = useState("");
   const [secKey, setSecKey] = useState("");
   const [uuid, setUuid] = useState("");
+  const [authToken, setAuthToken] = useState("");
   const [keySetProps, setKeySetProps] = useState();
 
   const initKeySet = (keySetConfig) => {
     const pn = new PubNub({
       subscribeKey: keySetConfig.subKey,
-      publishKey: keySetConfig.pubKey,
-      secretKey: keySetConfig.secKey,
+      publishKey: keySetConfig.pubKey, // conditional null check?
+      secretKey: keySetConfig.secKey, // conditional null check?
       uuid: (keySetConfig.uuid !== null ? keySetConfig.uuid : null),
+      authKey: (keySetConfig.authToken !== null ? keySetConfig.authToken : null),
     });
 
     setKeySetName(keySetConfig.keySetName);
@@ -32,6 +34,7 @@ export const KeySetProvider = ({ children }) => {
       setSubKey(pn._config.subscribeKey);
       setSecKey(pn._config.secretKey);
       setUuid(pn.getUUID());
+      // setAuthToken(pn.getToken) no api???
       setPubNub(pn);
     }).catch((error) => {
         console.log("key set init failed:", error);
@@ -57,6 +60,7 @@ export const KeySetProvider = ({ children }) => {
     pubKey, setSubKey,
     secKey, setSecKey,
     uuid, setUuid,
+    authToken, setAuthToken,
     keySetProps, setKeySetProps,
     status,
     pubnub,
diff --git a/src/tools/ObjectAdmin/pages/MembersSearch.js b/src/tools/ObjectAdmin/pages/MembersSearch.js
index 31a8cdc..d705d56 100755
--- a/src/tools/ObjectAdmin/pages/MembersSearch.js
+++ b/src/tools/ObjectAdmin/pages/MembersSearch.js
@@ -117,7 +117,7 @@ const MembersSearch = () => {
       });
 
       // console.log("    result", result);
-      retrieveMetadata();
+      retrieveMembers();
       // objectAdminContext.setChannelMembersResults(result.data);
     } 
     catch (status) {
@@ -141,7 +141,7 @@ const MembersSearch = () => {
     else toast.info(title, params);
   }
 
-  const retrieveMetadata = async () => {
+  const retrieveMembers = async () => {
     console.log("retrieveMetadata", channelId, memberFilter);
 
     let more = true;
@@ -387,7 +387,7 @@ const MembersSearch = () => {
                           <Button 
                             className="form-control-alternative text-align-right"
                             color="danger"
-                            onClick={retrieveMetadata}
+                            onClick={retrieveMembers}
                             disabled = {keySetContext.pubnub == null || channelId == null}
                           >
                             Search Members
diff --git a/src/tools/ObjectAdmin/routesObjectAdmin.js b/src/tools/ObjectAdmin/routesObjectAdmin.js
index 8192ecd..7c7d603 100644
--- a/src/tools/ObjectAdmin/routesObjectAdmin.js
+++ b/src/tools/ObjectAdmin/routesObjectAdmin.js
@@ -1,5 +1,5 @@
 // @mui/icons-material
-import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
 
 // app pages
 import { ObjectAdminProvider } from "./ObjectAdminProvider";
@@ -19,7 +19,7 @@ import ImportUsers from './pages/ImportUsers';
 var routesObjectAdmin = {
   collapse: true,
   name: "Objects Admin",
-  icon: SettingsEthernetIcon,
+  icon: AccountTreeIcon,
   iconColor: "Primary",
   state: "objectAdminCollapse",
   views: [

From ee0cba7f58cbcc422869fcfce99a131968fa40fd Mon Sep 17 00:00:00 2001
From: Craig Conover <cvconover@gmail.com>
Date: Tue, 16 Nov 2021 12:32:56 -0700
Subject: [PATCH 7/7] key set UI/UX enhancments and bug fixes; using mui Select
 instead of previous component; added authToken; next implement uninit

---
 src/tools/KeySet.js | 108 ++++++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 50 deletions(-)

diff --git a/src/tools/KeySet.js b/src/tools/KeySet.js
index 7c5d432..cad4f27 100755
--- a/src/tools/KeySet.js
+++ b/src/tools/KeySet.js
@@ -17,8 +17,8 @@
 */
 import { useState } from "react";
 import classnames from "classnames";
-// import { ToastContainer, toast } from 'react-toastify';
-// import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 // reactstrap components
 import {
@@ -33,10 +33,10 @@ import {
   Row,
   Col,
   CardFooter,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-  UncontrolledDropdown,
+  // DropdownToggle,
+  // DropdownMenu,
+  // DropdownItem,
+  // UncontrolledDropdown,
   Table,
   Nav,
   NavLink,
@@ -47,6 +47,8 @@ import {
 
 // core components
 import { useKeySetData } from "./KeySetProvider";
+import { MenuItem } from "@material-ui/core";
+import { InputLabel, Select } from "@mui/material";
 
 const KeySet = () => {
   const keySetContext = useKeySetData();
@@ -78,6 +80,7 @@ const KeySet = () => {
   }
 
   const submitForm = () => {
+
     keySetContext.initKeySet({
       keySetName: keySetName,
       pubKey: pubKey,
@@ -86,34 +89,48 @@ const KeySet = () => {
       uuid: uuid,
       authKey: authToken,
     });
+
+    notify("Key Set Initialized");
   }
 
   const keySetSelected = (index) => {
     console.log("keySetSelected: index: ", index);
     console.log("    keSetProps: ", keySetContext.keySetProps);
 
-    const keySet = keySetContext.keySetProps.pn_keys[index];
-    setKeySetName(keySet.name);
-    setPubKey(keySet.pub_key);
-    setSubKey(keySet.sub_key);
-    setSecKey(keySet.secret_key);
+    if (index === -1) {
+      setKeySetName("Key Set Not Selected");
+      setPubKey("");
+      setSubKey("");
+      setSecKey("");
+      setUuid("");
+      setAuthToken("");
+    }
+    else {
+      const keySet = keySetContext.keySetProps.pn_keys[index];
+      setKeySetName(keySet.name);
+      setPubKey(keySet.pub_key);
+      setSubKey(keySet.sub_key);
+      setSecKey(keySet.secret_key);
+      setUuid(keySet.uuid);
+      setAuthToken(keySet.authToken);
+    }
   }
 
-  // const notify = (title) => {
-  //   toast.success(title, {
-  //     position: "top-center",
-  //     autoClose: 3000,
-  //     hideProgressBar: false,
-  //     closeOnClick: true,
-  //     pauseOnHover: true,
-  //     draggable: true,
-  //     progress: undefined,
-  //   });
-  // }
+  const notify = (title) => {
+    toast.success(title, {
+      position: "top-center",
+      autoClose: 3000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: true,
+      progress: undefined,
+    });
+  }
   
   return (
     <>
-      {/* <ToastContainer
+      <ToastContainer
         position="top-center"
         autoClose={3000}
         hideProgressBar={false}
@@ -123,7 +140,7 @@ const KeySet = () => {
         pauseOnFocusLoss
         draggable
         pauseOnHover
-      /> */}
+      />
       <Container className="mt--7" fluid>
         <Row className="mt-0">
           <Col className="order-xl-2">
@@ -421,17 +438,7 @@ const KeySet = () => {
                                 </Row>
                               </div>
                             </CardBody>
-                            <CardFooter>
-                            {/* <div className="col text-right">
-                                <Button
-                                  color="danger"
-                                  disabled={subKey === ""}
-                                  onClick={submitForm}
-                                >
-                                  Initialize
-                                </Button>
-                              </div> */}
-                            </CardFooter>
+
                           </Form>
                         </Card>
                       </Col>
@@ -473,26 +480,27 @@ const KeySetSelector = (props) => {
   }
 
   const options = props.keySets.pn_keys.map((item, index) =>
-      <DropdownItem key={index} onClick={() => props.keySetSelected(index)}>
-        {item.name + ":  " + item.sub_key.substring(0,14)}
-      </DropdownItem>
-    /* <DropdownItem divider /> */
+    <MenuItem key={index} value={index} onClick={() => props.keySetSelected(index)}>
+      {item.name + ":  " + item.sub_key.substring(0,14)}
+    </MenuItem>
   );
 
   return (
-    // <div className="col text-left">
       <>
-        <UncontrolledDropdown group>
-          <DropdownToggle width="100px" caret color="danger">
-            {props.keySetName}
-          </DropdownToggle>
-          <DropdownMenu>
-            {options}
-          </DropdownMenu>
-        </UncontrolledDropdown>
+        <InputLabel htmlFor="select-key-set">Key Sets</InputLabel>
+        <Select 
+          variant="standard"
+          defaultValue={-1} 
+          id="select-key-set" 
+          label="Key Sets" 
+          autoWidth={true}
+        >
+          <MenuItem value={-1} onClick={() => props.keySetSelected(-1)}>
+            Select a Key Set
+          </MenuItem>
+          {options}
+        </Select>
         <p />
       </>
-    // </div>
-
   );
 }
\ No newline at end of file