fix query page bug after switching pages

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/hooks/Query.ts

@@ -2,40 +2,32 @@ import { useState, useRef, useEffect } from 'react';
 import { DataTypeStringEnum, MIN_INT64 } from '@/consts';
 import { CollectionService } from '@/http';
 import type { CollectionFullObject } from '@server/types';
+import { QueryState } from '@/pages/databases/types';
 
 // TODO: refactor this, a little bit messy
 export const useQuery = (params: {
   collection: CollectionFullObject;
-  outputFields: string[];
-  consistencyLevel: string;
   onQueryStart: Function;
   onQueryEnd?: Function;
   onQueryFinally?: Function;
-  initialExpr: string;
+  queryState: QueryState;
+  setQueryState: (state: QueryState) => void;
 }) => {
   // params
-  const {
-    collection,
-    outputFields,
-    onQueryStart,
-    onQueryEnd,
-    onQueryFinally,
-    consistencyLevel,
-    initialExpr,
-  } = params;
+  const { collection, onQueryStart, onQueryEnd, onQueryFinally, queryState } =
+    params;
 
   // states
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [pageSize, setPageSize] = useState<number>(0);
-  const [total, setTotal] = useState<number>(collection.rowCount);
-  const [expr, setExpr] = useState<string>(initialExpr);
+  const [total, setTotal] = useState<number>(0);
   const [queryResult, setQueryResult] = useState<any>({ data: [], latency: 0 });
 
   // build local cache for pk ids
   const pageCache = useRef(new Map());
 
   // get next/previous expression
-  const getPageExpr = (page: number) => {
+  const getPageExpr = (page: number, expr = queryState.expr) => {
     const cache = pageCache.current.get(
       page > currentPage ? currentPage : page
     );
@@ -69,11 +61,12 @@ export const useQuery = (params: {
   // query function
   const query = async (
     page: number = currentPage,
-    consistency_level = consistencyLevel,
-    _outputFields = outputFields
+    consistency_level = queryState.consistencyLevel,
+    _outputFields = queryState.outputFields,
+    expr = queryState.expr
   ) => {
     if (!collection || !collection.loaded) return;
-    const _expr = getPageExpr(page);
+    const _expr = getPageExpr(page, expr);
 
     onQueryStart(_expr);
 
@@ -124,7 +117,10 @@ export const useQuery = (params: {
     }
   };
 
-  const count = async (consistency_level = consistencyLevel) => {
+  const count = async (
+    consistency_level = queryState.consistencyLevel,
+    expr = queryState.expr
+  ) => {
     if (!collection || !collection.loaded) {
       setTotal(collection.rowCount);
       return;
@@ -156,15 +152,23 @@ export const useQuery = (params: {
     } // reset
     reset();
     // get count;
-    count();
+    count(queryState.expr);
 
     // do the query
-    query(currentPage, consistencyLevel, outputFields);
+    query(
+      currentPage,
+      queryState.consistencyLevel,
+      queryState.outputFields,
+      queryState.expr
+    );
   }, [
-    expr,
     pageSize,
-    collection.collection_name,
-    JSON.stringify(outputFields),
+    JSON.stringify([
+      queryState.outputFields,
+      queryState.collection,
+      queryState.consistencyLevel,
+      queryState.expr,
+    ]),
   ]);
 
   return {
@@ -178,10 +182,6 @@ export const useQuery = (params: {
     currentPage,
     // query current data page
     setCurrentPage,
-    // expression to query
-    expr,
-    // expression updater
-    setExpr,
     // query result
     queryResult,
     // query

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -50,6 +50,7 @@ const CollectionData = (props: CollectionDataProps) => {
   // UI state
   const [tableLoading, setTableLoading] = useState<boolean>();
   const [selectedData, setSelectedData] = useState<any[]>([]);
+  const [exprInput, setExprInput] = useState<string>(queryState.expr);
 
   // UI functions
   const { setDialog, handleCloseDialog, openSnackBar, setDrawer } =
@@ -78,17 +79,22 @@ const CollectionData = (props: CollectionDataProps) => {
     const currentFilter: any = filterRef.current;
     currentFilter?.getReset();
     // update UI expression
-    setQueryState({ ...queryState, expr: '' });
-    // reset query
-    reset();
+    setExprInput('');
+    setQueryState({
+      ...queryState,
+      expr: '',
+      outputFields: [
+        ...collection.schema.fields,
+        ...collection.schema.dynamicFields,
+      ].map(f => f.name),
+    });
+
     // ensure not loading
     setTableLoading(false);
   };
   const handleFilterSubmit = async (expression: string) => {
     // update UI expression
     setQueryState({ ...queryState, expr: expression });
-    // update expression
-    setExpr(expression);
   };
   const handlePageChange = async (e: any, page: number) => {
     // do the query
@@ -131,15 +137,11 @@ const CollectionData = (props: CollectionDataProps) => {
     queryResult,
     setPageSize,
     setCurrentPage,
-    setExpr,
     query,
     reset,
     count,
-    expr,
   } = useQuery({
     collection,
-    consistencyLevel: queryState.consistencyLevel,
-    outputFields: queryState.outputFields,
     onQueryStart: (expr: string = '') => {
       setTableLoading(true);
       if (expr === '') {
@@ -150,7 +152,8 @@ const CollectionData = (props: CollectionDataProps) => {
     onQueryFinally: () => {
       setTableLoading(false);
     },
-    initialExpr: queryState.expr,
+    queryState: queryState,
+    setQueryState: setQueryState,
   });
 
   const onInsert = async (collectionName: string) => {
@@ -158,7 +161,12 @@ const CollectionData = (props: CollectionDataProps) => {
   };
 
   const onEditEntity = async () => {
-    await query(currentPage, ConsistencyLevelEnum.Strong);
+    await query(
+      currentPage,
+      ConsistencyLevelEnum.Strong,
+      queryState.outputFields,
+      queryState.expr
+    );
   };
 
   // Toolbar settings
@@ -355,6 +363,7 @@ const CollectionData = (props: CollectionDataProps) => {
   useEffect(() => {
     // reset selection
     setSelectedData([]);
+    setExprInput(queryState.expr);
   }, [collection.collection_name]);
 
   return (
@@ -367,15 +376,15 @@ const CollectionData = (props: CollectionDataProps) => {
               <CustomInput
                 type="text"
                 textConfig={{
-                  label: queryState.expr
+                  label: exprInput
                     ? collectionTrans('queryExpression')
                     : collectionTrans('exprPlaceHolder'),
                   key: 'advFilter',
                   className: 'textarea',
                   onChange: (value: string) => {
-                    setQueryState({ ...queryState, expr: value });
+                    setExprInput(value);
                   },
-                  value: queryState.expr,
+                  value: exprInput,
                   disabled: !collection.loaded,
                   variant: 'filled',
                   required: false,
@@ -394,14 +403,9 @@ const CollectionData = (props: CollectionDataProps) => {
                   },
                   onKeyDown: (e: any) => {
                     if (e.key === 'Enter') {
+                      setQueryState({ ...queryState, expr: exprInput });
                       // reset page
                       setCurrentPage(0);
-                      if (expr !== queryState.expr) {
-                        setExpr(queryState.expr);
-                      } else {
-                        // ensure query
-                        query();
-                      }
                       e.preventDefault();
                     }
                   },
@@ -493,12 +497,8 @@ const CollectionData = (props: CollectionDataProps) => {
                 variant="contained"
                 onClick={() => {
                   setCurrentPage(0);
-                  if (expr !== queryState.expr) {
-                    setExpr(queryState.expr);
-                  } else {
-                    // ensure query
-                    query();
-                  }
+                  // set expr
+                  setQueryState({ ...queryState, expr: exprInput });
                 }}
                 disabled={!collection.loaded}
               >