Skip to content

Commit

Permalink
[IMPROVE] Rearrange hooks (#17392)
Browse files Browse the repository at this point in the history
* Update Fuselage and its peer dependencies

* Move and split existing hooks

* Refactor useEndpointData
  • Loading branch information
tassoevan authored Apr 22, 2020
1 parent 49ec1b6 commit 2a6ddf4
Show file tree
Hide file tree
Showing 24 changed files with 165 additions and 198 deletions.
2 changes: 1 addition & 1 deletion app/importer/client/components/ImportHistoryPage.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion app/importer/client/components/ImportOperationSummary.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/importer/client/components/NewImportPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
5 changes: 3 additions & 2 deletions app/importer/client/components/PrepareImportPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
2 changes: 1 addition & 1 deletion app/ui-admin/client/components/info/UsageSection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
13 changes: 7 additions & 6 deletions app/ui/client/views/app/components/Directory/ChannelsTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' };

Expand Down Expand Up @@ -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') {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 }) {
Expand Down Expand Up @@ -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 });
Expand Down
9 changes: 5 additions & 4 deletions app/ui/client/views/app/components/Directory/UserTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' };

Expand Down Expand Up @@ -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') {
Expand Down
94 changes: 1 addition & 93 deletions app/ui/client/views/app/components/hooks.js
Original file line number Diff line number Diff line change
@@ -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(() => ({
Expand All @@ -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] }`;
}, []);
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand Down
9 changes: 9 additions & 0 deletions client/hooks/useFormatDate.js
Original file line number Diff line number Diff line change
@@ -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]);
};
21 changes: 21 additions & 0 deletions client/hooks/useFormatDateAndTime.js
Original file line number Diff line number Diff line change
@@ -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]);
};
24 changes: 24 additions & 0 deletions client/hooks/useFormatMemorySize.js
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 22 additions & 0 deletions client/hooks/useFormatTime.js
Original file line number Diff line number Diff line change
@@ -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]);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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) {
Expand Down
Loading

0 comments on commit 2a6ddf4

Please sign in to comment.