Client remote control (#930)

--------- Co-authored-by: kellhogs <fabianpos99@gmail.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me> Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
2026-08-17 21:24:11 +00:00 · 2024-06-15 12:26:41 +02:00
parent 70e8fbf327
commit a15eb0db4c
33 changed files with 868 additions and 169 deletions
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientRemote } from '../../hooks/useSocket';
+
+import style from './ClientModal.module.scss';
+
+interface RenameClientModalProps {
+  id: string;
+  name?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RenameClientModal(props: RenameClientModalProps) {
+  const { id, name: currentName = '', isOpen, onClose } = props;
+  const [name, setName] = useState(currentName);
+
+  const { setClientName } = setClientRemote;
+
+  const handleRename = () => {
+    if (name !== currentName && name !== '') {
+      setClientName({ target: id, rename: name });
+    }
+    onClose();
+  };
+
+  const canSubmit = name !== currentName && name !== '';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename: {currentName}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Input
+            variant='ontime-filled'
+            size='md'
+            placeholder='new name'
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}