✨ (persistance) persist user choices

Lazy load youtube video

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 },
+    editable: { type: Boolean, required: true }
-    interval: { type: Number, required: true }
   },
-  setup(props, { emit }) {
+  setup() {
+    const { interval, setInterval } = useInterval()
+
     const minus = () => {
-      if (props.interval > MIN_INTERVAL) {
+      if (interval.value > MIN_INTERVAL) {
-        emit('update', props.interval - 1)
+        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

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>

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
+  }
+}

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
   }
 }

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)
 

src/views/Home.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="home">
-    <IntervalInput
+    <IntervalInput :editable="timeState === 'stopped'" />
-      :interval="interval"
-      :editable="timeState === 'stopped'"
-      @update="(int) => (interval = int)"
-    />
     <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">
+    <ZoneMusic :play="timeState === 'started'" @play="start" @pause="pause" />
-      <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>
   </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,