From d7f185fa6ba80e53206b47010282dc4ac3f13dda Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 11 Jul 2020 23:04:23 +0200
Subject: [PATCH] :sparkles: (persistance) persist user choices

Lazy load youtube video
---
 src/components/IntervalInput.vue | 17 ++++++-----
 src/components/ZoneMusic.vue     | 48 ++++++++++++++++++++++++++++++++
 src/hooks/useInterval.ts         | 13 +++++++++
 src/hooks/useMusic.ts            | 10 +++++--
 src/hooks/useTimer.ts            |  3 +-
 src/views/Home.vue               | 33 +++-------------------
 6 files changed, 84 insertions(+), 40 deletions(-)
 create mode 100644 src/components/ZoneMusic.vue
 create mode 100644 src/hooks/useInterval.ts

diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 1e2be53..6fa9067 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -8,30 +8,33 @@
 
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api'
+import { useInterval } from '../hooks/useInterval'
 
 const MIN_INTERVAL = 1
 
 export default defineComponent({
   name: 'IntervalInput',
   props: {
-    editable: { type: Boolean, required: true },
-    interval: { type: Number, required: true }
+    editable: { type: Boolean, required: true }
   },
-  setup(props, { emit }) {
+  setup() {
+    const { interval, setInterval } = useInterval()
+
     const minus = () => {
-      if (props.interval > MIN_INTERVAL) {
-        emit('update', props.interval - 1)
+      if (interval.value > MIN_INTERVAL) {
+        setInterval(interval.value - 1)
       }
     }
     const plus = () => {
-      emit('update', props.interval + 1)
+      setInterval(interval.value + 1)
     }
 
     const label = computed(() =>
-      props.interval > MIN_INTERVAL ? 'minutes' : 'minute'
+      interval.value > MIN_INTERVAL ? 'minutes' : 'minute'
     )
 
     return {
+      interval,
       minus,
       plus,
       label
diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
new file mode 100644
index 0000000..5a1cc42
--- /dev/null
+++ b/src/components/ZoneMusic.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="zone-music">
+    <div class="pretty p-switch p-fill">
+      <input
+        type="checkbox"
+        name="use-music"
+        id="use-music"
+        :checked="withMusic"
+        @change="setWithMusic(!withMusic)"
+      />
+      <div class="state p-success">
+        <label for="use-music">son</label>
+      </div>
+    </div>
+    <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import { useMusic } from '@/hooks/useMusic'
+
+export default defineComponent({
+  name: 'ZoneMusic',
+  components: {
+    ChilledMusic: () => import('@/components/ChilledMusic.vue')
+  },
+  props: {
+    play: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup(_, { emit }) {
+    const { withMusic, setWithMusic } = useMusic()
+
+    const play = () => {
+      emit('play')
+    }
+
+    const pause = () => {
+      emit('pause')
+    }
+
+    return { withMusic, setWithMusic, play, pause }
+  }
+})
+</script>
diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts
new file mode 100644
index 0000000..6870ef5
--- /dev/null
+++ b/src/hooks/useInterval.ts
@@ -0,0 +1,13 @@
+import { useGetters, useActions } from 'vuex-composition-helpers'
+import { GetterTree } from 'vuex'
+import { State, RootActions } from '@/store'
+
+export const useInterval = () => {
+  const { interval } = useGetters<GetterTree<State, State>>(['interval'])
+  const { setInterval } = useActions<RootActions>(['setInterval'])
+
+  return {
+    interval,
+    setInterval
+  }
+}
diff --git a/src/hooks/useMusic.ts b/src/hooks/useMusic.ts
index d5c138b..1a1fcf8 100644
--- a/src/hooks/useMusic.ts
+++ b/src/hooks/useMusic.ts
@@ -1,9 +1,13 @@
-import { ref } from '@vue/composition-api'
+import { useGetters, useActions } from 'vuex-composition-helpers'
+import { GetterTree } from 'vuex'
+import { State, RootActions } from '@/store'
 
 export const useMusic = () => {
-  const hasMusic = ref(true)
+  const { withMusic } = useGetters<GetterTree<State, State>>(['withMusic'])
+  const { setWithMusic } = useActions<RootActions>(['setWithMusic'])
 
   return {
-    hasMusic
+    withMusic,
+    setWithMusic
   }
 }
diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts
index 3188195..b2d4dcc 100644
--- a/src/hooks/useTimer.ts
+++ b/src/hooks/useTimer.ts
@@ -1,6 +1,7 @@
 import { ref, computed, watch } from '@vue/composition-api'
 import { StopwatchState } from '@/types/StopwatchState'
 import { notify } from '@/utils/notification'
+import { useInterval } from './useInterval'
 
 const format = (num: number) => {
   return num.toString().padStart(2, '0')
@@ -16,7 +17,7 @@ const formatSeconds = (seconds: number) => {
 export const useTimer = () => {
   const timeState = ref<StopwatchState>('stopped')
   const seconds = ref(0)
-  const interval = ref(5)
+  const { interval } = useInterval()
   const sessionSeconds = ref(interval.value * 60)
   const isDev1Turn = ref(true)
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1d9e10a..346b14a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="home">
-    <IntervalInput
-      :interval="interval"
-      :editable="timeState === 'stopped'"
-      @update="(int) => (interval = int)"
-    />
+    <IntervalInput :editable="timeState === 'stopped'" />
     <section class="developers">
       <DevSession position="1" :is-turn="isDev1Turn" :session="session" />
       <DevSession position="2" :is-turn="!isDev1Turn" :session="session" />
@@ -15,45 +11,25 @@
       <button v-show="timeState === 'started'" @click="pause">pause</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
-    <div class="music">
-      <div class="pretty p-switch p-fill">
-        <input
-          type="checkbox"
-          name="use-music"
-          id="use-music"
-          v-model="hasMusic"
-        />
-        <div class="state p-success">
-          <label for="use-music">son</label>
-        </div>
-      </div>
-      <ChilledMusic
-        v-if="hasMusic"
-        :play="timeState === 'started'"
-        @play="start"
-        @pause="pause"
-      />
-    </div>
+    <ZoneMusic :play="timeState === 'started'" @play="start" @pause="pause" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
-import { useMusic } from '@/hooks/useMusic'
 import DevSession from '@/components/DevSession.vue'
-import ChilledMusic from '@/components/ChilledMusic.vue'
+import ZoneMusic from '@/components/ZoneMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
     DevSession,
-    ChilledMusic,
+    ZoneMusic,
     IntervalInput
   },
   setup() {
-    const { hasMusic } = useMusic()
     const {
       interval,
       start,
@@ -66,7 +42,6 @@ export default defineComponent({
     } = useTimer()
 
     return {
-      hasMusic,
       interval,
       start,
       pause,