split Modal

apps/client/src/features/app-settings/panel/client-control-panel/ClientList.tsx

@@ -6,7 +6,8 @@ import { setClientRemote } from '../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../common/stores/clientStore';
 import * as Panel from '../PanelUtils';
 
-import { RedirectModal, RenameModal } from './Modal';
+import { RedirectModal } from './RedirectModal';
+import { RenameModal } from './RenameModal';
 
 import style from './ClientControlPanel.module.scss';
 

apps/client/src/features/app-settings/panel/client-control-panel/RedirectModal.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+import { Clients } from 'ontime-types';
+
+import style from './ClientControlPanel.module.scss';
+
+export function RedirectModal(props: {
+  onClose: () => void;
+  isOpen: boolean;
+  id: string;
+  clients: Clients;
+  onSubmit: (path: string) => void;
+}) {
+  const { onClose, isOpen, id, clients, onSubmit } = props;
+  const [path, setPath] = useState('');
+
+  const host = `${window.location.origin}/`;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Redirect {clients[id]?.name}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <InputGroup variant='ontime-filled' size='md'>
+            <InputLeftAddon>{host}</InputLeftAddon>
+            <Input placeholder='timer?bg=f00' value={path} onChange={(event) => setPath(event.target.value)} />
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
+          <div className={style.buttonSection}>
+            <Button size='md' variant='ontime-subtle' onClick={onClose}>
+              Cancel
+            </Button>
+            <Button size='md' variant='ontime-filled' onClick={() => onSubmit(path)}>
+              Submit
+            </Button>
+          </div>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/features/app-settings/panel/client-control-panel/Modal.tsx → apps/client/src/features/app-settings/panel/client-control-panel/RenameModal.tsx

@@ -2,8 +2,6 @@ import { useState } from 'react';
 import {
   Button,
   Input,
-  InputGroup,
-  InputLeftAddon,
   Modal,
   ModalBody,
   ModalCloseButton,
@@ -16,45 +14,6 @@ import { Clients } from 'ontime-types';
 
 import style from './ClientControlPanel.module.scss';
 
-export function RedirectModal(props: {
-  onClose: () => void;
-  isOpen: boolean;
-  id: string;
-  clients: Clients;
-  onSubmit: (path: string) => void;
-}) {
-  const { onClose, isOpen, id, clients, onSubmit } = props;
-  const [path, setPath] = useState('');
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Redirect {clients[id]?.name}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div>Redirect to a new URL</div>
-          <InputGroup variant='ontime-filled' size='md'>
-            {/* TODO: better description */}
-            <InputLeftAddon>ontime:port/</InputLeftAddon>
-            <Input placeholder='newpath?and=params' value={path} onChange={(event) => setPath(event.target.value)} />
-          </InputGroup>
-        </ModalBody>
-        <ModalFooter>
-          <div className={style.buttonSection}>
-            <Button size='md' variant='ontime-subtle' onClick={onClose}>
-              Cancel
-            </Button>
-            <Button size='md' variant='ontime-filled' onClick={() => onSubmit(path)}>
-              Submit
-            </Button>
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
 export function RenameModal(props: {
   onClose: () => void;
   isOpen: boolean;