added some types in problematic points

This commit is contained in:
anovazzi1 2023-08-03 18:35:13 -03:00
commit d2c2fe6db0
10 changed files with 36 additions and 18 deletions

View file

@ -1,5 +1,11 @@
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import React, { ReactNode, useContext, useEffect, useRef, useState } from "react"; import React, {
ReactNode,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../../../components/codeAreaComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent";
@ -17,6 +23,7 @@ import { TOOLTIP_EMPTY } from "../../../../constants/constants";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components"; import { ParameterComponentType } from "../../../../types/components";
import { TabsState } from "../../../../types/tabs";
import { isValidConnection } from "../../../../utils/reactflowUtils"; import { isValidConnection } from "../../../../utils/reactflowUtils";
import { import {
nodeColors, nodeColors,
@ -71,7 +78,8 @@ export default function ParameterComponent({
newData.node!.template[name].value = newValue; newData.node!.template[name].value = newValue;
setData(newData); setData(newData);
// Set state to pending // Set state to pending
setTabsState((prev) => { //@ts-ignore
setTabsState((prev: TabsState) => {
return { return {
...prev, ...prev,
[tabId]: { [tabId]: {

View file

@ -9,6 +9,7 @@ import { FlowType } from "../../../types/flow";
import { TabsContext } from "../../../contexts/tabsContext"; import { TabsContext } from "../../../contexts/tabsContext";
import { parsedDataType } from "../../../types/components"; import { parsedDataType } from "../../../types/components";
import { TabsState } from "../../../types/tabs";
import { validateNodes } from "../../../utils/reactflowUtils"; import { validateNodes } from "../../../utils/reactflowUtils";
import RadialProgressComponent from "../../RadialProgress"; import RadialProgressComponent from "../../RadialProgress";
import IconComponent from "../../genericIconComponent"; import IconComponent from "../../genericIconComponent";
@ -90,7 +91,8 @@ export default function BuildTrigger({
// If the event is a log, log it // If the event is a log, log it
setSuccessData({ title: parsedData.log }); setSuccessData({ title: parsedData.log });
} else if (parsedData.input_keys) { } else if (parsedData.input_keys) {
setTabsState((old) => { //@ts-ignore
setTabsState((old: TabsState) => {
return { return {
...old, ...old,
[flowId]: { [flowId]: {

View file

@ -26,7 +26,7 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
function handleAddFlow() { function handleAddFlow() {
try { try {
addFlow(null, true).then((id) => { addFlow(undefined, true).then((id) => {
navigate("/flow/" + id); navigate("/flow/" + id);
}); });
// saveFlowStyleInDataBase(); // saveFlowStyleInDataBase();
@ -46,7 +46,9 @@ export const MenuBar = ({ flows, tabId }: menuBarPropsType): JSX.Element => {
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button asChild variant="primary" size="sm"> <Button asChild variant="primary" size="sm">
<div className="header-menu-bar-display"> <div className="header-menu-bar-display">
<div className="header-menu-flow-name">{current_flow!.name}</div> <div className="header-menu-flow-name">
{current_flow!.name}
</div>
<IconComponent name="ChevronDown" className="h-4 w-4" /> <IconComponent name="ChevronDown" className="h-4 w-4" />
</div> </div>
</Button> </Button>

View file

@ -7,7 +7,7 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { addEdge } from "reactflow"; import { Node, addEdge } from "reactflow";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
import { import {
deleteFlowFromDatabase, deleteFlowFromDatabase,
@ -18,7 +18,7 @@ import {
uploadFlowsToDatabase, uploadFlowsToDatabase,
} from "../controllers/API"; } from "../controllers/API";
import { APIClassType, APITemplateType } from "../types/api"; import { APIClassType, APITemplateType } from "../types/api";
import { FlowType, NodeType } from "../types/flow"; import { FlowType, NodeDataType, NodeType } from "../types/flow";
import { TabsContextType, TabsState } from "../types/tabs"; import { TabsContextType, TabsState } from "../types/tabs";
import { import {
addVersionToDuplicates, addVersionToDuplicates,
@ -73,7 +73,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const [flows, setFlows] = useState<Array<FlowType>>([]); const [flows, setFlows] = useState<Array<FlowType>>([]);
const [id, setId] = useState(uid()); const [id, setId] = useState(uid());
const { templates, reactFlowInstance } = useContext(typesContext); const { templates, reactFlowInstance } = useContext(typesContext);
const [lastCopiedSelection, setLastCopiedSelection] = useState(null); const [lastCopiedSelection, setLastCopiedSelection] = useState<{
nodes: any;
edges: any;
} | null>(null);
const [tabsState, setTabsState] = useState<TabsState>({}); const [tabsState, setTabsState] = useState<TabsState>({});
const [getTweak, setTweak] = useState([]); const [getTweak, setTweak] = useState([]);
@ -318,7 +321,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// add a change event listener to the file input // add a change event listener to the file input
input.onchange = (e: Event) => { input.onchange = (e: Event) => {
// check if the file type is application/json // check if the file type is application/json
if ((e.target as HTMLInputElement).files![0].type === "application/json") { if (
(e.target as HTMLInputElement).files![0].type === "application/json"
) {
// get the file from the file input // get the file from the file input
const file = (e.target as HTMLInputElement).files![0]; const file = (e.target as HTMLInputElement).files![0];
// read the file as text // read the file as text
@ -357,7 +362,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
let minimumX = Infinity; let minimumX = Infinity;
let minimumY = Infinity; let minimumY = Infinity;
let idsMap = {}; let idsMap = {};
let nodes = reactFlowInstance!.getNodes(); let nodes: Node<NodeDataType>[] = reactFlowInstance!.getNodes();
let edges = reactFlowInstance!.getEdges(); let edges = reactFlowInstance!.getEdges();
selectionInstance.nodes.forEach((n) => { selectionInstance.nodes.forEach((n) => {
if (n.position.y < minimumY) { if (n.position.y < minimumY) {

View file

@ -8,7 +8,7 @@ import { typesContextType } from "../types/typesContext";
const initialValue: typesContextType = { const initialValue: typesContextType = {
reactFlowInstance: null, reactFlowInstance: null,
setReactFlowInstance: () => {}, setReactFlowInstance: (newState: ReactFlowInstance) => {},
deleteNode: () => {}, deleteNode: () => {},
types: {}, types: {},
setTypes: () => {}, setTypes: () => {},
@ -22,7 +22,8 @@ export const typesContext = createContext<typesContextType>(initialValue);
export function TypesProvider({ children }: { children: ReactNode }) { export function TypesProvider({ children }: { children: ReactNode }) {
const [types, setTypes] = useState({}); const [types, setTypes] = useState({});
const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null); const [reactFlowInstance, setReactFlowInstance] =
useState<ReactFlowInstance | null>(null);
const [templates, setTemplates] = useState({}); const [templates, setTemplates] = useState({});
const [data, setData] = useState({}); const [data, setData] = useState({});

View file

@ -37,7 +37,6 @@ const ExportModal = forwardRef(
tabId={tabId} tabId={tabId}
setName={setName} setName={setName}
setDescription={setDescription} setDescription={setDescription}
updateFlow={updateFlow}
/> />
<div className="mt-3 flex items-center space-x-2"> <div className="mt-3 flex items-center space-x-2">
<Checkbox <Checkbox

View file

@ -180,7 +180,6 @@ export type InputProps = {
invalidName: boolean; invalidName: boolean;
setName: (name: string) => void; setName: (name: string) => void;
setDescription: (description: string) => void; setDescription: (description: string) => void;
updateFlow: (flow: { id: string; name: string; }) => void;
setInvalidName: (invalidName: boolean) => void; setInvalidName: (invalidName: boolean) => void;
}; };

View file

@ -11,7 +11,7 @@ export type FlowType = {
export type NodeType = { export type NodeType = {
id: string; id: string;
type?: string; type?: string;
position: XYPosition | undefined; position: XYPosition;
data: NodeDataType; data: NodeDataType;
}; };

View file

@ -1,4 +1,3 @@
import { Dispatch, SetStateAction } from "react";
import { FlowType, TweaksType } from "../flow"; import { FlowType, TweaksType } from "../flow";
export type TabsContextType = { export type TabsContextType = {
@ -8,7 +7,10 @@ export type TabsContextType = {
setTabId: (index: string) => void; setTabId: (index: string) => void;
flows: Array<FlowType>; flows: Array<FlowType>;
removeFlow: (id: string) => void; removeFlow: (id: string) => void;
addFlow: (flowData?: FlowType | undefined | null, newProject?: boolean) => Promise<String>; addFlow: (
flow?: FlowType,
newProject?: Boolean
) => Promise<String | undefined>;
updateFlow: (newFlow: FlowType) => void; updateFlow: (newFlow: FlowType) => void;
incrementNodeId: () => string; incrementNodeId: () => string;
downloadFlow: ( downloadFlow: (

View file

@ -8,7 +8,7 @@ const data: { [char: string]: string } = {};
export type typesContextType = { export type typesContextType = {
reactFlowInstance: ReactFlowInstance | null; reactFlowInstance: ReactFlowInstance | null;
setReactFlowInstance: () => void; setReactFlowInstance: (newState: ReactFlowInstance) => void;
deleteNode: (idx: string) => void; deleteNode: (idx: string) => void;
types: typeof types; types: typeof types;
setTypes: (newState: {}) => void; setTypes: (newState: {}) => void;