packages/drive-store/components/modals/RenameDeviceModal/RenameDeviceModal.tsx

   1 import React, { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import type { ModalStateProps } from '@proton/components';
   7 import {
   8     Form,
   9     InputFieldTwo,
  10     ModalTwo,
  11     ModalTwoContent,
  12     ModalTwoFooter,
  13     ModalTwoHeader,
  14     Row,
  15     useFormErrors,
  16     useModalTwoStatic,
  17 } from '@proton/components';
  18 import { useLoading } from '@proton/hooks';
  19 import { requiredValidator } from '@proton/shared/lib/helpers/formValidators';
  20 import noop from '@proton/utils/noop';
  21
  22 import type { Device } from '../../../store';
  23 import { useActions } from '../../../store';
  24
  25 interface Props {
  26     onClose?: () => void;
  27     device: Device;
  28 }
  29
  30 const RenameDeviceModal = ({ device, onClose, ...modalProps }: Props & ModalStateProps) => {
  31     const { renameDevice } = useActions();
  32     const [submitting, withSubmitting] = useLoading();
  33
  34     const { validator, onFormSubmit } = useFormErrors();
  35     const [model, setModel] = useState(() => {
  36         return {
  37             name: device.name,
  38         };
  39     });
  40
  41     const handleSubmit = async () => {
  42         if (!onFormSubmit()) {
  43             return;
  44         }
  45
  46         await renameDevice({
  47             shareId: device.shareId,
  48             linkId: device.linkId,
  49             deviceId: device.id,
  50             newName: model.name,
  51             haveLegacyName: device.haveLegacyName,
  52         });
  53
  54         onClose?.();
  55     };
  56
  57     const deviceNameValidation = validator([requiredValidator(model.name)]);
  58
  59     return (
  60         <ModalTwo
  61             as={Form}
  62             disableCloseOnEscape={submitting}
  63             onClose={onClose}
  64             onReset={onClose}
  65             onSubmit={() => withSubmitting(handleSubmit()).catch(noop)}
  66             size="small"
  67             {...modalProps}
  68         >
  69             <ModalTwoHeader closeButtonProps={{ disabled: submitting }} title={c('Title').t`Rename device`} />
  70             <ModalTwoContent>
  71                 <Row className="my-4">
  72                     <InputFieldTwo
  73                         aria-required
  74                         autoFocus
  75                         label={c('Label').t`Device name`}
  76                         placeholder={c('Placeholder').t`Enter device name`}
  77                         title={c('Label').t`Enter device name`}
  78                         error={deviceNameValidation}
  79                         value={model.name}
  80                         onValue={(value: string) => setModel({ name: value })}
  81                     />
  82                 </Row>
  83             </ModalTwoContent>
  84             <ModalTwoFooter>
  85                 <Button type="button" onClick={onClose} disabled={submitting}>
  86                     {c('Action').t`Cancel`}
  87                 </Button>
  88                 <Button type="submit" loading={submitting} disabled={device.name === model.name} color="norm">
  89                     {c('Action').t`Rename`}
  90                 </Button>
  91             </ModalTwoFooter>
  92         </ModalTwo>
  93     );
  94 };
  95
  96 export default RenameDeviceModal;
  97 export const useRenameDeviceModal = () => {
  98     return useModalTwoStatic(RenameDeviceModal);
  99 };