jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Feat: Save user config in localStorage

Browse source
This commit is contained in:
igorrCarvalho 2024-05-02 18:15:34 -03:00
commit 5bd9aba922
2 changed files with 39 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
View file

@ -1,36 +1,32 @@
//TODO IMPLEMENT FORM LOGIC
import { useEffect, useState } from "react";
import useAlertStore from "../../../../../stores/alertStore";
import { useTypesStore } from "../../../../../stores/typesStore";
import { useGlobalVariablesStore } from "../../../../../stores/globalVariables";
import { registerGlobalVariable } from "../../../../../controllers/API";
import { ResponseErrorDetailAPI } from "../../../../../types/api";
import BaseModal from "../../../../../modals/baseModal";
import { Label } from "@radix-ui/react-select";
import { Input } from "../../../../../components/ui/input";
import InputComponent from "../../../../../components/inputComponent";
import { Textarea } from "../../../../../components/ui/textarea";
import { Button } from "../../../../../components/ui/button";
import ForwardedIconComponent from "../../../../../components/genericIconComponent";
import { defaultShortcuts } from "../../../../../constants/constants";
import { useShortcutsStore } from "../../../../../stores/shortcuts";
export default function EditShortcutButton({ children, shortcut, defaultShortcuts, defaultCombination, open, setOpen, }: {children: JSX.Element; shortcut: string[]; defaultShortcuts: Array<{name: string; shortcut: string;}>; defaultCombination: string; open: boolean; setOpen: (bool: boolean) => void;}): JSX.Element {
export default function EditShortcutButton({
children,
shortcut,
defaultShortcuts,
defaultCombination,
open,
setOpen
}: {
children: JSX.Element;
shortcut: string[];
defaultShortcuts: Array<{name: string; shortcut: string;}>;
defaultCombination: string;
open: boolean;
setOpen: (bool: boolean) => void;
}): JSX.Element {
const isMac = navigator.userAgent.toUpperCase().includes("MAC");
const [key, setKey] = useState<string>(isMac ? "Meta" : 'Ctrl');
const setSuccessData = useAlertStore(state => state.setSuccessData)
const setShortcuts = useShortcutsStore(state => state.setShortcuts);
const unavaliableShortcuts = useShortcutsStore(state => state.unavailableShortcuts);
const isMac = navigator.userAgent.toUpperCase().includes("MAC");
const [fields, setFields] = useState<string[]>([]);
const setErrorData = useAlertStore((state) => state.setErrorData);
const componentFields = useTypesStore((state) => state.ComponentFields);
const unavaliableFields =new Set(Object.keys(useGlobalVariablesStore(
(state) => state.unavaliableFields
)));
const [key, setKey] = useState<string>(isMac ? "Meta" : 'Ctrl');
function canEditCombination(newCombination: string): boolean {
let canSave = true;
@ -64,7 +60,9 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
setShortcuts(newCombination, unavailable)
setOpen(false)
setSuccessData({title: `${shortcut[0]} shortcut successfully changed`})
setKey(isMac ? "META" : 'CTRL')
setKey(isMac ? "META" : 'CTRL');
localStorage.setItem("langflow-shortcuts", JSON.stringify(newCombination));
localStorage.setItem("langflow-UShortcuts", JSON.stringify(unavailable));
return;
}
setErrorData({title: "Error saving key combination", list: ["This combination already exists!"]})
@ -72,7 +70,8 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
useEffect(() => {
if (!open) setKey(isMac ? "META" : 'CTRL')
}, [open, setOpen])
console.log(key)
}, [open, setOpen, key])
useEffect(() => {
function onKeyDown(e: KeyboardEvent) {
@ -89,7 +88,7 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
}, [key, setKey])
return (
<BaseModal open={open} setOpen={setOpen} size="x-small">
<BaseModal open={open} setOpen={setOpen} size="smaller">
<BaseModal.Header
description={
"Set your new key combination"
@ -105,13 +104,14 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Content>
<div className="flex h-full w-full gap-4 align-center justify-center">
<div className="font-bold">
<div className="font-bold text-lg flex items-center justify-center text-center">
{key.toUpperCase()}
</div>
</div>
</BaseModal.Content>
<BaseModal.Footer>
<Button onClick={editCombination}>Edit Combination</Button>
<Button onClick={editCombination} >Edit Combination</Button>
<Button className="mr-5" variant={"destructive"} onClick={() => setKey(isMac ? "META" : 'CTRL')}>Reset Combination</Button>
</BaseModal.Footer>
</BaseModal>
);

16
src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
View file

@ -15,7 +15,8 @@ import { useShortcutsStore } from "../../../../stores/shortcuts";
export default function ShortcutsPage() {
const [selectedRows, setSelectedRows] = useState<string[]>([]);
const shortcuts = useShortcutsStore(state => state.shortcuts)
const shortcuts = useShortcutsStore(state => state.shortcuts);
const setShortcuts = useShortcutsStore(state => state.setShortcuts);
// Column Definitions: Defines the columns to be displayed.
const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
@ -44,10 +45,17 @@ export default function ShortcutsPage() {
const combinationToEdit = shortcuts.filter((s) => s.name === selectedRows[0])
const [open, setOpen] = useState(false);
const unavaliableShortcuts = useShortcutsStore(state => state.unavailableShortcuts);
useEffect(() => {
if (localStorage.getItem("langflow-shortcuts")) {
const savedShortcuts = localStorage.getItem("langflow-shortcuts");
const savedUShortcuts = localStorage.getItem("langflow-UShortcuts");
setShortcuts(JSON.parse(savedShortcuts!), JSON.parse(savedUShortcuts!));
}
}, [])
return (
<div className="flex h-full w-full flex-col gap-6">
<div className="flex h-full w-full flex-col gap-6 ">
<div className="flex w-full items-center justify-between gap-4 space-y-0.5">
<div className="flex w-full flex-col">
<h2 className="flex items-center text-lg font-semibold tracking-tight">