cleaning up

website/src/repl/panel/PatternsTab.jsx

@@ -1,20 +1,13 @@
-import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
-
+import { DocumentDuplicateIcon, TrashIcon } from '@heroicons/react/20/solid';
+import { useSettings } from '../../settings.mjs';
 import {
-  $featuredPatterns,
-  $publicPatterns,
   exportPatterns,
   importPatterns,
   useActivePattern,
   useViewingPattern,
-  useSettings,
   userPattern,
-  examplePattern,
-} from '../../settings.mjs';
-
+} from '../../user_pattern_utils.mjs';
 import { useMemo } from 'react';
-
-import { useStore } from '@nanostores/react';
 import { getMetadata } from '../../metadata_parser';
 import { useExamplePatterns } from '../useExamplePatterns';
 
@@ -24,19 +17,14 @@ function classNames(...classes) {
 
 function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
+
   return (
-    <>{`${pattern.id}: ${meta.title ?? pattern.hash ?? 'unnamed'} by ${
-      Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'
-    }`}</>
+    <>{`${pattern.id}: ${
+      meta.title ?? pattern.hash ?? new Date(pattern.created_at).toLocaleDateString() ?? 'unnamed'
+    } by ${Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'}`}</>
   );
 }
 
-const getPatternLabel = (pattern) => {
-  return `${pattern.id}: ${meta.title ?? pattern.hash ?? 'unnamed'} by ${
-    Array.isArray(meta.by) ? meta.by.join(',') : 'Anonymous'
-  }`;
-};
-
 function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
   return (
     <a
@@ -52,24 +40,6 @@ function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
   );
 }
 
-// function ListButton() {
-//   return (
-//     <a
-//       key={pattern.id}
-//       className={classNames(
-//         'mr-4 hover:opacity-50 cursor-pointer block',
-//         pattern.hash === activePattern ? 'outline outline-1' : '',
-//       )}
-//       onClick={() => {
-//         setActivePattern(pattern.hash);
-//         context.handleUpdate(pattern.code, true);
-//       }}
-//     >
-//       <PatternLabel pattern={pattern} />
-//     </a>
-//   );
-// }
-
 function PatternButtons({ patterns, activePattern, onClick, viewingPattern, started }) {
   return (
     <div className="font-mono text-sm">
@@ -89,28 +59,27 @@ function PatternButtons({ patterns, activePattern, onClick, viewingPattern, star
   );
 }
 
+function ActionButton({ children, onClick, label, labelIsHidden }) {
+  return (
+    <button className="hover:opacity-50" onClick={onClick} title={label}>
+      {labelIsHidden !== true && label}
+      {children}
+    </button>
+  );
+}
+
 export function PatternsTab({ context }) {
   const activePattern = useActivePattern();
   const viewingPattern = useViewingPattern();
   const { userPatterns } = useSettings();
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
-  const examplesData = examplePatterns.patterns;
 
   const updateCodeWindow = (id, data, reset = false) => {
     context.handleUpdate(id, data, reset);
-    // if (patternSource === userPattern.source) {
-
-    // } else {
-    //   const source = otherPatterns.get(patternSource);
-    //   const data = source[id];
-    // }
   };
-
   const isUserPattern = userPatterns[viewingPattern] != null;
 
-  // const isExample = useMemo(() => activePattern && !!tunes[activePattern], [activePattern]);
-
   return (
     <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
       <section>
@@ -118,69 +87,56 @@ export function PatternsTab({ context }) {
           <div className="flex items-center mb-2 space-x-2 overflow-auto">
             <h1 className="text-xl">{`${viewingPattern}`}</h1>
             <div className="space-x-4 flex w-min">
-              {/* {!isExample && (
-                <button
-                  className="hover:opacity-50"
-                  onClick={() => {
-                    const { id, data } = userPattern.rename(viewingPattern);
-                    updateCodeWindow(id, data.code);
-                  }}
-                  title="Rename"
-                >
-                  <PencilSquareIcon className="w-5 h-5" />
-                </button>
-              )} */}
-              <button
-                className="hover:opacity-50"
+              <ActionButton
+                label="Duplicate"
                 onClick={() => {
-                  const { id, data } = userPattern.duplicate(viewingPattern);
-                  updateCodeWindow(id, data.code);
+                  const { id, data } = userPattern.duplicate(
+                    userPattern.getPatternData(id) ?? examplePatterns.patterns[id],
+                  );
+                  updateCodeWindow(id, data);
                 }}
-                title="Duplicate"
+                labelIsHidden
               >
                 <DocumentDuplicateIcon className="w-5 h-5" />
-              </button>
+              </ActionButton>
               {isUserPattern && (
-                <button
-                  className="hover:opacity-50"
+                <ActionButton
+                  label="Delete"
                   onClick={() => {
                     const { id, data } = userPattern.delete(viewingPattern);
-                    updateCodeWindow(id, { ...data, collection: userPattern.source });
+                    updateCodeWindow(id, { ...data, collection: userPattern.collection });
                   }}
-                  title="Delete"
+                  labelIsHidden
                 >
                   <TrashIcon className="w-5 h-5" />
-                </button>
+                </ActionButton>
               )}
             </div>
           </div>
         )}
         <PatternButtons
-          onClick={(id) => updateCodeWindow(id, { ...userPatterns[id], collection: userPattern.source }, false)}
+          onClick={(id) => updateCodeWindow(id, { ...userPatterns[id], collection: userPattern.collection }, false)}
           patterns={userPatterns}
           started={context.started}
           activePattern={activePattern}
           viewingPattern={viewingPattern}
         />
         <div className="pr-4 space-x-4 border-b border-foreground mb-2 h-8 flex overflow-auto max-w-full items-center">
-          <button
-            className="hover:opacity-50"
+          <ActionButton
+            label="new"
             onClick={() => {
-              const { id, data } = userPattern.create();
-              updateCodeWindow(id, data.code);
+              const { id, data } = userPattern.createAndAddToDB();
+              updateCodeWindow(id, data);
             }}
-          >
-            new
-          </button>
-          <button
-            className="hover:opacity-50"
+          />
+          <ActionButton
+            label="clear"
             onClick={() => {
               const { id, data } = userPattern.clearAll();
-              updateCodeWindow(id, data.code);
+              updateCodeWindow(id, data);
             }}
-          >
-            clear
-          </button>
+          />
+
           <label className="hover:opacity-50 cursor-pointer">
             <input
               style={{ display: 'none' }}
@@ -191,14 +147,11 @@ export function PatternsTab({ context }) {
             />
             import
           </label>
-          <button className="hover:opacity-50" onClick={() => exportPatterns()}>
-            export
-          </button>
+          <ActionButton label="export" onClick={exportPatterns} />
         </div>
       </section>
       {Array.from(collections.keys()).map((collection) => {
         const patterns = collections.get(collection);
-
         return (
           <section key={collection}>
             <h2 className="text-xl mb-2">{collection}</h2>