From de44ea81d3a26881ffb72da08f5d933a856ba16b Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 2 Oct 2021 16:42:51 +0200
Subject: [PATCH] modal manager

- Create a modal with tabs for reusability
---
 client/src/features/editors/Editor.jsx        |   4 +-
 client/src/features/menu/MenuBar.jsx          |   6 +-
 .../features/menu/buttons/SettingsIconBtn.jsx |   2 +-
 client/src/features/modals/ModalManager.jsx   |  58 +++++
 client/src/features/modals/SettingsModal.jsx  | 231 ++++++++----------
 5 files changed, 166 insertions(+), 135 deletions(-)
 create mode 100644 client/src/features/modals/ModalManager.jsx

diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index 1a4e4f26f..46e950636 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/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}>
diff --git a/client/src/features/menu/MenuBar.jsx b/client/src/features/menu/MenuBar.jsx
index c11ce2efb..2ed4e2c2d 100644
--- a/client/src/features/menu/MenuBar.jsx
+++ b/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 />
-      <div className={style.gap} />
-      <InfoIconBtn
+      <SettingsIconBtn
         style={{ fontSize: '1.5em' }}
         size='lg'
         clickhandler={onOpen}
       />
+      <div className={style.gap} />
       <input
         type='file'
         style={{ display: 'none' }}
