typescript src/room (#437)

Author: toger5

src/@types/global.d.ts

@@ -24,7 +24,7 @@ declare global {
 
   // TypeScript doesn't know about the experimental setSinkId method, so we
   // declare it ourselves
-  interface MediaElement extends HTMLMediaElement {
+  interface MediaElement extends HTMLVideoElement {
     setSinkId: (id: string) => void;
   }
 }

src/ClientContext.tsx

@@ -132,6 +132,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           isAuthenticated: Boolean(client),
           isPasswordlessUser,
           userName: client?.getUserIdLocalpart(),
+          error: undefined,
         });
       })
       .catch(() => {
@@ -141,6 +142,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           isAuthenticated: false,
           isPasswordlessUser: false,
           userName: null,
+          error: undefined,
         });
       });
   }, []);
@@ -170,6 +172,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
         isAuthenticated: true,
         isPasswordlessUser: false,
         userName: client.getUserIdLocalpart(),
+        error: undefined,
       });
     },
     [client]
@@ -190,6 +193,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           isAuthenticated: true,
           isPasswordlessUser: session.passwordlessUser,
           userName: newClient.getUserIdLocalpart(),
+          error: undefined,
         });
       } else {
         clearSession();
@@ -200,6 +204,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
           isAuthenticated: false,
           isPasswordlessUser: false,
           userName: null,
+          error: undefined,
         });
       }
     },
@@ -258,6 +263,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
       logout,
       userName,
       setClient,
+      error: undefined,
     }),
     [
       loading,

src/Menu.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { Key, useRef, useState } from "react";
 import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
 import { TreeState, useTreeState } from "@react-stately/tree";
 import { mergeProps } from "@react-aria/utils";
@@ -9,15 +9,17 @@ import { Node } from "@react-types/shared";
 import styles from "./Menu.module.css";
 
 interface MenuProps<T> extends AriaMenuOptions<T> {
-  className: String;
-  onAction: () => void;
-  onClose: () => void;
+  className?: String;
+  onClose?: () => void;
+  onAction: (value: Key) => void;
+  label?: string;
 }
 
 export function Menu<T extends object>({
   className,
   onAction,
   onClose,
+  label,
   ...rest
 }: MenuProps<T>) {
   const state = useTreeState<T>({ ...rest, selectionMode: "none" });
@@ -46,7 +48,7 @@ export function Menu<T extends object>({
 interface MenuItemProps<T> {
   item: Node<T>;
   state: TreeState<T>;
-  onAction: () => void;
+  onAction: (value: Key) => void;
   onClose: () => void;
 }
 

src/SequenceDiagramViewerPage.tsx

@@ -16,13 +16,16 @@ limitations under the License.
 
 import React, { useCallback, useState } from "react";
 
-import { SequenceDiagramViewer } from "./room/GroupCallInspector";
+import {
+  SequenceDiagramViewer,
+  SequenceDiagramMatrixEvent,
+} from "./room/GroupCallInspector";
 import { FieldRow, InputField } from "./input/Input";
 import { usePageTitle } from "./usePageTitle";
 
 interface DebugLog {
   localUserId: string;
-  eventsByUserId: Record<string, {}>;
+  eventsByUserId: { [userId: string]: SequenceDiagramMatrixEvent[] };
   remoteUserIds: string[];
 }
 
@@ -33,7 +36,7 @@ export function SequenceDiagramViewerPage() {
   const [selectedUserId, setSelectedUserId] = useState<string>();
   const onChangeDebugLog = useCallback((e) => {
     if (e.target.files && e.target.files.length > 0) {
-      e.target.files[0].text().then((text) => {
+      e.target.files[0].text().then((text: string) => {
         setDebugLog(JSON.parse(text));
       });
     }

src/UserMenuContainer.tsx

@@ -11,7 +11,7 @@ interface Props {
   preventNavigation?: boolean;
 }
 
-export function UserMenuContainer({ preventNavigation }: Props) {
+export function UserMenuContainer({ preventNavigation = false }: Props) {
   const location = useLocation();
   const history = useHistory();
   const { isAuthenticated, isPasswordlessUser, logout, userName, client } =

src/auth/RegisterPage.tsx

@@ -100,7 +100,7 @@ export const RegisterPage: FC = () => {
       submit()
         .then(() => {
           if (location.state?.from) {
-            history.push(location.state.from);
+            history.push(location.state?.from);
           } else {
             history.push("/");
           }

src/button/Button.tsx

@@ -74,6 +74,7 @@ interface Props {
   children: Element[];
   onPress: (e: PressEvent) => void;
   onPressStart: (e: PressEvent) => void;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }
 export const Button = forwardRef<HTMLButtonElement, Props>(
@@ -136,6 +137,7 @@ export function MicButton({
   ...rest
 }: {
   muted: boolean;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (
@@ -154,6 +156,7 @@ export function VideoButton({
   ...rest
 }: {
   muted: boolean;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (
@@ -174,6 +177,7 @@ export function ScreenshareButton({
 }: {
   enabled: boolean;
   className?: string;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (
@@ -192,6 +196,7 @@ export function HangupButton({
   ...rest
 }: {
   className?: string;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (
@@ -212,6 +217,7 @@ export function SettingsButton({
   ...rest
 }: {
   className?: string;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (
@@ -228,6 +234,7 @@ export function InviteButton({
   ...rest
 }: {
   className?: string;
+  // TODO: add all props for <Button>
   [index: string]: unknown;
 }) {
   return (

src/button/CopyButton.tsx

@@ -23,9 +23,9 @@ import { Button, ButtonVariant } from "./Button";
 
 interface Props {
   value: string;
-  children?: JSX.Element;
-  className: string;
-  variant: ButtonVariant;
+  children?: JSX.Element | string;
+  className?: string;
+  variant?: ButtonVariant;
   copiedMessage?: string;
 }
 export function CopyButton({

src/button/LinkButton.tsx

@@ -14,29 +14,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import React, { HTMLAttributes } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
+import * as H from "history";
 
 import {
   variantToClassName,
   sizeToClassName,
   ButtonVariant,
   ButtonSize,
 } from "./Button";
-interface Props {
-  className?: string;
-  variant?: ButtonVariant;
+
+interface Props extends HTMLAttributes<HTMLAnchorElement> {
+  children: JSX.Element | string;
+  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
   size?: ButtonSize;
-  children: ReactNode;
-  [index: string]: unknown;
+  variant?: ButtonVariant;
+  className?: string;
 }
 
 export function LinkButton({
-  className,
-  variant,
-  size,
   children,
+  to,
+  size,
+  variant,
+  className,
   ...rest
 }: Props) {
   return (
@@ -46,6 +49,7 @@ export function LinkButton({
         sizeToClassName[size],
         className
       )}
+      to={to}
       {...rest}
     >
       {children}

src/home/CallTypeDropdown.tsx

@@ -46,7 +46,7 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
           {callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
         </Headline>
       </Button>
-      {(props) => (
+      {(props: JSX.IntrinsicAttributes) => (
         <Menu {...props} label="Call type menu" onAction={setCallType}>
           <Item key={CallType.Video} textValue="Video call">
             <VideoIcon />