From 722ded6065d30689cd2da2fbe50a8c557143a3d6 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 29 Apr 2024 22:21:05 -0500
Subject: [PATCH] Create ItemsView utility

---
 src/components/pages/ItemsView.vue | 109 +++++++++++++++++++++++++++++
 src/components/pages/Snoozed.vue   | 100 +-------------------------
 src/components/pages/Todo.vue      |  99 +-------------------------
 3 files changed, 115 insertions(+), 193 deletions(-)
 create mode 100644 src/components/pages/ItemsView.vue

diff --git a/src/components/pages/ItemsView.vue b/src/components/pages/ItemsView.vue
new file mode 100644
index 0000000..f272c17
--- /dev/null
+++ b/src/components/pages/ItemsView.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="flex h-full">
+        <div class="grow basis-6/12 p-4 overflow-x-hidden relative">
+            <div class="text-3xl mb-4">{{ title }}</div>
+            <div v-if="categories.length === 0" class="absolute center text-9xl">∅</div>
+            <div v-for="category in categories">
+                <CategoryHeader v-bind="category" />
+                <ItemGroup
+                    :items="showSnoozed ? category.snoozedItems : category.activeItems"
+                    :selected-thread="showThread ? selectedItem : undefined"
+                    :show-snoozed="showSnoozed"
+                    @select-item="selectItem"
+                    @snooze-item="snoozeItem"
+                    @deselect="close" />
+            </div>
+        </div>
+        <div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
+            <PanelTitle :title="threadTitle" />
+            <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" />
+        </div>
+        <Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
+            <template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
+            <template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" :base-url="baseUrl" /></template>
+        </Modal>
+        <SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ThreadRef, sources, Category } from '../../state';
+import CategoryHeader from "../CategoryHeader.vue";
+import ItemGroup from "../ItemGroup.vue";
+import Modal from '../Modal.vue';
+import PanelTitle from '../PanelTitle.vue';
+import SnoozeModal from '../SnoozeModal.vue';
+import Thread from '../Thread.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps<{
+    title: string;
+    categories: Category[];
+    baseUrl: string;
+    showSnoozed?: boolean;
+}>();
+
+const showThread = ref(false);
+const selectedItem = ref<ThreadRef | undefined>();
+const snoozingItem = ref<ThreadRef | undefined>();
+const snoozing = ref(false);
+watch([() => route.params.source, () => route.params.sourceItem, () => route.params.thread], ([source, sourceItem, thread]) => {
+    const sourceInt = parseInt(Array.isArray(source) ? source[0] : source);
+    const sourceItemInt = parseInt(Array.isArray(sourceItem) ? sourceItem[0] : sourceItem);
+    const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
+    if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
+        selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
+        showThread.value = true;
+    } else {
+        // Intentionally leave selectedItem so animations look right
+        showThread.value = false;
+    }
+}, { immediate: true });
+
+const threadTitle = computed(() => {
+    const selected = selectedItem.value;
+    if (selected == null) {
+        return "";
+    }
+    return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
+});
+
+function selectItem(source: number, sourceItem: number, thread: number) {
+    const p = route.params;
+    const sourceInt = parseInt(Array.isArray(p.source) ? p.source[0] : p.source);
+    const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
+    const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
+    if (source === sourceInt && sourceItem === sourceItemInt && thread === threadInt) {
+        close();
+        return false;
+    }
+    router.push(`${props.baseUrl}/${source}/${sourceItem}/${thread}`);
+    return true;
+}
+
+function snoozeItem(source: number, sourceItem: number, thread: number) {
+    snoozingItem.value = { source, sourceItem, thread };
+    snoozing.value = true;
+}
+
+function close() {
+    console.log("closing thread")
+    router.push(props.baseUrl);
+    snoozing.value = false;
+}
+
+function stopSnoozing() {
+    if (snoozingItem.value?.source === selectedItem.value?.source &&
+        snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
+        (snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
+    ) {
+        close();
+    } else {
+        snoozing.value = false;
+    }
+}
+</script>
diff --git a/src/components/pages/Snoozed.vue b/src/components/pages/Snoozed.vue
index d797485..e13fa72 100644
--- a/src/components/pages/Snoozed.vue
+++ b/src/components/pages/Snoozed.vue
@@ -1,102 +1,8 @@
 <template>
-    <div class="flex h-full">
-        <div class="grow basis-6/12 p-4 overflow-x-hidden relative">
-            <div class="text-3xl mb-4">Snoozed</div>
-            <div v-if="snoozedCategories.length === 0" class="absolute center text-9xl">∅</div>
-            <div v-for="category in snoozedCategories">
-                <CategoryHeader v-bind="category" />
-                <ItemGroup
-                    :items="category.snoozedItems"
-                    :selected-thread="showThread ? selectedItem : undefined"
-                    :show-snoozed="true"
-                    @select-item="selectItem"
-                    @snooze-item="snoozeItem"
-                    @deselect="close" />
-            </div>
-        </div>
-        <div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
-            <PanelTitle :title="threadTitle" />
-            <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/snoozed" />
-        </div>
-        <Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
-            <template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
-            <template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/snoozed" /></template>
-        </Modal>
-        <SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />
-    </div>
+    <ItemsView base-url="/snoozed" :categories="snoozedCategories" title="Snoozed" :show-snoozed="true" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ThreadRef, sources, snoozedCategories } from '../../state';
-import CategoryHeader from "../CategoryHeader.vue";
-import ItemGroup from "../ItemGroup.vue";
-import Modal from '../Modal.vue';
-import PanelTitle from '../PanelTitle.vue';
-import SnoozeModal from '../SnoozeModal.vue';
-import Thread from '../Thread.vue';
-
-const route = useRoute();
-const router = useRouter();
-
-const showThread = ref(false);
-const selectedItem = ref<ThreadRef | undefined>();
-const snoozingItem = ref<ThreadRef | undefined>();
-const snoozing = ref(false);
-watch([() => route.params.source, () => route.params.sourceItem, () => route.params.thread], ([source, sourceItem, thread]) => {
-    const sourceInt = parseInt(Array.isArray(source) ? source[0] : source);
-    const sourceItemInt = parseInt(Array.isArray(sourceItem) ? sourceItem[0] : sourceItem);
-    const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
-    if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
-        selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
-        showThread.value = true;
-    } else {
-        // Intentionally leave selectedItem so animations look right
-        showThread.value = false;
-    }
-}, { immediate: true });
-
-const threadTitle = computed(() => {
-    const selected = selectedItem.value;
-    if (selected == null) {
-        return "";
-    }
-    return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
-});
-
-function selectItem(source: number, sourceItem: number, thread: number) {
-    const p = route.params;
-    const sourceInt = parseInt(Array.isArray(p.source) ? p.source[0] : p.source);
-    const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
-    const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
-    if (source === sourceInt && sourceItem === sourceItemInt && thread === threadInt) {
-        close();
-        return false;
-    }
-    router.push(`/snoozed/${source}/${sourceItem}/${thread}`);
-    return true;
-}
-
-function snoozeItem(source: number, sourceItem: number, thread: number) {
-    snoozingItem.value = { source, sourceItem, thread };
-    snoozing.value = true;
-}
-
-function close() {
-    console.log("closing thread")
-    router.push("/snoozed");
-    snoozing.value = false;
-}
-
-function stopSnoozing() {
-    if (snoozingItem.value?.source === selectedItem.value?.source &&
-        snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
-        (snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
-    ) {
-        close();
-    } else {
-        snoozing.value = false;
-    }
-}
+import { snoozedCategories } from '../../state';
+import ItemsView from './ItemsView.vue';
 </script>
diff --git a/src/components/pages/Todo.vue b/src/components/pages/Todo.vue
index 27690c6..142724a 100644
--- a/src/components/pages/Todo.vue
+++ b/src/components/pages/Todo.vue
@@ -1,101 +1,8 @@
 <template>
-    <div class="flex h-full">
-        <div class="grow basis-6/12 p-4 overflow-x-hidden relative">
-            <div class="text-3xl mb-4">Todo</div>
-            <div v-if="todoCategories.length === 0" class="absolute center text-9xl">∅</div>
-            <div v-for="category in todoCategories">
-                <CategoryHeader v-bind="category" />
-                <ItemGroup
-                    :items="category.activeItems"
-                    :selected-thread="showThread ? selectedItem : undefined"
-                    @select-item="selectItem"
-                    @snooze-item="snoozeItem"
-                    @deselect="close" />
-            </div>
-        </div>
-        <div class="hidden xl:flex bg-slate-200 ml-0 h-screen flex-col overflow-hidden" :class="showThread ? 'p-4 basis-6/12' : 'basis-0'">
-            <PanelTitle :title="threadTitle" />
-            <Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" />
-        </div>
-        <Modal :model-value="showThread" class="block xl:hidden" @update:model-value="close">
-            <template v-slot:header><div class="text-3xl">{{ threadTitle }}</div></template>
-            <template v-slot:body><Thread :source="selectedItem?.source ?? 0" :sourceItem="selectedItem?.sourceItem ?? 0" :thread="selectedItem?.thread ?? 0" base-url="/todo" /></template>
-        </Modal>
-        <SnoozeModal :snoozing="snoozing" :threadRef="snoozingItem" @close="stopSnoozing" />
-    </div>
+    <ItemsView base-url="/todo" :categories="todoCategories" title="Todo" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ThreadRef, sources, todoCategories } from '../../state';
-import CategoryHeader from "../CategoryHeader.vue";
-import ItemGroup from "../ItemGroup.vue";
-import Modal from '../Modal.vue';
-import PanelTitle from '../PanelTitle.vue';
-import SnoozeModal from '../SnoozeModal.vue';
-import Thread from '../Thread.vue';
-
-const route = useRoute();
-const router = useRouter();
-
-const showThread = ref(false);
-const selectedItem = ref<ThreadRef | undefined>();
-const snoozingItem = ref<ThreadRef | undefined>();
-const snoozing = ref(false);
-watch([() => route.params.source, () => route.params.sourceItem, () => route.params.thread], ([source, sourceItem, thread]) => {
-    const sourceInt = parseInt(Array.isArray(source) ? source[0] : source);
-    const sourceItemInt = parseInt(Array.isArray(sourceItem) ? sourceItem[0] : sourceItem);
-    const threadInt = parseInt(Array.isArray(thread) ? thread[0] : thread);
-    if (!isNaN(sourceInt) && !isNaN(sourceItemInt) && !isNaN(threadInt)) {
-        selectedItem.value = { source: sourceInt, sourceItem: sourceItemInt, thread: threadInt };
-        showThread.value = true;
-    } else {
-        // Intentionally leave selectedItem so animations look right
-        showThread.value = false;
-    }
-}, { immediate: true });
-
-const threadTitle = computed(() => {
-    const selected = selectedItem.value;
-    if (selected == null) {
-        return "";
-    }
-    return sources.value[selected.source].items[selected.sourceItem].threads[selected.thread].title;
-});
-
-function selectItem(source: number, sourceItem: number, thread: number) {
-    const p = route.params;
-    const sourceInt = parseInt(Array.isArray(p.source) ? p.source[0] : p.source);
-    const sourceItemInt = parseInt(Array.isArray(p.sourceItem) ? p.sourceItem[0] : p.sourceItem);
-    const threadInt = parseInt(Array.isArray(p.thread) ? p.thread[0] : p.thread);
-    if (source === sourceInt && sourceItem === sourceItemInt && thread === threadInt) {
-        close();
-        return false;
-    }
-    router.push(`/todo/${source}/${sourceItem}/${thread}`);
-    return true;
-}
-
-function snoozeItem(source: number, sourceItem: number, thread: number) {
-    snoozingItem.value = { source, sourceItem, thread };
-    snoozing.value = true;
-}
-
-function close() {
-    console.log("closing thread")
-    router.push("/todo");
-    snoozing.value = false;
-}
-
-function stopSnoozing() {
-    if (snoozingItem.value?.source === selectedItem.value?.source &&
-        snoozingItem.value?.sourceItem === selectedItem.value?.sourceItem &&
-        (snoozingItem.value?.thread === -1 || snoozingItem.value?.thread === selectedItem.value?.thread)
-    ) {
-        close();
-    } else {
-        snoozing.value = false;
-    }
-}
+import { todoCategories } from '../../state';
+import ItemsView from './ItemsView.vue';
 </script>