feat: add storage handler

src/lib/components/copy-button.svelte

@@ -8,6 +8,7 @@
 	export let disabled: boolean;
 	export let onClick: () => void;
 	export let tooltip: string;
+	export let size: 'default' | 'icon' | undefined = 'default';
 
 	onMount(() => {
 		return () => {
@@ -31,9 +32,16 @@
 			class="border-2 w-full"
 			disabled={disabled || isDisabled}
 			on:click={handleClick}
+			{size}
 		>
 			{#if isDisabled}
-				Copied
+				{#if size === 'icon'}
+					<span class="w-8"> ✅ </span>
+				{:else}
+					Copied
+				{/if}
+			{:else if size === 'icon'}
+				<span class="w-8"> <slot /></span>
 			{:else}
 				<slot />
 			{/if}

src/lib/components/molecule-history-item.svelte

@@ -19,6 +19,7 @@
 					onClick={() => copyToClipboard(molecule, representation)}
 					disabled={false}
 					tooltip={`Copy ${representationMapper[representation]}`}
+					size="icon"
 				>
 					{representationMapper[representation].at(0)}
 				</CopyButton>

src/lib/storage-handler.ts

@@ -10,8 +10,12 @@ export class StorageHandler<T> {
 		}
 	}
 
-	get(key: string) {
-		return this.storage?.get(key) as T;
+	async get(key: string) {
+		const value = await this.storage?.get(key);
+		if (typeof value === 'undefined') {
+			return undefined;
+		}
+		return value[key];
 	}
 
 	update(key: string, value: T) {

src/lib/utils.ts

@@ -8,9 +8,13 @@ import {
 	representationMapper,
 	basePath
 } from './constants';
-import { Molecule } from 'openchemlib/minimal';
+import { Molecule as MoleculeService } from 'openchemlib/minimal';
+
+export type Molecule = Record<RepresentationType, string>;
+export type MoleculeStorage = Molecule[];
 
 export type PubChemCompound = {
+	MolecularFormula: string;
 	CanonicalSMILES: string;
 	IsomericSMILES: string;
 	InChI: string;
@@ -25,9 +29,9 @@ export type PubChemResponse = {
 };
 
 export async function getRandomMoleculeFromApi() {
-    const randomId = getRandomInt(1, 2_000_000);
-    const moleculeResponse = await fetch(getUrlFromId(randomId));
-    return (await moleculeResponse.json()) as PubChemResponse;
+	const randomId = getRandomInt(1, 2_000_000);
+	const moleculeResponse = await fetch(getUrlFromId(randomId));
+	return (await moleculeResponse.json()) as PubChemResponse;
 }
 
 export function getAllSupportedRepresentations() {
@@ -48,7 +52,7 @@ export function parseResponseToMolecule(response: PubChemResponse) {
 			...acc,
 			[representation]: getRepresentation(response, representation)
 		}),
-		{} as Record<RepresentationType, string>
+		{} as Molecule
 	);
 }
 
@@ -58,13 +62,10 @@ export function getUrlFromId(id: number) {
 }
 
 export function getSVGFromSmiles(smiles: string, width = 250, height = 128) {
-	return Molecule.fromSmiles(smiles).toSVG(width, height);
+	return MoleculeService.fromSmiles(smiles).toSVG(width, height);
 }
 
-export async function copyToClipboard(
-	molecule: Record<RepresentationType, string>,
-	representation: RepresentationType
-) {
+export async function copyToClipboard(molecule: Molecule, representation: RepresentationType) {
 	console.log(`Copied: ${representation} to clipboard`);
 	await navigator.clipboard.writeText(molecule[representation]);
 }

src/routes/+page.svelte

@@ -10,38 +10,36 @@
 		copyToClipboard,
 		getRandomMoleculeFromApi,
 		getSVGFromSmiles,
-		parseResponseToMolecule
+		parseResponseToMolecule,
+		type Molecule,
+		type MoleculeStorage
 	} from '$lib/utils';
-	import {
-		representationMapper,
-		representationTypes,
-		type RepresentationType,
-	} from '$lib/constants';
+	import { representationMapper, representationTypes } from '$lib/constants';
 
 	import Spinner from '$lib/components/spinner.svelte';
 	import CopyButton from '$lib/components/copy-button.svelte';
 	import MoleculeHistoryItem from '$lib/components/molecule-history-item.svelte';
 	import Footer from '$lib/components/footer.svelte';
+	import { StorageHandler } from '$lib/storage-handler';
 
 	let isLoading: boolean = false;
 	let isOnline: boolean = true;
-	let selectedMolecule: Record<RepresentationType, string>;
-	let moleculeHistory: Record<RepresentationType, string>[];
+	let selectedMolecule: Molecule;
+	let moleculeHistory: MoleculeStorage;
+	let storageHandler: StorageHandler<MoleculeStorage>;
 
 	$: if (typeof chrome !== 'undefined') {
 		if (typeof moleculeHistory !== 'undefined') {
-			chrome.storage.local.set({ molecules: moleculeHistory });
+			storageHandler.update('molecules', moleculeHistory);
 		}
 	}
 
 	onMount(async () => {
-		moleculeHistory = ((await chrome.storage.local.get('molecules')) as MoleculeStorage).molecules;
+		const { StorageHandler } = await import('$lib/storage-handler');
+		storageHandler = new StorageHandler<MoleculeStorage>('chrome');
+		moleculeHistory = await storageHandler.get('molecules');
 	});
 
-	type MoleculeStorage = {
-		molecules: Record<RepresentationType, string>[];
-	};
-
 	async function getMolecule() {
 		const molecule = await getRandomMoleculeFromApi();
 
@@ -69,8 +67,8 @@
 
 		isLoading = false;
 		selectedMolecule = molecule;
-		
-    moleculeHistory = await saveMolecule(selectedMolecule);
+
+		moleculeHistory = await saveMolecule(selectedMolecule);
 	}
 
 	function handleClearHistory() {
@@ -79,14 +77,15 @@
 		moleculeHistory = moleculeHistory;
 	}
 
-	async function saveMolecule(molecule: Record<RepresentationType, string>) {
-		const currentHistory = (await chrome.storage.local.get('molecules')) as MoleculeStorage;
+	async function saveMolecule(molecule: Molecule) {
+		const currentHistory = await storageHandler.get('molecules');
+		console.log(currentHistory);
 
-		if (currentHistory.molecules.length === 20) {
-			currentHistory.molecules.pop();
+		if (currentHistory.length === 20) {
+			currentHistory.pop();
 		}
 
-		return [molecule, ...currentHistory.molecules];
+		return [molecule, ...currentHistory];
 	}
 </script>