From f19ac748e6a7dcff06068b931c60b7cc7d277fe7 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 10 Dec 2023 14:28:27 +0100
Subject: [PATCH] slim down template - move import + export logic to
 settings.mjs

---
 website/src/repl/panel/PatternsTab.jsx | 47 +++++---------------------
 website/src/settings.mjs               | 30 ++++++++++++++++
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/website/src/repl/panel/PatternsTab.jsx b/website/src/repl/panel/PatternsTab.jsx
index 175ed887..103eda19 100644
--- a/website/src/repl/panel/PatternsTab.jsx
+++ b/website/src/repl/panel/PatternsTab.jsx
@@ -1,20 +1,18 @@
+import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 import { useMemo } from 'react';
-import * as tunes from '../tunes.mjs';
 import {
-  useSettings,
   clearUserPatterns,
-  newUserPattern,
-  setActivePattern,
   deleteActivePattern,
   duplicateActivePattern,
+  exportPatterns,
   getUserPattern,
-  getUserPatterns,
+  importPatterns,
+  newUserPattern,
   renameActivePattern,
-  addUserPattern,
-  setUserPatterns,
+  setActivePattern,
+  useSettings,
 } from '../../settings.mjs';
-import { logger } from '@strudel.cycles/core';
-import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
+import * as tunes from '../tunes.mjs';
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -85,38 +83,11 @@ export function PatternsTab({ context }) {
               type="file"
               multiple
               accept="text/plain,application/json"
-              onChange={async (e) => {
-                const files = Array.from(e.target.files);
-                await Promise.all(
-                  files.map(async (file, i) => {
-                    const content = await file.text();
-                    if (file.type === 'application/json') {
-                      const userPatterns = getUserPatterns() || {};
-                      setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
-                    } else if (file.type === 'text/plain') {
-                      const name = file.name.replace(/\.[^/.]+$/, '');
-                      addUserPattern(name, { code: content });
-                    }
-                  }),
-                );
-                logger(`import done!`);
-              }}
+              onChange={(e) => importPatterns(e.target.files)}
             />
             import
           </label>
-          <button
-            className="hover:opacity-50"
-            onClick={() => {
-              const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
-              const downloadLink = document.createElement('a');
-              downloadLink.href = window.URL.createObjectURL(blob);
-              const date = new Date().toISOString().split('T')[0];
-              downloadLink.download = `strudel_patterns_${date}.json`;
-              document.body.appendChild(downloadLink);
-              downloadLink.click();
-              document.body.removeChild(downloadLink);
-            }}
-          >
+          <button className="hover:opacity-50" onClick={() => exportPatterns()}>
             export
           </button>
         </div>
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 98d3fe50..2f76d68c 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -2,6 +2,7 @@ import { persistentMap } from '@nanostores/persistent';
 import { useStore } from '@nanostores/react';
 import { register } from '@strudel.cycles/core';
 import * as tunes from './repl/tunes.mjs';
+import { logger } from '@strudel.cycles/core';
 
 export const defaultSettings = {
   activeFooter: 'intro',
@@ -195,3 +196,32 @@ export function setActivePattern(key) {
 }
 
 export function importUserPatternJSON(jsonString) {}
+
+export async function importPatterns(fileList) {
+  const files = Array.from(fileList);
+  await Promise.all(
+    files.map(async (file, i) => {
+      const content = await file.text();
+      if (file.type === 'application/json') {
+        const userPatterns = getUserPatterns() || {};
+        setUserPatterns({ ...userPatterns, ...JSON.parse(content) });
+      } else if (file.type === 'text/plain') {
+        const name = file.name.replace(/\.[^/.]+$/, '');
+        addUserPattern(name, { code: content });
+      }
+    }),
+  );
+  logger(`import done!`);
+}
+
+export async function exportPatterns() {
+  const userPatterns = getUserPatterns() || {};
+  const blob = new Blob([JSON.stringify(userPatterns)], { type: 'application/json' });
+  const downloadLink = document.createElement('a');
+  downloadLink.href = window.URL.createObjectURL(blob);
+  const date = new Date().toISOString().split('T')[0];
+  downloadLink.download = `strudel_patterns_${date}.json`;
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+  document.body.removeChild(downloadLink);
+}