Revert "Watcha op332 add a modal dialog for room creation (require matrix-react-sdk/pull/96) (#29)"

This reverts commit e6a431f4cf.

public/locales/en/roomsTab.json

@@ -5,7 +5,7 @@
     "headers": {
         "name": "Name",
         "creator": "Creator",
-        "memberCount": "Member count",
+        "n": "Member count",
         "type": "Type",
         "status": "Status"
     },

public/locales/fr/roomsTab.json

@@ -5,7 +5,7 @@
     "headers": {
         "name": "Nom",
         "creator": "Créateur",
-        "memberCount": "Nombre de membres",
+        "n": "Nombre de membres",
         "type": "Type",
         "status": "Statut"
     },

public/locales/fr/usersTab.json

@@ -18,7 +18,7 @@
     "success": "Un nouvel utilisateur a été créé",
     "danger": "La création de l'utilisateur a échoué",
     "headers": {
-        "displayName": "Nom affiché",
+        "displayName": "Nom d'affichage",
         "emailAddress": "Adresse électronique",
         "lastSeen": "Dernière activité le",
         "role": "Rôle",

src/App.css

@@ -165,20 +165,6 @@ col.status {
     background-color: darkgrey !important;
 }
 
-td .active {
-    color: green;
-}
-
-td .inactive {
-    color: red;
-}
-
-.newRoomIframe {
-    width: 510px;
-    height: 278px;
-    border: 0;
-}
-
 .bottomButtons {
     margin: auto;
     width: 200px;

src/NewRoomModal.js

@@ -1,37 +0,0 @@
-import React, { Component } from "react";
-import { withTranslation } from "react-i18next";
-import Modal from "react-bootstrap/Modal";
-
-class NewRoomModal extends Component {
-    componentDidUpdate(prevProps) {
-        const { onHide, newRoomLocalEcho } = prevProps;
-        window.onstorage = event => {
-            if (event.key === "watcha_create_room") {
-                const roomProperties = event.newValue;
-                if (roomProperties === "null") {
-                    onHide();
-                } else if (roomProperties) {
-                    newRoomLocalEcho(JSON.parse(roomProperties));
-                    onHide();
-                }
-            }
-        };
-    }
-
-    render() {
-        const { show, onHide, t } = this.props;
-        return (
-            <Modal centered aria-label={t("button")} {...{ show, onHide }}>
-                {show && (
-                    <iframe
-                        className="newRoomIframe"
-                        title="Nextcloud"
-                        src="/app/#/new"
-                    />
-                )}
-            </Modal>
-        );
-    }
-}
-
-export default withTranslation("roomsTab")(NewRoomModal);

src/RoomsTab.js

@@ -1,9 +1,8 @@
 import React, { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, withTranslation } from "react-i18next";
 
 import { useMatrixClientContext } from "./contexts";
-import NewItemButton from "./NewItemButton";
-import NewRoomModal from "./NewRoomModal";
+import Button from "./NewItemButton";
 import TableTab, { compareLowerCase } from "./TableTab";
 
 const ns = "roomsTab";
@@ -12,7 +11,6 @@ export default () => {
     const { t } = useTranslation(ns);
 
     const [roomList, setRoomList] = useState(null);
-    const [modalShow, setModalShow] = useState(false);
 
     const client = useMatrixClientContext();
 
@@ -21,7 +19,7 @@ export default () => {
             roomId: item.room_id,
             name: item.name || "",
             creator: getDisplayName(item.creator) || "",
-            memberCount: item.members.length,
+            n: item.members.length,
             status: item.active === 1 ? "active" : "inactive",
         }));
 
@@ -36,40 +34,8 @@ export default () => {
         resolve,
     };
 
-    const newItemButton = (
-        <NewItemButton onClick={() => setModalShow(true)} {...{ t }} />
-    );
-
-    function getRoomCreatorDisplayName(mxRoom) {
-        const currentState = mxRoom.currentState;
-        const createEvent = currentState.getStateEvents("m.room.create", "");
-        if (createEvent) {
-            const userId = createEvent.getSender();
-            return getDisplayName(userId);
-        }
-    }
-
-    const newRoomLocalEcho = ({ roomId, name }) => {
-        if (!roomList.some(room => room.roomId === roomId)) {
-            const mxRoom = client.getRoom(roomId);
-            const room = {
-                roomId,
-                name,
-                creator: getRoomCreatorDisplayName(mxRoom) || "",
-                memberCount: mxRoom.getInvitedAndJoinedMemberCount(),
-                status: null,
-            };
-            setRoomList([...roomList, room]);
-        }
-    };
-
-    const newItemModal = (
-        <NewRoomModal
-            show={modalShow}
-            onHide={() => setModalShow(false)}
-            {...{ newRoomLocalEcho }}
-        />
-    );
+    const NewRoomButton = withTranslation(ns)(Button);
+    const newItemButton = <NewRoomButton onClick={() => {}} />;
 
     const columns = useMemo(
         () => [
@@ -85,18 +51,17 @@ export default () => {
                 disableGlobalFilter: true,
             },
             {
-                Header: t("headers.memberCount"),
-                accessor: "memberCount",
+                Header: t("headers.n"),
+                accessor: "n",
                 disableGlobalFilter: true,
             },
             {
                 Header: t("headers.status"),
                 accessor: "status",
                 disableGlobalFilter: true,
-                Cell: ({ value }) =>
-                    value && (
-                        <span className={value}>{t(`status.${value}`)}</span>
-                    ),
+                Cell: ({ value }) => (
+                    <span className={value}>{t(`status.${value}`)}</span>
+                ),
             },
         ],
         [t]
@@ -111,14 +76,7 @@ export default () => {
         <TableTab
             itemList={roomList}
             setItemList={setRoomList}
-            {...{
-                requestParams,
-                columns,
-                initialState,
-                newItemButton,
-                newItemModal,
-                ns,
-            }}
+            {...{ requestParams, columns, initialState, newItemButton, ns }}
         />
     );
 };

src/UsersTab.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, withTranslation } from "react-i18next";
 
 import { useDispatchContext } from "./contexts";
-import NewItemButton from "./NewItemButton";
+import Button from "./NewItemButton";
 import Date from "./Date";
 import NewUserModal from "./NewUserModal";
 import TableTab, { compareLowerCase } from "./TableTab";
@@ -42,9 +42,8 @@ export default ({ userId }) => {
         }
     }, [userId, dispatch]);
 
-    const newItemButton = (
-        <NewItemButton onClick={() => setModalShow(true)} {...{ t }} />
-    );
+    const NewUserButton = withTranslation(ns)(Button);
+    const newItemButton = <NewUserButton onClick={() => setModalShow(true)} />;
 
     const newItemModal = (
         <NewUserModal