refactor: use the ID instead of index

This commit is contained in:
MAZE 2024-06-16 17:42:44 +04:30
parent 78222be011
commit 7658842324
2 changed files with 11 additions and 11 deletions

View file

@ -26,15 +26,15 @@ export function List({ close }: ListProps) {
<p className={styles.empty}>You don&apos;t have any presets yet.</p>
)}
{presets.map((preset, index) => (
<div className={styles.preset} key={index}>
{presets.map(preset => (
<div className={styles.preset} key={preset.id}>
<input
placeholder="Untitled"
type="text"
value={preset.label}
onChange={e => changeName(index, e.target.value)}
onChange={e => changeName(preset.id, e.target.value)}
/>
<button onClick={() => deletePreset(index)}>
<button onClick={() => deletePreset(preset.id)}>
<FaRegTrashAlt />
</button>
<button

View file

@ -5,8 +5,8 @@ import { v4 as uuid } from 'uuid';
interface PresetStore {
addPreset: (label: string, sounds: Record<string, number>) => void;
changeName: (index: number, newName: string) => void;
deletePreset: (index: number) => void;
changeName: (id: string, newName: string) => void;
deletePreset: (id: string) => void;
presets: Array<{
id: string;
label: string;
@ -21,9 +21,9 @@ export const usePresetStore = create<PresetStore>()(
set({ presets: [{ id: uuid(), label, sounds }, ...get().presets] });
},
changeName(index: number, newName: string) {
const presets = get().presets.map((preset, i) => {
if (i === index) return { ...preset, label: newName };
changeName(id: string, newName: string) {
const presets = get().presets.map(preset => {
if (preset.id === id) return { ...preset, label: newName };
return preset;
});
@ -31,8 +31,8 @@ export const usePresetStore = create<PresetStore>()(
set({ presets });
},
deletePreset(index: number) {
set({ presets: get().presets.filter((_, i) => index !== i) });
deletePreset(id: string) {
set({ presets: get().presets.filter(preset => preset.id !== id) });
},
presets: [],