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

Fixed typing and naming of zustand functions

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-05 12:17:52 -03:00
commit a75d70b49c
20 changed files with 125 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -31,7 +31,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
import { typesContext } from "../../../../contexts/typesContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import { postCustomComponentUpdate } from "../../../../controllers/API";
import useFlow from "../../../../stores/flowManagerStore";
import useFlowStore from "../../../../stores/flowStore";
import { APIClassType } from "../../../../types/api";
import { ParameterComponentType } from "../../../../types/components";
import { NodeDataType } from "../../../../types/flow";
@ -72,9 +72,9 @@ export default function ParameterComponent({
const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0);
const { tabId, flows } = useContext(FlowsContext);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const setNode = useFlow((state) => state.setNode);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;

6
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -16,7 +16,7 @@ import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, cn, getFieldTitle } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent";
import useFlow from "../../stores/flowManagerStore";
import useFlowStore from "../../stores/flowStore";
export default function GenericNode({
data,
@ -30,8 +30,8 @@ export default function GenericNode({
yPos: number;
}): JSX.Element {
const { types } = useContext(typesContext);
const deleteNode = useFlow((state) => state.deleteNode);
const setNode = useFlow((state) => state.setNode);
const deleteNode = useFlowStore((state) => state.deleteNode);
const setNode = useFlowStore((state) => state.setNode);
const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
const [inputName, setInputName] = useState(false);
const [nodeName, setNodeName] = useState(data.node!.display_name);

6
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -12,7 +12,7 @@ import { FlowsState } from "../../../types/tabs";
import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent";
import useFlow from "../../../stores/flowManagerStore";
import useFlowStore from "../../../stores/flowStore";
export default function BuildTrigger({
open,
@ -26,8 +26,8 @@ export default function BuildTrigger({
}): JSX.Element {
const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
const { setTabsState, saveFlow } = useContext(FlowsContext);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const { setErrorData, setSuccessData } = useContext(alertContext);
const [isIconTouched, setIsIconTouched] = useState(false);
const eventClick = isBuilding ? "pointer-events-none" : "";

8
src/frontend/src/components/chatComponent/index.tsx
View file

@ -9,14 +9,14 @@ import { FlowsContext } from "../../contexts/flowsContext";
import { getBuildStatus } from "../../controllers/API";
import FormModal from "../../modals/formModal";
import { NodeType } from "../../types/flow";
import useFlow from "../../stores/flowManagerStore";
import useFlowStore from "../../stores/flowStore";
export default function Chat({ flow }: ChatType): JSX.Element {
const [open, setOpen] = useState(false);
const [canOpen, setCanOpen] = useState(false);
const isBuilt = useFlow((state) => state.isBuilt);
const setIsBuilt = useFlow((state) => state.setIsBuilt);
const isPending = useFlow((state) => state.isPending);
const isBuilt = useFlowStore((state) => state.isBuilt);
const setIsBuilt = useFlowStore((state) => state.setIsBuilt);
const isPending = useFlowStore((state) => state.isPending);
const { tabsState } =
useContext(FlowsContext);

4
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -40,7 +40,7 @@ import { classNames } from "../../utils/utils";
import DictComponent from "../dictComponent";
import IconComponent from "../genericIconComponent";
import KeypairListComponent from "../keypairListComponent";
import useFlow from "../../stores/flowManagerStore";
import useFlowStore from "../../stores/flowStore";
export default function CodeTabsComponent({
flow,
@ -55,7 +55,7 @@ export default function CodeTabsComponent({
const [openAccordion, setOpenAccordion] = useState<string[]>([]);
const dark = useDarkStore((state) => state.dark);
const setNodes = useFlow((state) => state.setNodes);
const setNodes = useFlowStore((state) => state.setNodes);
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);

12
src/frontend/src/contexts/flowsContext.tsx
View file

@ -62,7 +62,7 @@ import {
import { alertContext } from "./alertContext";
import { AuthContext } from "./authContext";
import { typesContext } from "./typesContext";
import useFlow from "../stores/flowManagerStore";
import useFlowStore from "../stores/flowStore";
const uid = new ShortUniqueId({ length: 5 });
@ -104,11 +104,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
const { setData } = useContext(typesContext);
const [tabsState, setTabsState] = useState<FlowsState>({});
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
const setPending = useFlow((state) => state.setPending);
const paste = useFlow((state) => state.paste);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setPending = useFlowStore((state) => state.setPending);
const paste = useFlowStore((state) => state.paste);
function refreshFlows() {
setIsLoading(true);

10
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -13,7 +13,7 @@ import {
} from "../types/typesContext";
import { isWrappedWithClass } from "../utils/utils";
import { FlowsContext } from "./flowsContext";
import useFlow from "../stores/flowManagerStore";
import useFlowStore from "../stores/flowStore";
const initialValue = {
undo: () => {},
@ -32,10 +32,10 @@ export function UndoRedoProvider({ children }) {
const { tabId, flows } =
useContext(FlowsContext);
const setNodes = useFlow((state) => state.setNodes);
const setEdges = useFlow((state) => state.setEdges);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));

10
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -38,7 +38,7 @@ import {
} from "../../utils/reactflowUtils";
import { classNames } from "../../utils/utils";
import BaseModal from "../baseModal";
import useFlow from "../../stores/flowManagerStore";
import useFlowStore from "../../stores/flowStore";
const EditNodeModal = forwardRef(
(
@ -57,10 +57,10 @@ const EditNodeModal = forwardRef(
) => {
const [myData, setMyData] = useState(data);
const setPending = useFlow((state) => state.setPending);
const edges = useFlow((state) => state.edges);
const setNode = useFlow((state) => state.setNode);
const setPending = useFlowStore((state) => state.setPending);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
const { setModalContextOpen } = useContext(alertContext);
function changeAdvanced(n) {

6
src/frontend/src/modals/formModal/index.tsx
View file

@ -25,7 +25,7 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { FlowsContext } from "../../contexts/flowsContext";
import { getBuildStatus } from "../../controllers/API";
import useFlow from "../../stores/flowManagerStore";
import useFlowStore from "../../stores/flowStore";
import { FlowsState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils";
@ -39,8 +39,8 @@ export default function FormModal({
flow: FlowType;
}): JSX.Element {
const { tabsState, setTabsState } = useContext(FlowsContext);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const [chatValue, setChatValue] = useState(() => {
try {
const { formKeysData } = tabsState[flow.id];

30
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -26,7 +26,7 @@ import { FlowsContext } from "../../../../contexts/flowsContext";
import { locationContext } from "../../../../contexts/locationContext";
import { typesContext } from "../../../../contexts/typesContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import useFlow from "../../../../stores/flowManagerStore";
import useFlowStore from "../../../../stores/flowStore";
import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType } from "../../../../types/flow";
import {
@ -63,20 +63,20 @@ export default function Page({
const { takeSnapshot } = useContext(undoRedoContext);
const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlow((state) => state.setReactFlowInstance);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const onNodesChange = useFlow((state) => state.onNodesChange);
const onEdgesChange = useFlow((state) => state.onEdgesChange);
const onConnect = useFlow((state) => state.onConnect);
const setNodes = useFlow((state) => state.setNodes);
const setEdges = useFlow((state) => state.setEdges);
const deleteNode = useFlow((state) => state.deleteNode);
const deleteEdge = useFlow((state) => state.deleteEdge);
const setPending = useFlow((state) => state.setPending);
const isPending = useFlow((state) => state.isPending);
const paste = useFlow((state) => state.paste);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore((state) => state.setReactFlowInstance);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const onNodesChange = useFlowStore((state) => state.onNodesChange);
const onEdgesChange = useFlowStore((state) => state.onEdgesChange);
const onConnect = useFlowStore((state) => state.onConnect);
const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges);
const deleteNode = useFlowStore((state) => state.deleteNode);
const deleteEdge = useFlowStore((state) => state.deleteEdge);
const setPending = useFlowStore((state) => state.setPending);
const isPending = useFlowStore((state) => state.isPending);
const paste = useFlowStore((state) => state.paste);
const position = useRef({ x: 0, y: 0 });
const [lastSelection, setLastSelection] =

6
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -10,7 +10,7 @@ import { typesContext } from "../../../../contexts/typesContext";
import ApiModal from "../../../../modals/ApiModal";
import ExportModal from "../../../../modals/exportModal";
import ShareModal from "../../../../modals/shareModal";
import useFlow from "../../../../stores/flowManagerStore";
import useFlowStore from "../../../../stores/flowStore";
import { useStoreStore } from "../../../../stores/storeStore";
import { APIClassType, APIObjectType } from "../../../../types/api";
import {
@ -35,8 +35,8 @@ export default function ExtraSidebar(): JSX.Element {
const hasApiKey = useStoreStore((state) => state.hasApiKey);
const validApiKey = useStoreStore((state) => state.validApiKey);
const isBuilt = useFlow((state) => state.isBuilt);
const isPending = useFlow((state) => state.isPending);
const isBuilt = useFlowStore((state) => state.isBuilt);
const isPending = useFlowStore((state) => state.isPending);
const { setErrorData } = useContext(alertContext);
const [dataFilter, setFilterData] = useState(data);
const [search, setSearch] = useState("");

12
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -13,7 +13,7 @@ import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import ConfirmationModal from "../../../../modals/ConfirmationModal";
import EditNodeModal from "../../../../modals/EditNodeModal";
import ShareModal from "../../../../modals/shareModal";
import useFlow from "../../../../stores/flowManagerStore";
import useFlowStore from "../../../../stores/flowStore";
import { useStoreStore } from "../../../../stores/storeStore";
import { nodeToolbarPropsType } from "../../../../types/components";
import { FlowType } from "../../../../types/flow";
@ -66,11 +66,11 @@ export default function NodeToolbarComponent({
const isMinimal = canMinimize();
const isGroup = data.node?.flow ? true : false;
const paste = useFlow((state) => state.paste);
const nodes = useFlow((state) => state.nodes);
const edges = useFlow((state) => state.edges);
const setNodes = useFlow((state) => state.setNodes);
const setEdges = useFlow((state) => state.setEdges);
const paste = useFlowStore((state) => state.paste);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNodes = useFlowStore((state) => state.setNodes);
const setEdges = useFlowStore((state) => state.setEdges);
const { saveComponent, flows, version } = useContext(FlowsContext);
const { takeSnapshot } = useContext(undoRedoContext);

15
src/frontend/src/stores/darkStore.tsx
View file

@ -1,17 +1,6 @@
import { create } from "zustand";
import { getRepoStars } from "../controllers/API";
type State = {
dark: boolean;
stars: number;
gradientIndex: number;
};
type Action = {
setDark: (dark: State["dark"]) => void;
setStars: (starts: State["stars"]) => void;
setGradientIndex: (gradientIndex: State["gradientIndex"]) => void;
};
import { DarkStoreType } from "../types/zustand/dark";
function gradientIndexInitialState() {
const min = 0;
@ -19,7 +8,7 @@ function gradientIndexInitialState() {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
export const useDarkStore = create<State & Action>((set) => ({
export const useDarkStore = create<DarkStoreType>((set) => ({
dark: JSON.parse(window.localStorage.getItem("isDark")!) ?? false,
stars: 0,
gradientIndex: gradientIndexInitialState(),

29
src/frontend/src/stores/flowManagerStore.ts → src/frontend/src/stores/flowStore.ts
View file

@ -27,33 +27,10 @@ import {
scapeJSONParse,
scapedJSONStringfy,
} from "../utils/reactflowUtils";
type RFState = {
reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: (newState: ReactFlowInstance) => void;
nodes: Node[];
edges: Edge[];
onNodesChange: OnNodesChange;
onEdgesChange: OnEdgesChange;
setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
getNode: (id: string) => Node | undefined;
onConnect: OnConnect;
deleteNode: (nodeId: string | Array<string>) => void;
deleteEdge: (edgeId: string | Array<string>) => void;
paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number }
) => void;
isBuilt: boolean;
setIsBuilt: (isBuilt: boolean) => void;
isPending: boolean;
setPending: (pending: boolean) => void;
};
import { FlowStoreType } from "../types/zustand/flow";
// this is our useStore hook that we can use in our components to get parts of the store and call actions
const useFlow = create<RFState>((set, get) => ({
const useFlowStore = create<FlowStoreType>((set, get) => ({
reactFlowInstance: null,
setReactFlowInstance: (newState) => {
set({ reactFlowInstance: newState });
@ -245,4 +222,4 @@ const useFlow = create<RFState>((set, get) => ({
},
}));
export default useFlow;
export default useFlowStore;

9
src/frontend/src/stores/flowsManagerStore.ts Normal file
View file

@ -0,0 +1,9 @@
import { create } from "zustand";
import { FlowsContextType } from "../types/tabs";
import { FlowsManagerStoreType } from "../types/zustand/flowsManager";
const useFlowStore = create<FlowsManagerStoreType>((set, get) => ({
flows: [],
}));
export default useFlowStore;

17
src/frontend/src/stores/storeStore.tsx
View file

@ -1,21 +1,8 @@
import { create } from "zustand";
import { checkHasApiKey, checkHasStore } from "../controllers/API";
import { StoreStoreType } from "../types/zustand/store";
type State = {
hasStore: boolean;
validApiKey: boolean;
hasApiKey: boolean;
loadingApiKey: boolean;
};
type Action = {
updateHasStore: (hasStore: State["hasStore"]) => void;
updateValidApiKey: (validApiKey: State["validApiKey"]) => void;
updateHasApiKey: (hasApiKey: State["hasApiKey"]) => void;
updateLoadingApiKey: (loadingApiKey: State["loadingApiKey"]) => void;
};
export const useStoreStore = create<State & Action>((set) => ({
export const useStoreStore = create<StoreStoreType>((set) => ({
hasStore: true,
validApiKey: false,
hasApiKey: false,

8
src/frontend/src/types/zustand/dark/index.ts Normal file
View file

@ -0,0 +1,8 @@
export type DarkStoreType = {
dark: boolean;
stars: number;
gradientIndex: number;
setDark: (dark: boolean) => void;
setStars: (stars: number) => void;
setGradientIndex: (gradientIndex: number) => void;
};

25
src/frontend/src/types/zustand/flow/index.ts Normal file
View file

@ -0,0 +1,25 @@
import { Node, Edge, OnEdgesChange, OnNodesChange, ReactFlowInstance, OnConnect } from "reactflow";
export type FlowStoreType = {
reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: (newState: ReactFlowInstance) => void;
nodes: Node[];
edges: Edge[];
onNodesChange: OnNodesChange;
onEdgesChange: OnEdgesChange;
setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void;
setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void;
setNode: (id: string, update: Node | ((oldState: Node) => Node)) => void;
getNode: (id: string) => Node | undefined;
onConnect: OnConnect;
deleteNode: (nodeId: string | Array<string>) => void;
deleteEdge: (edgeId: string | Array<string>) => void;
paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number }
) => void;
isBuilt: boolean;
setIsBuilt: (isBuilt: boolean) => void;
isPending: boolean;
setPending: (pending: boolean) => void;
};

7
src/frontend/src/types/zustand/flowsManager/index.ts Normal file
View file

@ -0,0 +1,7 @@
import { XYPosition } from "reactflow";
import { FlowType, NodeDataType } from "../../flow";
import { FlowsState } from "../../tabs";
export type FlowsManagerStoreType = {
flows: Array<FlowType>;
};

10
src/frontend/src/types/zustand/store/index.ts Normal file
View file

@ -0,0 +1,10 @@
export type StoreStoreType = {
hasStore: boolean;
validApiKey: boolean;
hasApiKey: boolean;
loadingApiKey: boolean;
updateHasStore: (hasStore: boolean) => void;
updateValidApiKey: (validApiKey: boolean) => void;
updateHasApiKey: (hasApiKey: boolean) => void;
updateLoadingApiKey: (loadingApiKey: boolean) => void;
};