Improve: React hooks lint rules

.eslintrc

@@ -11,7 +11,8 @@
     "jscolor": false
   },
   "plugins": [
-    "react"
+    "react",
+    "react-hooks"
   ],
   "rules": {
     "jsx-quotes": [
@@ -24,7 +25,9 @@
     "react/jsx-fragments": [
       "error",
       "syntax"
-    ]
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   },
   "settings": {
     "import/resolver": {

.storybook/hooks.js

@@ -9,7 +9,7 @@ export const useAutoToggle = (initialValue = false, ms = 1000) => {
 		return () => {
 			clearInterval(timer);
 		};
-	}, []);
+	}, [ms]);
 
 	return value;
 };

app/api/server/v1/invites.js

@@ -35,6 +35,7 @@ API.v1.addRoute('removeInvite/:_id', { authRequired: true }, {
 API.v1.addRoute('useInviteToken', { authRequired: true }, {
 	post() {
 		const { token } = this.bodyParams;
+		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const result = useInviteToken(this.userId, token);
 
 		return API.v1.success(result);

client/admin/cloud/CloudPage.js

@@ -58,7 +58,7 @@ function CloudPage() {
 		};
 
 		acceptOAuthAuthorization();
-	}, [errorCode, code, state]);
+	}, [errorCode, code, state, page, dispatchToastMessage, t, cloudRoute, finishOAuthAuthorization]);
 
 	const [registerStatus, setRegisterStatus] = useSafely(useState());
 	const [modal, setModal] = useState(null);
@@ -92,7 +92,7 @@ function CloudPage() {
 		};
 
 		acceptWorkspaceToken();
-	}, [token]);
+	}, [connectWorkspace, dispatchToastMessage, fetchRegisterStatus, t, token]);
 
 	const handleManualWorkspaceRegistrationButtonClick = () => {
 		const handleModalClose = () => {

client/admin/cloud/ManualWorkspaceRegistrationModal.js

@@ -24,7 +24,7 @@ function CopyStep({ onNextButtonClick }) {
 		};
 
 		loadWorkspaceRegisterData();
-	}, []);
+	}, [getWorkspaceRegisterData]);
 
 	const copyRef = useRef();
 
@@ -37,7 +37,7 @@ function CopyStep({ onNextButtonClick }) {
 		return () => {
 			clipboard.destroy();
 		};
-	}, []);
+	}, [dispatchToastMessage, t]);
 
 	return <>
 		<Modal.Content>

client/admin/cloud/WorkspaceLoginSection.js

@@ -82,7 +82,7 @@ function WorkspaceLoginSection({
 		};
 
 		checkLoginState();
-	}, []);
+	}, [checkUserLoggedIn, dispatchToastMessage, setLoading, setLoggedIn]);
 
 	return <Box is='section' {...props}>
 		<Box withRichContent>

client/admin/customEmoji/AddCustomEmoji.js

@@ -32,7 +32,7 @@ export function AddCustomEmoji({ close, onChange, ...props }) {
 			onChange();
 			close();
 		}
-	}, [name, aliases, emojiFile]);
+	}, [emojiFile, name, aliases, saveAction, onChange, close]);
 
 	const clickUpload = useFileInput(setEmojiPreview, 'emoji');
 

client/admin/customEmoji/CustomEmoji.js

@@ -11,7 +11,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 
 	useEffect(() => {
 		setFilter({ text });
-	}, [text]);
+	}, [setFilter, text]);
 	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
