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 {
clearUserPatterns,
deleteActivePattern,
duplicateActivePattern,
deletePattern,
duplicatePattern,
exportPatterns,
getUserPattern,
importPatterns,
newUserPattern,
renameActivePattern,
renamePattern,
useActivePattern,
useViewingPattern,
useSettings,
@ -66,21 +66,21 @@ export function PatternsTab({ context }) {
return (
<div className="px-4 w-full dark:text-white text-stone-900 space-y-4 pb-4">
<section>
{activePattern && (
{viewingPattern && (
<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">
{!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" />
{/* <PencilIcon className="w-5 h-5" /> */}
</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" />
</button>
{!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" />
</button>
)}

View File

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