mutate viewing pattern

This commit is contained in:
Jade (Rose) Rowland 2024-01-06 17:53:51 -05:00
parent 02b9bd82cf
commit 3604d3940c
2 changed files with 26 additions and 28 deletions

View File

@ -2,13 +2,13 @@ import { DocumentDuplicateIcon, PencilSquareIcon, TrashIcon } from '@heroicons/r
import { useMemo } from 'react'; import { useMemo } from 'react';
import { import {
clearUserPatterns, clearUserPatterns,
deleteActivePattern, deletePattern,
duplicateActivePattern, duplicatePattern,
exportPatterns, exportPatterns,
getUserPattern, getUserPattern,
importPatterns, importPatterns,
newUserPattern, newUserPattern,
renameActivePattern, renamePattern,
useActivePattern, useActivePattern,
useViewingPattern, useViewingPattern,
useSettings, useSettings,
@ -66,21 +66,21 @@ export function PatternsTab({ context }) {
return ( return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4"> <div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
<section> <section>
{activePattern && ( {viewingPattern && (
<div className="flex items-center mb-2 space-x-2 overflow-auto"> <div className="flex items-center mb-2 space-x-2 overflow-auto">
<h1 className="text-xl">{activePattern}</h1> <h1 className="text-xl">{viewingPattern}</h1>
<div className="space-x-4 flex w-min"> <div className="space-x-4 flex w-min">
{!isExample && ( {!isExample && (
<button className="hover:opacity-50" onClick={() => renameActivePattern()} title="Rename"> <button className="hover:opacity-50" onClick={() => renamePattern(viewingPattern)} title="Rename">
<PencilSquareIcon className="w-5 h-5" /> <PencilSquareIcon className="w-5 h-5" />
{/* <PencilIcon className="w-5 h-5" /> */} {/* <PencilIcon className="w-5 h-5" /> */}
</button> </button>
)} )}
<button className="hover:opacity-50" onClick={() => duplicateActivePattern()} title="Duplicate"> <button className="hover:opacity-50" onClick={() => duplicatePattern(viewingPattern)} title="Duplicate">
<DocumentDuplicateIcon className="w-5 h-5" /> <DocumentDuplicateIcon className="w-5 h-5" />
</button> </button>
{!isExample && ( {!isExample && (
<button className="hover:opacity-50" onClick={() => deleteActivePattern()} title="Delete"> <button className="hover:opacity-50" onClick={() => deletePattern(viewingPattern)} title="Delete">
<TrashIcon className="w-5 h-5" /> <TrashIcon className="w-5 h-5" />
</button> </button>
)} )}

View File

@ -152,14 +152,13 @@ export function getUserPattern(key) {
return userPatterns[key]; return userPatterns[key];
} }
export function renameActivePattern() { export function renamePattern(pattern) {
let activePattern = getActivePattern();
let userPatterns = getUserPatterns(); let userPatterns = getUserPatterns();
if (!userPatterns[activePattern]) { if (!userPatterns[pattern]) {
alert('Cannot rename examples'); alert('Cannot rename examples');
return; return;
} }
const newName = prompt('Enter new name', activePattern); const newName = prompt('Enter new name', pattern);
if (newName === null) { if (newName === null) {
// canceled // canceled
return; return;
@ -168,10 +167,10 @@ export function renameActivePattern() {
alert('Name already taken!'); alert('Name already taken!');
return; return;
} }
userPatterns[newName] = userPatterns[activePattern]; // copy code userPatterns[newName] = userPatterns[pattern]; // copy code
delete userPatterns[activePattern]; delete userPatterns[pattern];
setUserPatterns({ ...userPatterns }); setUserPatterns({ ...userPatterns });
setActivePattern(newName); setViewingPattern(newName);
} }
export function updateUserCode(code) { export function updateUserCode(code) {
@ -196,35 +195,34 @@ export function updateUserCode(code) {
setUserPatterns({ ...userPatterns, [activePattern]: { code } }); setUserPatterns({ ...userPatterns, [activePattern]: { code } });
} }
export function deleteActivePattern() { export function deletePattern(pattern) {
let activePattern = getActivePattern();
if (!activePattern) { if (!pattern) {
console.warn('cannot delete: no pattern selected'); console.warn('cannot delete: no pattern selected');
return; return;
} }
const userPatterns = getUserPatterns(); const userPatterns = getUserPatterns();
if (!userPatterns[activePattern]) { if (!userPatterns[pattern]) {
alert('Cannot delete examples'); alert('Cannot delete examples');
return; return;
} }
if (!confirm(`Really delete the selected pattern "${activePattern}"?`)) { if (!confirm(`Really delete the selected pattern "${pattern}"?`)) {
return; return;
} }
setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== activePattern))); setUserPatterns(Object.fromEntries(Object.entries(userPatterns).filter(([key]) => key !== pattern)));
setActivePattern(''); setViewingPattern('');
} }
export function duplicateActivePattern() { export function duplicatePattern(pattern) {
let activePattern = getActivePattern();
let latestCode = getSetting('latestCode'); let latestCode = getSetting('latestCode');
if (!activePattern) { if (!pattern) {
console.warn('cannot duplicate: no pattern selected'); console.warn('cannot duplicate: no pattern selected');
return; return;
} }
const userPatterns = getUserPatterns(); const userPatterns = getUserPatterns();
activePattern = getNextCloneName(activePattern); const newPattern = getNextCloneName(pattern);
setUserPatterns({ ...userPatterns, [activePattern]: { code: latestCode } }); setUserPatterns({ ...userPatterns, [newPattern]: { code: latestCode } });
setActivePattern(activePattern); setViewingPattern(newPattern);
} }
export async function importPatterns(fileList) { export async function importPatterns(fileList) {