Add a new tab to user page with media (#87)

* Add a new tab to user page with media

src/App.js

@@ -52,6 +52,7 @@ const App = () => (
     <Resource name="connections" />
     <Resource name="devices" />
     <Resource name="room_members" />
+    <Resource name="users_media" />
     <Resource name="joined_rooms" />
     <Resource name="pushers" />
     <Resource name="servernotices" />

src/components/users.js

@@ -5,8 +5,9 @@ import ContactMailIcon from "@material-ui/icons/ContactMail";
 import DevicesIcon from "@material-ui/icons/Devices";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
-import ViewListIcon from "@material-ui/icons/ViewList";
 import NotificationsIcon from "@material-ui/icons/Notifications";
+import PermMediaIcon from "@material-ui/icons/PermMedia";
+import ViewListIcon from "@material-ui/icons/ViewList";
 import {
   ArrayInput,
   ArrayField,
@@ -42,6 +43,7 @@ import {
   ExportButton,
   TopToolbar,
   sanitizeListRestProps,
+  NumberField,
 } from "react-admin";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
@@ -406,6 +408,56 @@ export const UserEdit = props => {
           </ReferenceField>
         </FormTab>
 
+        <FormTab
+          label={translate("resources.users_media.name", { smart_count: 2 })}
+          icon={<PermMediaIcon />}
+          path="media"
+        >
+          <ReferenceManyField
+            reference="users_media"
+            target="user_id"
+            addLabel={false}
+            pagination={<UserPagination />}
+            perPage={50}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <DateField
+                source="created_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <DateField
+                source="last_access_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField source="media_id" sortable={false} />
+              <NumberField source="media_length" sortable={false} />
+              <TextField source="media_type" sortable={false} />
+              <TextField source="upload_name" sortable={false} />
+              <TextField source="quarantined_by" sortable={false} />
+              <BooleanField source="safe_from_quarantine" sortable={false} />
+              <DeleteButton undoable={false} redirect={false} />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
+
         <FormTab
           label={translate("resources.rooms.name", { smart_count: 2 })}
           icon={<ViewListIcon />}

src/i18n/de.js

@@ -223,6 +223,19 @@ export default {
         },
       },
     },
+    users_media: {
+      name: "Medien",
+      fields: {
+        media_id: "Medien ID",
+        media_length: "Größe",
+        media_type: "Typ",
+        upload_name: "Dateiname",
+        quarantined_by: "Zur Quarantäne hinzugefügt",
+        safe_from_quarantine: "Geschützt vor Quarantäne",
+        created_ts: "Erstellt",
+        last_access_ts: "Letzter Zugriff",
+      },
+    },
     pushers: {
       name: "Pusher |||| Pushers",
       fields: {

src/i18n/en.js

@@ -220,6 +220,19 @@ export default {
         },
       },
     },
+    users_media: {
+      name: "Media",
+      fields: {
+        media_id: "Media ID",
+        media_length: "Lenght",
+        media_type: "Type",
+        upload_name: "File name",
+        quarantined_by: "Quarantined by",
+        safe_from_quarantine: "Safe from quarantine",
+        created_ts: "Created",
+        last_access_ts: "Last access",
+      },
+    },
     pushers: {
       name: "Pusher |||| Pushers",
       fields: {

src/synapse/dataProvider.js

@@ -142,6 +142,24 @@ const resourceMap = {
       return json.total;
     },
   },
+  users_media: {
+    map: um => ({
+      ...um,
+      id: um.media_id,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/users/${id}/media`,
+    }),
+    data: "media",
+    total: json => {
+      return json.total;
+    },
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/media/${localStorage.getItem(
+        "home_server"
+      )}/${params.id}`,
+    }),
+  },
   servernotices: {
     map: n => ({ id: n.event_id }),
     create: data => ({
@@ -239,6 +257,10 @@ const dataProvider = {
     console.log("getManyReference " + resource);
     const { page, perPage } = params.pagination;
     const from = (page - 1) * perPage;
+    const query = {
+      from: from,
+      limit: perPage,
+    };
 
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) return Promise.reject();
@@ -246,7 +268,7 @@ const dataProvider = {
     const res = resourceMap[resource];
 
     const ref = res["reference"](params.id);
-    const endpoint_url = homeserver + ref.endpoint;
+    const endpoint_url = `${homeserver}${ref.endpoint}?${stringify(query)}`;
 
     return jsonClient(endpoint_url).then(({ headers, json }) => ({
       data: json[res.data].map(res.map),