From 1852596a7b4e0721ddce7a08d654bd9dc83044d3 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Fri, 23 Dec 2022 17:31:05 -0300 Subject: [PATCH 1/2] chore: add custom sounds empty state --- .../admin/customSounds/AddCustomSound.tsx | 8 +- ...nSoundsRoute.tsx => CustomSoundsRoute.tsx} | 96 +++++++++++++------ .../views/admin/customSounds/EditSound.tsx | 19 +--- apps/meteor/client/views/admin/routes.tsx | 2 +- 4 files changed, 73 insertions(+), 52 deletions(-) rename apps/meteor/client/views/admin/customSounds/{AdminSoundsRoute.tsx => CustomSoundsRoute.tsx} (60%) diff --git a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx index 56646a59bb4d1..f02ad2c3fb1b7 100644 --- a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx +++ b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx @@ -9,7 +9,7 @@ import type { soundDataType } from './lib'; import { validate, createSoundData } from './lib'; type AddCustomSoundProps = { - goToNew: (where: string) => () => void; + goToNew: (_id: string) => () => void; close: () => void; onChange: () => void; }; @@ -22,7 +22,6 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr const [sound, setSound] = useState<{ name: string }>(); const uploadCustomSound = useMethod('uploadCustomSound'); - const insertOrUpdateSound = useMethod('insertOrUpdateSound'); const handleChangeFile = useCallback((soundFile) => { @@ -74,11 +73,8 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr const handleSave = useCallback(async () => { try { const result = await saveAction(name, sound); - if (!result) { - throw new Error('error-something-went-wrong'); - } - goToNew(result); dispatchToastMessage({ type: 'success', message: t('Custom_Sound_Saved_Successfully') }); + result && goToNew(result); onChange(); } catch (error) { dispatchToastMessage({ type: 'error', message: error }); diff --git a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx similarity index 60% rename from apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx rename to apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx index 4603f3d87183d..1e62437a9e93d 100644 --- a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx +++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx @@ -1,6 +1,7 @@ -import { Button, Icon, Pagination } from '@rocket.chat/fuselage'; +import { Button, Icon, Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage'; import { useDebouncedValue } from '@rocket.chat/fuselage-hooks'; -import { useRoute, useRouteParameter, usePermission, useTranslation } from '@rocket.chat/ui-contexts'; +import { useRoute, useRouteParameter, usePermission, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts'; +import { useQuery } from '@tanstack/react-query'; import type { ReactElement } from 'react'; import React, { useMemo, useState, useCallback } from 'react'; @@ -14,8 +15,6 @@ import { usePagination } from '../../../components/GenericTable/hooks/usePaginat import { useSort } from '../../../components/GenericTable/hooks/useSort'; import Page from '../../../components/Page'; import VerticalBar from '../../../components/VerticalBar'; -import { useEndpointData } from '../../../hooks/useEndpointData'; -import { AsyncStatePhase } from '../../../lib/asyncState'; import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage'; import AddCustomSound from './AddCustomSound'; import CustomSoundRow from './CustomSoundRow'; @@ -46,7 +45,8 @@ const CustomSoundsRoute = (): ReactElement => { 500, ); - const { reload, ...result } = useEndpointData('/v1/custom-sounds.list', query); + const getCustomSoundsList = useEndpoint('GET', '/v1/custom-sounds.list'); + const { data, isSuccess, isLoading, isError, refetch } = useQuery(['getCustomSoundsList', query], () => getCustomSoundsList(query)); const handleItemClick = useCallback( (_id) => (): void => { @@ -67,8 +67,18 @@ const CustomSoundsRoute = (): ReactElement => { }, [route]); const handleChange = useCallback(() => { - reload(); - }, [reload]); + refetch(); + }, [refetch]); + + const headers = useMemo( + () => [ + + {t('Name')} + , + , + ], + [setSort, sortBy, sortDirection, t], + ); if (!canManageCustomSounds) { return ; @@ -83,30 +93,54 @@ const CustomSoundsRoute = (): ReactElement => { - setParams(text)} /> - - - - {t('Name')} - - - - - {result.phase === AsyncStatePhase.LOADING && } - {result.phase === AsyncStatePhase.RESOLVED && - result.value.sounds.map((sound) => )} - - - {result.phase === AsyncStatePhase.RESOLVED && ( - - )} + <> + {isLoading && ( + + {headers} + + + + + )} + {isSuccess && data && data.sounds.length > 0 && ( + <> + setParams(text)} /> + + {headers} + + {data?.sounds.map((sound) => ( + + ))} + + + + + )} + {isSuccess && data?.sounds.length === 0 && ( + + + {t('No_results_found')} + + )} + + {isError && ( + + + {t('Something_went_wrong')} + + refetch()}>{t('Reload_page')} + + + )} + {context && ( diff --git a/apps/meteor/client/views/admin/customSounds/EditSound.tsx b/apps/meteor/client/views/admin/customSounds/EditSound.tsx index 38e43b9af5bf6..c3e2f23091d39 100644 --- a/apps/meteor/client/views/admin/customSounds/EditSound.tsx +++ b/apps/meteor/client/views/admin/customSounds/EditSound.tsx @@ -91,29 +91,20 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl }, [saveAction, sound, onChange]); const handleDeleteButtonClick = useCallback(() => { - const handleClose = (): void => { - setModal(null); - close?.(); - onChange(); - }; - const handleDelete = async (): Promise => { try { await deleteCustomSound(_id); - setModal(() => ( - - {t('Custom_Sound_Has_Been_Deleted')} - - )); + dispatchToastMessage({ type: 'success', message: t('Custom_Sound_Has_Been_Deleted') }); } catch (error) { dispatchToastMessage({ type: 'error', message: error }); + } finally { + setModal(null); + close?.(); onChange(); } }; - const handleCancel = (): void => { - setModal(null); - }; + const handleCancel = (): void => setModal(null); setModal(() => ( diff --git a/apps/meteor/client/views/admin/routes.tsx b/apps/meteor/client/views/admin/routes.tsx index fa06088048fcd..2e5ca8e9afcbd 100644 --- a/apps/meteor/client/views/admin/routes.tsx +++ b/apps/meteor/client/views/admin/routes.tsx @@ -13,7 +13,7 @@ export const registerAdminRoute = createRouteGroup( registerAdminRoute('/custom-sounds/:context?/:id?', { name: 'custom-sounds', - component: lazy(() => import('./customSounds/AdminSoundsRoute')), + component: lazy(() => import('./customSounds/CustomSoundsRoute')), }); registerAdminRoute('/apps/what-is-it', { From 499147e200c816a635d66611859876d8a77ce891 Mon Sep 17 00:00:00 2001 From: dougfabris Date: Tue, 10 Jan 2023 12:55:44 -0300 Subject: [PATCH 2/2] fix: review --- .../client/views/admin/customSounds/CustomSoundsRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx index 1e62437a9e93d..7ea3ca8bb7f39 100644 --- a/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx +++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx @@ -46,7 +46,7 @@ const CustomSoundsRoute = (): ReactElement => { ); const getCustomSoundsList = useEndpoint('GET', '/v1/custom-sounds.list'); - const { data, isSuccess, isLoading, isError, refetch } = useQuery(['getCustomSoundsList', query], () => getCustomSoundsList(query)); + const { data, isSuccess, isLoading, isError, refetch } = useQuery(['custom-sounds', query], () => getCustomSoundsList(query)); const handleItemClick = useCallback( (_id) => (): void => {