Canvas: Fix linter errors
Change-Id: I602c1562d4ab2d948bb4dcf6caf66f185585d720
diff --git a/apps/canvas/front/src/components/node-app.tsx b/apps/canvas/front/src/components/node-app.tsx
index 5b4b3fa..3027f27 100644
--- a/apps/canvas/front/src/components/node-app.tsx
+++ b/apps/canvas/front/src/components/node-app.tsx
@@ -1,9 +1,9 @@
import { v4 as uuidv4 } from "uuid";
import { NodeRect } from './node-rect';
-import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable, GatewayTCPNode, GatewayHttpsNode } from '@/lib/state';
+import { useStateStore, ServiceNode, ServiceTypes, nodeLabel, BoundEnvVar, AppState, nodeIsConnectable, GatewayTCPNode, GatewayHttpsNode, AppNode } from '@/lib/state';
import { KeyboardEvent, FocusEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { z } from "zod";
-import { DeepPartial, EventType, useForm } from 'react-hook-form';
+import { DeepPartial, EventType, useForm, ControllerRenderProps, FieldPath } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
import { Input } from './ui/input';
@@ -69,7 +69,7 @@
export function NodeAppDetails({ id, data }: ServiceNode) {
const store = useStateStore();
- const nodes = useNodes();
+ const nodes = useNodes<AppNode>();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
mode: "onChange",
@@ -102,7 +102,7 @@
}),
});
portForm.reset();
- }, [data, portForm]);
+ }, [id, data, portForm, store]);
useEffect(() => {
const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { name, type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
console.log({ name, type });
@@ -129,8 +129,8 @@
}
});
return () => sub.unsubscribe();
- }, [form, store]);
- const focus = useCallback((field: any, name: string) => {
+ }, [id, form, store]);
+ const focus = useCallback((field: ControllerRenderProps<z.infer<typeof schema>, FieldPath<z.infer<typeof schema>>>, name: string) => {
return (e: HTMLElement | null) => {
field.ref(e);
if (e != null && name === data.activeField) {
@@ -141,7 +141,7 @@
});
}
}
- }, [data, store]);
+ }, [id, data, store]);
const [typeProps, setTypeProps] = useState({});
useEffect(() => {
if (data.activeField === "type") {
@@ -152,7 +152,7 @@
} else {
setTypeProps({});
}
- }, [store, data, setTypeProps]);
+ }, [id, data, store, setTypeProps]);
const editAlias = useCallback((e: BoundEnvVar) => {
return () => {
store.updateNodeData(id, {
@@ -168,7 +168,7 @@
});
};
}, [id, data, store]);
- const saveAlias = (e: BoundEnvVar, value: string, store: AppState) => {
+ const saveAlias = useCallback((e: BoundEnvVar, value: string, store: AppState) => {
store.updateNodeData(id, {
...data,
envVars: data.envVars!.map((o) => {
@@ -184,7 +184,7 @@
}
console.log(o);
if ("alias" in o) {
- const { alias: tmp, ...rest } = o;
+ const { alias: _, ...rest } = o;
console.log(rest);
return {
...rest,
@@ -197,7 +197,7 @@
};
}),
});
- };
+ }, [id, data]);
const saveAliasOnEnter = useCallback((e: BoundEnvVar) => {
return (event: KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
@@ -205,12 +205,12 @@
saveAlias(e, event.currentTarget.value, store);
}
}
- }, [id, data, store]);
+ }, [store, saveAlias]);
const saveAliasOnBlur = useCallback((e: BoundEnvVar) => {
return (event: FocusEvent<HTMLInputElement>) => {
saveAlias(e, event.currentTarget.value, store);
}
- }, [id, data, store]);
+ }, [store, saveAlias]);
const removePort = useCallback((portId: string) => {
// TODO(gio): this is ugly
const tcpRemoved = new Set<string>();
@@ -394,7 +394,7 @@
</SelectTrigger>
</FormControl>
<SelectContent>
- {nodes.filter((n) => n.type === "github" && n.data.repository?.id !== undefined).map((n) => (
+ {(nodes.filter((n) => n.type === "github" && n.data.repository?.id !== undefined) as GithubNode[]).map((n) => (
<SelectItem key={n.id} value={n.id}>{`${n.data.repository?.sshURL}`}</SelectItem>
))}
</SelectContent>