Added clickable link to user room list

MangoCubes · Sep 11, 2022 · 1ef964b · 1ef964b
1 parent 8b05732
commit 1ef964b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/root/users/userId/UserDetailsEdit.tsx b/src/root/users/userId/UserDetailsEdit.tsx
@@ -1,5 +1,5 @@
 import { PersonOff, AdminPanelSettings, Badge, Password } from "@mui/icons-material";
-import { CardContent, List, ListItem, ListItemIcon, ListItemText, Switch, Button, CardActions, FormControl, TextField, DialogActions, Dialog, DialogContent, DialogTitle, Stack, MenuItem, Select } from "@mui/material";
+import { CardContent, List, ListItem, ListItemIcon, ListItemText, Switch, Button, CardActions, TextField, DialogActions, Dialog, DialogContent, DialogTitle, Stack, MenuItem, Select } from "@mui/material";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";

diff --git a/src/root/users/userId/UserRooms.tsx b/src/root/users/userId/UserRooms.tsx
@@ -1,7 +1,8 @@
-import { Button, CardActions, CardContent } from "@mui/material";
-import { GridColumns, DataGrid } from "@mui/x-data-grid";
+import { Button, CardActions, CardContent, Link } from "@mui/material";
+import { GridColumns, DataGrid, GridRenderCellParams } from "@mui/x-data-grid";
 import { useState, useRef, useContext, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import handleCommonErrors from "../../../functions/handleCommonErrors";
 import { GetUserMembershipQuery } from "../../../query/GetUserMembershipQuery";
@@ -14,15 +15,19 @@ export default function UserRooms(props: {user: User, rooms: Room[] | null}) {
 	const {t} = useTranslation();
 
 	const [rooms, setRooms] = useState<RoomID[] | null>(null);
-	const [rows, setRows] = useState<{id: string, name: string}[] | null>(null);
+	const [rows, setRows] = useState<{id: RoomID, name: string}[] | null>(null);
 
 	const con = useRef<AbortController | null>(null);
 
+	const nav = useNavigate();
+
 	const {homeserver, token} = useContext(LoginContext);
 
 	const columns = useMemo<GridColumns>(
 		() => [
-			{field: 'id', headerName: t('user.rooms.id'), flex: 2},
+			{field: 'id', headerName: t('user.rooms.id'), flex: 2, renderCell: (params: GridRenderCellParams<RoomID>) => (
+				<Link href='#' onClick={() => nav(`/rooms/${params.value}`)}>{params.value}</Link>
+			)},
 			{field: 'name', headerName: t('user.rooms.name'), flex: 2}
 		],
 		[]