💄 (interval) better interval look

src/hooks/useInterval.ts

@@ -1,13 +1,40 @@
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
+import { computed } from '@vue/composition-api'
+
+const MIN_INTERVAL = 0.5
 
 export const useInterval = () => {
   const { interval } = useGetters<GetterTree<State, State>>(['interval'])
   const { setInterval } = useActions<RootActions>(['setInterval'])
 
+  const minus = () => {
+    if (interval.value > MIN_INTERVAL) {
+      setInterval(Math.max(interval.value - 1, MIN_INTERVAL))
+    }
+  }
+
+  const plus = () => {
+    setInterval(Math.floor(interval.value + 1))
+  }
+
+  const label = computed(() => {
+    if (interval.value > 1) {
+      return `${interval.value} minutes`
+    }
+
+    if (interval.value === MIN_INTERVAL) {
+      return '30 seconds'
+    }
+
+    return `${interval.value} minute`
+  })
+
   return {
     interval,
-    setInterval
+    minus,
+    plus,
+    label
   }
 }