V1 (#118)

* chore: upgrade minor versions
* chore: upgrade cypress
* chore: upgrade fe dependencies
* update readme
* update osx images
* update readme
* upgrade dependencies
* upgrade test dependency
* feat: add option to input autofill
* feat: autofill to the left
* chore: update docs
* chore: cleanup ci
* version bump
* style: prevent zero height bar
* fix: prevent loosing menu
* ux: improve input, no spellcheck or autocomplete
* small ux improvements in cuesheets
* feat 111/increase maximum number of events
* fix: optimistic delete issue with filter
* refact: pincode workflow
* chore: add versioning to packages

client/src/features/modals/AliasesModal.jsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+/* eslint-disable jsx-a11y/anchor-has-content */
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Button, IconButton } from '@chakra-ui/button';
 import { IoInformationCircleOutline } from '@react-icons/all-files/io5/IoInformationCircleOutline';
 import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
@@ -13,7 +14,7 @@ import { viewerLocations } from '../../app/appConstants';
 import { LoggingContext } from '../../app/context/LoggingContext';
 import { validateAlias } from '../../app/utils/aliases';
 import SubmitContainer from './SubmitContainer';
-import { handleLinks, host, openLink } from '../../common/utils/linkUtils';
+import { handleLinks, host } from '../../common/utils/linkUtils';
 import style from './Modals.module.scss';
 
 export default function AliasesModal() {
@@ -35,45 +36,48 @@ export default function AliasesModal() {
   /**
    * Validate and submit data
    */
-  const submitHandler = async (event) => {
-    event.preventDefault();
-    setSubmitting(true);
+  const submitHandler = useCallback(
+    async (event) => {
+      event.preventDefault();
+      setSubmitting(true);
 
-    const validatedAliases = [...aliases];
-    let errors = false;
-    for (const alias of validatedAliases) {
-      // validate url
-      const isURLValid = validateAlias(alias.pathAndParams);
-      if (!isURLValid.status) {
-        alias.urlError = isURLValid.message;
-        errors = true;
-      } else {
-        alias.urlError = undefined;
+      const validatedAliases = [...aliases];
+      let errors = false;
+      for (const alias of validatedAliases) {
+        // validate url
+        const isURLValid = validateAlias(alias.pathAndParams);
+        if (!isURLValid.status) {
+          alias.urlError = isURLValid.message;
+          errors = true;
+        } else {
+          alias.urlError = undefined;
+        }
+        // validate alias
+        const isAliasValid = validateAlias(alias.alias);
+        if (!isAliasValid.status) {
+          alias.aliasError = isAliasValid.message;
+          errors = true;
+        } else {
+          alias.aliasError = undefined;
+        }
       }
-      // validate alias
-      const isAliasValid = validateAlias(alias.alias);
-      if (!isAliasValid.status) {
-        alias.aliasError = isAliasValid.message;
-        errors = true;
-      } else {
-        alias.aliasError = undefined;
+      setAliases(validatedAliases);
+
+      if (!errors) {
+        await postAliases(aliases);
+        await refetch();
+        setChanged(false);
       }
-    }
-    setAliases(validatedAliases);
 
-    if (!errors) {
-      await postAliases(aliases);
-      await refetch();
-      setChanged(false);
-    }
-
-    setSubmitting(false);
-  };
+      setSubmitting(false);
+    },
+    [aliases, refetch]
+  );
 
   /**
    * Creates a new alias in state with a temporary id
    */
-  const addNew = () => {
+  const addNew = useCallback(() => {
     if (aliases.length > 20) {
       emitError('Maximum amount of aliases reacted (20)');
       return;
@@ -87,23 +91,23 @@ export default function AliasesModal() {
     };
     setAliases((prevState) => [...prevState, emptyAlias]);
     setChanged(true);
-  };
+  }, [aliases.length, emitError]);
 
   /**
    * Deletes an alias by a given id
    * @param {string} id - id of alias to delete
    */
-  const deleteAlias = (id) => {
+  const deleteAlias = useCallback((id) => {
     setAliases((prevState) => [...prevState.filter((a) => a.id !== id)]);
     setChanged(true);
-  };
+  }, []);
 
   /**
    * Sets enabled flag to true / false
    * @param {string} id - object id
    * @param {boolean} isEnabled - whether to enable / disable flag
    */
-  const setEnabled = (id, isEnabled) => {
+  const setEnabled = useCallback((id, isEnabled) => {
     const aliasesState = [...aliases];
     for (const a of aliasesState) {
       if (a.id === id) {
@@ -125,7 +129,7 @@ export default function AliasesModal() {
     }
     setChanged(true);
     setAliases(aliasesState);
-  };
+  }, [aliases, emitError]);
 
   /**
    * Reverts local state equals to server state
@@ -141,12 +145,15 @@ export default function AliasesModal() {
    * @param {string} field - object parameter to update
    * @param {string} value - new object parameter value
    */
-  const handleChange = (index, field, value) => {
-    const temp = [...aliases];
-    temp[index][field] = value;
-    setAliases(temp);
-    setChanged(true);
-  };
+  const handleChange = useCallback(
+    (index, field, value) => {
+      const temp = [...aliases];
+      temp[index][field] = value;
+      setAliases(temp);
+      setChanged(true);
+    },
+    [aliases]
+  );
 
   return (
     <ModalBody className={style.modalBody}>
@@ -183,16 +190,16 @@ export default function AliasesModal() {
             eg. a lower third url with some custom parameters
             <table>
               <tbody>
-              <tr>
-                <td className={style.labelNote} style={{ width: '30%' }}>
-                  Alias
-                </td>
-                <td className={style.labelNote}>Page URL</td>
-              </tr>
-              <tr>
-                <td>mylower</td>
-                <td>lower?bg=ff2&text=f00&size=0.6&transition=5</td>
-              </tr>
+                <tr>
+                  <td className={style.labelNote} style={{ width: '30%' }}>
+                    Alias
+                  </td>
+                  <td className={style.labelNote}>Page URL</td>
+                </tr>
+                <tr>
+                  <td>mylower</td>
+                  <td>lower?bg=ff2&text=f00&size=0.6&transition=5</td>
+                </tr>
               </tbody>
             </table>
             <br />
@@ -201,20 +208,20 @@ export default function AliasesModal() {
             eg. an unattended screen that you would need to change route from the app
             <table>
               <tbody>
-              <tr>
-                <td className={style.labelNote} style={{ width: '30%' }}>
-                  Alias
-                </td>
-                <td className={style.labelNote}>Page URL</td>
-              </tr>
-              <tr>
-                <td>thirdfloor</td>
-                <td>public</td>
-              </tr>
+                <tr>
+                  <td className={style.labelNote} style={{ width: '30%' }}>
+                    Alias
+                  </td>
+                  <td className={style.labelNote}>Page URL</td>
+                </tr>
+                <tr>
+                  <td>thirdfloor</td>
+                  <td>public</td>
+                </tr>
               </tbody>
             </table>
           </div>
-          <div className={style.inlineAliasPlaceholder} style={{ padding: '0.5em 0' }}>
+          <div className={style.inlineAliasPlaceholder}>
             <span className={style.labelNote}>Alias</span>
             <span className={style.labelNote}>Page URL</span>
           </div>
@@ -247,11 +254,12 @@ export default function AliasesModal() {
                     href='#!'
                     target='_blank'
                     rel='noreferrer'
-                    onClick={(e) => openLink(e, alias.pathAndParams)}
+                    onClick={(e) => handleLinks(e, alias.pathAndParams)}
                   />
                 </Tooltip>
                 <Tooltip label='Enable alias' openDelay={500}>
                   <IconButton
+                    aria-label='Enable alias'
                     size='xs'
                     icon={<IoSunny />}
                     colorScheme='blue'
@@ -261,6 +269,7 @@ export default function AliasesModal() {
                 </Tooltip>
                 <Tooltip label='Delete alias' openDelay={500}>
                   <IconButton
+                    aria-label='Delete alias'
                     size='xs'
                     icon={<IoRemove />}
                     colorScheme='red'
@@ -277,7 +286,7 @@ export default function AliasesModal() {
             </div>
           ))}
 
-          <div className={style.inlineAliasPlaceholder} style={{ padding: '0.5em 0' }}>
+          <div className={style.inlineAliasPlaceholder}>
             <Button size='xs' colorScheme='blue' variant='outline' onClick={() => addNew()}>
               Add new
             </Button>