From ee1ff5fe62253bab0e64108960b96b308c5b24bb Mon Sep 17 00:00:00 2001
From: Nutthapat Pongtanyavichai <59821765+Leomotors@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:35:59 +0700
Subject: [PATCH] fix(web): recommendation crashing website (#648)

---
 .changeset/lucky-phones-listen.md             |  5 +++
 .../components/RecommendationText/index.tsx   | 40 +++++--------------
 2 files changed, 16 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/lucky-phones-listen.md

diff --git a/.changeset/lucky-phones-listen.md b/.changeset/lucky-phones-listen.md
new file mode 100644
index 000000000..d34cad76a
--- /dev/null
+++ b/.changeset/lucky-phones-listen.md
@@ -0,0 +1,5 @@
+---
+'web': patch
+---
+
+fix: recommendation crashing website (unexpected behavior of useEffect)
diff --git a/apps/web/src/modules/CourseSearch/components/RecommendationText/index.tsx b/apps/web/src/modules/CourseSearch/components/RecommendationText/index.tsx
index e8b957f63..39b0a967e 100644
--- a/apps/web/src/modules/CourseSearch/components/RecommendationText/index.tsx
+++ b/apps/web/src/modules/CourseSearch/components/RecommendationText/index.tsx
@@ -1,16 +1,15 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { Link, Typography, styled, useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { Analytics } from '@web/common/context/Analytics/components/Analytics'
 import { useCourseGroup } from '@web/common/hooks/useCourseGroup'
-import { useCourseSearchProvider } from '@web/modules/CourseSearch/context/CourseSearch/hooks/useCourseSearchProvider'
 import { useSearchCourseQueryParams } from '@web/modules/CourseSearch/hooks/useSearchCourseQueryParams'
 import { collectLogEvent } from '@web/services/logging'
 import { courseCartStore } from '@web/store'
 
-import { SearchCourseQueryVariables, useRecommendCourseTextLazyQuery } from '@cgr/codegen'
+import { useRecommendCourseTextQuery } from '@cgr/codegen'
 
 import { SelectedCourse } from './types'
 
@@ -30,13 +29,17 @@ const RecommendationText: React.FC<RecommendationTextProps> = (props: Recommenda
   const selectedCourses = props.selectedCourses
   const courseGroup = useCourseGroup()
 
-  const { courseSearchQuery } = useCourseSearchProvider()
   const { setFilter } = useSearchCourseQueryParams()
-  const [lastSearchQuery, setLastSearchQuery] = useState<SearchCourseQueryVariables | undefined>(
-    undefined
-  )
 
-  const [fetchRecommendation, { data }] = useRecommendCourseTextLazyQuery()
+  const { data } = useRecommendCourseTextQuery({
+    variables: {
+      req: {
+        variant,
+        semesterKey: courseGroup,
+        selectedCourses: selectedCourses,
+      },
+    },
+  })
 
   const visibleRecommendation = useMemo(() => data?.recommend?.courses?.slice(0, 6) ?? [], [data])
   const theme = useTheme()
@@ -54,27 +57,6 @@ const RecommendationText: React.FC<RecommendationTextProps> = (props: Recommenda
     })
   }, [data, variant])
 
-  useEffect(() => {
-    if (JSON.stringify(courseSearchQuery.variables) === JSON.stringify(lastSearchQuery)) return
-    fetchRecommendation({
-      variables: {
-        req: {
-          variant,
-          semesterKey: courseGroup,
-          selectedCourses: selectedCourses,
-        },
-      },
-    })
-    setLastSearchQuery(courseSearchQuery.variables)
-  }, [
-    courseSearchQuery.variables,
-    selectedCourses,
-    courseGroup,
-    fetchRecommendation,
-    lastSearchQuery,
-    variant,
-  ])
-
   if (!visibleRecommendation || visibleRecommendation.length === 0) return null
 
   return (