Fix sync with smart cache

BrunoQuaresma · BrunoQuaresma · commit 76bf6ec45153 · 2023-05-25T21:10:35.000Z
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -80,7 +80,6 @@ const mockAutocomplete = {
   selectedOption: undefined,
   selectOption: action("selectOption"),
   setQuery: action("updateQuery"),
-  clearSelection: action("clearSelection"),
 }
 
 const defaultFilterProps = {
diff --git a/site/src/pages/WorkspacesPage/filter/autocompletes.ts b/site/src/pages/WorkspacesPage/filter/autocompletes.ts
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react"
+import { useMemo, useRef, useState } from "react"
 import {
   BaseOption,
   OwnerOption,
@@ -29,14 +29,26 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
   onChange,
   enabled,
 }: UseAutocompleteOptions<TOption>) => {
+  const selectedOptionsCacheRef = useRef<Record<string, TOption>>({})
   const [query, setQuery] = useState("")
-  const [selectedOption, setSelectedOption] = useState<TOption>()
   const selectedOptionQuery = useQuery({
     queryKey: [id, "autocomplete", "selected", value],
-    queryFn: () => getSelectedOption(),
-    onSuccess: (option) => setSelectedOption(option ?? undefined),
+    queryFn: () => {
+      if (!value) {
+        return null
+      }
+
+      const cachedOption = selectedOptionsCacheRef.current[value]
+      if (cachedOption) {
+        return cachedOption
+      }
+
+      return getSelectedOption()
+    },
     enabled,
+    keepPreviousData: true,
   })
+  const selectedOption = selectedOptionQuery.data
   const searchOptionsQuery = useQuery({
     queryKey: [id, "autocomplete", "search"],
     queryFn: () => getOptions(query),
@@ -75,26 +87,20 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
 
   const selectOption = (option: TOption) => {
     let newSelectedOptionValue: TOption | undefined = option
+    selectedOptionsCacheRef.current[option.value] = option
 
     if (option.value === selectedOption?.value) {
       newSelectedOptionValue = undefined
     }
 
-    if (onChange) {
-      onChange(newSelectedOptionValue)
-    }
-    setSelectedOption(newSelectedOptionValue)
-  }
-  const clearSelection = () => {
-    setSelectedOption(undefined)
+    onChange(newSelectedOptionValue)
   }
 
   return {
     query,
     setQuery,
     selectedOption,
     selectOption,
-    clearSelection,
     searchOptions,
     isInitializing: selectedOptionQuery.isInitialLoading,
     initialOption: selectedOptionQuery.data,
diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
@@ -205,12 +205,6 @@ export const Filter = ({
                     size="small"
                     onClick={() => {
                       filter.update("")
-                      autocomplete.templates.clearSelection()
-                      autocomplete.status.clearSelection()
-
-                      if (autocomplete.users) {
-                        autocomplete.users.clearSelection()
-                      }
                     }}
                   >
                     <CloseOutlined sx={{ fontSize: 14 }} />

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,6 @@ const mockAutocomplete = {`
`80`	`80`	`selectedOption: undefined,`
`81`	`81`	`selectOption: action("selectOption"),`
`82`	`82`	`setQuery: action("updateQuery"),`
`83`		`- clearSelection: action("clearSelection"),`
`84`	`83`	`}`
`85`	`84`
`86`	`85`	`const defaultFilterProps = {`