@@ -30,7 +30,7 @@ export function CustomEmoji({
 	const header = useMemo(() => [
 		<Th key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name' w='x200'>{t('Name')}</Th>,
 		<Th key={'aliases'} w='x200'>{t('Aliases')}</Th>,
-	], [sort]);
+	], [onHeaderClick, sort, t]);
 
 	const renderRow = (emojis) => {
 		const { _id, name, aliases } = emojis;

client/admin/customEmoji/CustomEmojiRoute.js

@@ -15,12 +15,13 @@ import VerticalBar from '../../components/basic/VerticalBar';
 
 const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
 
-export const useQuery = (params, sort, cache) => useMemo(() => ({
-	query: JSON.stringify({ name: { $regex: params.text || '', $options: 'i' } }),
-	sort: JSON.stringify({ [sort[0]]: sortDir(sort[1]) }),
-	...params.itemsPerPage && { count: params.itemsPerPage },
-	...params.current && { offset: params.current },
-}), [JSON.stringify(params), JSON.stringify(sort), cache]);
+export const useQuery = ({ text, itemsPerPage, current }, [column, direction], cache) => useMemo(() => ({
+	query: JSON.stringify({ name: { $regex: text || '', $options: 'i' } }),
+	sort: JSON.stringify({ [column]: sortDir(direction) }),
+	...itemsPerPage && { count: itemsPerPage },
+	...current && { offset: current },
+// TODO: remove cache. Is necessary for data invalidation
+}), [text, itemsPerPage, current, column, direction, cache]);
 
 export default function CustomEmojiRoute({ props }) {
 	const t = useTranslation();

client/admin/customEmoji/EditCustomEmoji.js

@@ -52,6 +52,7 @@ export function EditCustomEmojiWithData({ _id, cache, onChange, ...props }) {
 	const t = useTranslation();
 	const query = useMemo(() => ({
 		query: JSON.stringify({ _id }),
+	// TODO: remove cache. Is necessary for data invalidation
 	}), [_id, cache]);
 
 	const { data = { emojis: {} }, state, error } = useEndpointDataExperimental('emoji-custom.list', query);
@@ -101,7 +102,7 @@ export function EditCustomEmoji({ close, onChange, data, ...props }) {
 		setNewEmojiPreview(URL.createObjectURL(file));
 	}, [setEmojiFile]);
 
-	const hasUnsavedChanges = useMemo(() => previousName !== name || aliases !== previousAliases.join(', ') || !!emojiFile, [name, aliases, emojiFile]);
+	const hasUnsavedChanges = useMemo(() => previousName !== name || aliases !== previousAliases.join(', ') || !!emojiFile, [previousName, name, aliases, previousAliases, emojiFile]);
 
 	const saveAction = useEndpointUpload('emoji-custom.update', {}, t('Custom_Emoji_Updated_Successfully'));
 
@@ -115,7 +116,7 @@ export function EditCustomEmoji({ close, onChange, data, ...props }) {
 		if (result.success) {
 			onChange();
 		}
-	}, [name, _id, aliases, emojiFile]);
+	}, [emojiFile, _id, name, aliases, saveAction, onChange]);
 
 	const deleteAction = useEndpointAction('POST', 'emoji-custom.delete', useMemo(() => ({ emojiId: _id }), [_id]));
 
@@ -124,11 +125,11 @@ export function EditCustomEmoji({ close, onChange, data, ...props }) {
 		if (result.success) {
 			setModal(() => <SuccessModal onClose={() => { setModal(undefined); close(); onChange(); }}/>);
 		}
-	}, [_id]);
+	}, [close, deleteAction, onChange]);
 
 	const openConfirmDelete = useCallback(() => setModal(() => <DeleteWarningModal onDelete={onDeleteConfirm} onCancel={() => setModal(undefined)}/>), [onDeleteConfirm, setModal]);
 
-	const handleAliasesChange = useCallback((e) => setAliases(e.currentTarget.value, []));
+	const handleAliasesChange = useCallback((e) => setAliases(e.currentTarget.value), [setAliases]);
 
 	const clickUpload = useFileInput(setEmojiPreview, 'emoji');
 

client/admin/customSounds/AddCustomSound.js