diff --git a/client/src/features/menu/buttons/SettingsIconBtn.jsx b/client/src/features/menu/buttons/SettingsIconBtn.jsx
index 8f51d9223..21834beab 100644
--- a/client/src/features/menu/buttons/SettingsIconBtn.jsx
+++ b/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 />}
diff --git a/client/src/features/modals/ModalManager.jsx b/client/src/features/modals/ModalManager.jsx
new file mode 100644
index 000000000..745860bc1
--- /dev/null
+++ b/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,
+};
diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/SettingsModal.jsx
index 7d4c507a0..7188ab4c3 100644
--- a/client/src/features/modals/SettingsModal.jsx
+++ b/client/src/features/modals/SettingsModal.jsx
@@ -1,12 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/modal';
+import { ModalBody } 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,128 +36,112 @@ 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' && (
-              <>
-                <FormControl id='title'>
-                  <FormLabel
-                    style={{ fontWeight: 400, paddingTop: '1em' }}
-                    htmlFor='title'
-                  >
-                    Event Title
-                  </FormLabel>
-                  <Input
-                    size='sm'
-                    name='title'
-                    placeholder='Event Title'
-                    autoComplete='off'
-                    value={formData.title}
-                    onChange={(event) =>
-                      setFormData({ ...formData, title: event.target.value })
-                    }
-                    isDisabled={submitting}
-                  />
-                </FormControl>
+    <>
+      <form onSubmit={submitHandler}>
+        <ModalBody>
+          {status === 'success' && (
+            <>
+              <FormControl id='title'>
+                <FormLabel
+                  style={{ fontWeight: 400, paddingTop: '1em' }}
+                  htmlFor='title'
+                >
+                  Event Title
+                </FormLabel>
+                <Input
+                  size='sm'
+                  name='title'
+                  placeholder='Event Title'
+                  autoComplete='off'
+                  value={formData.title}
+                  onChange={(event) =>
+                    setFormData({ ...formData, title: event.target.value })
+                  }
+                  isDisabled={submitting}
+                />
+              </FormControl>
 
-                <FormControl id='url'>
-                  <FormLabel
-                    style={{ fontWeight: 400, paddingTop: '1em' }}
-                    htmlFor='url'
-                  >
-                    Event URL
-                  </FormLabel>
-                  <Input
-                    size='sm'
-                    name='url'
-                    placeholder='www.onsite.no'
-                    autoComplete='off'
-                    value={formData.url}
-                    onChange={(event) =>
-                      setFormData({ ...formData, url: event.target.value })
-                    }
-                    isDisabled={submitting}
-                  />
-                </FormControl>
+              <FormControl id='url'>
+                <FormLabel
+                  style={{ fontWeight: 400, paddingTop: '1em' }}
+                  htmlFor='url'
+                >
+                  Event URL
+                </FormLabel>
+                <Input
+                  size='sm'
+                  name='url'
+                  placeholder='www.onsite.no'
+                  autoComplete='off'
+                  value={formData.url}
+                  onChange={(event) =>
+                    setFormData({ ...formData, url: event.target.value })
+                  }
+                  isDisabled={submitting}
+                />
+              </FormControl>
 
-                <FormControl id='pubInfo'>
-                  <FormLabel
-                    style={{ fontWeight: 400, paddingTop: '1em' }}
-                    htmlFor='pubInfo'
-                  >
-                    Public Info
-                  </FormLabel>
-                  <Textarea
-                    size='sm'
-                    name='pubInfo'
-                    placeholder='Information to be shown on public screens'
-                    autoComplete='off'
-                    value={formData.publicInfo}
-                    onChange={(event) =>
-                      setFormData({
-                        ...formData,
-                        publicInfo: event.target.value,
-                      })
-                    }
-                    isDisabled={submitting}
-                  />
-                </FormControl>
+              <FormControl id='pubInfo'>
+                <FormLabel
+                  style={{ fontWeight: 400, paddingTop: '1em' }}
+                  htmlFor='pubInfo'
+                >
+                  Public Info
+                </FormLabel>
+                <Textarea
+                  size='sm'
+                  name='pubInfo'
+                  placeholder='Information to be shown on public screens'
+                  autoComplete='off'
+                  value={formData.publicInfo}
+                  onChange={(event) =>
+                    setFormData({
+                      ...formData,
+                      publicInfo: event.target.value,
+                    })
+                  }
+                  isDisabled={submitting}
+                />
+              </FormControl>
 
-                <FormControl id='backstageInfo'>
-                  <FormLabel
-                    style={{ fontWeight: 400, paddingTop: '1em' }}
-                    htmlFor='backstageInfo'
-                  >
-                    Backstage Info
-                  </FormLabel>
-                  <Textarea
-                    size='sm'
-                    name='backstageInfo'
-                    placeholder='Information to be shown on backstage screens'
-                    autoComplete='off'
-                    value={formData.backstageInfo}
-                    onChange={(event) =>
-                      setFormData({
-                        ...formData,
-                        backstageInfo: event.target.value,
-                      })
-                    }
-                    isDisabled={submitting}
-                  />
-                </FormControl>
-              </>
-            )}
-          </ModalBody>
-
-          <ModalFooter>
-            <Button
-              colorScheme='blue'
-              mr={3}
-              isLoading={submitting}
-              type='submit'
-            >
-              Save
-            </Button>
-            <Button variant='ghost' onClick={onClose} disabled={submitting}>
-              Cancel
-            </Button>
-          </ModalFooter>
-        </form>
-      </ModalContent>
-    </Modal>
+              <FormControl id='backstageInfo'>
+                <FormLabel
+                  style={{ fontWeight: 400, paddingTop: '1em' }}
+                  htmlFor='backstageInfo'
+                >
+                  Backstage Info
+                </FormLabel>
+                <Textarea
+                  size='sm'
+                  name='backstageInfo'
+                  placeholder='Information to be shown on backstage screens'
+                  autoComplete='off'
+                  value={formData.backstageInfo}
+                  onChange={(event) =>
+                    setFormData({
+                      ...formData,
+                      backstageInfo: event.target.value,
+                    })
+                  }
+                  isDisabled={submitting}
+                />
+              </FormControl>
+            </>
+          )}
+          <Button
+            colorScheme='blue'
+            mr={3}
+            isLoading={submitting}
+            type='submit'
+          >
+            Save
+          </Button>
+        </ModalBody>
+      </form>
+    </>
   );
 }