[Glitch] Converted app/javascript/flavours/glitch/utils/ folder to TypeScript

Port 1142f4c79e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/utils/config.js

@@ -1,10 +0,0 @@
-import ready from '../ready';
-
-export let assetHost = '';
-
-ready(() => {
-  const cdnHost = document.querySelector('meta[name=cdn-host]');
-  if (cdnHost) {
-    assetHost = cdnHost.content || '';
-  }
-});

app/javascript/flavours/glitch/utils/config.ts

@@ -0,0 +1,13 @@
+import ready from '../ready';
+
+export let assetHost = '';
+
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+ready(() => {
+  const cdnHost = document.querySelector<HTMLMetaElement>(
+    'meta[name=cdn-host]',
+  );
+  if (cdnHost) {
+    assetHost = cdnHost.content || '';
+  }
+});

app/javascript/flavours/glitch/utils/html.js

@@ -1,6 +0,0 @@
-// NB: This function can still return unsafe HTML
-export const unescapeHTML = (html) => {
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n').replace(/<[^>]*>/g, '');
-  return wrapper.textContent;
-};

app/javascript/flavours/glitch/utils/html.ts

@@ -0,0 +1,9 @@
+// NB: This function can still return unsafe HTML
+export const unescapeHTML = (html: string) => {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = html
+    .replace(/<br\s*\/?>/g, '\n')
+    .replace(/<\/p><p>/g, '\n\n')
+    .replace(/<[^>]*>/g, '');
+  return wrapper.textContent;
+};

app/javascript/flavours/glitch/utils/icons.tsx

@@ -1,13 +1,23 @@
 // Copied from emoji-mart for consistency with emoji picker and since
 // they don't export the icons in the package
 export const loupeIcon = (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 20 20'
+    width='13'
+    height='13'
+  >
     <path d='M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z' />
   </svg>
 );
 
 export const deleteIcon = (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 20 20'
+    width='13'
+    height='13'
+  >
     <path d='M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z' />
   </svg>
 );

app/javascript/flavours/glitch/utils/notifications.js

@@ -1,30 +0,0 @@
-// Handles browser quirks, based on
-// https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
-
-const checkNotificationPromise = () => {
-  try {
-    // eslint-disable-next-line promise/valid-params, promise/catch-or-return
-    Notification.requestPermission().then();
-  } catch(e) {
-    return false;
-  }
-
-  return true;
-};
-
-const handlePermission = (permission, callback) => {
-  // Whatever the user answers, we make sure Chrome stores the information
-  if(!('permission' in Notification)) {
-    Notification.permission = permission;
-  }
-
-  callback(Notification.permission);
-};
-
-export const requestNotificationPermission = (callback) => {
-  if (checkNotificationPromise()) {
-    Notification.requestPermission().then((permission) => handlePermission(permission, callback)).catch(console.warn);
-  } else {
-    Notification.requestPermission((permission) => handlePermission(permission, callback));
-  }
-};

app/javascript/flavours/glitch/utils/notifications.ts

@@ -0,0 +1,13 @@
+/**
+ * Tries Notification.requestPermission, console warning instead of rejecting on error.
+ * @param callback Runs with the permission result on completion.
+ */
+export const requestNotificationPermission = async (
+  callback: NotificationPermissionCallback,
+) => {
+  try {
+    callback(await Notification.requestPermission());
+  } catch (error) {
+    console.warn(error);
+  }
+};

app/javascript/flavours/glitch/utils/react_router.tsx

@@ -1,8 +1,8 @@
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 
-import { __RouterContext } from "react-router";
+import { __RouterContext } from 'react-router';
 
-import hoistStatics from "hoist-non-react-statics";
+import hoistStatics from 'hoist-non-react-statics';
 
 export const WithRouterPropTypes = {
   match: PropTypes.object.isRequired,
@@ -16,31 +16,37 @@ export const WithOptionalRouterPropTypes = {
   history: PropTypes.object,
 };
 
+export interface OptionalRouterProps {
+  ref: unknown;
+  wrappedComponentRef: unknown;
+}
+
 // This is copied from https://github.com/remix-run/react-router/blob/v5.3.4/packages/react-router/modules/withRouter.js
 // but does not fail if called outside of a React Router context
-export function withOptionalRouter(Component) {
-  const displayName = `withRouter(${Component.displayName || Component.name})`;
-  const C = props => {
+export function withOptionalRouter<
+  ComponentType extends React.ComponentType<OptionalRouterProps>,
+>(Component: ComponentType) {
+  const displayName = `withRouter(${Component.displayName ?? Component.name})`;
+  const C = (props: React.ComponentProps<ComponentType>) => {
     const { wrappedComponentRef, ...remainingProps } = props;
 
     return (
       <__RouterContext.Consumer>
-        {context => {
-          if(context)
+        {(context) => {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          if (context) {
             return (
+              // @ts-expect-error - Dynamic covariant generic components are tough to type.
               <Component
                 {...remainingProps}
                 {...context}
                 ref={wrappedComponentRef}
               />
             );
-          else
-            return (
-              <Component
-                {...remainingProps}
-                ref={wrappedComponentRef}
-              />
-            );
+          } else {
+            // @ts-expect-error - Dynamic covariant generic components are tough to type.
+            return <Component {...remainingProps} ref={wrappedComponentRef} />;
+          }
         }}
       </__RouterContext.Consumer>
     );
@@ -53,8 +59,8 @@ export function withOptionalRouter(Component) {
     wrappedComponentRef: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.func,
-      PropTypes.object
-    ])
+      PropTypes.object,
+    ]),
   };
 
   return hoistStatics(C, Component);

app/javascript/flavours/glitch/utils/scrollbar.ts

@@ -1,9 +1,7 @@
-/** @type {number | null} */
-let cachedScrollbarWidth = null;
+import { isMobile } from '../is_mobile';
+
+let cachedScrollbarWidth: number | null = null;
 
-/**
- * @returns {number}
- */
 const getActualScrollbarWidth = () => {
   const outer = document.createElement('div');
   outer.style.visibility = 'hidden';
@@ -14,20 +12,19 @@ const getActualScrollbarWidth = () => {
   outer.appendChild(inner);
 
   const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  outer.parentNode.removeChild(outer);
+  outer.remove();
 
   return scrollbarWidth;
 };
 
-/**
- * @returns {number}
- */
 export const getScrollbarWidth = () => {
   if (cachedScrollbarWidth !== null) {
     return cachedScrollbarWidth;
   }
 
-  const scrollbarWidth = getActualScrollbarWidth();
+  const scrollbarWidth = isMobile(window.innerWidth)
+    ? 0
+    : getActualScrollbarWidth();
   cachedScrollbarWidth = scrollbarWidth;
 
   return scrollbarWidth;