refactor: re-implement schedules overview with composition

src/components/shows/Schedules.vue

@@ -4,20 +4,20 @@
     :class="{
       'show-schedules': true,
       expandable: isExpandable,
-      collapsed: isExpandable && collapsed,
+      collapsed: isExpandable && isCollapsed,
     }"
-    @click="expand"
+    @click="isCollapsed = !isCollapsed"
   >
     <table class="table b-table table-striped border">
       <thead>
         <tr>
           <th class="top-header">
-            {{ uppercaseFirst($t('showSchedules.schedule')) }}
+            {{ uppercaseFirst(t('showSchedules.schedule')) }}
           </th>
           <th class="top-header text-right font-weight-normal">
             {{ schedules.length }}
             {{
-              schedules.length === 1 ? $t('showSchedules.schedule') : $t('showSchedules.schedules')
+              schedules.length === 1 ? t('showSchedules.schedule') : t('showSchedules.schedules')
             }}
           </th>
         </tr>
@@ -40,67 +40,59 @@
     </table>
 
     <div v-if="isExpandable" class="collapser">
-      {{ $t('showSchedules.collapse') }}
+      {{ t('showSchedules.collapse') }}
     </div>
   </div>
 
   <div v-else class="border p-4 mb-4">
-    {{ $t('showSchedules.noSchedulesAvailable') }}
+    {{ t('showSchedules.noSchedulesAvailable') }}
   </div>
 </template>
 
-<script>
+<script setup>
 import { parseISO } from 'date-fns'
-import { mapGetters } from 'vuex'
-import rrules from '../../mixins/rrules'
-import prettyDate from '../../mixins/prettyDate'
-import { lowercaseFirst, uppercaseFirst } from '@/utilities'
-
-export default {
-  mixins: [rrules, prettyDate],
-
-  data() {
-    return {
-      collapsed: true,
-    }
-  },
-
-  computed: {
-    ...mapGetters({
-      schedules: 'shows/schedules',
-      selectedShow: 'shows/selectedShow',
-    }),
-    isExpandable() {
-      return this.schedules.length > 2
-    },
-  },
-
-  created() {
-    this.getSchedules()
-  },
-
-  methods: {
-    parseISO,
-    uppercaseFirst,
+import { useStore } from 'vuex'
+import { useRRule } from '@/mixins/rrules'
+import { usePretty } from '@/mixins/prettyDate'
+import { lowercaseFirst, uppercaseFirst, useSelectedShow } from '@/utilities'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from '@/i18n'
+
+const { t } = useI18n()
+const { rruleRender } = useRRule()
+const { prettyWeekday, prettyDate, prettyHours } = usePretty()
+const store = useStore()
+const selectedShow = useSelectedShow()
+const schedules = computed(() => store.state.shows.schedules)
+const isExpandable = computed(() => schedules.value.length > 2)
+
+const isCollapsed = ref(true)
+
+function updateSchedules() {
+  if (selectedShow.value) {
+    store.dispatch('shows/fetchSchedules', { show: selectedShow.value.id })
+  }
+}
 
-    expand() {
-      this.collapsed = !this.collapsed
-    },
+function renderRruleForSchedule(schedule) {
+  if (schedule.rrule < 3) {
+    return uppercaseFirst(rruleRender(schedule.rrule))
+  }
 
-    getSchedules() {
-      this.$store.dispatch('shows/fetchSchedules', { show: this.selectedShow.id })
-    },
+  const rrule = uppercaseFirst(rruleRender(schedule.rrule))
+  const weekday = lowercaseFirst(prettyWeekday(schedule.by_weekday))
 
-    renderRruleForSchedule(schedule) {
-      if (schedule.rrule < 3) {
-        return uppercaseFirst(this.rruleRender(schedule.rrule))
-      }
+  return `${rrule} ${weekday}s`
+}
 
-      const rrule = uppercaseFirst(this.rruleRender(schedule.rrule))
-      const weekday = lowercaseFirst(this.prettyWeekday(schedule.by_weekday))
+// TODO[#127]: this belongs in the store
+watch(selectedShow, updateSchedules, { immediate: true })
+</script>
 
-      return `${rrule} ${weekday}s`
-    },
+<script>
+export default {
+  compatConfig: {
+    MODE: 3,
   },
 }
 </script>