[IMPROVE] Rearrange hooks

app/importer/client/components/ImportHistoryPage.js

@@ -1,4 +1,5 @@
 import { Button, ButtonGroup, Table } from '@rocket.chat/fuselage';
+import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import React, { useState, useEffect, useMemo } from 'react';
 
 import { Page } from '../../../../client/components/basic/Page';
@@ -9,7 +10,6 @@ import { useEndpoint } from '../../../../client/contexts/ServerContext';
 import { ProgressStep } from '../../lib/ImporterProgressStep';
 import ImportOperationSummary from './ImportOperationSummary';
 import { useSafely } from '../../../../client/hooks/useSafely';
-import { useMediaQuery } from '../../../ui/client/views/app/components/hooks';
 
 function ImportHistoryPage() {
 	const t = useTranslation();

app/importer/client/components/ImportOperationSummary.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useRoute } from '../../../../client/contexts/RouterContext';
-import { useFormatDateAndTime } from '../../../ui/client/views/app/components/hooks';
+import { useFormatDateAndTime } from '../../../../client/hooks/useFormatDateAndTime';
 import {
 	ImportWaitingStates,
 	ImportFileReadyStates,

app/importer/client/components/NewImportPage.js

@@ -25,7 +25,7 @@ import { showImporterException } from '../functions/showImporterException';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
 import { Importers } from '../index';
 import { useSafely } from '../../../../client/hooks/useSafely';
-import { useFormatMemorySize } from '../../../ui/client/views/app/components/hooks';
+import { useFormatMemorySize } from '../../../../client/hooks/useFormatMemorySize';
 
 function NewImportPage() {
 	const t = useTranslation();

app/importer/client/components/PrepareImportPage.js

@@ -12,6 +12,7 @@ import {
 	Pagination,
 	Tabs,
 } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import s from 'underscore.string';
 
@@ -31,7 +32,6 @@ import { showImporterException } from '../functions/showImporterException';
 import { useRoute } from '../../../../client/contexts/RouterContext';
 import { useSafely } from '../../../../client/hooks/useSafely';
 import { useEndpoint } from '../../../../client/contexts/ServerContext';
-import { useDebounce } from '../../../ui/client/views/app/components/hooks';
 
 const waitFor = (fn, predicate) => new Promise((resolve, reject) => {
 	const callPromise = () => {
@@ -307,7 +307,8 @@ function PrepareImportPage() {
 	const [tab, setTab] = useState('users');
 	const handleTabClick = useMemo(() => (tab) => () => setTab(tab), []);
 
-	const statusDebounced = useDebounce(status, 100);
+	const statusDebounced = useDebouncedValue(status, 100);
+
 	return <Page>
 		<Page.Header title={t('Importing_Data')}>
 			<ButtonGroup>

app/ui-admin/client/components/info/RuntimeEnvironmentSection.js

@@ -2,9 +2,9 @@ import { Skeleton, Subtitle } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { useTranslation } from '../../../../../client/contexts/TranslationContext';
-import { useFormatMemorySize } from '../../../../ui/client/views/app/components/hooks';
 import { DescriptionList } from './DescriptionList';
 import { formatHumanReadableTime, formatCPULoad } from './formatters';
+import { useFormatMemorySize } from '../../../../../client/hooks/useFormatMemorySize';
 
 export function RuntimeEnvironmentSection({ statistics, isLoading }) {
 	const s = (fn) => (isLoading ? <Skeleton width='50%' /> : fn());

app/ui-admin/client/components/info/UsageSection.js

@@ -2,7 +2,7 @@ import { Subtitle, Skeleton } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import { useTranslation } from '../../../../../client/contexts/TranslationContext';
-import { useFormatMemorySize } from '../../../../ui/client/views/app/components/hooks';
+import { useFormatMemorySize } from '../../../../../client/hooks/useFormatMemorySize';
 import { DescriptionList } from './DescriptionList';
 
 export function UsageSection({ statistics, isLoading }) {

app/ui/client/views/app/components/Directory/ChannelsTab.js

@@ -2,13 +2,14 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { Box, Margins, Table, Avatar, Tag, Icon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
-import { useEndpointData } from '../../../../../../../ee/app/engagement-dashboard/client/hooks/useEndpointData';
-import { DirectoryTable, Th, Markdown } from './DirectoryTable';
-import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
+import { usePermission } from '../../../../../../../client/contexts/AuthorizationContext';
 import { useRoute } from '../../../../../../../client/contexts/RouterContext';
-import { useQuery, useFormatDate } from '../hooks';
+import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
+import { useEndpointData } from '../../../../../../../client/hooks/useEndpointData';
+import { useFormatDate } from '../../../../../../../client/hooks/useFormatDate';
 import { roomTypes } from '../../../../../../utils/client';
-import { usePermission } from '../../../../../../../client/contexts/AuthorizationContext';
+import { useQuery } from '../hooks';
+import { DirectoryTable, Th, Markdown } from './DirectoryTable';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
@@ -52,7 +53,7 @@ export function ChannelsTab() {
 
 	const canViewPublicRooms = usePermission('view-c-room');
 
-	const data = (canViewPublicRooms && useEndpointData('GET', 'directory', query)) || { result: [] };
+	const data = (canViewPublicRooms && useEndpointData('directory', query)) || { result: [] };
 
 	const onClick = useMemo(() => (name) => (e) => {
 		if (e.type === 'click' || e.key === 'Enter') {

app/ui/client/views/app/components/Directory/DirectoryTable.js

@@ -1,8 +1,8 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Box, Icon, Pagination, Skeleton, Table, Flex, TextInput, Tile } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
-import { useDebounce } from '../hooks';
 import { Markdown as mrkd } from '../../../../../../markdown/client';
 
 function SortIcon({ direction }) {
@@ -59,7 +59,7 @@ export function DirectoryTable({
 
 	const [current, setCurrent] = useState(0);
 
-	const term = useDebounce(text, 500);
+	const term = useDebouncedValue(text, 500);
 
 	useEffect(() => {
 		setParams({ term, current, itemsPerPage });

app/ui/client/views/app/components/Directory/UserTab.js

@@ -2,12 +2,13 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { Box, Table, Flex, Avatar } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
-import { useEndpointData } from '../../../../../../../ee/app/engagement-dashboard/client/hooks/useEndpointData';
-import { DirectoryTable, Th } from './DirectoryTable';
 import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
 import { useRoute } from '../../../../../../../client/contexts/RouterContext';
 import { usePermission } from '../../../../../../../client/contexts/AuthorizationContext';
-import { useQuery, useFormatDate } from '../hooks';
+import { useEndpointData } from '../../../../../../../client/hooks/useEndpointData';
+import { useFormatDate } from '../../../../../../../client/hooks/useFormatDate';
+import { useQuery } from '../hooks';
+import { DirectoryTable, Th } from './DirectoryTable';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
@@ -47,7 +48,7 @@ export function UserTab({
 	const canViewOutsideRoom = usePermission('view-outside-room');
 	const canViewDM = usePermission('view-d-room');
 
-	const data = (canViewOutsideRoom && canViewDM && useEndpointData('GET', 'directory', query)) || { result: [] };
+	const data = (canViewOutsideRoom && canViewDM && useEndpointData('directory', query)) || { result: [] };
 
 	const onClick = useMemo(() => (username) => (e) => {
 		if (e.type === 'click' || e.key === 'Enter') {

app/ui/client/views/app/components/hooks.js

@@ -1,39 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import moment from 'moment';
-import s from 'underscore.string';
-
-import { useUserPreference } from '../../../../../../client/contexts/UserContext';
-import { useSetting } from '../../../../../../client/contexts/SettingsContext';
-
-export function useDebounce(value, delay) {
-	const [debouncedValue, setDebouncedValue] = useState(value);
-
-	useEffect(() => {
-		const handler = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-		return () => clearTimeout(handler);
-	}, [value]);
-
-	return debouncedValue;
-}
-
-export function useMediaQuery(query) {
-	const [matches, setQuery] = useState(window.matchMedia(query).matches);
-
-	useEffect(() => {
-		const resizeObserver = new ResizeObserver(() => {
-			setQuery(window.matchMedia(query).matches);
-		});
-		resizeObserver.observe(document.body);
-
-		return () => {
-			resizeObserver.unobserve(document.body);
-		};
-	}, [query]);
-
-	return matches;
-}
+import { useMemo } from 'react';
 
 export function useQuery(params, sort, type, workspace = 'local') {
 	return useMemo(() => ({
@@ -47,60 +12,3 @@ export function useQuery(params, sort, type, workspace = 'local') {
 		...params.current && { offset: params.current },
 	}), [params, sort, type, workspace]);
 }
-
-const dayFormat = ['h:mm A', 'H:mm'];
-export function useFormatTime() {
-	const clockMode = useUserPreference('clockMode', false);
-	const format = useSetting('Message_TimeFormat');
-	const sameDay = dayFormat[clockMode - 1] || format;
-	return useCallback((time) => {
-		switch (clockMode) {
-			case 1:
-			case 2:
-				return moment(time).format(sameDay);
-			default:
-				return moment(time).format(format);
-		}
-	}, [clockMode, format]);
-}
-
-export function useFormatDateAndTime() {
-	const clockMode = useUserPreference('clockMode', false);
-	const format = useSetting('Message_TimeAndDateFormat');
-	return useCallback((time) => {
-		switch (clockMode) {
-			case 1:
-				return moment(time).format('MMMM D, Y h:mm A');
-			case 2:
-				return moment(time).format('MMMM D, Y H:mm');
-			default:
-				return moment(time).format(format);
-		}
-	}, [clockMode, format]);
-}
-
-export function useFormatDate() {
-	const format = useSetting('Message_DateFormat');
-	return useCallback((time) => moment(time).format(format), [format]);
-}
-
-export const useFormatMemorySize = () => useCallback((memorySize) => {
-	if (typeof memorySize !== 'number') {
-		return null;
-	}
-
-	const units = ['bytes', 'kB', 'MB', 'GB'];
-
-	let order;
-	for (order = 0; order < units.length - 1; ++order) {
-		const upperLimit = Math.pow(1024, order + 1);
-
-		if (memorySize < upperLimit) {
-			break;
-		}
-	}
-
-	const divider = Math.pow(1024, order);
-	const decimalDigits = order === 0 ? 0 : 2;
-	return `${ s.numberFormat(memorySize / divider, decimalDigits) } ${ units[order] }`;
-}, []);

ee/app/engagement-dashboard/client/hooks/useEndpointData.js → client/hooks/useEndpointData.js

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { useEndpoint } from '../../../../../client/contexts/ServerContext';
-import { useToastMessageDispatch } from '../../../../../client/contexts/ToastMessagesContext';
+import { useEndpoint } from '../contexts/ServerContext';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 
-export const useEndpointData = (httpMethod, endpoint, params = {}) => {
+export const useEndpointData = (endpoint, params = {}) => {
 	const [data, setData] = useState(null);
 
-	const getData = useEndpoint(httpMethod, endpoint);
+	const getData = useEndpoint('GET', endpoint);
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	useEffect(() => {

client/hooks/useFormatDate.js

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+import moment from 'moment';
+
+import { useSetting } from '../contexts/SettingsContext';
+
+export const useFormatDate = () => {
+	const format = useSetting('Message_DateFormat');
+	return useCallback((time) => moment(time).format(format), [format]);
+};

client/hooks/useFormatDateAndTime.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import moment from 'moment';
+
+import { useUserPreference } from '../contexts/UserContext';
+import { useSetting } from '../contexts/SettingsContext';
+
+export const useFormatDateAndTime = () => {
+	const clockMode = useUserPreference('clockMode', false);
+	const format = useSetting('Message_TimeAndDateFormat');
+
+	return useCallback((time) => {
+		switch (clockMode) {
+			case 1:
+				return moment(time).format('MMMM D, Y h:mm A');
+			case 2:
+				return moment(time).format('MMMM D, Y H:mm');
+			default:
+				return moment(time).format(format);
+		}
+	}, [clockMode, format]);
+};

client/hooks/useFormatMemorySize.js

@@ -0,0 +1,24 @@
+import s from 'underscore.string';
+
+const formatMemorySize = (memorySize) => {
+	if (typeof memorySize !== 'number') {
+		return null;
+	}
+
+	const units = ['bytes', 'kB', 'MB', 'GB'];
+
+	let order;
+	for (order = 0; order < units.length - 1; ++order) {
+		const upperLimit = Math.pow(1024, order + 1);
+
+		if (memorySize < upperLimit) {
+			break;
+		}
+	}
+
+	const divider = Math.pow(1024, order);
+	const decimalDigits = order === 0 ? 0 : 2;
+	return `${ s.numberFormat(memorySize / divider, decimalDigits) } ${ units[order] }`;
+};
+
+export const useFormatMemorySize = () => formatMemorySize;

client/hooks/useFormatTime.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import moment from 'moment';
+
+import { useUserPreference } from '../contexts/UserContext';
+import { useSetting } from '../contexts/SettingsContext';
+
+const dayFormat = ['h:mm A', 'H:mm'];
+
+export const useFormatTime = () => {
+	const clockMode = useUserPreference('clockMode', false);
+	const format = useSetting('Message_TimeFormat');
+	const sameDay = dayFormat[clockMode - 1] || format;
+	return useCallback((time) => {
+		switch (clockMode) {
+			case 1:
+			case 2:
+				return moment(time).format(sameDay);
+			default:
+				return moment(time).format(format);
+		}
+	}, [clockMode, format]);
+};

ee/app/engagement-dashboard/client/components/ChannelsTab/TableSection.js

@@ -3,9 +3,9 @@ import moment from 'moment';
 import React, { useMemo, useState } from 'react';
 
 import { useTranslation } from '../../../../../../client/contexts/TranslationContext';
+import { useEndpointData } from '../../../../../../client/hooks/useEndpointData';
 import { Growth } from '../data/Growth';
 import { Section } from '../Section';
-import { useEndpointData } from '../../hooks/useEndpointData';
 
 export function TableSection() {
 	const t = useTranslation();
@@ -52,7 +52,7 @@ export function TableSection() {
 		count: itemsPerPage,
 	}), [period, current, itemsPerPage]);
 
-	const data = useEndpointData('GET', 'engagement-dashboard/channels/list', params);
+	const data = useEndpointData('engagement-dashboard/channels/list', params);
 
 	const channels = useMemo(() => {
 		if (!data) {

ee/app/engagement-dashboard/client/components/MessagesTab/MessagesPerChannelSection.js

@@ -4,8 +4,8 @@ import moment from 'moment';
 import React, { useMemo, useState } from 'react';
 
 import { useTranslation } from '../../../../../../client/contexts/TranslationContext';
+import { useEndpointData } from '../../../../../../client/hooks/useEndpointData';
 import { LegendSymbol } from '../data/LegendSymbol';
-import { useEndpointData } from '../../hooks/useEndpointData';
 import { Section } from '../Section';
 
 export function MessagesPerChannelSection() {
@@ -48,8 +48,8 @@ export function MessagesPerChannelSection() {
 		end: period.end.toISOString(),
 	}), [period]);
 
-	const pieData = useEndpointData('GET', 'engagement-dashboard/messages/origin', params);
-	const tableData = useEndpointData('GET', 'engagement-dashboard/messages/top-five-popular-channels', params);
+	const pieData = useEndpointData('engagement-dashboard/messages/origin', params);
+	const tableData = useEndpointData('engagement-dashboard/messages/top-five-popular-channels', params);
 
 	const [pie, table] = useMemo(() => {
 		if (!pieData || !tableData) {