test: mvvm userinfoadmintools and view

Author: MarcWadai

src/components/viewmodels/right_panel/UserInfoAdminToolsContainerViewModel.tsx

@@ -5,19 +5,19 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { useContext } from "react";
-import { type Room, RoomMember, KnownMembership, IPowerLevelsContent } from "matrix-js-sdk/src/matrix";
+import { type Room, type RoomMember, KnownMembership, type IPowerLevelsContent } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import ConfirmSpaceUserActionDialog from "../../views/dialogs/ConfirmSpaceUserActionDialog";
 import Modal from "../../../Modal";
-import { logger } from "matrix-js-sdk/src/logger";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { _t } from "../../../languageHandler";
 import { bulkSpaceBehaviour } from "../../../utils/space";
 import ConfirmUserActionDialog from "../../views/dialogs/ConfirmUserActionDialog";
 import ErrorDialog from "../../views/dialogs/ErrorDialog";
 import BulkRedactDialog from "../../views/dialogs/BulkRedactDialog";
 
-interface RoomAdminToolsProps {
+export interface RoomAdminToolsProps {
     room: Room;
     member: RoomMember;
     isUpdating: boolean;
@@ -40,8 +40,8 @@ interface RoomKickButtonState {
  * @param stopUpdating - a function to stop the operation
  * @returns the room kick button state
  */
-export function useRoomKickButtonViewModel( props: RoomAdminToolsProps ): RoomKickButtonState {
-    const {isUpdating, startUpdating, stopUpdating, room, member} = props;
+export function useRoomKickButtonViewModel(props: RoomAdminToolsProps): RoomKickButtonState {
+    const { isUpdating, startUpdating, stopUpdating, room, member } = props;
 
     const cli = useContext(MatrixClientContext);
 
@@ -122,7 +122,7 @@ export function useRoomKickButtonViewModel( props: RoomAdminToolsProps ): RoomKi
             });
     };
 
-    const canUserBeKicked = member.membership !== KnownMembership.Invite && member.membership !== KnownMembership.Join;
+    const canUserBeKicked = member.membership === KnownMembership.Invite || member.membership === KnownMembership.Join;
 
     const kickLabel = room.isSpaceRoom()
         ? member.membership === KnownMembership.Invite
@@ -139,7 +139,6 @@ export function useRoomKickButtonViewModel( props: RoomAdminToolsProps ): RoomKi
     };
 }
 
-
 export interface RedactMessagesButtonState {
     onRedactAllMessagesClick: () => void;
 }
@@ -149,7 +148,7 @@ export interface RedactMessagesButtonState {
  * @param member - the member to redact messages for
  * @returns the redact messages button state
  */
-export const userRedactMessagesButtonViewModel = (member: RoomMember): RedactMessagesButtonState => {
+export const useRedactMessagesButtonViewModel = (member: RoomMember): RedactMessagesButtonState => {
     const cli = useContext(MatrixClientContext);
 
     const onRedactAllMessagesClick = (): void => {
@@ -168,12 +167,12 @@ export const userRedactMessagesButtonViewModel = (member: RoomMember): RedactMes
     };
 };
 
-export interface BanToggleButtonState {
+export interface BanButtonState {
     onBanOrUnbanClick: () => void;
     banLabel: string;
 }
 
-export const userBanToggleButtonViewModel = (props: RoomAdminToolsProps): BanToggleButtonState => {
+export const useBanButtonViewModel = (props: RoomAdminToolsProps): BanButtonState => {
     const { isUpdating, startUpdating, stopUpdating, room, member } = props;
 
     const cli = useContext(MatrixClientContext);
@@ -281,17 +280,17 @@ export const userBanToggleButtonViewModel = (props: RoomAdminToolsProps): BanTog
                 stopUpdating();
             });
     };
-    
+
     return {
         onBanOrUnbanClick,
         banLabel,
     };
-}
+};
 
 interface MuteButtonState {
     isMemberInTheRoom: boolean;
     muteLabel: string;
-    onMutebuttonClick: () => void;
+    onMuteButtonClick: () => void;
 }
 
 export const useMuteButtonViewModel = (props: RoomAdminToolsProps): MuteButtonState => {
@@ -320,7 +319,7 @@ export const useMuteButtonViewModel = (props: RoomAdminToolsProps): MuteButtonSt
 
     const isMemberInTheRoom = member.membership !== KnownMembership.Join;
 
-    const onMutebuttonClick = async (): Promise<void> => {
+    const onMuteButtonClick = async (): Promise<void> => {
         if (isUpdating) return; // only allow one operation at a time
         startUpdating();
 
@@ -367,7 +366,7 @@ export const useMuteButtonViewModel = (props: RoomAdminToolsProps): MuteButtonSt
 
     return {
         isMemberInTheRoom,
-        onMutebuttonClick,
+        onMuteButtonClick,
         muteLabel,
     };
 };
@@ -380,12 +379,12 @@ interface UserInfoAdminToolsContainerState {
     isCurrentUserInTheRoom: boolean;
 }
 
-interface RoomAdminToolsContainerProps {
+export interface RoomAdminToolsContainerProps {
     room: Room;
     member: RoomMember;
     powerLevels: IPowerLevelsContent;
     children: React.ReactNode;
-};
+}
 
 export const useUserInfoAdminToolsContainerViewModel = (
     props: RoomAdminToolsContainerProps,
@@ -409,7 +408,7 @@ export const useUserInfoAdminToolsContainerViewModel = (
             shouldShowMuteButton: false,
             shouldShowRedactButton: false,
             isCurrentUserInTheRoom: false,
-        }
+        };
     }
 
     const isMe = me.userId === member.userId;
@@ -422,4 +421,4 @@ export const useUserInfoAdminToolsContainerViewModel = (
         shouldShowMuteButton: !isMe && canAffectUser && me.powerLevel >= Number(editPowerLevel) && !room.isSpaceRoom(),
         isCurrentUserInTheRoom,
     };
-};
+};

