@stoker-platform/web-app 0.5.206 → 0.5.208

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.208
+
+### Patch Changes
+
+- feat: reduce clear search debounce interval
+
+## 0.5.207
+
+### Patch Changes
+
+- fix: fix Cards and Images views search issues
+
 ## 0.5.206
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.206",
+    "version": "0.5.208",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Cards.tsx

@@ -812,16 +812,26 @@ function DropZone({
         if (!statusList) return []
         if (typeof orderByField !== "string") return []
         const removeEmptyRecords: StokerRecord[] = []
-        const latestFiltered =
+        let latestFiltered =
             latestList?.filter(
                 (record) =>
                     record[statusField.name] ===
                         (statusField.type === "Boolean" ? statusValue === statusValues[0] : statusValue) &&
                     filterRecord(record),
             ) || []
+        let removedFiltered = removedList
+        if (search && !isPreloadCacheEnabled && !isServerReadOnly) {
+            const matchingIds = new Set(
+                localFullTextSearch(collection, search, latestFiltered.concat(removedFiltered)).map(
+                    (result) => result.id,
+                ),
+            )
+            latestFiltered = latestFiltered.filter((record) => matchingIds.has(record.id))
+            removedFiltered = removedFiltered.filter((record) => matchingIds.has(record.id))
+        }
         statusList
             ?.concat(latestFiltered)
-            .concat(removedList)
+            .concat(removedFiltered)
             .forEach((record) => {
                 if (record !== undefined) {
                     removeEmptyRecords.push(record)
@@ -851,7 +861,8 @@ function DropZone({
 
     useEffect(() => {
         setIsFirstLoad(true)
-    }, [filters, orderByField, orderByDirection])
+        setPrevIds(new Set())
+    }, [filters, orderByField, orderByDirection, search])
 
     useEffect(() => {
         if (statusList && !isFirstLoad && !isPreloadCacheEnabled && !isServerReadOnly) {
@@ -1157,6 +1168,7 @@ export function Cards({
     const backToStart = useCallback(
         (latestConstraints?: QueryConstraint[]) => {
             if (!statusField) return
+            setCursor({})
             setList({})
             setServerList({})
             statusValues?.forEach((statusValue) => {
@@ -1233,12 +1245,15 @@ export function Cards({
     }, [backToStartKey])
 
     useEffect(() => {
-        const timer = setTimeout(() => {
-            if (isInitialized && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
-                const constraints = removeCardsStatusFilter(filters)
-                backToStart(constraints as QueryConstraint[])
-            }
-        }, 750)
+        const timer = setTimeout(
+            () => {
+                if (isInitialized && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
+                    const constraints = removeCardsStatusFilter(filters)
+                    backToStart(constraints as QueryConstraint[])
+                }
+            },
+            search ? 750 : 250,
+        )
         return () => clearTimeout(timer)
     }, [search])
 

package/src/Collection.tsx

@@ -257,6 +257,7 @@ function Collection({
     const filtersIsAssigningRef = useRef(isAssigning)
     const assignQueryGenerationRef = useRef(0)
     const displayedAssignGenerationRef = useRef(0)
+    const dataGenerationRef = useRef<{ [key: string | number]: number }>({})
 
     const preventChange = isRouteLoadingImmediate.has(location.pathname)
 
@@ -474,12 +475,42 @@ function Collection({
         }
     }, [search, list])
 
+    const prevSearchRef = useRef<string | undefined>(undefined)
+    useEffect(() => {
+        if (
+            !isPreloadCacheEnabled &&
+            !isServerReadOnly &&
+            fullTextSearch &&
+            tabRef.current !== "map" &&
+            tabRef.current !== "calendar"
+        ) {
+            if (prevSearchRef.current !== undefined && prevSearchRef.current !== search) {
+                dataGenerationRef.current.default = (dataGenerationRef.current.default || 0) + 1
+            }
+            prevSearchRef.current = search
+        }
+    }, [search])
+
     const getData = useCallback(
         async (query: Query, key?: string | number) => {
             const startingTab = tabRef.current
             key ||= "default"
 
             const queryGeneration = ++assignQueryGenerationRef.current
+            // eslint-disable-next-line security/detect-object-injection
+            if (dataGenerationRef.current[key] === undefined) {
+                // eslint-disable-next-line security/detect-object-injection
+                dataGenerationRef.current[key] = 0
+            }
+            // eslint-disable-next-line security/detect-object-injection
+            const dataGeneration = ++dataGenerationRef.current[key]
+            // eslint-disable-next-line security/detect-object-injection
+            const isCurrentData = () => dataGenerationRef.current[key] === dataGeneration
+            const releaseRouteLoading = () => {
+                if (!isPreloadCacheEnabled || relationList?.loadAll) {
+                    setIsRouteLoading("-", location.pathname)
+                }
+            }
             const queryIsAssigning = filtersIsAssigningRef.current
             const syncDisplayIsAssigning = () => {
                 if (queryGeneration >= displayedAssignGenerationRef.current) {
@@ -539,6 +570,9 @@ function Collection({
                         ? { collection: relationCollection.labels.collection, id: relationParent.id }
                         : undefined
                 const objectIDs = await performFullTextSearch(collection, search, hitsPerPage, constraints, assigning)
+                if (!isCurrentData()) {
+                    return
+                }
                 searchResults.current = { ...searchResults.current, [key]: objectIDs }
                 if (
                     objectIDs.length > 0 &&
@@ -567,7 +601,7 @@ function Collection({
                     setServerList((prev) => ({ ...prev, [key]: [] }))
                     setOptimisticList([], key)
                     syncDisplayIsAssigning()
-                    setIsRouteLoading("-", location.pathname)
+                    releaseRouteLoading()
                     setCursor({})
                     setPages({})
                     setCount({})
@@ -611,6 +645,13 @@ function Collection({
                         let firstLoad = true
 
                         const load = () => {
+                            if (!isCurrentData()) {
+                                if (firstLoad) {
+                                    firstLoad = false
+                                    resolve()
+                                }
+                                return
+                            }
                             if (query.infinite) {
                                 setServerList((prev) => {
                                     // eslint-disable-next-line security/detect-object-injection
@@ -643,7 +684,14 @@ function Collection({
                             }
                             syncDisplayIsAssigning()
                             if (!query.infinite || firstLoad) {
-                                setCursor((prev) => ({ ...prev, [key]: newCursor }))
+                                if (multipleQueries.length > 0) {
+                                    setCursor((prev) => ({
+                                        ...prev,
+                                        [key]: { first: new Map(), last: new Map() },
+                                    }))
+                                } else {
+                                    setCursor((prev) => ({ ...prev, [key]: newCursor }))
+                                }
                             }
                             if (!isPreloadCacheEnabled || relationList?.loadAll) {
                                 if (!isPreloadCacheEnabled) loadedKeys.current.add(key)
@@ -691,6 +739,7 @@ function Collection({
                         const result = await subscribeMany(
                             [labels.collection],
                             (docs: StokerRecord[], cursor?: Cursor) => {
+                                if (!isCurrentData()) return
                                 loadedDocs = docs
                                 newCursor = {
                                     first: new Map(cursor?.first),
@@ -703,8 +752,8 @@ function Collection({
                             },
                             (error) => {
                                 console.error(error)
-                                if (!isPreloadCacheEnabled || relationList?.loadAll) {
-                                    setIsRouteLoading("-", location.pathname)
+                                if (isCurrentData()) {
+                                    releaseRouteLoading()
                                 }
                                 resolve()
                                 if (error instanceof FirestoreError && error.code === "not-found") {
@@ -713,14 +762,19 @@ function Collection({
                             },
                             subscribeOptions,
                         )
+                        if (!isCurrentData()) {
+                            result.unsubscribe()
+                            resolve()
+                            return
+                        }
                         const { unsubscribe: newUnsubscribe, count: newCount, pages: newPages } = result
                         promiseLoaded = true
                         if (queryLoaded && startingTab === tabRef.current) {
                             load()
                         }
                     } catch (error) {
-                        if (!isPreloadCacheEnabled || relationList?.loadAll) {
-                            setIsRouteLoading("-", location.pathname)
+                        if (isCurrentData()) {
+                            releaseRouteLoading()
                         }
                         reject(error)
                     }
@@ -737,6 +791,10 @@ function Collection({
                             ...(additionalConstraintsRef.current || []),
                         ],
                     })
+                    if (!isCurrentData()) {
+                        resolve()
+                        return
+                    }
                     setServerList((prev) => ({ ...prev, [key]: data.records }))
                     setOptimisticList(data.records, key)
                     syncDisplayIsAssigning()

package/src/Images.tsx

@@ -385,6 +385,7 @@ export const Images = memo(
             ) => {
                 return new Promise<void>((resolve) => {
                     infiniteLoaderRef.current?.resetloadMoreItemsCache()
+                    setCursor({})
                     setServerList({})
                     setList({})
                     const newQuery = {
@@ -508,11 +509,19 @@ export const Images = memo(
         }, [order])
 
         useEffect(() => {
-            const timer = setTimeout(() => {
-                if (isInitialized && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
-                    backToStart()
-                }
-            }, 750)
+            if (!isInitialized) return
+            if (fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
+                setCursor({})
+                infiniteLoaderRef.current?.resetloadMoreItemsCache()
+            }
+            const timer = setTimeout(
+                () => {
+                    if (fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
+                        backToStart()
+                    }
+                },
+                search ? 750 : 250,
+            )
             return () => clearTimeout(timer)
         }, [search])
 
@@ -639,10 +648,20 @@ export const Images = memo(
             if (!list) return []
             if (typeof orderByField !== "string") return []
             const removeEmptyRecords: StokerRecord[] = []
-            const latestFiltered = latestList?.filter((record) => filterRecord(record)) || []
+            let latestFiltered = latestList?.filter((record) => filterRecord(record)) || []
+            let removedFiltered = removedList
+            if (search && !isPreloadCacheEnabled && !isServerReadOnly) {
+                const matchingIds = new Set(
+                    localFullTextSearch(collection, search, latestFiltered.concat(removedFiltered)).map(
+                        (result) => result.id,
+                    ),
+                )
+                latestFiltered = latestFiltered.filter((record) => matchingIds.has(record.id))
+                removedFiltered = removedFiltered.filter((record) => matchingIds.has(record.id))
+            }
             defaultList
                 ?.concat(latestFiltered)
-                .concat(removedList)
+                .concat(removedFiltered)
                 .forEach((record) => {
                     if (record !== undefined) {
                         removeEmptyRecords.push(record)
@@ -668,7 +687,7 @@ export const Images = memo(
         useEffect(() => {
             setIsFirstLoad(true)
             setPrevIds(new Set())
-        }, [filters, orderByField, orderByDirection])
+        }, [filters, orderByField, orderByDirection, search])
 
         useEffect(() => {
             if (list && !isFirstLoad && !isPreloadCacheEnabled && !isServerReadOnly) {
@@ -877,6 +896,7 @@ export const Images = memo(
     (prevProps, nextProps) =>
         prevProps.list === nextProps.list &&
         prevProps.search === nextProps.search &&
+        prevProps.cursor === nextProps.cursor &&
         prevProps.isAssigning === nextProps.isAssigning &&
         prevProps.backToStartKey === nextProps.backToStartKey,
 )

package/src/List.tsx

@@ -867,11 +867,14 @@ export function List({
     }, [])
 
     useEffect(() => {
-        const timer = setTimeout(() => {
-            if (isInitialized && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
-                backToStart()
-            }
-        }, 750)
+        const timer = setTimeout(
+            () => {
+                if (isInitialized && fullTextSearch && !isPreloadCacheEnabled && !isServerReadOnly) {
+                    backToStart()
+                }
+            },
+            search ? 750 : 250,
+        )
 
         if (isInitialized && (isPreloadCacheEnabled || isServerReadOnly || isServerFullTextSearch)) {
             setPageIndex(0)