From 7a2c10f8f0925e98d8b9ee957519b3583d625302 Mon Sep 17 00:00:00 2001
From: Kaspar Poland <kaspar78@mouco.com>
Date: Tue, 12 Jul 2022 15:45:44 -0400
Subject: [PATCH] Lift searchoffset up to Sidebar

---
 components/sidebar/SearchView/SearchView.tsx | 78 ++++++++++----------
 components/sidebar/Sidebar.tsx               |  3 +
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/components/sidebar/SearchView/SearchView.tsx b/components/sidebar/SearchView/SearchView.tsx
index 2e82206..f4c2c1f 100644
--- a/components/sidebar/SearchView/SearchView.tsx
+++ b/components/sidebar/SearchView/SearchView.tsx
@@ -37,12 +37,15 @@ const MotionButton = motion<ButtonProps>(Button)
 const SearchView = ({
   searchQuery,
   setSearchQuery,
+  searchOffset,
+  setSearchOffset,
 }: {
   searchQuery: string
   setSearchQuery: Dispatch<React.SetStateAction<string>>
+  searchOffset: number
+  setSearchOffset: Dispatch<React.SetStateAction<number>>
 }) => {
   const searchRef = useRef() as MutableRefObject<HTMLInputElement>
-  const [searchOffset, setSearchOffset] = useState<number>(0)
   const [searchLimit, setSearchLimit] = useState<number>(7)
   const [chosenCourse, setChosenCourse] = useState("")
 
@@ -66,15 +69,8 @@ const SearchView = ({
   })
 
   useEffect(() => {
-    if (!searchQuery) return
-
-    debouncedZero(searchQuery)
-  }, [])
-
-  useEffect(() => {
-    setSearchOffset(0)
     debounced(searchQuery)
-  }, [searchQuery])
+  }, [debounced, searchQuery])
 
   useEffect(() => {
     if (searchOffset === 0) return
@@ -86,7 +82,7 @@ const SearchView = ({
         limit: searchLimit,
       },
     })
-  }, [searchQuery, searchLimit, searchOffset])
+  }, [search, searchQuery, searchLimit, searchOffset])
 
   const { t } = useTranslation(["common", "sidebar"])
 
@@ -181,33 +177,35 @@ const SearchView = ({
               </Flex>
             )}
             <Flex pt={4} px={6} w="full" justifyContent="space-between">
-              {searchOffset > 0 && <MotionButton
-                p={2}
-                variant="link"
-                key="previous"
-                variants={{
-                  hidden: {
-                    opacity: 0,
-                  },
-                  visible: {
-                    opacity: 1,
-                  },
-                }}
-                initial="hidden"
-                animate="visible"
-                isLoading={loading}
-                onClick={() => {
-                  setSearchOffset((prev) => {
-                    const newSearchOffset = prev - searchLimit
-                    if (newSearchOffset === 0) {
-                      debouncedZero(searchQuery)
-                    }
-                    return newSearchOffset
-                  })
-                }}
-              >
-                &lt;- Previous
-              </MotionButton>}
+              {searchOffset > 0 && (
+                <MotionButton
+                  p={2}
+                  variant="link"
+                  key="previous"
+                  variants={{
+                    hidden: {
+                      opacity: 0,
+                    },
+                    visible: {
+                      opacity: 1,
+                    },
+                  }}
+                  initial="hidden"
+                  animate="visible"
+                  isLoading={loading}
+                  onClick={() => {
+                    setSearchOffset((prev) => {
+                      const newSearchOffset = prev - searchLimit
+                      if (newSearchOffset === 0) {
+                        debouncedZero(searchQuery)
+                      }
+                      return newSearchOffset
+                    })
+                  }}
+                >
+                  &lt;- Previous
+                </MotionButton>
+              )}
               {data.searchCourses.length > 6 ? (
                 <React.Fragment>
                   <MotionButton
@@ -237,9 +235,9 @@ const SearchView = ({
                 <Tooltip label="No more results.">
                   <Divider
                     position="absolute"
-                      w="full"
-                      left={0}
-                      right={0}
+                    w="full"
+                    left={0}
+                    right={0}
                     style={{
                       marginTop: `calc(var(--chakra-space-4) * -1)`,
                     }}
diff --git a/components/sidebar/Sidebar.tsx b/components/sidebar/Sidebar.tsx
index e964e67..57b1ab4 100644
--- a/components/sidebar/Sidebar.tsx
+++ b/components/sidebar/Sidebar.tsx
@@ -47,6 +47,7 @@ const Tab = ({
 const Sidebar = () => {
   const boxBackground = useColorModeValue("gray.75", "gray.700")
   const [searchQuery, setSearchQuery] = useState("")
+  const [searchOffset, setSearchOffset] = useState<number>(0)
 
   const router = useRouter()
 
@@ -147,6 +148,8 @@ const Sidebar = () => {
             <SearchView
               searchQuery={searchQuery}
               setSearchQuery={setSearchQuery}
+              searchOffset={searchOffset}
+              setSearchOffset={setSearchOffset}
             />
           </TabPanel>
           <TabPanel p={0}>