From 13a9b758ecca0a431881add7e01fb615e2cbaee0 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 6 Jul 2021 10:15:34 +1000
Subject: [PATCH] interface: fix mediaquery watchers on safari

---
 pkg/interface/src/logic/state/local.tsx |  2 ++
 pkg/interface/src/views/App.js          | 24 ++++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/pkg/interface/src/logic/state/local.tsx b/pkg/interface/src/logic/state/local.tsx
index 9b6064106e..c9a97304e6 100644
--- a/pkg/interface/src/logic/state/local.tsx
+++ b/pkg/interface/src/logic/state/local.tsx
@@ -26,6 +26,7 @@ export interface LocalState {
   setTutorialRef: (el: HTMLElement | null) => void;
   dark: boolean;
   mobile: boolean;
+  mdBreak: boolean;
   background: BackgroundConfig;
   omniboxShown: boolean;
   suspendedFocus?: HTMLElement;
@@ -45,6 +46,7 @@ export const selectLocalState =
 const useLocalState = create<LocalStateZus>(persist((set, get) => ({
   dark: false,
   mobile: false,
+  mdBreak: false,
   background: undefined,
   theme: 'auto',
   hideAvatars: false,
diff --git a/pkg/interface/src/views/App.js b/pkg/interface/src/views/App.js
index 7c8f028afc..e605427735 100644
--- a/pkg/interface/src/views/App.js
+++ b/pkg/interface/src/views/App.js
@@ -83,15 +83,20 @@ class App extends React.Component {
     bootstrapApi();
     this.props.getShallowChildren(`~${window.ship}`, 'dm-inbox');
     const theme = this.getTheme();
-    this.themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
-    this.mobileWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[0]})`);
-    this.themeWatcher.onchange = this.updateTheme;
-    this.mobileWatcher.onchange = this.updateMobile;
     setTimeout(() => {
       // Something about how the store works doesn't like changing it
       // before the app has actually rendered, hence the timeout.
+      this.themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
+      this.mobileWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[0]})`);
+      this.mediumWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[1]})`);
+      // TODO: addListener is deprecated, but safari 13 requires it
+      this.themeWatcher.addListener(this.updateTheme);
+      this.mobileWatcher.addListener(this.updateMobile);
+      this.mediumWatcher.addListener(this.updateMedium);
+
       this.updateMobile(this.mobileWatcher);
       this.updateTheme(this.themeWatcher);
+      this.updateMedium(this.mediumWatcher);
     }, 500);
     this.props.getBaseHash();
     this.props.getRuntimeLag();  // TODO  consider polling periodically
@@ -105,8 +110,9 @@ class App extends React.Component {
   }
 
   componentWillUnmount() {
-    this.themeWatcher.onchange = undefined;
-    this.mobileWatcher.onchange = undefined;
+    this.themeWatcher.removeListener(this.updateTheme);
+    this.mobileWatcher.removeListener(this.updateMobile);
+    this.mediumWatcher.removeListener(this.updateMedium);
   }
 
   updateTheme(e) {
@@ -121,6 +127,12 @@ class App extends React.Component {
     });
   }
 
+  updateMedium = (e) => {
+    this.props.set((state) => {
+      state.mdBreak = e.matches;
+    });
+  }
+
   getTheme() {
     const { props } = this;
     return ((props.dark && props?.display?.theme == 'auto') ||