From 22cd8a461fe2b033492caa0bae472e7dcce51a1e Mon Sep 17 00:00:00 2001
From: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
Date: Thu, 11 Aug 2022 12:35:27 +0300
Subject: [PATCH] Fix types - Interface

---
 packages/interface/package.json                        |  3 ++-
 packages/interface/src/App.tsx                         |  6 +++---
 packages/interface/src/AppRouter.tsx                   |  2 +-
 packages/interface/src/components/file/FileList.tsx    |  8 +++++---
 packages/interface/src/components/file/FileThumb.tsx   |  2 +-
 packages/interface/src/components/file/Inspector.tsx   |  1 +
 packages/interface/src/components/file/Sidebar.tsx     |  3 ++-
 .../src/components/jobs/RunningJobsWidget.tsx          |  3 ++-
 packages/interface/src/components/layout/TopBar.tsx    |  6 +++---
 .../interface/src/components/primitive/Codeblock.tsx   |  2 +-
 .../interface/src/components/primitive/Listbox.tsx     |  2 +-
 packages/interface/src/screens/Content.tsx             |  2 +-
 packages/interface/src/screens/Debug.tsx               |  2 +-
 packages/interface/src/screens/Explorer.tsx            | 10 +++++-----
 packages/interface/src/screens/Overview.tsx            |  5 +++--
 packages/interface/src/screens/Photos.tsx              |  2 +-
 packages/interface/src/screens/Redirect.tsx            |  1 +
 packages/interface/src/screens/Tag.tsx                 |  4 ++--
 .../settings/library/LibraryGeneralSettings.tsx        |  3 +++
 .../src/screens/settings/library/TagsSettings.tsx      |  4 +++-
 .../src/screens/settings/node/LibrariesSettings.tsx    |  2 +-
 21 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/packages/interface/package.json b/packages/interface/package.json