src/components/views/right_panel/user_info/UserInfoAdminToolsContainer.tsx

@@ -7,21 +7,22 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type ReactNode } from "react";
 import classNames from "classnames";
-import {
-    RoomMember,
-    type Room,
-} from "matrix-js-sdk/src/matrix";
+import { type RoomMember, type Room } from "matrix-js-sdk/src/matrix";
 import { MenuItem } from "@vector-im/compound-web";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
 import VisibilityOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
 import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
 
 import { _t } from "../../../../languageHandler";
-import { IPowerLevelsContent } from "../UserInfo";
-import { useMuteButtonViewModel, userBanToggleButtonViewModel, useRoomKickButtonViewModel, userRedactMessagesButtonViewModel, useUserInfoAdminToolsContainerViewModel } from "../../../viewmodels/right_panel/UserInfoAdminToolsContainerViewModel";
-
-
+import { type IPowerLevelsContent } from "../UserInfo";
+import {
+    useMuteButtonViewModel,
+    useBanButtonViewModel,
+    useRoomKickButtonViewModel,
+    useRedactMessagesButtonViewModel,
+    useUserInfoAdminToolsContainerViewModel,
+} from "../../../viewmodels/right_panel/UserInfoAdminToolsContainerViewModel";
 
 const Container: React.FC<{
     children: ReactNode;
@@ -31,8 +32,6 @@ const Container: React.FC<{
     return <div className={classes}>{children}</div>;
 };
 
-
-
 interface IBaseProps {
     member: RoomMember;
     isUpdating: boolean;
@@ -47,9 +46,9 @@ export const RoomKickButton = ({
     startUpdating,
     stopUpdating,
 }: Omit<IBaseRoomProps, "powerLevels">): JSX.Element | null => {
-    const vm = useRoomKickButtonViewModel({room, member, isUpdating, startUpdating, stopUpdating});
+    const vm = useRoomKickButtonViewModel({ room, member, isUpdating, startUpdating, stopUpdating });
     // check if user can be kicked/disinvited
-    if (vm.canUserBeKicked) return <></>;
+    if (!vm.canUserBeKicked) return <></>;
 
     return (
         <MenuItem
@@ -67,7 +66,7 @@ export const RoomKickButton = ({
 };
 
 const RedactMessagesButton: React.FC<IBaseProps> = ({ member }) => {
-    const vm = userRedactMessagesButtonViewModel(member);
+    const vm = useRedactMessagesButtonViewModel(member);
 
     return (
         <MenuItem
@@ -90,8 +89,7 @@ export const BanToggleButton = ({
     startUpdating,
     stopUpdating,
 }: Omit<IBaseRoomProps, "powerLevels">): JSX.Element => {
-
-    const vm = userBanToggleButtonViewModel({room, member, isUpdating, startUpdating, stopUpdating});
+    const vm = useBanButtonViewModel({ room, member, isUpdating, startUpdating, stopUpdating });
 
     return (
         <MenuItem
@@ -114,7 +112,6 @@ interface IBaseRoomProps extends IBaseProps {
     children?: ReactNode;
 }
 
-
 // We do not show a Mute button for ourselves so it doesn't need to handle warning self demotion
 const MuteToggleButton: React.FC<IBaseRoomProps> = ({
     member,
@@ -124,7 +121,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({
     startUpdating,
     stopUpdating,
 }) => {
-    const vm = useMuteButtonViewModel({room, member, isUpdating, startUpdating, stopUpdating});
+    const vm = useMuteButtonViewModel({ room, member, isUpdating, startUpdating, stopUpdating });
 
     // Don't show the mute/unmute option if the user is not in the room
     if (!vm.isMemberInTheRoom) return null;
@@ -134,7 +131,7 @@ const MuteToggleButton: React.FC<IBaseRoomProps> = ({
             role="button"
             onSelect={async (ev) => {
                 ev.preventDefault();
-                vm.onMutebuttonClick();
+                vm.onMuteButtonClick();
             }}
             disabled={isUpdating}
             label={vm.muteLabel}
@@ -160,10 +157,10 @@ export const UserInfoAdminToolsContainer: React.FC<IBaseRoomProps> = ({
 
     const vm = useUserInfoAdminToolsContainerViewModel({ room, member, powerLevels, children });
 
-     if (!vm.isCurrentUserInTheRoom) {
-         // we aren't in the room, so return no admin tooling
-         return <div />;
-     }
+    if (!vm.isCurrentUserInTheRoom) {
+        // we aren't in the room, so return no admin tooling
+        return <div />;
+    }
 
     if (vm.shouldShowKickButton) {
         kickButton = (