Fix big grid crashing due to missing React import

by fixing the cause rather than the symptom: this upgrades the code to use the new, recommended JSX transform mode of React 17+, which no longer requires you to import React manually just to write JSX.

src/room/CallEndedView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FormEventHandler, useCallback, useState } from "react";
+import { FormEventHandler, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";

src/room/GridLayoutMenu.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Item } from "@react-stately/collections";
 import { useTranslation } from "react-i18next";
 

src/room/GroupCallInspector.tsx

@@ -16,13 +16,16 @@ limitations under the License.
 
 import * as Sentry from "@sentry/react";
 import { Resizable } from "re-resizable";
-import React, {
+import {
   useEffect,
   useState,
   useReducer,
   useRef,
   createContext,
   useContext,
+  Dispatch,
+  SetStateAction,
+  ReactNode,
 } from "react";
 import ReactJson, { CollapsedFieldProps } from "react-json-view";
 import mermaid from "mermaid";
@@ -136,16 +139,13 @@ function lineForEvent(event: SequenceDiagramMatrixEvent): string {
 
 export const InspectorContext =
   createContext<
-    [
-      InspectorContextState,
-      React.Dispatch<React.SetStateAction<InspectorContextState>>
-    ]
+    [InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
   >(undefined);
 
 export function InspectorContextProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   // We take the tuple of [currentState, setter] and stick
   // it straight into the context for other things to call

src/room/GroupCallLoader.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useTranslation } from "react-i18next";

src/room/GroupCallView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";

src/room/InCallView.tsx

@@ -28,7 +28,7 @@ import { Room, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import React, { Ref, useCallback, useEffect, useMemo, useRef } from "react";
+import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -50,11 +50,7 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import {
-  VideoGrid,
-  useVideoGridLayout,
-  TileDescriptor,
-} from "../video-grid/VideoGrid";
+import { useVideoGridLayout, TileDescriptor } from "../video-grid/VideoGrid";
 import {
   useShowInspector,
   useShowConnectionStats,
@@ -249,8 +245,7 @@ export function InCallView({
     [fullscreenItem, noControls, items]
   );
 
-  const Grid =
-    items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
+  const Grid = NewVideoGrid;
 
   const prefersReducedMotion = usePrefersReducedMotion();
 

src/room/InviteModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";

src/room/LobbyView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { useRef, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
@@ -39,14 +39,14 @@ export function LobbyView(props: Props) {
   const { t } = useTranslation();
   useLocationNavigation();
 
-  const joinCallButtonRef = React.useRef<HTMLButtonElement>();
-  React.useEffect(() => {
+  const joinCallButtonRef = useRef<HTMLButtonElement>();
+  useEffect(() => {
     if (joinCallButtonRef.current) {
       joinCallButtonRef.current.focus();
     }
   }, [joinCallButtonRef]);
 
-  const [userChoices, setUserChoices] = React.useState<UserChoices | undefined>(
+  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
     undefined
   );
 

src/room/RageshakeRequestModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";

src/room/RoomAuthView.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 

src/room/RoomPage.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect, useState, useCallback } from "react";
+import { FC, useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";

src/room/RoomRedirect.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useLocation, useHistory } from "react-router-dom";
 
 import { Config } from "../config/Config";

src/room/VideoPreview.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -65,8 +65,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
   const mediaDevices = useMediaDevices();
 
   // Create local media tracks.
-  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(true);
+  const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
+  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
   const [videoId, audioId] = [
     mediaDevices.videoIn.selectedId,
     mediaDevices.audioIn.selectedId,
@@ -85,7 +85,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
 
   const activeVideoId = video?.selectedDevice?.deviceId;
   const activeAudioId = audio?.selectedDevice?.deviceId;
-  React.useEffect(() => {
+  useEffect(() => {
     const createChoices = (
       enabled: boolean,
       deviceId?: string
@@ -116,7 +116,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     mediaDevices.videoIn.setSelected,
     mediaDevices.audioIn.setSelected,
   ];
-  React.useEffect(() => {
+  useEffect(() => {
     if (activeVideoId && activeVideoId !== "") {
       selectVideo(activeVideoId);
     }
@@ -125,8 +125,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     }
   }, [selectVideo, selectAudio, activeVideoId, activeAudioId]);
 
-  const mediaElement = React.useRef(null);
-  React.useEffect(() => {
+  const mediaElement = useRef(null);
+  useEffect(() => {
     if (mediaElement.current) {
       video?.localTrack?.attach(mediaElement.current);
     }