Enable strict lints

An attempt to fix https://github.com/vector-im/element-call/issues/1132

src/home/CallTypeDropdown.tsx

@@ -52,7 +52,15 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
         </Headline>
       </Button>
       {(props: JSX.IntrinsicAttributes) => (
-        <Menu {...props} label={t("Call type menu")} onAction={setCallType}>
+        <Menu
+          {...props}
+          label={t("Call type menu")}
+          onAction={(key) => {
+            const callType = key.toString();
+            setCallType(callType as CallType);
+          }}
+          onClose={() => {}}
+        >
           <Item key={CallType.Video} textValue={t("Video call")}>
             <VideoIcon />
             <span>{t("Video call")}</span>

src/home/HomePage.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import { useTranslation } from "react-i18next";
 
-import { useClient } from "../ClientContext";
+import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";
@@ -26,16 +26,18 @@ export function HomePage() {
   const { t } = useTranslation();
   usePageTitle(t("Home"));
 
-  const { isAuthenticated, isPasswordlessUser, loading, error, client } =
-    useClient();
+  const clientState = useClientState();
 
-  if (loading) {
+  if (!clientState) {
     return <LoadingView />;
-  } else if (error) {
-    return <ErrorView error={error} />;
+  } else if (clientState.state === "error") {
+    return <ErrorView error={clientState.error} />;
   } else {
-    return isAuthenticated ? (
-      <RegisteredView isPasswordlessUser={isPasswordlessUser} client={client} />
+    return clientState.authenticated ? (
+      <RegisteredView
+        isPasswordlessUser={clientState.authenticated.isPasswordlessUser}
+        client={clientState.authenticated.client}
+      />
     ) : (
       <UnauthenticatedView />
     );

src/home/UnauthenticatedView.tsx

@@ -83,11 +83,17 @@ export const UnauthenticatedView: FC = () => {
         try {
           [roomIdOrAlias] = await createRoom(client, roomName, ptt);
         } catch (error) {
+          if (!setClient) {
+            throw error;
+          }
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           if (error.errcode === "M_ROOM_IN_USE") {
             setOnFinished(() => {
-              setClient(client, session);
+              setClient({ client, session });
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              const [, serverName] = client.getUserId().split(":");
+              const [, serverName] = client.getUserId()!.split(":");
               history.push(`/room/#${aliasLocalpart}:${serverName}`);
             });
 
@@ -100,7 +106,11 @@ export const UnauthenticatedView: FC = () => {
         }
 
         // Only consider the registration successful if we managed to create the room, too
-        setClient(client, session);
+        if (!setClient) {
+          throw new Error("setClient is undefined");
+        }
+
+        setClient({ client, session });
         history.push(`/room/${roomIdOrAlias}`);
       }
 
@@ -204,7 +214,7 @@ export const UnauthenticatedView: FC = () => {
           </Body>
         </footer>
       </div>
-      {modalState.isOpen && (
+      {modalState.isOpen && onFinished && (
         <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
       )}
     </>

src/home/useGroupCallRooms.ts

@@ -42,7 +42,7 @@ function getLastTs(client: MatrixClient, r: Room) {
     return ts;
   }
 
-  const myUserId = client.getUserId();
+  const myUserId = client.getUserId()!;
 
   if (r.getMyMembership() !== "join") {
     const membershipEvent = r.currentState.getStateEvents(
@@ -79,25 +79,30 @@ function sortRooms(client: MatrixClient, rooms: Room[]): Room[] {
 }
 
 export function useGroupCallRooms(client: MatrixClient): GroupCallRoom[] {
-  const [rooms, setRooms] = useState([]);
+  const [rooms, setRooms] = useState<GroupCallRoom[]>([]);
 
   useEffect(() => {
     function updateRooms() {
+      if (!client.groupCallEventHandler) {
+        return;
+      }
+
       const groupCalls = client.groupCallEventHandler.groupCalls.values();
       const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
       const sortedRooms = sortRooms(client, rooms);
       const items = sortedRooms.map((room) => {
-        const groupCall = client.getGroupCallForRoom(room.roomId);
+        const groupCall = client.getGroupCallForRoom(room.roomId)!;
 
         return {
           roomId: room.getCanonicalAlias() || room.roomId,
           roomName: room.name,
-          avatarUrl: room.getMxcAvatarUrl(),
+          avatarUrl: room.getMxcAvatarUrl()!,
           room,
           groupCall,
-          participants: [...groupCall.participants],
+          participants: [...groupCall!.participants.keys()],
         };
       });
+
       setRooms(items);
     }