fix: contacts refresh button (formbricks#7066)

Author: pandeymangg

apps/web/modules/ee/contacts/components/contact-data-view.tsx

@@ -2,7 +2,7 @@
 
 import { debounce } from "lodash";
 import dynamic from "next/dynamic";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -48,40 +48,40 @@ export const ContactDataView = ({
     );
   }, [contactAttributeKeys]);
 
+  // Fetch contacts from offset 0 with current search value
+  const fetchContactsFromStart = useCallback(async () => {
+    setIsDataLoaded(false);
+    try {
+      setHasMore(true);
+      const contactsResponse = await getContactsAction({
+        environmentId: environment.id,
+        offset: 0,
+        searchValue,
+      });
+      if (contactsResponse?.data) {
+        setContacts(contactsResponse.data);
+      }
+      if (contactsResponse?.data && contactsResponse.data.length < itemsPerPage) {
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error("Error fetching contacts:", error);
+      toast.error("Error fetching contacts. Please try again.");
+    } finally {
+      setIsDataLoaded(true);
+    }
+  }, [environment.id, itemsPerPage, searchValue]);
+
   useEffect(() => {
     if (!isFirstRender.current) {
-      const fetchData = async () => {
-        setIsDataLoaded(false);
-        try {
-          setHasMore(true);
-          const getPersonActionData = await getContactsAction({
-            environmentId: environment.id,
-            offset: 0,
-            searchValue,
-          });
-          const personData = getPersonActionData?.data;
-          if (getPersonActionData?.data) {
-            setContacts(getPersonActionData.data);
-          }
-          if (personData && personData.length < itemsPerPage) {
-            setHasMore(false);
-          }
-        } catch (error) {
-          console.error("Error fetching people data:", error);
-          toast.error("Error fetching people data. Please try again.");
-        } finally {
-          setIsDataLoaded(true);
-        }
-      };
-
-      const debouncedFetchData = debounce(fetchData, 300);
+      const debouncedFetchData = debounce(fetchContactsFromStart, 300);
       debouncedFetchData();
 
       return () => {
         debouncedFetchData.cancel();
       };
     }
-  }, [environment.id, itemsPerPage, searchValue]);
+  }, [fetchContactsFromStart]);
 
   useEffect(() => {
     if (isFirstRender.current) {
@@ -147,6 +147,7 @@ export const ContactDataView = ({
       setSearchValue={setSearchValue}
       isReadOnly={isReadOnly}
       isQuotasAllowed={isQuotasAllowed}
+      refreshContacts={fetchContactsFromStart}
     />
   );
 };

apps/web/modules/ee/contacts/components/contacts-table.tsx

@@ -43,6 +43,7 @@ interface ContactsTableProps {
   setSearchValue: (value: string) => void;
   isReadOnly: boolean;
   isQuotasAllowed: boolean;
+  refreshContacts: () => Promise<void>;
 }
 
 export const ContactsTable = ({
@@ -56,6 +57,7 @@ export const ContactsTable = ({
   setSearchValue,
   isReadOnly,
   isQuotasAllowed,
+  refreshContacts,
 }: ContactsTableProps) => {
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
   const [columnOrder, setColumnOrder] = useState<string[]>([]);
@@ -235,6 +237,7 @@ export const ContactsTable = ({
           type="contact"
           deleteAction={deleteContact}
           isQuotasAllowed={isQuotasAllowed}
+          onRefresh={refreshContacts}
           leftContent={
             <div className="w-64">
               <SearchBar

apps/web/modules/ui/components/data-table/components/data-table-toolbar.tsx

@@ -2,7 +2,6 @@
 
 import { Table } from "@tanstack/react-table";
 import { MoveVerticalIcon, RefreshCcwIcon, SettingsIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/cn";
@@ -20,6 +19,7 @@ interface DataTableToolbarProps<T> {
   downloadRowsAction?: (rowIds: string[], format: string) => Promise<void>;
   isQuotasAllowed: boolean;
   leftContent?: React.ReactNode;
+  onRefresh?: () => Promise<void>;
 }
 
 export const DataTableToolbar = <T,>({
@@ -33,9 +33,9 @@ export const DataTableToolbar = <T,>({
   downloadRowsAction,
   isQuotasAllowed,
   leftContent,
+  onRefresh,
 }: DataTableToolbarProps<T>) => {
   const { t } = useTranslation();
-  const router = useRouter();
 
   return (
     <div className="sticky top-0 z-30 flex w-full items-center justify-between bg-slate-50 py-2">
@@ -52,13 +52,13 @@ export const DataTableToolbar = <T,>({
         <div>{leftContent}</div>
       )}
       <div className="flex space-x-2">
-        {type === "contact" ? (
+        {type === "contact" && onRefresh ? (
           <TooltipRenderer
             tooltipContent={t("environments.contacts.contacts_table_refresh")}
             shouldRender={true}>
             <button
               onClick={async () => {
-                router.refresh();
+                await onRefresh();
                 toast.success(t("environments.contacts.contacts_table_refresh_success"));
               }}
               className="cursor-pointer rounded-md border bg-white hover:border-slate-400">