chore: fix frontend hook dependencies

.eslintrc.js

@@ -1,12 +1,16 @@
-const rules = {};
+const rules = {
+	'unicorn/no-array-for-each': 2,
+};
 
 const tsWebRules = {
 	...rules,
 	'@next/next/no-html-link-for-pages': 0,
+	'react-hooks/exhaustive-deps': 2,
 };
 
 const tsWebTestRules = {
 	...tsWebRules,
+	'testing-library/no-wait-for-side-effects': 0,
 	'no-restricted-imports': [
 		'error',
 		{
@@ -51,10 +55,10 @@ module.exports = {
 			rules,
 		},
 		{
-			files: ['{frontend,docs}/**/*.{ts,tsx}'],
+			files: ['frontend/**/*.{ts,tsx}'],
 			excludedFiles: [
-				'{frontend,docs}/**/tests/**/*.{ts,tsx}',
-				'{frontend,docs}/**/*.spec.{ts,tsx}',
+				'frontend/**/tests/**/*.{ts,tsx}',
+				'frontend/**/*.spec.{ts,tsx}',
 			],
 			extends: [
 				'@tool-belt/eslint-config/react',
@@ -64,17 +68,14 @@ module.exports = {
 		},
 		{
 			files: [
-				'{frontend,docs}/tests/**/*.{ts,tsx}',
-				'{frontend,docs}/**/*.spec.{ts,tsx}',
+				'frontend/**/tests/**/*.{ts,tsx}',
+				'frontend/**/*.spec.{ts,tsx}',
 			],
 			extends: [
 				'@tool-belt/eslint-config/react',
 				'plugin:vitest/recommended',
 			],
-			rules: {
-				...tsWebTestRules,
-				'testing-library/no-wait-for-side-effects': 0,
-			},
+			rules: tsWebTestRules,
 		},
 	],
 };

frontend/__mocks__/zustand.ts

@@ -7,18 +7,20 @@ function create() {
 	return <S>(createState: StateCreator<S>) => {
 		const store = actualCreate(createState);
 		const initialState = store.getState();
+
 		storeResetFns.add(() => {
 			store.setState(initialState, true);
 		});
+
 		return store;
 	};
 }
 
 beforeEach(() => {
 	act(() => {
-		storeResetFns.forEach((resetFn) => {
+		for (const resetFn of storeResetFns) {
 			resetFn();
-		});
+		}
 	});
 });
 

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx

@@ -158,38 +158,12 @@ export default function PromptConfigCreateWizard({
 
 	const store = usePromptWizardStore(wizardStoreSelector, shallow);
 
-	// callbacks
-	const handleConfigNameChange = useCallback(store.setConfigName, [
-		store.setConfigName,
-	]);
-
-	const handleModelVendorChange = useCallback(store.setModelVendor, [
-		store.setModelVendor,
-	]);
-
-	const handleModelTypeChange = useCallback(store.setModelType, [
-		store.setModelType,
-	]);
-
-	const handleMessagesChange = useCallback(store.setMessages, [
-		store.setMessages,
-	]);
-
-	const handleParametersChange = useCallback(store.setParameters, [
-		store.setParameters,
-	]);
-
 	const validateConfigName = useCallback(
 		(value: string) =>
 			!(promptConfigs[applicationId]?.map((c) => c.name) ?? []).includes(
 				value,
 			),
-		[promptConfigs],
-	);
-
-	const handleTemplateVariablesChange = useCallback(
-		store.setTemplateVariables,
-		[store.setTemplateVariables],
+		[applicationId, promptConfigs],
 	);
 
 	const handleRefreshProject = useCallback(async () => {
@@ -199,7 +173,16 @@ export default function PromptConfigCreateWizard({
 		} catch {
 			handleError(t('errorRefreshingProject'));
 		}
-	}, [setProjects]);
+	}, [setProjects, handleError, t]);
+
+	const handleChangeModelVendor = useCallback(
+		(vendor: ModelVendor) => {
+			store.setModelVendor(vendor);
+			store.setMessages([]);
+			store.setParameters({});
+		},
+		[store],
+	);
 
 	useEffect(() => {
 		if (initialized) {
@@ -209,7 +192,7 @@ export default function PromptConfigCreateWizard({
 				stage: store.wizardStage,
 			});
 		}
-	}, [initialized, store.wizardStage]);
+	}, [applicationId, projectId, page, initialized, store.wizardStage]);
 
 	const handleConfigSave = async () => {
 		setIsLoading(true);
@@ -279,15 +262,15 @@ export default function PromptConfigCreateWizard({
 						<WizardStageComponent
 							applicationId={applicationId}
 							credits={project?.credits ?? '1'}
-							handleConfigNameChange={handleConfigNameChange}
+							handleConfigNameChange={store.setConfigName}
 							handleError={handleError}
-							handleMessagesChange={handleMessagesChange}
-							handleModelTypeChange={handleModelTypeChange}
-							handleModelVendorChange={handleModelVendorChange}
-							handleParametersChange={handleParametersChange}
+							handleMessagesChange={store.setMessages}
+							handleModelTypeChange={store.setModelType}
+							handleModelVendorChange={handleChangeModelVendor}
+							handleParametersChange={store.setParameters}
 							handleRefreshProject={handleRefreshProject}
 							handleTemplateVariablesChange={
-								handleTemplateVariablesChange
+								store.setTemplateVariables
 							}
 							projectId={projectId}
 							setNameIsValid={setNameIsValid}

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx

@@ -108,7 +108,7 @@ export default function PromptConfiguration({
 				promptConfigId,
 			});
 		}
-	}, [initialized]);
+	}, [applicationId, projectId, promptConfigId, initialized, page]);
 
 	if (isLoading) {
 		return (

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/page.tsx

@@ -88,7 +88,7 @@ export default function Application({
 		if (initialized) {
 			page('applicationOverview', { applicationId, projectId });
 		}
-	}, [initialized]);
+	}, [applicationId, projectId, initialized, page]);
 
 	if (!application || !project) {
 		return null;

frontend/src/app/[locale]/projects/[projectId]/page.tsx

@@ -103,7 +103,7 @@ export default function ProjectOverview({
 		if (initialized) {
 			page('projectOverview', { projectId });
 		}
-	}, [initialized]);
+	}, [projectId, initialized, page]);
 
 	const tabs: TabData<ProjectPageTabNames>[] = [
 		{

frontend/src/app/[locale]/projects/create/page.tsx

@@ -25,13 +25,13 @@ export default function CreateProjectPage() {
 	const handleCancel = useCallback(() => {
 		setIsLoading(true);
 		router.replace(`${Navigation.Projects}/${projects[0].id}`);
-	}, [projects]);
+	}, [projects, router]);
 
 	useEffect(() => {
 		if (initialized) {
 			page('createProject');
 		}
-	}, [initialized]);
+	}, [initialized, page]);
 
 	const isInitialRef = useRef(projects.length > 0);
 

