Merge pull request #470 from rtibbles/no_match_media

Match media testing guard and bug fix

CHANGELOG.md

@@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- All new changelog items should come here -->
 
+- [#470]
+  - **Description:** Fix bug and add test guard in MediaQuery implementation
+  - **Products impact:** none
+  - **Addresses:** -
+  - **Components:** none
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#470]: https://github.com/learningequality/kolibri-design-system/pull/470
+
 - [#469]
   - **Description:** Throttle the resize listener handler
   - **Products impact:** updated API

lib/useKResponsiveWindow/MediaQuery.js

@@ -10,13 +10,17 @@ export default class MediaQuery {
   constructor(query, eventHandler) {
     this.query = query;
     this.eventHandler = eventHandler;
+    this._mediaQueryList = null;
   }
 
   /**
    * @returns {Object} Media query list
    */
   get mediaQueryList() {
-    return window.matchMedia(this.query);
+    if (!this._mediaQueryList) {
+      this._mediaQueryList = window.matchMedia(this.query);
+    }
+    return this._mediaQueryList;
   }
 
   /**
@@ -32,8 +36,8 @@ export default class MediaQuery {
    * @returns {Object} Containing mediaQueryList, eventHandler, and stopListening
    */
   startListening() {
-    //Prevent function execution if Nuxt is server side rendering
-    if (this.isNuxtServerSideRendering()) {
+    // Prevent function execution if Nuxt is server side rendering
+    if (this.isNuxtServerSideRendering() || !window.matchMedia) {
       return;
     }
 
@@ -48,6 +52,10 @@ export default class MediaQuery {
    * Stop listening for media query events
    */
   stopListening() {
+    // Prevent function execution if Nuxt is server side rendering
+    if (this.isNuxtServerSideRendering() || !window.matchMedia) {
+      return;
+    }
     if (this.mediaQueryList.removeEventListener) {
       this.mediaQueryList.removeEventListener('change', this.eventHandler);
     } else {