testing memoized ctx

testing
testing separating render logic from fetching
2026-09-16 07:35:16 +00:00 · 2025-01-13 13:35:13 +01:00 · 2025-01-13 12:36:37 +01:00 · 2025-01-13 12:18:51 +01:00 · 2025-01-13 12:10:22 +01:00 · 2025-01-13 11:56:23 +01:00
1 changed files with 139 additions and 26 deletions
@@ -64,7 +64,38 @@ export const SearchResults = React.forwardRef(function SearchResults(
    const [cursor, setCursor] = React.useState<number | null>(null);
    const refs = React.useRef<(null | HTMLAnchorElement)[]>([]);
    const suggestedQuestionsRef = React.useRef<null | ResultType[]>(null);
-    const getCtx = useEventCallback(() => ctx);
+
+    // const getCtx = useEventCallback(() => ctx);
+    const memoizedCtx = React.useMemo(() => ctx, [ctx.apiToken, ctx.visitorToken]);
+    const getCtx = useEventCallback(() => memoizedCtx);
+
+    const fetchResults = React.useCallback(async () => {
+        setResultsState((prev) => ({ ...prev, fetching: true }));
+
+        const results = await (global
+            ? searchAllSiteContent(getCtx(), query, pointer)
+            : searchSiteSpaceContent(getCtx(), query, pointer, revisionId));
+
+        if (!results) {
+            captureException(
+                new Error(
+                    `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${results}`,
+                ),
+                { extra: { results } },
+            );
+            setResultsState({ results: [], fetching: false });
+            return;
+        }
+
+        setResultsState({ results, fetching: false });
+
+        trackEvent({
+            type: 'search_type_query',
+            query,
+        });
+    }, [global, getCtx, pointer, query, revisionId, trackEvent]);
+
+    const timeoutRef = React.useRef<Timer | null>(null);

    React.useEffect(() => {
        if (!query) {
@@ -111,42 +142,124 @@ export const SearchResults = React.forwardRef(function SearchResults(
                cancelled = true;
            };
        } else {
-            setResultsState((prev) => ({ results: prev.results, fetching: true }));
            let cancelled = false;
-            const timeout = setTimeout(async () => {
-                const results = await (global
-                    ? searchAllSiteContent(getCtx(), query, pointer)
-                    : searchSiteSpaceContent(getCtx(), query, pointer, revisionId));

+            timeoutRef.current = setTimeout(() => {
                if (cancelled) {
                    return;
                }

-                if (!results) {
-                    captureException(
-                        new Error(
-                            `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${results}`,
-                        ),
-                        { extra: { results } },
-                    );
-                    setResultsState({ results: [], fetching: false });
-                    return;
-                }
-
-                setResultsState({ results, fetching: false });
-
-                trackEvent({
-                    type: 'search_type_query',
-                    query,
-                });
-            }, 350);
+                fetchResults();
+            }, 1000);

            return () => {
                cancelled = true;
-                clearTimeout(timeout);
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = null;
+                }
            };
        }
-    }, [query, global, pointer, spaceId, revisionId, withAsk, trackEvent, getCtx]);
+    }, [query, fetchResults, global, pointer, spaceId, revisionId, withAsk, getCtx]);
+
+    // React.useEffect(() => {
+    //     if (!query) {
+    //         if (!withAsk) {
+    //             setResultsState({ results: [], fetching: false });
+    //             return;
+    //         }
+
+    //         if (suggestedQuestionsRef.current) {
+    //             setResultsState({ results: suggestedQuestionsRef.current, fetching: false });
+    //             return;
+    //         }
+
+    //         let cancelled = false;
+
+    //         setResultsState({ results: [], fetching: true });
+    //         getRecommendedQuestions(getCtx(), spaceId).then((questions) => {
+    //             if (!questions) {
+    //                 if (!cancelled) {
+    //                     setResultsState({ results: [], fetching: false });
+    //                 }
+    //                 captureException(
+    //                     new Error(`corrupt-cache: getRecommendedQuestions is ${questions}`),
+    //                 );
+    //                 return;
+    //             }
+
+    //             const results = questions.map((question) => ({
+    //                 type: 'recommended-question',
+    //                 id: question,
+    //                 question: question,
+    //             })) satisfies ResultType[];
+
+    //             suggestedQuestionsRef.current = results;
+
+    //             if (cancelled) {
+    //                 return;
+    //             }
+
+    //             setResultsState({ results, fetching: false });
+    //         });
+
+    //         return () => {
+    //             cancelled = true;
+    //         };
+    //     } else {
+    //         setResultsState((prev) => ({ results: prev.results, fetching: true }));
+
+    //         let cancelled = false;
+    //         timeoutRef.current = setTimeout(async () => {
+    //             // const timeout = setTimeout(async () => {
+    //             const results = await (global
+    //                 ? searchAllSiteContent(getCtx(), query, pointer)
+    //                 : searchSiteSpaceContent(getCtx(), query, pointer, revisionId));
+
+    //             if (cancelled) {
+    //                 return;
+    //             }
+
+    //             if (!results) {
+    //                 captureException(
+    //                     new Error(
+    //                         `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${results}`,
+    //                     ),
+    //                     { extra: { results } },
+    //                 );
+    //                 // setResultsState({ results: [], fetching: false });
+    //                 setResultsState((prev) => {
+    //                     if (prev.results.length === 0 && !prev.fetching) return prev;
+    //                     return { results: [], fetching: false };
+    //                 });
+    //                 return;
+    //             }
+
+    //             // setResultsState({ results, fetching: false });
+    //             setResultsState((prev) => {
+    //                 if (prev.results === results && !prev.fetching) return prev;
+    //                 return { results, fetching: false };
+    //             });
+
+    //             trackEvent({
+    //                 type: 'search_type_query',
+    //                 query,
+    //             });
+    //         }, 1000);
+
+    //         // return () => {
+    //         //     cancelled = true;
+    //         //     clearTimeout(timeout);
+    //         // };
+    //         return () => {
+    //             cancelled = true;
+    //             if (timeoutRef.current) {
+    //                 clearTimeout(timeoutRef.current);
+    //                 timeoutRef.current = null;
+    //             }
+    //         };
+    //     }
+    // }, [query, global, pointer, spaceId, revisionId, withAsk, trackEvent, getCtx]);

    const results: ResultType[] = React.useMemo(() => {
        if (!withAsk) {
Author	SHA1	Message	Date
Claire Chabas	6a705c6d3b	testing memoized ctx	2025-01-13 13:35:13 +01:00
Claire Chabas	4ee22f767d	testing	2025-01-13 12:36:37 +01:00
Claire Chabas	1accb6e28a	testing separating render logic from fetching	2025-01-13 12:18:51 +01:00
Claire Chabas	d4289c387c	testing using ref for timeout	2025-01-13 12:10:22 +01:00
Claire Chabas	6ba70e649f	testing removing getCtx from deps	2025-01-13 11:56:23 +01:00
Claire Chabas	ee78e745d4	testing removing trackEven from dep list	2025-01-13 11:50:17 +01:00
Claire Chabas	c0ec780a53	Merge branch 'main' into claire/fix-infinite-reload-search-ai * main: Fix server actions stability (#2728) temporarily add back cloudflare KV cache backend (#2726) Fix padding of ads box (#2724) Try to fix error on og image generation (#2722)	2025-01-13 11:49:43 +01:00
Claire Chabas	bffdef4370	back	2025-01-10 20:12:20 +01:00
Claire Chabas	848aaa808f	update timeout to 1s	2025-01-10 20:04:33 +01:00
Claire Chabas	8401b1362f	testing	2025-01-10 20:03:51 +01:00
Claire Chabas	063b05b1e1	testing	2025-01-10 19:58:28 +01:00
Claire Chabas	4df83559f7	testing	2025-01-10 19:48:01 +01:00
Claire Chabas	e02c922464	testing	2025-01-10 19:47:33 +01:00
Claire Chabas	9fde9517b6	testing	2025-01-10 19:29:58 +01:00
Claire Chabas	3be3324329	testing	2025-01-10 19:20:55 +01:00
Claire Chabas	cfac92add6	Update	2025-01-10 18:45:39 +01:00
Claire Chabas	1b849823b0	Testing	2025-01-10 18:40:18 +01:00
Claire Chabas	c49f5862a4	Testing	2025-01-10 18:31:17 +01:00
Claire Chabas	14b3eafd0b	format	2025-01-10 18:24:59 +01:00
Claire Chabas	776f8a8f5f	Fix attempt	2025-01-10 18:23:39 +01:00