Watcha op373 add permalink for rooms (#40)

* feat: add permalink for rooms

* feat: add a navigation context to avoid multiple tabs

* fix: use a ref for refetch as it should not induce rendering when it changes

public/locales/en/roomsTab.json

@@ -13,5 +13,10 @@
         "active": "enabled",
         "inactive": "disabled",
         "new": "new"
+    },
+    "permalink": {
+        "alt": "Permalink",
+        "enabled": "Open this room in a new tab",
+        "disabled": "You are not a member of this room"
     }
 }

public/locales/fr/roomsTab.json

@@ -13,5 +13,10 @@
         "active": "activé",
         "inactive": "désactivé",
         "new": "nouveau"
+    },
+    "permalink": {
+        "alt": "Permalien",
+        "enabled": "Ouvrir ce salon dans un nouvel onglet",
+        "disabled": "Vous n'êtes pas membre de ce salon"
     }
 }

src/ItemTable.js

@@ -11,17 +11,21 @@ export default ({ tableInstance, itemId }) => {
 
     const getHeaderProps = column =>
         column.getHeaderProps(
-            column.getSortByToggleProps({ title: undefined })
+            column.getSortByToggleProps({
+                className: column.id,
+                title: undefined,
+            })
         );
 
-    const getSortedChevron = column => (
-        <span
-            className={classNames("chevron", {
-                "chevron-hidden": !column.isSorted,
-                "chevron-up": !column.isSortedDesc,
-            })}
-        />
-    );
+    const getSortedChevron = column =>
+        tableInstance.columns.includes(column) ? (
+            <span
+                className={classNames("chevron", {
+                    "chevron-hidden": !column.isSorted,
+                    "chevron-up": !column.isSortedDesc,
+                })}
+            />
+        ) : null;
 
     const getRowProps = row => {
         const className =
@@ -60,7 +64,7 @@ export default ({ tableInstance, itemId }) => {
     return (
         <Table className="ItemTable" hover size="sm" {...getTableProps()}>
             <colgroup>
-                {tableInstance.columns.map(column => (
+                {tableInstance.visibleColumns.map(column => (
                     <col key={column.id} className={column.id} />
                 ))}
             </colgroup>

src/RoomPermalink.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { useMatrixClientContext } from "./contexts";
+
+import boxArrowUpRight from "./images/box-arrow-up-right.svg";
+import "./css/RoomPermalink.scss";
+
+export default ({ roomId }) => {
+    const { t } = useTranslation("roomsTab");
+
+    const client = useMatrixClientContext();
+    const rooms = client.getRooms();
+    const isMine = rooms.some(room => room.roomId === roomId);
+
+    return isMine ? (
+        <a href={`/app/#/room/${roomId}`} target="room">
+            <img
+                className="RoomPermalink"
+                src={boxArrowUpRight}
+                alt={t("permalink.alt")}
+                title={t("permalink.enabled")}
+            />
+        </a>
+    ) : (
+        <img
+            className="RoomPermalink RoomPermalink-disabled"
+            src={boxArrowUpRight}
+            alt={t("permalink.alt")}
+            title={t("permalink.disabled")}
+        />
+    );
+};

src/RoomsTab.js

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useMatrixClientContext } from "./contexts";
 import NewItemButton from "./NewItemButton";
 import NewRoomModal from "./NewRoomModal";
+import RoomPermalink from "./RoomPermalink";
 import TableTab, { compareLowerCase } from "./TableTab";
 
 const ns = "roomsTab";
@@ -109,6 +110,19 @@ export default () => {
         []
     );
 
+    const plugins = [
+        hooks => {
+            hooks.visibleColumns.push(columns => [
+                ...columns,
+                {
+                    id: "permalink",
+                    Header: "",
+                    Cell: ({ row }) => <RoomPermalink roomId={row.original.roomId} />,
+                },
+            ]);
+        },
+    ];
+
     return (
         <TableTab
             itemList={roomList}
@@ -117,6 +131,7 @@ export default () => {
                 requestParams,
                 columns,
                 initialState,
+                plugins,
                 newItemButton,
                 newItemModal,
                 ns,

src/TableTab.js

@@ -15,6 +15,7 @@ export default ({
     requestParams,
     columns,
     initialState,
+    plugins,
     newItemButton,
     newItemModal,
     rightPanel,
@@ -25,8 +26,11 @@ export default ({
 
     const { data, refetch } = useGet(requestParams);
 
+    const refetchRef = useRef();
+    refetchRef.current = refetch;
+
     useEffect(() => {
-        refetch();
+        refetchRef.current();
     }, []);
 
     useEffect(() => {
@@ -34,7 +38,7 @@ export default ({
         if (intervalIdRef.current) {
             clearInterval(intervalIdRef.current);
         }
-        intervalIdRef.current = setInterval(() => refetch(), 10000);
+        intervalIdRef.current = setInterval(() => refetchRef.current(), 10000);
     }, [data, setItemList]);
 
     const globalFilter = useMemo(() => fuzzyTextFilterFn, []);
@@ -50,7 +54,8 @@ export default ({
             disableSortRemove: true,
         },
         useGlobalFilter,
-        useSortBy
+        useSortBy,
+        ...(plugins || [])
     );
 
     const dispatch = useDispatchContext();

src/css/ItemTable.scss

@@ -4,7 +4,8 @@
     col {
         width: 1%;
 
-        &.status {
+        &.status,
+        &.permalink {
             width: 0.0001%;
         }
     }
@@ -31,6 +32,10 @@
         &:hover {
             background-color: darkturquoise;
         }
+
+        &.permalink:hover {
+            background-color: inherit;
+        }
     }
 
     td {

src/css/RoomPermalink.scss

@@ -0,0 +1,8 @@
+.RoomPermalink {
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+.RoomPermalink-disabled {
+    filter: opacity(40%);
+}

src/images/box-arrow-up-right.svg

@@ -0,0 +1,5 @@
+<svg class="bi bi-box-arrow-up-right" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
+    <path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
+</svg>