refactor: beta 6 (#395)

Few small fixes and refactors from beta 6 feedback

* style: presentation tweaks

* fix: prevent calling undefined

* fix: fullscreen toggle in safari

* refactor: convert to typescript and simplify

apps/client/src/common/hooks/useFullscreen.js

@@ -1,43 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-
-export default function useFullscreen() {
-  const [isFullScreen, setFullScreen] = useState(document.fullscreenElement);
-
-  useEffect(() => {
-    const handleChange = () => {
-      setFullScreen(document.fullscreenElement);
-    };
-    document.addEventListener('fullscreenchange', handleChange, { passive: true });
-    document.addEventListener('resize', handleChange, { passive: true });
-
-    return () => {
-      document.removeEventListener('fullscreenchange', handleChange, { passive: true });
-      document.removeEventListener('resize', handleChange, { passive: true });
-    };
-  }, []);
-
-  const toggleFullScreen = useCallback(() => {
-    if (!document.fullscreenElement && !document.webkitIsFullScreen) {
-      // Fullscreen mode is not active, so we can enter fullscreen mode
-      if (document.documentElement.requestFullscreen) {
-        // Standard fullscreen API is supported
-        document.documentElement.requestFullscreen();
-      } else if (document.documentElement.webkitRequestFullscreen) {
-        // iOS Safari fullscreen API is supported
-        document.documentElement.webkitRequestFullscreen();
-      }
-    } else {
-      // Fullscreen mode is active, so we can exit fullscreen mode
-      if (document.exitFullscreen) {
-        // Standard fullscreen API is supported
-        document.exitFullscreen();
-      } else if (document.webkitCancelFullscreen) {
-        // iOS Safari fullscreen API is supported
-        document.webkitCancelFullscreen();
-      }
-    }
-  }, []);
-
-  return { isFullScreen, toggleFullScreen };
-}

apps/client/src/common/hooks/useFullscreen.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface WebkitDocument extends Document {
+  webkitFullscreenElement?: Element | null;
+  webkitIsFullScreen?: boolean;
+  webkitExitFullscreen?: () => Promise<void>;
+  webkitRequestFullscreen?: () => Promise<void>;
+}
+
+export default function useFullscreen() {
+  const [isFullScreen, setFullScreen] = useState(
+    document.fullscreenElement || (document as WebkitDocument).webkitFullscreenElement,
+  );
+
+  useEffect(() => {
+    const handleChange = () => {
+      if (typeof (document as WebkitDocument).webkitFullscreenElement !== 'undefined') {
+        setFullScreen((document as WebkitDocument).webkitFullscreenElement);
+      } else {
+        setFullScreen(document.fullscreenElement);
+      }
+    };
+    (document as WebkitDocument).addEventListener('webkitfullscreenchange', handleChange, { passive: true });
+    document.addEventListener('fullscreenchange', handleChange, { passive: true });
+    document.addEventListener('resize', handleChange, { passive: true });
+
+    return () => {
+      (document as WebkitDocument).removeEventListener('webkitfullscreenchange', handleChange);
+      document.removeEventListener('fullscreenchange', handleChange);
+      document.removeEventListener('resize', handleChange);
+    };
+  }, []);
+
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) {
+      // Fullscreen mode is not active, so we can enter fullscreen mode
+      if (document.documentElement.requestFullscreen) {
+        // Standard fullscreen API is supported
+        document.documentElement.requestFullscreen();
+        // @ts-expect-error -- the whole casting dance is not worth it
+      } else if (document.documentElement.webkitRequestFullscreen) {
+        // iOS Safari fullscreen API is supported
+        // @ts-expect-error -- we know this is not undefined now
+        (document.documentElement as WebkitDocument).webkitRequestFullscreen();
+      }
+    } else {
+      // Fullscreen mode is active, so we can exit fullscreen mode
+      if (document.exitFullscreen) {
+        // Standard fullscreen API is supported
+        document.exitFullscreen();
+      } else if ((document as WebkitDocument).webkitExitFullscreen) {
+        // iOS Safari fullscreen API is supported
+        // @ts-expect-error -- we know this is not undefined now
+        (document as WebkitDocument).webkitExitFullscreen();
+      }
+    }
+  }, []);
+
+  return { isFullScreen, toggleFullScreen };
+}

apps/client/src/features/modals/quick-start/QuickStart.tsx

@@ -1,6 +1,10 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
   Button,
   Input,
   Modal,
@@ -41,9 +45,15 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
   }, [reset, data]);
 
   const onSubmit = async (data: Partial<EventData>) => {
-    await postNew(data);
+    try {
-    await ontimeQueryClient.invalidateQueries(EVENT_DATA);
+      await postNew(data);
-    await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
+      await ontimeQueryClient.invalidateQueries(EVENT_DATA);
+      await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
+
+      onClose();
+    } catch (_) {
+      /* WE DO NOT HANDLE ERRORS */
+    }
   };
 
   const onReset = () => reset(eventDataPlaceholder);
@@ -66,6 +76,15 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
         <ModalCloseButton />
         <ModalBody className={styles.pad}>
           <form onSubmit={handleSubmit(onSubmit)} className={styles.sectionContainer}>
+            <Alert status='info' variant='ontime-on-light-info'>
+              <AlertIcon />
+              <div className={styles.column}>
+                <AlertTitle>Note</AlertTitle>
+                <AlertDescription>
+                  On submit, application options will be kept but rundown and event data will be reset
+                </AlertDescription>
+              </div>
+            </Alert>
             <div className={styles.entryRow}>
               <label className={styles.sectionTitle}>
                 Event title
@@ -124,9 +143,6 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
                 />
               </label>
             </div>
-            <div className={styles.footerNotes}>
-              Note: Application options will be kept but rundown and event data will be reset <br />
-            </div>
             <ModalFooter className={styles.buttonSection}>
               <Button onClick={onReset} isDisabled={disableButtons} variant='ontime-ghost-on-light' size='sm'>
                 Clear data

apps/client/src/translation/TranslationProvider.tsx

@@ -30,7 +30,7 @@ export const TranslationProvider = ({ children }: PropsWithChildren) => {
   const { data } = useSettings();
 
   const getLocalizedString = useCallback(
-    (key: keyof typeof langEn, lang = data!.language): string => {
+    (key: keyof typeof langEn, lang = data?.language || 'en'): string => {
       if (lang in translationsList) {
         if (key in translationsList[lang as keyof typeof translationsList]) {
           return translationsList[lang as keyof typeof translationsList][key];
@@ -38,7 +38,7 @@ export const TranslationProvider = ({ children }: PropsWithChildren) => {
       }
       return langEn[key];
     },
-    [data],
+    [data?.language],
   );
 
   const contextValue = {