index 0d5a34959..e3222e971 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -11,7 +11,8 @@
 		"./components/*": "./src/components/*"
 	},
 	"scripts": {
-		"icons": "./scripts/generateSvgImports.mjs"
+		"icons": "./scripts/generateSvgImports.mjs",
+		"lint": "eslint src/**/*.{ts,tsx} && tsc --noEmit"
 	},
 	"dependencies": {
 		"@apollo/client": "^3.6.9",
diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx
index 02484c6df..12d27ea0d 100644
--- a/packages/interface/src/App.tsx
+++ b/packages/interface/src/App.tsx
@@ -21,10 +21,10 @@ function RouterContainer(props: { props: AppProps }) {
 	const { data: client } = useBridgeQuery(['getNode']);
 
 	useEffect(() => {
-		setAppProps({
+		setAppProps((appProps) => ({
 			...appProps,
 			data_path: client?.data_path
-		});
+		}));
 	}, [client?.data_path]);
 
 	return (
@@ -40,7 +40,7 @@ export default function SpacedriveInterface(props: AppProps) {
 	useInvalidateQuery();
 
 	return (
-		<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
+		<ErrorBoundary FallbackComponent={ErrorFallback}>
 			<QueryClientProvider client={queryClient}>
 				{import.meta.env.MODE === 'development' && <ReactQueryDevtools position="bottom-right" />}
 				<RouterContainer props={props} />
diff --git a/packages/interface/src/AppRouter.tsx b/packages/interface/src/AppRouter.tsx
index c74fc65cb..cd1ed725b 100644
--- a/packages/interface/src/AppRouter.tsx
+++ b/packages/interface/src/AppRouter.tsx
@@ -44,7 +44,7 @@ export function AppRouter() {
 		if (libraryState.currentLibraryUuid === null && libraries && libraries.length > 0) {
 			libraryState.switchLibrary(libraries[0].uuid);
 		}
-	}, [libraryState.currentLibraryUuid, libraries]);
+	}, [libraryState, libraryState.currentLibraryUuid, libraries]);
 
 	return (
 		<>
diff --git a/packages/interface/src/components/file/FileList.tsx b/packages/interface/src/components/file/FileList.tsx
index 4f88db3f5..a8f89d0db 100644
--- a/packages/interface/src/components/file/FileList.tsx
+++ b/packages/interface/src/components/file/FileList.tsx
@@ -73,10 +73,11 @@ export const FileList: React.FC<{ location_id: number; path: string; limit: numb
 				index: goingUp ? selectedRowIndex - 1 : selectedRowIndex
 			});
 		}
-	}, [selectedRowIndex]);
+	}, [goingUp, selectedRowIndex]);
 
 	useEffect(() => {
 		setLocationId(props.location_id);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [props.location_id]);
 
 	useKey('ArrowUp', (e) => {
@@ -168,7 +169,7 @@ interface RenderItemProps {
 
 const RenderGridItem: React.FC<RenderItemProps> = ({ item, index, dirId }) => {
 	const { selectedRowIndex, setSelectedRowIndex } = useExplorerStore();
-	let [_, setSearchParams] = useSearchParams();
+	const [_, setSearchParams] = useSearchParams();
 
 	return (
 		<FileItem
@@ -189,7 +190,7 @@ const RenderGridItem: React.FC<RenderItemProps> = ({ item, index, dirId }) => {
 const RenderRow: React.FC<RenderItemProps> = ({ item, index, dirId }) => {
 	const { selectedRowIndex, setSelectedRowIndex } = useExplorerStore();
 	const isActive = selectedRowIndex === index;
-	let [_, setSearchParams] = useSearchParams();
+	const [_, setSearchParams] = useSearchParams();
 
 	return useMemo(
 		() => (
@@ -217,6 +218,7 @@ const RenderRow: React.FC<RenderItemProps> = ({ item, index, dirId }) => {
 				))}
 			</div>
 		),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[item.id, isActive]
 	);
 };
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index 162712245..e82f46832 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -32,7 +32,7 @@ export default function FileThumb(props: {
 	}
 
 	if (icons[props.file.extension as keyof typeof icons]) {
-		let Icon = icons[props.file.extension as keyof typeof icons];
+		const Icon = icons[props.file.extension as keyof typeof icons];
 		return <Icon className={clsx('max-w-[170px] w-full h-full', props.className)} />;
 	}
 	return <div></div>;
diff --git a/packages/interface/src/components/file/Inspector.tsx b/packages/interface/src/components/file/Inspector.tsx
index 8d08d26ea..427e87260 100644
--- a/packages/interface/src/components/file/Inspector.tsx
+++ b/packages/interface/src/components/file/Inspector.tsx
@@ -62,6 +62,7 @@ export const Inspector = (props: {
 		return () => {
 			clearTimeout(handler);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [note]);
 
 	const toggleFavorite = () => {
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 5012f89ba..a9e074ead 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -18,7 +18,7 @@ import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { DefaultProps } from '../primitive/types';
 
-interface SidebarProps extends DefaultProps {}
+type SidebarProps = DefaultProps;
 
 export const SidebarLink = (props: NavLinkProps & { children: React.ReactNode }) => (
 	<NavLink {...props}>
@@ -88,6 +88,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 
 	useEffect(() => {
 		if (libraries && !currentLibraryUuid) initLibraries(libraries);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [libraries, currentLibraryUuid]);
 
 	const { mutate: createLocation } = useLibraryMutation('locations.create');
diff --git a/packages/interface/src/components/jobs/RunningJobsWidget.tsx b/packages/interface/src/components/jobs/RunningJobsWidget.tsx
index d042f4a15..5c23d5821 100644
--- a/packages/interface/src/components/jobs/RunningJobsWidget.tsx
+++ b/packages/interface/src/components/jobs/RunningJobsWidget.tsx
@@ -55,8 +55,9 @@ export default function RunningJobsWidget() {
 
 	return (
 		<div className="flex flex-col space-y-4">
-			{jobs?.map((job) => (
+			{jobs?.map((job, index) => (
 				<Transition
+					key={job.id + index}
 					show={true}
 					enter="transition-translate ease-in-out duration-200"
 					enterFrom="translate-y-24"
diff --git a/packages/interface/src/components/layout/TopBar.tsx b/packages/interface/src/components/layout/TopBar.tsx
index cb49dcffa..929482595 100644
--- a/packages/interface/src/components/layout/TopBar.tsx
+++ b/packages/interface/src/components/layout/TopBar.tsx
@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { Shortcut } from '../primitive/Shortcut';
 import { DefaultProps } from '../primitive/types';
 
-export interface TopBarProps extends DefaultProps {}
+export type TopBarProps = DefaultProps;
 export interface TopBarButtonProps
 	extends DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	icon: React.ComponentType<IconProps>;
@@ -18,7 +18,7 @@ export interface TopBarButtonProps
 	left?: boolean;
 	right?: boolean;
 }
-interface SearchBarProps extends DefaultProps {}
+type SearchBarProps = DefaultProps;
 
 const TopBarButton: React.FC<TopBarButtonProps> = ({
 	icon: Icon,
@@ -90,7 +90,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 		}
 	});
 
-	let navigate = useNavigate();
+	const navigate = useNavigate();
 	return (
 		<>
 			<div
diff --git a/packages/interface/src/components/primitive/Codeblock.tsx b/packages/interface/src/components/primitive/Codeblock.tsx
index 3527eb426..8721283c7 100644
--- a/packages/interface/src/components/primitive/Codeblock.tsx
+++ b/packages/interface/src/components/primitive/Codeblock.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactJson, { ReactJsonViewProps } from 'react-json-view';
 
-export interface CodeBlockProps extends ReactJsonViewProps {}
+export type CodeBlockProps = ReactJsonViewProps;
 
 export default function CodeBlock(props: CodeBlockProps) {
 	return (
diff --git a/packages/interface/src/components/primitive/Listbox.tsx b/packages/interface/src/components/primitive/Listbox.tsx
index 2fc900812..a1eb11532 100644
--- a/packages/interface/src/components/primitive/Listbox.tsx
+++ b/packages/interface/src/components/primitive/Listbox.tsx
@@ -16,7 +16,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 		if (!selected) {
 			setSelected(props.options[0]);
 		}
-	}, [props.options]);
+	}, [props.options, selected]);
 
 	return (
 		<>
diff --git a/packages/interface/src/screens/Content.tsx b/packages/interface/src/screens/Content.tsx
index 3166734ff..cb94ffc1e 100644
--- a/packages/interface/src/screens/Content.tsx
+++ b/packages/interface/src/screens/Content.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const ContentScreen: React.FC<{}> = (props) => {
+export const ContentScreen: React.FC<unknown> = (props) => {
 	// const [address, setAddress] = React.useState('');
 	return (
 		<div className="flex flex-col w-full h-screen p-5 custom-scroll page-scroll">
diff --git a/packages/interface/src/screens/Debug.tsx b/packages/interface/src/screens/Debug.tsx
index 804b2066a..97326b21a 100644
--- a/packages/interface/src/screens/Debug.tsx
+++ b/packages/interface/src/screens/Debug.tsx
@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 
 import CodeBlock from '../components/primitive/Codeblock';
 
-export const DebugScreen: React.FC<{}> = (props) => {
+export const DebugScreen: React.FC<unknown> = (props) => {
 	const appPropsContext = useContext(AppPropsContext);
 	const { data: nodeState } = useBridgeQuery(['getNode']);
 	const { data: libraryState } = useBridgeQuery(['library.get']);
diff --git a/packages/interface/src/screens/Explorer.tsx b/packages/interface/src/screens/Explorer.tsx
index d8ca6e066..8c408fb4f 100644
--- a/packages/interface/src/screens/Explorer.tsx
+++ b/packages/interface/src/screens/Explorer.tsx
@@ -6,12 +6,12 @@ import { FileList } from '../components/file/FileList';
 import { Inspector } from '../components/file/Inspector';
 import { TopBar } from '../components/layout/TopBar';
 
-export const ExplorerScreen: React.FC<{}> = () => {
-	let [searchParams] = useSearchParams();
-	let path = searchParams.get('path') || '';
+export const ExplorerScreen: React.FC<unknown> = () => {
+	const [searchParams] = useSearchParams();
+	const path = searchParams.get('path') || '';
 
-	let { id } = useParams();
-	let location_id = Number(id);
+	const { id } = useParams();
+	const location_id = Number(id);
 
 	const [limit, setLimit] = React.useState(100);
 
diff --git a/packages/interface/src/screens/Overview.tsx b/packages/interface/src/screens/Overview.tsx
index 60ca38d26..2011fbff5 100644
--- a/packages/interface/src/screens/Overview.tsx
+++ b/packages/interface/src/screens/Overview.tsx
@@ -70,7 +70,7 @@ const StatItem: React.FC<StatItemProps> = (props) => {
 				setCount((count) => count + 1);
 			}, quadratic(appProps?.demoMode ? 1000 : 500, +size.value, count));
 		}
-	}, [count, size]);
+	}, [appProps?.demoMode, count, size]);
 
 	return (
 		<div
@@ -139,6 +139,7 @@ export const OverviewScreen = () => {
 
 			setOverviewStats(newStatistics);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [appProps, libraryStatistics]);
 
 	// useEffect(() => {
@@ -187,7 +188,7 @@ export const OverviewScreen = () => {
 						<Dialog
 							title="Add Device"
 							description="Connect a new device to your library. Either enter another device's code or copy this one."
-							ctaAction={() => {}}
+							// ctaAction={() => {}}
 							ctaLabel="Connect"
 							trigger={
 								<Button
diff --git a/packages/interface/src/screens/Photos.tsx b/packages/interface/src/screens/Photos.tsx
index ab87422e6..5112e4152 100644
--- a/packages/interface/src/screens/Photos.tsx
+++ b/packages/interface/src/screens/Photos.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const PhotosScreen: React.FC<{}> = (props) => {
+export const PhotosScreen: React.FC<unknown> = (props) => {
 	return (
 		<div className="flex flex-col w-full h-screen p-5 custom-scroll page-scroll">
 			<div className="flex flex-col space-y-5 pb-7">
diff --git a/packages/interface/src/screens/Redirect.tsx b/packages/interface/src/screens/Redirect.tsx
index 7e10a21e0..1b35e5440 100644
--- a/packages/interface/src/screens/Redirect.tsx
+++ b/packages/interface/src/screens/Redirect.tsx
@@ -12,6 +12,7 @@ export const RedirectPage: React.FC<RedirectPageProps> = (props) => {
 
 	useEffect(() => {
 		navigate(destination);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	return null;
diff --git a/packages/interface/src/screens/Tag.tsx b/packages/interface/src/screens/Tag.tsx
index e297a32f2..d64725629 100644
--- a/packages/interface/src/screens/Tag.tsx
+++ b/packages/interface/src/screens/Tag.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-export const TagScreen: React.FC<{}> = () => {
-	let { id } = useParams();
+export const TagScreen: React.FC<unknown> = () => {
+	const { id } = useParams();
 
 	return (
 		<div className="w-full p-5">
diff --git a/packages/interface/src/screens/settings/library/LibraryGeneralSettings.tsx b/packages/interface/src/screens/settings/library/LibraryGeneralSettings.tsx
index e787bb0df..5e59f90ce 100644
--- a/packages/interface/src/screens/settings/library/LibraryGeneralSettings.tsx
+++ b/packages/interface/src/screens/settings/library/LibraryGeneralSettings.tsx
@@ -35,6 +35,7 @@ export default function LibraryGeneralSettings() {
 				});
 			}
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [nameDebounced, descriptionDebounced]);
 
 	useEffect(() => {
@@ -42,6 +43,7 @@ export default function LibraryGeneralSettings() {
 			setName(currentLibrary.config.name);
 			setDescription(currentLibrary.config.description);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [libraries]);
 
 	useEffect(() => {
@@ -50,6 +52,7 @@ export default function LibraryGeneralSettings() {
 			setName(currentLibrary.config.name);
 			setDescription(currentLibrary.config.description);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [currentLibraryUuid]);
 
 	useEffect(() => {
diff --git a/packages/interface/src/screens/settings/library/TagsSettings.tsx b/packages/interface/src/screens/settings/library/TagsSettings.tsx
index fd9791294..4a4d3137d 100644
--- a/packages/interface/src/screens/settings/library/TagsSettings.tsx
+++ b/packages/interface/src/screens/settings/library/TagsSettings.tsx
@@ -47,10 +47,11 @@ export default function TagsSettings() {
 		if (!currentTag && tags?.length) {
 			setSelectedTag(tags[0].id);
 		}
-	}, [tags]);
+	}, [currentTag, tags]);
 
 	useEffect(() => {
 		reset(currentTag);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [currentTag]);
 
 	const { register, handleSubmit, watch, reset, control } = useForm({
@@ -59,6 +60,7 @@ export default function TagsSettings() {
 
 	const submitTagUpdate = handleSubmit((data) => updateTag(data));
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const autoUpdateTag = useCallback(useDebounce(submitTagUpdate, 500), []);
 
 	useEffect(() => {
diff --git a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
index 71afe42d9..bd6425d70 100644
--- a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
+++ b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
@@ -39,7 +39,7 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
 					ctaDanger
 					ctaLabel="Delete"
 					trigger={
-						<Button variant="gray" className="!p-1.5" onClick={() => {}}>
+						<Button variant="gray" className="!p-1.5">
 							<TrashIcon className="w-4 h-4" />
 						</Button>
 					}