From 20a78677efb96067cdf9c65ba06ee8f8f7085bce Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Sat, 6 May 2023 13:01:38 -0500
Subject: [PATCH] fix: Potential Fix for Global Timeline Server Error (#2372)

* simplified group id logic

* moved onscroll listener to on-mounted
---
 .../Domain/Recipe/RecipeTimeline.vue          | 44 ++++++++++---------
 frontend/pages/group/timeline.vue             | 19 ++++----
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeTimeline.vue b/frontend/components/Domain/Recipe/RecipeTimeline.vue
index bcd854c6ab14..1f6c302c6037 100644
--- a/frontend/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimeline.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, onMounted, ref, useAsync, useContext } from "@nuxtjs/composition-api";
 import { useThrottleFn, whenever } from "@vueuse/core";
 import RecipeTimelineItem from "./RecipeTimelineItem.vue"
 import { useTimelinePreferences } from "~/composables/use-users/preferences";
@@ -104,25 +104,6 @@ export default defineComponent({
       }
     };
 
-    document.onscroll = () => {
-      // if the inner element is scrollable, let its scroll event handle the infiniteScroll
-      const timelineContainerElement = document.getElementById("timeline-container");
-      if (timelineContainerElement) {
-        const { clientHeight, scrollHeight } = timelineContainerElement
-
-        // if scrollHeight == clientHeight, the element is not scrollable, so we need to look at the global position
-        // if scrollHeight > clientHeight, it is scrollable and we don't need to do anything here
-        if (scrollHeight > clientHeight) {
-          return;
-        }
-      }
-
-      const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight*screenBuffer);
-      if (bottomOfWindow) {
-        infiniteScroll();
-      }
-    };
-
     whenever(
       () => props.value,
       () => {
@@ -251,6 +232,29 @@ export default defineComponent({
     // preload events
     initializeTimelineEvents();
 
+    onMounted(
+      () => {
+        document.onscroll = () => {
+          // if the inner element is scrollable, let its scroll event handle the infiniteScroll
+          const timelineContainerElement = document.getElementById("timeline-container");
+          if (timelineContainerElement) {
+            const { clientHeight, scrollHeight } = timelineContainerElement
+
+            // if scrollHeight == clientHeight, the element is not scrollable, so we need to look at the global position
+            // if scrollHeight > clientHeight, it is scrollable and we don't need to do anything here
+            if (scrollHeight > clientHeight) {
+              return;
+            }
+          }
+
+          const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight - (window.innerHeight*screenBuffer);
+          if (bottomOfWindow) {
+            infiniteScroll();
+          }
+        };
+      }
+    )
+
     return {
       deleteTimelineEvent,
       loading,
diff --git a/frontend/pages/group/timeline.vue b/frontend/pages/group/timeline.vue
index a8c14d5094d5..8e13802b8934 100644
--- a/frontend/pages/group/timeline.vue
+++ b/frontend/pages/group/timeline.vue
@@ -6,37 +6,34 @@
       </template>
       <template #title> {{ $t("recipe.group-global-timeline", { groupName }) }} </template>
     </BasePageTitle>
-    <RecipeTimeline v-model="ready" show-recipe-cards :query-filter="queryFilter" />
+    <RecipeTimeline v-if="queryFilter" v-model="ready" show-recipe-cards :query-filter="queryFilter" />
   </v-sheet>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import RecipeTimeline from "~/components/Domain/Recipe/RecipeTimeline.vue";
 
 export default defineComponent({
   components: { RecipeTimeline },
   setup() {
-    const { $auth } = useContext();
     const api = useUserApi();
     const ready = ref<boolean>(false);
 
-    // @ts-expect-error - TS doesn't like the $auth global user attribute
-    const groupId: string = $auth.user.groupId;
-    const queryFilter = `recipe.group_id="${groupId}"`
-
     const groupName = ref<string>("");
-    async function refreshGroupName() {
+    const queryFilter = ref<string>("");
+    async function fetchGroup() {
       const { data } = await api.groups.getCurrentUserGroup();
       if (data) {
+        queryFilter.value = `recipe.group_id="${data.id}"`;
         groupName.value = data.name;
       }
+
+      ready.value = true;
     }
 
-    refreshGroupName();
-    ready.value = true;
-
+    fetchGroup();
     return {
       groupName,
       queryFilter,