fix: build warnings (#4407)

2026-05-06 22:02:04 -05:00 · 2024-12-06 10:40:45 +05:30
parent 793ce0afd8
commit a9983e1fe0
17 changed files with 125 additions and 116 deletions
@@ -56,7 +56,7 @@ const AppPage = ({}) => {
        router.events.off("routeChangeComplete", handleRouteChange);
      };
    }
-  }, []);
+  }, [router.events]);

  return (
    <div className="min-h-screen bg-white px-12 py-6 dark:bg-slate-800">
@@ -90,7 +90,7 @@ export const StylingView = ({
  }, [overwriteThemeStyling]);

  useEffect(() => {
-    form.watch((data: TSurveyStyling) => {
+    const subscription = form.watch((data: TSurveyStyling) => {
      setLocalSurvey((prev) => ({
        ...prev,
        styling: {
@@ -99,7 +99,9 @@ export const StylingView = ({
        },
      }));
    });
-  }, [setLocalSurvey]);
+
+    return () => subscription.unsubscribe();
+  }, [form, setLocalSurvey]);

  const defaultProjectStyling = useMemo(() => {
    const { styling: projectStyling } = project;
@@ -18,10 +18,10 @@ import { TSurvey, TSurveyEditorTabs, TSurveyStyling } from "@formbricks/types/su
 import { TUserLocale } from "@formbricks/types/user";
 import { refetchProjectAction } from "../actions";
 import { LoadingSkeleton } from "./LoadingSkeleton";
-import { QuestionsAudienceTabs } from "./QuestionsStylingSettingsTabs";
 import { QuestionsView } from "./QuestionsView";
 import { SettingsView } from "./SettingsView";
 import { StylingView } from "./StylingView";
+import { SurveyEditorTabs } from "./SurveyEditorTabs";
 import { SurveyMenuBar } from "./SurveyMenuBar";

 interface SurveyEditorProps {
@@ -163,7 +163,7 @@ export const SurveyEditor = ({
        <main
          className="relative z-0 w-1/2 flex-1 overflow-y-auto bg-slate-50 focus:outline-none"
          ref={surveyEditorRef}>
-          <QuestionsAudienceTabs
+          <SurveyEditorTabs
            activeId={activeView}
            setActiveId={setActiveView}
            isCxMode={isCxMode}
@@ -12,7 +12,7 @@ interface Tab {
  isPro?: boolean;
 }

-interface QuestionsAudienceTabsProps {
+interface SurveyEditorTabsProps {
  activeId: TSurveyEditorTabs;
  setActiveId: React.Dispatch<React.SetStateAction<TSurveyEditorTabs>>;
  isStylingTabVisible?: boolean;
@@ -20,15 +20,16 @@ interface QuestionsAudienceTabsProps {
  isSurveyFollowUpsAllowed: boolean;
 }

-export const QuestionsAudienceTabs = ({
+export const SurveyEditorTabs = ({
  activeId,
  setActiveId,
  isStylingTabVisible,
  isCxMode,
  isSurveyFollowUpsAllowed = false,
-}: QuestionsAudienceTabsProps) => {
-  const tabs: Tab[] = useMemo(
-    () => [
+}: SurveyEditorTabsProps) => {
+  const t = useTranslations();
+  const tabsComputed = useMemo(() => {
+    const tabs: Tab[] = [
      {
        id: "questions",
        label: "common.questions",
@@ -50,17 +51,13 @@ export const QuestionsAudienceTabs = ({
        icon: <MailIcon className="h-5 w-5" />,
        isPro: !isSurveyFollowUpsAllowed,
      },
-    ],
-    [isSurveyFollowUpsAllowed]
-  );
+    ];

-  const t = useTranslations();
-  const tabsComputed = useMemo(() => {
    if (isStylingTabVisible) {
      return tabs;
    }
    return tabs.filter((tab) => tab.id !== "styling");
-  }, [isStylingTabVisible]);
+  }, [isStylingTabVisible, isSurveyFollowUpsAllowed]);

  // Hide settings tab in CX mode
  let tabsToDisplay = isCxMode ? tabsComputed.filter((tab) => tab.id !== "settings") : tabsComputed;
@@ -90,7 +90,7 @@ export const SurveyMenuBar = ({
    return () => {
      window.removeEventListener("beforeunload", handleWindowClose);
    };
-  }, [localSurvey, survey]);
+  }, [localSurvey, survey, t]);

  const clearSurveyLocalStorage = () => {
    if (typeof localStorage !== "undefined") {
@@ -6,7 +6,7 @@ import { ManageIntegration } from "@/app/(app)/environments/[environmentId]/inte
 import { authorize } from "@/app/(app)/environments/[environmentId]/integrations/slack/lib/slack";
 import slackLogo from "@/images/slacklogo.png";
 import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
@@ -41,7 +41,7 @@ export const SlackWrapper = ({
    (TIntegrationSlackConfigData & { index: number }) | null
  >(null);

-  const getSlackChannels = async () => {
+  const getSlackChannels = useCallback(async () => {
    const getSlackChannelsResponse = await getSlackChannelsAction({ environmentId: environment.id });

    if (
@@ -55,11 +55,11 @@ export const SlackWrapper = ({
    if (getSlackChannelsResponse?.data) {
      setSlackChannels(getSlackChannelsResponse.data);
    }
-  };
+  }, [environment.id]);

  useEffect(() => {
    getSlackChannels();
-  }, []);
+  }, [getSlackChannels]);

  const handleSlackAuthorization = async () => {
    authorize(environment.id, webAppUrl).then((url: string) => {
@@ -7,7 +7,7 @@ import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { Input } from "@/modules/ui/components/input";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { Dispatch, SetStateAction, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import toast from "react-hot-toast";
 import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@formbricks/lib/localStorage";
 import { TOrganization } from "@formbricks/types/organizations";
@@ -46,11 +46,9 @@ export const DeleteOrganization = ({
    setIsDeleting(false);
  };

-  const deleteDisabledWarning = useMemo(() => {
-    if (isUserOwner) return t("environments.settings.general.cannot_delete_only_organization");
-
-    return t("environments.settings.general.only_org_owner_can_perform_action");
-  }, [isUserOwner]);
+  const deleteDisabledWarning = isUserOwner
+    ? t("environments.settings.general.cannot_delete_only_organization")
+    : t("environments.settings.general.only_org_owner_can_perform_action");

  return (
    <div>
@@ -11,7 +11,7 @@ import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigatio
 import { InboxIcon, PresentationIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useIntervalWhenFocused } from "@formbricks/lib/utils/hooks/useIntervalWhenFocused";
 import { TSurvey } from "@formbricks/types/surveys/types";

@@ -44,7 +44,7 @@ export const SurveyAnalysisNavigation = ({

  const filters = useMemo(
    () => getFormattedFilters(survey, selectedFilter, dateRange),
-    [selectedFilter, dateRange]
+    [selectedFilter, dateRange, survey]
  );

  const latestFiltersRef = useRef(filters);
@@ -61,24 +61,24 @@ export const SurveyAnalysisNavigation = ({
    setTotalResponseCount(responseCount);
  };

-  const getFilteredResponseCount = () => {
+  const getFilteredResponseCount = useCallback(() => {
    if (isSharingPage)
      return getResponseCountBySurveySharingKeyAction({
        sharingKey,
        filterCriteria: latestFiltersRef.current,
      });
    return getResponseCountAction({ surveyId: survey.id, filterCriteria: latestFiltersRef.current });
-  };
+  }, [isSharingPage, sharingKey, survey.id]);

-  const fetchFilteredResponseCount = async () => {
+  const fetchFilteredResponseCount = useCallback(async () => {
    const count = await getFilteredResponseCount();
    const responseCount = count?.data ?? 0;
    setFilteredResponseCount(responseCount);
-  };
+  }, [getFilteredResponseCount]);

  useEffect(() => {
    fetchFilteredResponseCount();
-  }, [filters, isSharingPage, sharingKey, survey.id]);
+  }, [filters, isSharingPage, sharingKey, survey.id, fetchFilteredResponseCount]);

  useIntervalWhenFocused(
    () => {
@@ -134,7 +134,7 @@ export const ResponsePage = ({
      setResponseCount(responseCount);
    };
    handleResponsesCount();
-  }, [JSON.stringify(filters), isSharingPage, sharingKey, surveyId]);
+  }, [filters, isSharingPage, sharingKey, surveyId]);

  useEffect(() => {
    const fetchInitialResponses = async () => {
@@ -171,13 +171,13 @@ export const ResponsePage = ({
      }
    };
    fetchInitialResponses();
-  }, [surveyId, JSON.stringify(filters), responsesPerPage, sharingKey, isSharingPage]);
+  }, [surveyId, filters, responsesPerPage, sharingKey, isSharingPage]);

  useEffect(() => {
    setPage(1);
    setHasMore(true);
    setResponses([]);
-  }, [JSON.stringify(filters)]);
+  }, [filters]);

  return (
    <>
@@ -77,26 +77,6 @@ export const ResponseTable = ({
  // Generate columns
  const columns = generateResponseTableColumns(survey, isExpanded ?? false, isReadOnly, t);

-  // Load saved settings from localStorage
-  useEffect(() => {
-    const savedColumnOrder = localStorage.getItem(`${survey.id}-columnOrder`);
-    const savedColumnVisibility = localStorage.getItem(`${survey.id}-columnVisibility`);
-    const savedExpandedSettings = localStorage.getItem(`${survey.id}-rowExpand`);
-
-    if (savedColumnOrder && JSON.parse(savedColumnOrder).length > 0) {
-      setColumnOrder(JSON.parse(savedColumnOrder));
-    } else {
-      setColumnOrder(table.getAllLeafColumns().map((d) => d.id));
-    }
-
-    if (savedColumnVisibility) {
-      setColumnVisibility(JSON.parse(savedColumnVisibility));
-    }
-    if (savedExpandedSettings !== null) {
-      setIsExpanded(JSON.parse(savedExpandedSettings));
-    }
-  }, [survey.id]);
-
  // Save settings to localStorage when they change
  useEffect(() => {
    if (columnOrder.length > 0) {
@@ -120,7 +100,7 @@ export const ResponseTable = ({
  // Memoize table data and columns
  const tableData: TResponseTableData[] = useMemo(
    () => (isFetchingFirstPage ? Array(10).fill({}) : data),
-    [data]
+    [data, isFetchingFirstPage]
  );
  const tableColumns = useMemo(
    () =>
@@ -134,7 +114,7 @@ export const ResponseTable = ({
            ),
          }))
        : columns,
-    [columns, data]
+    [columns, isFetchingFirstPage]
  );

  // React Table instance
@@ -160,6 +140,28 @@ export const ResponseTable = ({
    },
  });

+  const defaultColumnOrder = useMemo(() => table.getAllLeafColumns().map((d) => d.id), [table]);
+
+  // Modified useEffect
+  useEffect(() => {
+    const savedColumnOrder = localStorage.getItem(`${survey.id}-columnOrder`);
+    const savedColumnVisibility = localStorage.getItem(`${survey.id}-columnVisibility`);
+    const savedExpandedSettings = localStorage.getItem(`${survey.id}-rowExpand`);
+
+    if (savedColumnOrder && JSON.parse(savedColumnOrder).length > 0) {
+      setColumnOrder(JSON.parse(savedColumnOrder));
+    } else {
+      setColumnOrder(defaultColumnOrder);
+    }
+
+    if (savedColumnVisibility) {
+      setColumnVisibility(JSON.parse(savedColumnVisibility));
+    }
+    if (savedExpandedSettings !== null) {
+      setIsExpanded(JSON.parse(savedExpandedSettings));
+    }
+  }, [survey.id, defaultColumnOrder]);
+
  // Handle column drag end
  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
@@ -244,9 +246,7 @@ export const ResponseTable = ({

        {data && hasMore && data.length > 0 && (
          <div className="mt-4 flex justify-center">
-            <Button onClick={fetchNextPage} className="bg-blue-500 text-white">
-              {t("common.load_more")}
-            </Button>
+            <Button onClick={fetchNextPage}>{t("common.load_more")}</Button>
          </div>
        )}

@@ -15,7 +15,7 @@ import {
 import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
 import { EmbedView } from "./shareEmbedModal/EmbedView";
@@ -43,16 +43,20 @@ export const ShareEmbedSurvey = ({
  const isSingleUseLinkSurvey = survey.singleUse?.enabled ?? false;
  const { email } = user;
  const t = useTranslations();
-  const tabs = [
-    { id: "email", label: t("environments.surveys.summary.embed_in_an_email"), icon: MailIcon },
-    { id: "webpage", label: t("environments.surveys.summary.embed_on_website"), icon: Code2Icon },
-    {
-      id: "link",
-      label: `${isSingleUseLinkSurvey ? t("environments.surveys.summary.single_use_links") : t("environments.surveys.summary.share_the_link")}`,
-      icon: LinkIcon,
-    },
-    { id: "app", label: t("environments.surveys.summary.embed_in_app"), icon: SmartphoneIcon },
-  ].filter((tab) => !(survey.type === "link" && tab.id === "app"));
+  const tabs = useMemo(
+    () =>
+      [
+        { id: "email", label: t("environments.surveys.summary.embed_in_an_email"), icon: MailIcon },
+        { id: "webpage", label: t("environments.surveys.summary.embed_on_website"), icon: Code2Icon },
+        {
+          id: "link",
+          label: `${isSingleUseLinkSurvey ? t("environments.surveys.summary.single_use_links") : t("environments.surveys.summary.share_the_link")}`,
+          icon: LinkIcon,
+        },
+        { id: "app", label: t("environments.surveys.summary.embed_in_app"), icon: SmartphoneIcon },
+      ].filter((tab) => !(survey.type === "link" && tab.id === "app")),
+    [t, isSingleUseLinkSurvey, survey.type]
+  );

  const [activeId, setActiveId] = useState(survey.type === "link" ? tabs[0].id : tabs[3].id);
  const [showView, setShowView] = useState<"start" | "embed" | "panel">("start");
@@ -62,7 +66,7 @@ export const ShareEmbedSurvey = ({
    if (survey.type !== "link") {
      setActiveId(tabs[3].id);
    }
-  }, [survey.type]);
+  }, [survey.type, tabs]);

  useEffect(() => {
    if (open) {
@@ -47,7 +47,7 @@ export const SuccessMessage = ({ environment, survey }: SummaryMetadataProps) =>

      window.history.replaceState({}, "", url.toString());
    }
-  }, [environment, isAppSurvey, searchParams, survey, widgetSetupCompleted]);
+  }, [environment, isAppSurvey, searchParams, survey, widgetSetupCompleted, t]);

  return <>{confetti && <Confetti />}</>;
 };
@@ -15,7 +15,7 @@ import {
  getSummaryBySurveySharingKeyAction,
 } from "@/app/share/[sharingKey]/actions";
 import { useParams, useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useIntervalWhenFocused } from "@formbricks/lib/utils/hooks/useIntervalWhenFocused";
 import { replaceHeadlineRecall } from "@formbricks/lib/utils/recall";
 import { TContactAttributeKey } from "@formbricks/types/contact-attribute-key";
@@ -82,14 +82,14 @@ export const SummaryPage = ({

  const filters = useMemo(
    () => getFormattedFilters(survey, selectedFilter, dateRange),
-    [selectedFilter, dateRange]
+    [selectedFilter, dateRange, survey]
  );

  // Use a ref to keep the latest state and props
  const latestFiltersRef = useRef(filters);
  latestFiltersRef.current = filters;

-  const getResponseCount = () => {
+  const getResponseCount = useCallback(() => {
    if (isSharingPage)
      return getResponseCountBySurveySharingKeyAction({
        sharingKey,
@@ -99,9 +99,9 @@ export const SummaryPage = ({
      surveyId,
      filterCriteria: latestFiltersRef.current,
    });
-  };
+  }, [isSharingPage, sharingKey, surveyId]);

-  const getSummary = () => {
+  const getSummary = useCallback(() => {
    if (isSharingPage)
      return getSummaryBySurveySharingKeyAction({
        sharingKey,
@@ -112,37 +112,39 @@ export const SummaryPage = ({
      surveyId,
      filterCriteria: latestFiltersRef.current,
    });
-  };
+  }, [isSharingPage, sharingKey, surveyId]);

-  const handleInitialData = async (isInitialLoad = false) => {
-    if (isInitialLoad) {
-      setIsLoading(true);
-    }
-
-    try {
-      const [updatedResponseCountData, updatedSurveySummary] = await Promise.all([
-        getResponseCount(),
-        getSummary(),
-      ]);
-
-      const responseCount = updatedResponseCountData?.data ?? 0;
-      const surveySummary = updatedSurveySummary?.data ?? initialSurveySummary;
-
-      // Update the state with new data
-      setResponseCount(responseCount);
-      setSurveySummary(surveySummary);
-    } catch (error) {
-      console.error(error);
-    } finally {
+  const handleInitialData = useCallback(
+    async (isInitialLoad = false) => {
      if (isInitialLoad) {
-        setIsLoading(false);
+        setIsLoading(true);
      }
-    }
-  };
+
+      try {
+        const [updatedResponseCountData, updatedSurveySummary] = await Promise.all([
+          getResponseCount(),
+          getSummary(),
+        ]);
+
+        const responseCount = updatedResponseCountData?.data ?? 0;
+        const surveySummary = updatedSurveySummary?.data ?? initialSurveySummary;
+
+        setResponseCount(responseCount);
+        setSurveySummary(surveySummary);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        if (isInitialLoad) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [getResponseCount, getSummary]
+  );

  useEffect(() => {
    handleInitialData(true);
-  }, [JSON.stringify(filters), isSharingPage, sharingKey, surveyId]);
+  }, [filters, isSharingPage, sharingKey, surveyId, handleInitialData]);

  useIntervalWhenFocused(
    () => {
@@ -133,8 +133,9 @@ export const QuestionFilterComboBox = ({
            ) : (
              <div className="no-scrollbar flex w-[7rem] gap-3 overflow-auto md:w-[10rem] lg:w-[18rem]">
                {typeof filterComboBoxValue !== "string" &&
-                  filterComboBoxValue?.map((o) => (
+                  filterComboBoxValue?.map((o, index) => (
                    <button
+                      key={`${o}-${index}`}
                      type="button"
                      onClick={() => handleRemoveMultiSelect(filterComboBoxValue.filter((i) => i !== o))}
                      className="w-30 flex items-center whitespace-nowrap bg-slate-100 px-2 text-slate-600">
@@ -37,13 +37,18 @@ export const SurveyCard = ({
 }: SurveyCardProps) => {
  const isSurveyCreationDeletionDisabled = isReadOnly;
  const t = useTranslations();
-  const surveyStatusLabel = useMemo(() => {
-    if (survey.status === "inProgress") return t("common.in_progress");
-    else if (survey.status === "scheduled") return t("common.scheduled");
-    else if (survey.status === "completed") return t("common.completed");
-    else if (survey.status === "draft") return t("common.draft");
-    else if (survey.status === "paused") return t("common.paused");
-  }, [survey]);
+  const surveyStatusLabel =
+    survey.status === "inProgress"
+      ? t("common.in_progress")
+      : survey.status === "scheduled"
+        ? t("common.scheduled")
+        : survey.status === "completed"
+          ? t("common.completed")
+          : survey.status === "draft"
+            ? t("common.draft")
+            : survey.status === "paused"
+              ? t("common.paused")
+              : undefined;

  const [singleUseId, setSingleUseId] = useState<string | undefined>();

@@ -101,7 +101,7 @@ export const SurveysList = ({
      };
      fetchInitialSurveys();
    }
-  }, [environment.id, surveysLimit, filters]);
+  }, [environment.id, surveysLimit, filters, isFilterInitialized]);

  const fetchNextPage = useCallback(async () => {
    setIsFetching(true);
@@ -35,7 +35,7 @@ export const IntercomClient = ({ user, intercomSecretKey, isIntercomConfigured }
      app_id: intercomAppId!,
      ...initParams,
    });
-  }, [user]);
+  }, [user, intercomSecretKey]);

  useEffect(() => {
    try {
@@ -50,7 +50,7 @@ export const IntercomClient = ({ user, intercomSecretKey, isIntercomConfigured }
    } catch (error) {
      console.error("Failed to initialize Intercom:", error);
    }
-  }, [isIntercomConfigured]);
+  }, [isIntercomConfigured, initializeIntercom]);

  return null;
 };