feat: add delete for presets in menu

[200~refactor(presets.js): remove unused getPreset function
refactor(presets.js): use arrow function syntax for map callback
refactor(presets.js): add console.log for debugging purposes
refactor(presets.js): simplify map callback syntax
refactor(presets.js): remove commented out code
refactor(FileUpload.jsx): remove commented out code
refactor(NewConversationMenu.jsx): rename data parameter to res for
clarity
refactor(NewConversationMenu.jsx): rename clearPresetsTrigger to
deletePresetsTrigger for clarity
refactor(NewConversationMenu.jsx): add onDeletePreset prop to
PresetItems component
refactor(PresetItem.jsx): add TrashIcon component and onDeletePreset
prop
refactor(PresetItems.jsx): add onDeletePreset prop to PresetItem
component

api/server/routes/presets.js

@@ -1,10 +1,10 @@
 const express = require('express');
 const router = express.Router();
-const { getPreset, getPresets, savePreset, deletePresets } = require('../../models');
+const { getPresets, savePreset, deletePresets } = require('../../models');
 const crypto = require('crypto');
 
 router.get('/', async (req, res) => {
-  const presets = (await getPresets(req?.session?.user?.username)).map(preset => {
+  const presets = (await getPresets(req?.session?.user?.username)).map((preset) => {
     return preset.toObject();
   });
   res.status(200).send(presets);
@@ -18,7 +18,7 @@ router.post('/', async (req, res) => {
   try {
     await savePreset(req?.session?.user?.username, update);
 
-    const presets = (await getPresets(req?.session?.user?.username)).map(preset => {
+    const presets = (await getPresets(req?.session?.user?.username)).map((preset) => {
       return preset.toObject();
     });
     res.status(201).send(presets);
@@ -34,12 +34,14 @@ router.post('/delete', async (req, res) => {
 
   if (presetId) filter = { presetId };
 
+  console.log('delete preset filter', filter);
+
   try {
     await deletePresets(req?.session?.user?.username, filter);
 
-    const presets = (await getPresets(req?.session?.user?.username)).map(preset => {
+    const presets = (await getPresets(req?.session?.user?.username)).map(preset => preset.toObject());
-      return preset.toObject();
+
-    });
+    // console.log('delete preset response', presets);
     res.status(201).send(presets);
     // res.status(201).send(dbResponse);
   } catch (error) {

client/src/components/Input/Endpoints/FileUpload.jsx

@@ -5,20 +5,6 @@ import { useRecoilValue } from 'recoil';
 
 import store from '~/store';
 
-// async function fetchPresets(callback) {
-//   try {
-//     const response = await axios.get('/api/presets', {
-//       timeout: 1000,
-//       withCredentials: true
-//     });
-
-//     callback(response.data);
-//   } catch (error) {
-//     console.error(error);
-//     console.log('[FileUpload] Error fetching presets');
-//   }
-// }
-
 const FileUpload = ({ onFileSelected }) => {
   // const setPresets = useSetRecoilState(store.presets);
   const endpointsFilter = useRecoilValue(store.endpointsFilter);

client/src/components/Input/Endpoints/NewConversationMenu.jsx

@@ -37,9 +37,9 @@ export default function NewConversationMenu() {
   // const { model, promptPrefix, chatGptLabel, conversationId } = conversation;
   const { newConversation } = store.useConversation();
 
-  const { trigger: clearPresetsTrigger } = manualSWR(`/api/presets/delete`, 'post', data => {
+  const { trigger: clearPresetsTrigger } = manualSWR(`/api/presets/delete`, 'post', res => {
-    console.log(data);
+    console.log(res);
-    setPresets(data);
+    setPresets(res.data);
   });
 
   const importPreset = jsonData => {
@@ -172,6 +172,7 @@ export default function NewConversationMenu() {
                 presets={presets}
                 onSelect={onSelectPreset}
                 onChangePreset={onChangePreset}
+                onDeletePreset={clearPresetsTrigger}
               />
             ) : (
               <DropdownMenuLabel className="dark:text-gray-300">No preset yet.</DropdownMenuLabel>

client/src/components/Input/Endpoints/PresetItem.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { DropdownMenuRadioItem } from '../../ui/DropdownMenu.tsx';
 import EditIcon from '../../svg/EditIcon';
+import TrashIcon from '../../svg/TrashIcon';
 import getIcon from '~/utils/getIcon';
 
-export default function PresetItem({ preset = {}, value, onSelect, onChangePreset }) {
+export default function PresetItem({ preset = {}, value, onSelect, onChangePreset, onDeletePreset }) {
   const { endpoint } = preset;
 
   const icon = getIcon({
@@ -55,7 +56,16 @@ export default function PresetItem({ preset = {}, value, onSelect, onChangePrese
       /> */}
       <div className="flex w-4 flex-1" />
       <button
-        className="invisible m-0 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
+        className="invisible m-0 mr-1 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
+        onClick={e => {
+          e.preventDefault();
+          onDeletePreset(preset);
+        }}
+      >
+        <TrashIcon />
+      </button>
+      <button
+        className="invisible m-0 p-2 rounded-md text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
         onClick={e => {
           e.preventDefault();
           onChangePreset(preset);

client/src/components/Input/Endpoints/PresetItems.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PresetItem from './PresetItem';
 
-export default function PresetItems({ presets, onSelect, onChangePreset }) {
+export default function PresetItems({ presets, onSelect, onChangePreset, onDeletePreset }) {
   return (
     <>
       {presets.map(preset => (
@@ -10,6 +10,7 @@ export default function PresetItems({ presets, onSelect, onChangePreset }) {
           value={preset}
           onSelect={onSelect}
           onChangePreset={onChangePreset}
+          onDeletePreset={onDeletePreset}
           preset={preset}
         />
       ))}