Add ability to properly edit messages in Threads. (#6877)

* Fix infinite rerender loop when editing message

* Refactor "edit_event" to Action.EditEvent

* Make up-arrow edit working in Threads

* Properly handle timeline events edit state

* Properly traverse messages to be edited

* Add MatrixClientContextHOC

* Refactor RoomContext to use AppRenderingContext

* Typescriptify test

Co-authored-by: Germain <germains@element.io>

src/contexts/MatrixClientContext.ts

@@ -1,22 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { createContext } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-
-const MatrixClientContext = createContext<MatrixClient>(undefined);
-MatrixClientContext.displayName = "MatrixClientContext";
-export default MatrixClientContext;

src/contexts/MatrixClientContext.tsx

@@ -0,0 +1,46 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ComponentClass, createContext, forwardRef, useContext } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+
+const MatrixClientContext = createContext<MatrixClient>(undefined);
+MatrixClientContext.displayName = "MatrixClientContext";
+export default MatrixClientContext;
+
+export interface MatrixClientProps {
+    mxClient: MatrixClient;
+}
+
+const matrixHOC = <ComposedComponentProps extends {}>(
+    ComposedComponent: ComponentClass<ComposedComponentProps>,
+) => {
+    type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+
+    const TypedComponent = ComposedComponent;
+
+    return forwardRef<ComposedComponentInstance, Omit<ComposedComponentProps, 'mxClient'>>(
+        (props, ref) => {
+            const client = useContext(MatrixClientContext);
+
+            // @ts-ignore
+            return <TypedComponent ref={ref} {...props} mxClient={client} />;
+        },
+    );
+};
+export const withMatrixClientHOC = matrixHOC;

src/contexts/RoomContext.ts

@@ -16,10 +16,15 @@ limitations under the License.
 
 import { createContext } from "react";
 
-import { IState } from "../components/structures/RoomView";
+import { IRoomState } from "../components/structures/RoomView";
 import { Layout } from "../settings/Layout";
 
-const RoomContext = createContext<IState>({
+export enum TimelineRenderingType {
+    Room,
+    Thread
+}
+
+const RoomContext = createContext<IRoomState>({
     roomLoading: true,
     peekLoading: false,
     shouldPeek: true,
@@ -53,6 +58,8 @@ const RoomContext = createContext<IState>({
     showDisplaynameChanges: true,
     matrixClientIsReady: false,
     dragCounter: 0,
+    timelineRenderingType: TimelineRenderingType.Room,
+    liveTimeline: undefined,
 });
 RoomContext.displayName = "RoomContext";
 export default RoomContext;