diff --git a/frontend-project/package.json b/frontend-project/package.json index 9bd9e4f7b..9b4660709 100644 --- a/frontend-project/package.json +++ b/frontend-project/package.json @@ -54,7 +54,7 @@ "@babel/plugin-proposal-throw-expressions": "^7.12.13", "@types/lodash.isequal": "4.5.5", "@types/react-router": "5.1.14", - "antd": "4.2.4", + "antd": "4.9.0", "classnames": "2.3.1", "dva": "2.6.0-beta.22", "jest": "26.6.3", diff --git a/frontend-project/src/components/FetchLink.tsx b/frontend-project/src/components/FetchLink.tsx index 06ed7e292..257a4a521 100644 --- a/frontend-project/src/components/FetchLink.tsx +++ b/frontend-project/src/components/FetchLink.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { Link } from 'umi'; import { formatMessage } from 'umi-plugin-react/locale'; import { localeKeys } from '../locales/pl-PL'; -import { openNotificationWithIcon } from '../models/global'; +import { openNotificationWithIcon } from '../utils/utils'; import { AutocompleteFunctionType, AutocompleteServiceType } from '../services/autocomplete'; import { Awaited, KeysWithValsOfType } from '../services/common'; import { ResourceWithId } from '../services/service'; diff --git a/frontend-project/src/components/FetchSelect.tsx b/frontend-project/src/components/FetchSelect.tsx index 000e70e09..18f46eb2d 100644 --- a/frontend-project/src/components/FetchSelect.tsx +++ b/frontend-project/src/components/FetchSelect.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; import { formatMessage } from 'umi-plugin-react/locale'; import { unionBy, sortBy } from 'lodash'; import { useDebounce } from '../hooks/useDebounce'; -import { openNotificationWithIcon } from '../models/global'; +import { openNotificationWithIcon } from '../utils/utils'; import { AutocompleteFunctionType, AutocompleteServiceType } from '../services/autocomplete'; import { Awaited, KeysWithValsOfType, OptionType } from '../services/common'; import { QQ } from '../utils/QQ'; diff --git a/frontend-project/src/components/Modals/Confirmation/index.tsx b/frontend-project/src/components/Modals/Confirmation/index.tsx deleted file mode 100644 index cfe038ce4..000000000 --- a/frontend-project/src/components/Modals/Confirmation/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Modal, Button } from 'antd'; -import { localeKeys } from '@/locales/pl-PL'; -import { formatMessage } from 'umi-plugin-react/locale'; - -type ConfirmationProps = { - title?: string; - onSuccess?: () => void; - onFailure?: (args: T) => void; -}; - -type ConfirmationModalProps = ConfirmationProps & { - title: string; - submitArgs: T; - hideModal: () => void; - onSubmit: () => void; -}; - -const ConfirmationModal = ({ - onSubmit, - title, - onSuccess, - onFailure, - hideModal, - submitArgs, -}: ConfirmationModalProps) => { - const [isModalVisible, setIsModalVisible] = useState(true); - const [isInProgress, setIsInProgress] = useState(false); - - useEffect(() => { - if (!isModalVisible) { - hideModal(); - } - }, [isModalVisible]); - - const handleOk = async () => { - setIsInProgress(true); - try { - await onSubmit(); - setIsModalVisible(false); - onSuccess(); - } catch (error) { - if (onFailure) { - onFailure(submitArgs); - } - } finally { - setIsInProgress(false); - } - }; - - const handleCancel = () => { - setIsModalVisible(false); - }; - - return ( - <> - - {formatMessage({ id: localeKeys.modal.cancel })} - , - , - ]} - > -

{formatMessage({ id: localeKeys.modal.description })}