@@ -19,15 +19,15 @@ export function AddCustomSound({ goToNew, close, onChange, ...props }) {
 
 	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
 
-	const handleChangeFile = (soundFile) => {
+	const handleChangeFile = useCallback((soundFile) => {
 		setSound(soundFile);
-	};
+	}, []);
 
 	const clickUpload = useFileInput(handleChangeFile, 'audio/mp3');
 
-	const saveAction = async (name, soundFile) => {
+	const saveAction = useCallback(async (name, soundFile) => {
 		const soundData = createSoundData(soundFile, name);
-		const validation = validate(soundData, sound);
+		const validation = validate(soundData, soundFile);
 		if (validation.length === 0) {
 			let soundId;
 			try {
@@ -56,7 +56,7 @@ export function AddCustomSound({ goToNew, close, onChange, ...props }) {
 			return soundId;
 		}
 		validation.forEach((error) => { throw new Error({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }); });
-	};
+	}, [dispatchToastMessage, insertOrUpdateSound, t, uploadCustomSound]);
 
 	const handleSave = useCallback(async () => {
 		try {
@@ -70,7 +70,7 @@ export function AddCustomSound({ goToNew, close, onChange, ...props }) {
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
-	}, [name, sound]);
+	}, [dispatchToastMessage, goToNew, name, onChange, saveAction, sound, t]);
 
 	return <VerticalBar.ScrollableContent {...props}>
 		<Field>

client/admin/customSounds/AdminSoundsRoute.js

@@ -17,12 +17,13 @@ import NotAuthorizedPage from '../NotAuthorizedPage';
 
 const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
 
-export const useQuery = (params, sort, cache) => useMemo(() => ({
-	query: JSON.stringify({ name: { $regex: params.text || '', $options: 'i' } }),
-	sort: JSON.stringify({ [sort[0]]: sortDir(sort[1]) }),
-	...params.itemsPerPage && { count: params.itemsPerPage },
-	...params.current && { offset: params.current },
-}), [JSON.stringify(params), JSON.stringify(sort), cache]);
+export const useQuery = ({ text, itemsPerPage, current }, [column, direction], cache) => useMemo(() => ({
+	query: JSON.stringify({ name: { $regex: text || '', $options: 'i' } }),
+	sort: JSON.stringify({ [column]: sortDir(direction) }),
+	...itemsPerPage && { count: itemsPerPage },
+	...current && { offset: current },
+	// TODO: remove cache. Is necessary for data invalidation
+}), [text, itemsPerPage, current, column, direction, cache]);
 
 export default function CustomSoundsRoute({ props }) {
 	const t = useTranslation();
@@ -50,12 +51,12 @@ export default function CustomSoundsRoute({ props }) {
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
 
-	const onClick = (_id) => () => {
+	const onClick = useCallback((_id) => () => {
 		router.push({
 			context: 'edit',
 			id: _id,
 		});
-	};
+	}, [router]);
 
 	const onHeaderClick = (id) => {
 		const [sortBy, sortDirection] = sort;
@@ -71,18 +72,18 @@ export default function CustomSoundsRoute({ props }) {
 		router.push({ context });
 	}, [router]);
 
-	const close = () => {
+	const close = useCallback(() => {
 		router.push({});
-	};
-
-	if (!canManageCustomSounds) {
-		return <NotAuthorizedPage />;
-	}
+	}, [router]);
 
 	const onChange = useCallback(() => {
 		setCache(new Date());
 	}, []);
 
+	if (!canManageCustomSounds) {
+		return <NotAuthorizedPage />;
+	}
+
 	return <Page {...props} flexDirection='row'>
 		<Page name='admin-custom-sounds'>
 			<Page.Header title={t('Custom_Sounds')}>

client/admin/customSounds/EditCustomSound.js

@@ -56,7 +56,6 @@ export function EditCustomSound({ _id, cache, ...props }) {
 
 	const { data, state, error } = useEndpointDataExperimental('custom-sounds.list', query);
 
-
 	if (state === ENDPOINT_STATES.LOADING) {
 		return <Box pb='x20'>
 			<Skeleton mbs='x8'/>
@@ -100,13 +99,13 @@ function EditSound({ close, onChange, data, ...props }) {
 	const uploadCustomSound = useMethod('uploadCustomSound');
 	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
 
-	const handleChangeFile = (soundFile) => {
+	const handleChangeFile = useCallback((soundFile) => {
 		setSound(soundFile);
-	};
+	}, []);
 
-	const hasUnsavedChanges = useMemo(() => previousName !== name || previousSound !== sound, [name, sound]);
+	const hasUnsavedChanges = useMemo(() => previousName !== name || previousSound !== sound, [name, previousName, previousSound, sound]);
 
-	const saveAction = async (sound) => {
+	const saveAction = useCallback(async (sound) => {
 		const soundData = createSoundData(sound, name, { previousName, previousSound, _id });
 		const validation = validate(soundData, sound);
 		if (validation.length === 0) {
@@ -137,12 +136,12 @@ function EditSound({ close, onChange, data, ...props }) {
 		}
 
 		validation.forEach((error) => dispatchToastMessage({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }));
-	};
+	}, [_id, dispatchToastMessage, insertOrUpdateSound, name, previousName, previousSound, t, uploadCustomSound]);
 
 	const handleSave = useCallback(async () => {
 		saveAction(sound);
 		onChange();
-	}, [name, _id, sound]);
+	}, [saveAction, sound, onChange]);
 
 	const onDeleteConfirm = useCallback(async () => {
 		try {
@@ -152,14 +151,12 @@ function EditSound({ close, onChange, data, ...props }) {
 			dispatchToastMessage({ type: 'error', message: error });
 			onChange();
 		}
-	}, [_id]);
+	}, [_id, close, deleteCustomSound, dispatchToastMessage, onChange]);
 
 	const openConfirmDelete = () => setModal(() => <DeleteWarningModal onDelete={onDeleteConfirm} onCancel={() => setModal(undefined)}/>);
 
-
 	const clickUpload = useFileInput(handleChangeFile, 'audio/mp3');
 
-
 	return <>
 		<VerticalBar.ScrollableContent {...props}>
 			<Field>