From c55a9b397650b236ec9f70af31a8e1d196774135 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 7 Jun 2021 16:45:03 +0200
Subject: [PATCH] fix(project): fix iOS 13 type error

Add function to polyfill missing matchMedia#addEventListener on iOS 13 devices
---
 src/hooks/useBreakpoint.ts | 26 ++++++++++++++------------
 src/utils/matchMedia.ts    | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/matchMedia.ts

diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
index b732be19a..69827bc04 100644
--- a/src/hooks/useBreakpoint.ts
+++ b/src/hooks/useBreakpoint.ts
@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react';
 
-const XS_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (max-width: 599px)');
-const SM_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 600px) and (max-width: 959px)');
-const MD_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 960px) and (max-width: 1279px)');
-const LG_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 1280px) and (max-width: 1919px)');
+import { addMediaQueryListChangeListener, removeMediaQueryListChangeListener } from '../utils/matchMedia';
+
+const XS_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (max-width: 599px)');
+const SM_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 600px) and (max-width: 959px)');
+const MD_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 960px) and (max-width: 1279px)');
+const LG_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 1280px) and (max-width: 1919px)');
 
 export enum Breakpoint {
   xs,
@@ -35,16 +37,16 @@ const useBreakpoint = (): Breakpoint => {
   useEffect(() => {
     const changeEventHandler = (): void => setBreakpoint(getScreenSize());
 
-    XS_MATCH_MEDIA.addEventListener('change', changeEventHandler);
-    SM_MATCH_MEDIA.addEventListener('change', changeEventHandler);
-    MD_MATCH_MEDIA.addEventListener('change', changeEventHandler);
-    LG_MATCH_MEDIA.addEventListener('change', changeEventHandler);
+    addMediaQueryListChangeListener(XS_MATCH_MEDIA, changeEventHandler);
+    addMediaQueryListChangeListener(SM_MATCH_MEDIA, changeEventHandler);
+    addMediaQueryListChangeListener(MD_MATCH_MEDIA, changeEventHandler);
+    addMediaQueryListChangeListener(LG_MATCH_MEDIA, changeEventHandler);
 
     return () => {
-      XS_MATCH_MEDIA.removeEventListener('change', changeEventHandler);
-      SM_MATCH_MEDIA.removeEventListener('change', changeEventHandler);
-      MD_MATCH_MEDIA.removeEventListener('change', changeEventHandler);
-      LG_MATCH_MEDIA.removeEventListener('change', changeEventHandler);
+      removeMediaQueryListChangeListener(XS_MATCH_MEDIA, changeEventHandler);
+      removeMediaQueryListChangeListener(SM_MATCH_MEDIA, changeEventHandler);
+      removeMediaQueryListChangeListener(MD_MATCH_MEDIA, changeEventHandler);
+      removeMediaQueryListChangeListener(LG_MATCH_MEDIA, changeEventHandler);
     };
   }, []);
 
diff --git a/src/utils/matchMedia.ts b/src/utils/matchMedia.ts
new file mode 100644
index 000000000..81b849c63
--- /dev/null
+++ b/src/utils/matchMedia.ts
@@ -0,0 +1,25 @@
+/**
+ * Add change event listener to given MediaQueryList instance
+ * @param mediaQuery
+ * @param callback
+ */
+export const addMediaQueryListChangeListener = (mediaQuery: MediaQueryList, callback: (event: MediaQueryListEvent) => void): void => {
+  if (typeof mediaQuery.addEventListener === 'undefined') {
+    mediaQuery.addListener(callback)
+  } else {
+    mediaQuery.addEventListener('change', callback);
+  }
+};
+
+/**
+ * Remove change event listener from given MediaQueryList instance
+ * @param mediaQuery
+ * @param callback
+ */
+export const removeMediaQueryListChangeListener = (mediaQuery: MediaQueryList, callback: (event: MediaQueryListEvent) => void): void => {
+  if (typeof mediaQuery.removeEventListener === 'undefined') {
+    mediaQuery.removeListener(callback)
+  } else {
+    mediaQuery.removeEventListener('change', callback);
+  }
+};