- - - ); -}; - -export const useConfirmationModal = ( - props: ConfirmationProps, - onSubmit: (args: T) => void, -) => { - const [modal, setModal] = useState(null); - - const hideModal = () => setModal(null); - - const showModal = (args: T, title?: string) => { - setModal( - onSubmit(args)} - hideModal={hideModal} - />, - ); - }; - - return [modal, showModal]; -}; - -export default ConfirmationModal; diff --git a/frontend-project/src/components/SelectLang/index.tsx b/frontend-project/src/components/SelectLang/index.tsx index 3180d5f79..e9348acce 100644 --- a/frontend-project/src/components/SelectLang/index.tsx +++ b/frontend-project/src/components/SelectLang/index.tsx @@ -1,7 +1,6 @@ import { GlobalOutlined } from '@ant-design/icons'; import { Menu } from 'antd'; import { getLocale, setLocale } from 'umi-plugin-react/locale'; -import { ClickParam } from 'antd/es/menu'; import React, { FC } from 'react'; import classNames from 'classnames'; import HeaderDropdown from '../HeaderDropdown'; @@ -15,7 +14,8 @@ const SelectLang: FC = props => { const { className } = props; const selectedLang = getLocale(); - const changeLang = ({ key }: ClickParam): void => setLocale(key); + const changeLang = ({ key }: { key: React.Key }): void => + typeof key === 'string' && setLocale(key); const locales = ['pl-PL', 'en-US']; const languageLabels = { diff --git a/frontend-project/src/locales/en-US/globals.ts b/frontend-project/src/locales/en-US/globals.ts index ce48e6743..49c653589 100644 --- a/frontend-project/src/locales/en-US/globals.ts +++ b/frontend-project/src/locales/en-US/globals.ts @@ -16,6 +16,7 @@ export const globalsLocale = { saveAndEdit: 'Save and edit', }, modal: { + title: 'Removal of {name} element', confirm: 'Confirm', cancel: 'Cancel', description: 'Are you sure you want to proceed?', diff --git a/frontend-project/src/locales/pl-PL/globals.ts b/frontend-project/src/locales/pl-PL/globals.ts index e1dd536a6..0766f9312 100644 --- a/frontend-project/src/locales/pl-PL/globals.ts +++ b/frontend-project/src/locales/pl-PL/globals.ts @@ -16,6 +16,7 @@ export const globalsLocale = { saveAndEdit: 'Zapisz i edytuj', }, modal: { + title: 'Usunięcie elementu {name}', confirm: 'Potwierdź', cancel: 'Anuluj', description: 'Czy chcesz kontynuować?', diff --git a/frontend-project/src/models/global.ts b/frontend-project/src/models/global.ts index 3f81c016f..4b7b1b3d9 100644 --- a/frontend-project/src/models/global.ts +++ b/frontend-project/src/models/global.ts @@ -1,14 +1,7 @@ -import { notification } from 'antd'; -import { IconType } from 'antd/lib/notification'; - export interface GlobalModelState { collapsed: boolean; } -export const openNotificationWithIcon = (message: IconType, title: string, description: string) => { - notification[message]({ message: title, description }); -}; - const GlobalModel = { namespace: 'global', state: { diff --git a/frontend-project/src/pages/cases/CasesListView.tsx b/frontend-project/src/pages/cases/CasesListView.tsx index bd1daacb0..52a180a7f 100644 --- a/frontend-project/src/pages/cases/CasesListView.tsx +++ b/frontend-project/src/pages/cases/CasesListView.tsx @@ -14,6 +14,7 @@ import { AutocompleteService } from '@/services/autocomplete'; import LettersListView from '../letters/LettersListView'; import EventsListView from '../events/EventsListView'; import NotesListView from '../notes/NotesListView'; +import { openRemoveConfirmationModal } from '../../utils/utils'; const { TabPane } = Tabs; @@ -38,14 +39,16 @@ export default function CaseListsListView() { const tableActionRef = useRef(); const { fields, list } = localeKeys.cases; - function onEdit(id: number) { - router.push(`/cases/edit/${id}`); + function onEdit(_case: Case) { + router.push(`/cases/edit/${_case.id}`); } - function onRemove(id: number) { - CasesService.remove(id) - .then(() => tableActionRef.current?.reload()) - .catch(() => tableActionRef.current?.reload()); + function onRemove(_case: Case) { + openRemoveConfirmationModal(_case.name, () => + CasesService.remove(_case.id) + .then(() => tableActionRef.current?.reload()) + .catch(() => tableActionRef.current?.reload()), + ); } const columns: ProColumns[] = [ @@ -105,14 +108,14 @@ export default function CaseListsListView() { { title: formatMessage({ id: localeKeys.lists.actions }), dataIndex: 'id', - render: (id: number) => ( + render: (_, record: Case) => (