Fix edit import/exports (#3698)

* Fix safari export * Fix importing * Live update UI after import
web-scrobbler · May 5, 2023 · 1bc199b · 1bc199b
1 parent 6032f69
commit 1bc199b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 28 deletions.
diff --git a/src/ui/options/components/edit-options/edited-tracks.tsx b/src/ui/options/components/edit-options/edited-tracks.tsx
@@ -1,5 +1,5 @@
 import { t } from '@/util/i18n';
-import { For, Setter, createResource } from 'solid-js';
+import { For, Setter, createResource, createSignal } from 'solid-js';
 import * as Options from '@/core/storage/options';
 import * as BrowserStorage from '@/core/storage/browser-storage';
 import styles from '../components.module.scss';
@@ -147,22 +147,16 @@ async function downloadEdits() {
  * Button that allows the user to upload a .json file and get edits from it.
  */
 function ImportEdits() {
+	const [ref, setRef] = createSignal<HTMLInputElement>();
 	return (
-		<button
-			class={styles.editButton}
-			onClick={() =>
-				(
-					document.querySelector('#import-edits') as HTMLInputElement
-				)?.click()
-			}
-		>
+		<button class={styles.editButton} onClick={() => ref()?.click()}>
 			<Download />
 			{t('optionsImportEdited')}
 			<input
 				hidden={true}
+				ref={setRef}
 				type="file"
 				accept=".json"
-				id="import-edits"
 				onChange={pushEdits}
 			/>
 		</button>
@@ -184,10 +178,12 @@ function pushEdits(
 	reader.addEventListener('load', async (e) => {
 		const edits = JSON.parse(e.target?.result as string);
 		const oldEdits = await localCache.get();
-		localCache.set({
+		const newEdits = {
 			...oldEdits,
 			...edits,
-		});
+		};
+		localCache.set(newEdits);
+		mutate(newEdits);
 	});
 	reader.readAsText(file);
 }
diff --git a/src/ui/options/components/edit-options/regex-edits.tsx b/src/ui/options/components/edit-options/regex-edits.tsx
@@ -1,5 +1,5 @@
 import { t } from '@/util/i18n';
-import { For, Setter, createResource } from 'solid-js';
+import { For, Setter, createResource, createSignal } from 'solid-js';
 import * as BrowserStorage from '@/core/storage/browser-storage';
 import styles from '../components.module.scss';
 import Download from '@suid/icons-material/DownloadOutlined';
@@ -167,36 +167,27 @@ function ExportEdits() {
 async function downloadEdits() {
 	const edits = await regexEdits.get();
 	if (!edits) return;
-	const blob = new Blob([JSON.stringify(edits)], {
-		type: 'application/json',
-	});
-	const url = URL.createObjectURL(blob);
+	const data = `data:text/json;base64,${btoa(JSON.stringify(edits))}`;
 	const a = document.createElement('a');
-	a.href = url;
 	a.download = 'local-cache.json';
+	a.href = data;
 	a.click();
 }
 
 /**
  * Button that allows the user to upload a .json file and get edits from it.
  */
 function ImportEdits() {
+	const [ref, setRef] = createSignal<HTMLInputElement>();
 	return (
-		<button
-			class={styles.editButton}
-			onClick={() =>
-				(
-					document.querySelector('#import-edits') as HTMLInputElement
-				)?.click()
-			}
-		>
+		<button class={styles.editButton} onClick={() => ref()?.click()}>
 			<Download />
 			{t('optionsImportEdited')}
 			<input
 				hidden={true}
+				ref={setRef}
 				type="file"
 				accept=".json"
-				id="import-edits"
 				onChange={pushEdits}
 			/>
 		</button>
@@ -218,7 +209,9 @@ function pushEdits(
 	reader.addEventListener('load', async (e) => {
 		const edits = JSON.parse(e.target?.result as string);
 		const oldEdits = await regexEdits.get();
-		regexEdits.set([...(oldEdits ?? []), ...edits]);
+		const newEdits = [...(oldEdits ?? []), ...edits];
+		regexEdits.set(newEdits);
+		mutate(newEdits);
 	});
 	reader.readAsText(file);
 }