fix: Disable the checkbox of the joined user on the InviteUsersModal (#409)

* Disable the checkbox of the joined user on the InviteUsersModal

Author: HoonBaek

src/smart-components/ChannelSettings/components/ModerationPanel/InviteUsersModal.tsx

@@ -48,7 +48,7 @@ export default function InviteUsers({
         onCancel={() => onCancel()}
         onSubmit={() => {
           const members = Object.keys(selectedMembers).filter((m) => selectedMembers[m]);
-          if(typeof overrideInviteUser === 'function') {
+          if (typeof overrideInviteUser === 'function') {
             overrideInviteUser({
               users: members,
               onClose: onCancel,
@@ -79,26 +79,30 @@ export default function InviteUsers({
           }}
         >
           <div className="sendbird-more-members__popup-scroll__inner">
-            { members.map((member) => (
-              <UserListItem
-                checkBox
-                checked={selectedMembers[member.userId]}
-                onChange={
-                  (event) => {
-                    const modifiedSelectedMembers = {
-                      ...selectedMembers,
-                      [event.target.id]: event.target.checked,
-                    };
-                    if (!event.target.checked) {
-                      delete modifiedSelectedMembers[event.target.id];
+            {members.map((member) => {
+              const isJoinedMember = channel?.members?.some(({ userId }) => userId === member?.userId);
+              return (
+                <UserListItem
+                  checkBox
+                  checked={isJoinedMember || selectedMembers[member.userId]}
+                  disabled={isJoinedMember}
+                  onChange={
+                    (event) => {
+                      const modifiedSelectedMembers = {
+                        ...selectedMembers,
+                        [event.target.id]: event.target.checked,
+                      };
+                      if (!event.target.checked) {
+                        delete modifiedSelectedMembers[event.target.id];
+                      }
+                      setSelectedMembers(modifiedSelectedMembers);
                     }
-                    setSelectedMembers(modifiedSelectedMembers);
                   }
-                }
-                user={member}
-                key={member.userId}
-              />
-            ))}
+                  user={member}
+                  key={member.userId}
+                />
+              );
+            })}
           </div>
         </div>
       </Modal>

src/ui/Checkbox/index.scss

@@ -48,6 +48,7 @@
     border: solid 2px t(primary-3);
   }
   &.disabled {
+    cursor: default;
     @include themed() {
       background-color: t(on-bg-4);
       border: solid 2px t(on-bg-4);