added search term ability in InviteUser component

src/app/organisms/invite-user/InviteUser.jsx

@@ -18,7 +18,9 @@ import ChannelTile from '../../molecules/channel-tile/ChannelTile';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 
-function InviteUser({ isOpen, roomId, onRequestClose }) {
+function InviteUser({
+  isOpen, roomId, searchTerm, onRequestClose,
+}) {
   const [isSearching, updateIsSearching] = useState(false);
   const [searchQuery, updateSearchQuery] = useState({});
   const [users, updateUsers] = useState([]);
@@ -63,26 +65,8 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
     updateRoomIdToUserId(getMapCopy(roomIdToUserId));
   }
 
-  useEffect(() => () => {
+  async function searchUser(username) {
-    updateIsSearching(false);
+    const inputUsername = username.trim();
-    updateSearchQuery({});
-    updateUsers([]);
-    updateProcUsers(new Set());
-    updateUserProcError(new Map());
-    updateCreatedDM(new Map());
-    updateRoomIdToUserId(new Map());
-    updateInvitedUserIds(new Set());
-  }, [isOpen]);
-
-  useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOM_CREATED, onDMCreated);
-    return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_CREATED, onDMCreated);
-    };
-  }, [isOpen, procUsers, createdDM, roomIdToUserId]);
-
-  async function searchUser() {
-    const inputUsername = usernameRef.current.value.trim();
     if (isSearching || inputUsername === '' || inputUsername === searchQuery.username) return;
     const isInputUserId = inputUsername[0] === '@' && inputUsername.indexOf(':') > 1;
     updateIsSearching(true);
@@ -216,6 +200,27 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
     });
   }
 
+  useEffect(() => {
+    if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
+    return () => {
+      updateIsSearching(false);
+      updateSearchQuery({});
+      updateUsers([]);
+      updateProcUsers(new Set());
+      updateUserProcError(new Map());
+      updateCreatedDM(new Map());
+      updateRoomIdToUserId(new Map());
+      updateInvitedUserIds(new Set());
+    };
+  }, [isOpen, searchTerm]);
+
+  useEffect(() => {
+    initMatrix.roomList.on(cons.events.roomList.ROOM_CREATED, onDMCreated);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_CREATED, onDMCreated);
+    };
+  }, [isOpen, procUsers, createdDM, roomIdToUserId]);
+
   return (
     <PopupWindow
       isOpen={isOpen}
@@ -224,8 +229,8 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
       onRequestClose={onRequestClose}
     >
       <div className="invite-user">
-        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(); }}>
+        <form className="invite-user__form" onSubmit={(e) => { e.preventDefault(); searchUser(usernameRef.current.value); }}>
-          <Input forwardRef={usernameRef} label="Username or userId" />
+          <Input value={searchTerm} forwardRef={usernameRef} label="Username or userId" />
           <Button disabled={isSearching} iconSrc={UserIC} variant="primary" type="submit">Search</Button>
         </form>
         <div className="invite-user__search-status">
@@ -258,11 +263,13 @@ function InviteUser({ isOpen, roomId, onRequestClose }) {
 
 InviteUser.defaultProps = {
   roomId: undefined,
+  searchTerm: undefined,
 };
 
 InviteUser.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   roomId: PropTypes.string,
+  searchTerm: PropTypes.string,
   onRequestClose: PropTypes.func.isRequired,
 };
 

src/app/organisms/pw/Windows.jsx

@@ -13,7 +13,9 @@ function Windows() {
   const [isInviteList, changeInviteList] = useState(false);
   const [isPubilcChannels, changePubilcChannels] = useState(false);
   const [isCreateChannel, changeCreateChannel] = useState(false);
-  const [inviteUser, changeInviteUser] = useState({ isOpen: false, roomId: undefined });
+  const [inviteUser, changeInviteUser] = useState({
+    isOpen: false, roomId: undefined, term: undefined,
+  });
   const [settings, changeSettings] = useState(false);
 
   function openInviteList() {
@@ -25,10 +27,11 @@ function Windows() {
   function openCreateChannel() {
     changeCreateChannel(true);
   }
-  function openInviteUser(roomId) {
+  function openInviteUser(roomId, searchTerm) {
     changeInviteUser({
       isOpen: true,
       roomId,
+      searchTerm,
     });
   }
   function openSettings() {
@@ -67,6 +70,7 @@ function Windows() {
       <InviteUser
         isOpen={inviteUser.isOpen}
         roomId={inviteUser.roomId}
+        searchTerm={inviteUser.searchTerm}
         onRequestClose={() => changeInviteUser({ isOpen: false, roomId: undefined })}
       />
       <Settings

src/client/action/navigation.js

@@ -39,10 +39,11 @@ function openCreateChannel() {
   });
 }
 
-function openInviteUser(roomId) {
+function openInviteUser(roomId, searchTerm) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_USER,
     roomId,
+    searchTerm,
   });
 }
 

src/client/state/navigation.js

@@ -43,7 +43,7 @@ class Navigation extends EventEmitter {
         this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED);
       },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
-        this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId);
+        this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
       },
       [cons.actions.navigation.OPEN_SETTINGS]: () => {
         this.emit(cons.events.navigation.SETTINGS_OPENED);