Merge pull request #15 from cpvalente/chore/modal-manager

modal manager

client/src/features/editors/Editor.jsx

@@ -2,8 +2,8 @@ import { lazy, useEffect } from 'react';
 import { Box } from '@chakra-ui/layout';
 import { useDisclosure } from '@chakra-ui/hooks';
 import styles from './Editor.module.css';
-import SettingsModal from 'features/modals/SettingsModal';
 import MenuBar from 'features/menu/MenuBar';
+import ModalManager from 'features/modals/ModalManager';
 
 const EventListWrapper = lazy(() =>
   import('features/editors/list/EventListWrapper')
@@ -22,7 +22,7 @@ export default function Editor() {
 
   return (
     <>
-      <SettingsModal isOpen={isOpen} onClose={onClose} />
+      <ModalManager isOpen={isOpen} onClose={onClose} />
 
       <div className={styles.mainContainer}>
         <Box id='settings' className={styles.settings}>

client/src/features/menu/MenuBar.jsx

@@ -3,7 +3,6 @@ import { downloadEvents, uploadEvents } from 'app/api/ontimeApi';
 import { EVENTS_TABLE } from 'app/api/apiConstants';
 import DownloadIconBtn from './buttons/DownloadIconBtn';
 import SettingsIconBtn from './buttons/SettingsIconBtn';
-import InfoIconBtn from './buttons/InfoIconBtn';
 import MaxIconBtn from './buttons/MaxIconBtn';
 import MinIconBtn from './buttons/MinIconBtn';
 import QuitIconBtn from './buttons/QuitIconBtn';
@@ -84,13 +83,12 @@ export default function MenuBar(props) {
         size='lg'
         clickhandler={() => handleIPC('help')}
       />
-      <SettingsIconBtn style={{ fontSize: '1.5em' }} size='lg' disabled />
+      <SettingsIconBtn
-      <div className={style.gap} />
-      <InfoIconBtn
         style={{ fontSize: '1.5em' }}
         size='lg'
         clickhandler={onOpen}
       />
+      <div className={style.gap} />
       <input
         type='file'
         style={{ display: 'none' }}

client/src/features/menu/buttons/SettingsIconBtn.jsx

@@ -5,7 +5,7 @@ import { FiSettings } from 'react-icons/fi';
 export default function SettingsIconBtn(props) {
   const { clickhandler, ...rest } = props;
   return (
-    <Tooltip label='Application Settings'>
+    <Tooltip label='Settings'>
       <IconButton
         size={props.size || 'xs'}
         icon={<FiSettings />}

client/src/features/modals/ModalManager.jsx

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import {
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/modal';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
+import SettingsModal from './SettingsModal';
+
+export default function ModalManager(props) {
+  const { isOpen, onClose } = props;
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      closeOnOverlayClick={false}
+      motionPreset={'slideInBottom'}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Ontime Settings</ModalHeader>
+        <ModalCloseButton />
+
+        <Tabs size='sm' isLazy>
+          <TabList>
+            <Tab>Event Settings</Tab>
+            <Tab>Application Settings</Tab>
+            <Tab>URL Aliases</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <SettingsModal onClose={onClose} />
+            </TabPanel>
+            <TabPanel>
+              <p>Application settings will be here!</p>
+              <p>Set port</p>
+              <p>Set end message</p>
+            </TabPanel>
+            <TabPanel>
+              <p>You will be able to define URL aliases here!</p>
+              <p>List existing aliases</p>
+              <p>List existing aliases</p>
+              <p>List existing aliases</p>
+              <p>Add new alias input + button</p>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+ModalManager.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.bool.isRequired,
+};

client/src/features/modals/SettingsModal.jsx

@@ -1,12 +1,4 @@
-import {
+import { ModalBody } from '@chakra-ui/modal';
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/modal';
 import {
   FormLabel,
   FormControl,
@@ -19,7 +11,7 @@ import { useEffect, useState } from 'react';
 import { useFetch } from 'app/hooks/useFetch';
 import { EVENT_TABLE } from 'app/api/apiConstants';
 
-export default function SettingsModal(props) {
+export default function SettingsModal() {
   const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
   const [formData, setFormData] = useState({
     title: '',
@@ -28,7 +20,6 @@ export default function SettingsModal(props) {
     backstageInfo: '',
   });
   const [submitting, setSubmitting] = useState(false);
-  const { isOpen, onClose } = props;
 
   useEffect(() => {
     if (data == null) return;
@@ -45,21 +36,12 @@ export default function SettingsModal(props) {
     event.preventDefault();
     setSubmitting(true);
 
-    await postEvent(formData).then(setSubmitting(false)).then(onClose);
+    await postEvent(formData).then(setSubmitting(false));
   };
 
   return (
-    <Modal
+    <>
-      isOpen={isOpen}
-      onClose={onClose}
-      closeOnOverlayClick={false}
-      motionPreset={'slideInBottom'}
-    >
-      <ModalOverlay />
-      <ModalContent>
       <form onSubmit={submitHandler}>
-          <ModalHeader>Event Main Info</ModalHeader>
-          <ModalCloseButton />
         <ModalBody>
           {status === 'success' && (
             <>
@@ -150,9 +132,6 @@ export default function SettingsModal(props) {
               </FormControl>
             </>
           )}
-          </ModalBody>
-
-          <ModalFooter>
           <Button
             colorScheme='blue'
             mr={3}
@@ -161,12 +140,8 @@ export default function SettingsModal(props) {
           >
             Save
           </Button>
-            <Button variant='ghost' onClick={onClose} disabled={submitting}>
+        </ModalBody>
-              Cancel
-            </Button>
-          </ModalFooter>
       </form>
-      </ModalContent>
+    </>
-    </Modal>
   );
 }