From c173debd68f011fb2d61f11ac93e146a5a0a70a2 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Wed, 3 Jun 2020 10:08:12 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20correctly=20set=20initial?=
 =?UTF-8?q?=20value=20in=20matchMedia$?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/matchMedia$.spec.ts  |  8 ++++----
 src/darkTheme$.ts                  | 21 +++++++++------------
 src/matchMedia$.ts                 |  2 +-
 stories/colorSchemeDark.stories.js |  3 ---
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/__tests__/matchMedia$.spec.ts b/src/__tests__/matchMedia$.spec.ts
index c03fd71..d12167b 100644
--- 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
index 9f0f67f..29f35e1 100644
--- 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
index a37a620..0f6a308 100644
--- 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
index 0d10342..41dc156 100644
--- 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;