fix: 🐛 correctly set initial value in matchMedia$

streamich · Jun 3, 2020 · c173deb · c173deb
1 parent 34c52ba
commit c173deb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/src/__tests__/matchMedia$.spec.ts b/src/__tests__/matchMedia$.spec.ts
@@ -83,7 +83,7 @@ test('subscribes and unsubscribes to media query listeners', () => {
   _addListener[0]();
 
   expect(spy).toHaveBeenCalledTimes(4);
-  expect(spy.mock.calls[0][0]).toBe(true);
+  expect(spy.mock.calls[0][0]).toBe(false);
   expect(spy.mock.calls[1][0]).toBe(true);
   expect(spy.mock.calls[2][0]).toBe(false);
   expect(spy.mock.calls[3][0]).toBe(true);
@@ -106,13 +106,13 @@ test('can have two subscribers', () => {
   _addListener[0]();
 
   expect(spy1).toHaveBeenCalledTimes(4);
-  expect(spy1.mock.calls[0][0]).toBe(true);
+  expect(spy1.mock.calls[0][0]).toBe(false);
   expect(spy1.mock.calls[1][0]).toBe(true);
   expect(spy1.mock.calls[2][0]).toBe(false);
   expect(spy1.mock.calls[3][0]).toBe(true);
 
   expect(spy2).toHaveBeenCalledTimes(4);
-  expect(spy2.mock.calls[0][0]).toBe(true);
+  expect(spy2.mock.calls[0][0]).toBe(false);
   expect(spy2.mock.calls[1][0]).toBe(true);
   expect(spy2.mock.calls[2][0]).toBe(false);
   expect(spy2.mock.calls[3][0]).toBe(true);
@@ -140,7 +140,7 @@ test('does not emit the same value', () => {
   _addListener[0]();
 
   expect(spy).toHaveBeenCalledTimes(4);
-  expect(spy.mock.calls[0][0]).toBe(true);
+  expect(spy.mock.calls[0][0]).toBe(false);
   expect(spy.mock.calls[1][0]).toBe(true);
   expect(spy.mock.calls[2][0]).toBe(false);
   expect(spy.mock.calls[3][0]).toBe(true);

diff --git a/src/darkTheme$.ts b/src/darkTheme$.ts
@@ -1,5 +1,4 @@
 import {BehaviorSubject} from 'rxjs';
-import {filter, map, tap} from 'rxjs/operators';
 import {colorSchemeNoPreference$} from './colorSchemeNoPreference$';
 import {colorSchemeDark$} from './colorSchemeDark$';
 import {colorSchemeLight$} from './colorSchemeLight$';
@@ -14,19 +13,17 @@ const defaultIsNightTime = (): boolean => {
 export const createDarkTheme$ = (isNightTime: () => boolean = defaultIsNightTime): ReadonlyBehaviorSubject<boolean> => {
   const subject = new BehaviorSubject<boolean>(false);
 
-  colorSchemeNoPreference$.pipe(
-    filter(Boolean),
-    map(() => isNightTime()),
-  ).subscribe(subject);
+  colorSchemeNoPreference$.subscribe(noPreference => {
+    if (noPreference) subject.next(isNightTime());
+  });
 
-  colorSchemeDark$.pipe(
-    filter<boolean>(Boolean),
-  ).subscribe(subject);
+  colorSchemeDark$.subscribe(isDark => {
+    if (isDark && !subject.getValue()) subject.next(true);
+  });
 
-  colorSchemeLight$.pipe(
-    filter(isLight => !isLight),
-    map(() => false),
-  ).subscribe(subject);
+  colorSchemeLight$.subscribe(isLight => {
+    if (isLight && subject.getValue()) subject.next(false);
+  });
 
   return subject;
 };

diff --git a/src/matchMedia$.ts b/src/matchMedia$.ts
@@ -11,7 +11,7 @@ const matchMediaClient$ = (query: string): ReadonlyBehaviorSubject<boolean> => {
       observer.next(last = mql.matches);
     };
     mql.addListener(listener);
-    observer.next(last === mql.matches);
+    observer.next(last = mql.matches);
     return () => mql.removeListener(listener);
   });
   observable.getValue = () => mql.matches;

diff --git a/stories/colorSchemeDark.stories.js b/stories/colorSchemeDark.stories.js
@@ -6,12 +6,9 @@ export default {
 
 export const Default = () => {
   const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.innerText = 'Hello Button';
   colorSchemeDark$.subscribe(value => {
     console.log('value', value);
     btn.innerText = value ? 'TRUE' : 'FALSE';
-
   });
   btn.addEventListener('click', e => console.log(e));
   return btn;