From 0baf6ad94d7dfa8533a697505c5ac02ec7541871 Mon Sep 17 00:00:00 2001
From: Aine <aine@etke.cc>
Date: Fri, 17 Jan 2025 10:38:40 +0200
Subject: [PATCH] try a different approach to #277

---
 src/components/media.tsx        |  5 +++--
 src/resources/users.tsx         |  3 ++-
 src/synapse/authProvider.ts     |  3 ++-
 src/utils/decodeURLComponent.ts | 15 +++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/decodeURLComponent.ts

diff --git a/src/components/media.tsx b/src/components/media.tsx
index 59a1497..1f1ccc4 100644
--- a/src/components/media.tsx
+++ b/src/components/media.tsx
@@ -35,6 +35,7 @@ import { useMutation } from "@tanstack/react-query";
 import { dateParser } from "../utils/date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -481,7 +482,7 @@ export const MediaIDField = ({ source }) => {
 
   let uploadName = mediaID;
   if (get(record, "upload_name")) {
-    uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+    uploadName = decodeURLComponent(get(record, "upload_name")?.toString());
   }
 
   let mxcURL = mediaID;
@@ -506,7 +507,7 @@ export const ReportMediaContent = ({ source }) => {
 
   let uploadName = "";
   if (get(record, "event_json.content.body")) {
-    uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
+    uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
   }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;
diff --git a/src/resources/users.tsx b/src/resources/users.tsx
index 6d50e4a..fc08eec 100644
--- a/src/resources/users.tsx
+++ b/src/resources/users.tsx
@@ -83,6 +83,7 @@ import UserRateLimits from "../components/UserRateLimits";
 import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
 import { MakeAdminBtn } from "./rooms";
 import UserAccountData from "../components/UserAccountData";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -505,7 +506,7 @@ export const UserEdit = (props: EditProps) => {
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
               <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURIComponent(record.upload_name) : ""} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
diff --git a/src/synapse/authProvider.ts b/src/synapse/authProvider.ts
index 9ee74aa..fc0ffb9 100644
--- a/src/synapse/authProvider.ts
+++ b/src/synapse/authProvider.ts
@@ -3,6 +3,7 @@ import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 import { MatrixError, displayError } from "../utils/error";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 import { FetchConfig, ClearConfig } from "../utils/config";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -57,7 +58,7 @@ const authProvider: AuthProvider = {
     base_url = base_url.replace(/\/+$/g, "");
     localStorage.setItem("base_url", base_url);
 
-    const decoded_base_url = window.decodeURIComponent(base_url);
+    const decoded_base_url = decodeURLComponent(base_url);
     let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;
diff --git a/src/utils/decodeURLComponent.ts b/src/utils/decodeURLComponent.ts
new file mode 100644
index 0000000..ad4d2db
--- /dev/null
+++ b/src/utils/decodeURLComponent.ts
@@ -0,0 +1,15 @@
+/**
+ * Decode a URI component, and if it fails, return the original string.
+ * @param str The string to decode.
+ * @returns The decoded string, or the original string if decoding fails.
+ * @example decodeURIComponent("Hello%20World") // "Hello World"
+ */
+const decodeURLComponent = (str: any): any => {
+  try {
+    return decodeURIComponent(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+export default decodeURLComponent;