frontend/src/app/[locale]/projects/page.spec.tsx

@@ -32,8 +32,13 @@ describe('projects page tests', () => {
 			json: () => Promise.resolve([]),
 			ok: true,
 		});
-		const { result: setProjects } = renderHook(() => useSetProjects());
-		setProjects.current([]);
+		const {
+			result: { current: setProjects },
+		} = renderHook(() => useSetProjects());
+
+		act(() => {
+			setProjects([]);
+		});
 
 		render(<Projects />);
 		await waitFor(() => {
@@ -48,8 +53,12 @@ describe('projects page tests', () => {
 			json: () => Promise.resolve([]),
 			ok: true,
 		});
-		const { result: setProjects } = renderHook(() => useSetProjects());
-		setProjects.current([]);
+		const {
+			result: { current: setProjects },
+		} = renderHook(() => useSetProjects());
+		act(() => {
+			setProjects([]);
+		});
 
 		render(<Projects />);
 		await waitFor(() => {
@@ -64,16 +73,24 @@ describe('projects page tests', () => {
 			json: () => Promise.resolve([]),
 			ok: true,
 		});
-		const { result: setProjects } = renderHook(() => useSetProjects());
-		setProjects.current([]);
+		const {
+			result: { current: setProjects },
+		} = renderHook(() => useSetProjects());
+		act(() => {
+			setProjects([]);
+		});
 		render(<Projects />);
 		const projectsViewLoading = screen.getByTestId('projects-view-loading');
 		expect(projectsViewLoading).toBeInTheDocument();
 	});
 
 	it('rendering projects component change store value', async () => {
-		const { result: setProjects } = renderHook(() => useSetProjects());
-		setProjects.current([]);
+		const {
+			result: { current: setProjects },
+		} = renderHook(() => useSetProjects());
+		act(() => {
+			setProjects([]);
+		});
 
 		const projects = await ProjectFactory.batch(3);
 		const applications = await ApplicationFactory.batch(2);

frontend/src/app/[locale]/projects/page.tsx

@@ -45,7 +45,7 @@ export default function Projects() {
 		if (selectedProject) {
 			router.replace(`${Navigation.Projects}/${selectedProject.id}`);
 		}
-	}, [selectedProject]);
+	}, [selectedProject, router]);
 
 	return (
 		<main

frontend/src/app/[locale]/settings/page.tsx

@@ -17,7 +17,7 @@ export default function UserSettings() {
 		if (initialized) {
 			page('userSettings');
 		}
-	}, [initialized]);
+	}, [initialized, page]);
 
 	return (
 		<main

frontend/src/app/[locale]/sign-in/page.tsx

@@ -19,13 +19,13 @@ export default function SignIn() {
 
 	useEffect(() => {
 		page('auth');
-	}, [initialized]);
+	}, [initialized, page]);
 
 	useEffect(() => {
 		if (user) {
 			router.replace(Navigation.Projects);
 		}
-	}, [user]);
+	}, [user, router]);
 
 	return (
 		<main data-testid="login-container" className="flex bg-base-100 h-full">