chore: lint warnings in web (#1854)

2026-04-22 02:55:04 -05:00 · 2024-01-08 17:30:00 +05:30
parent 5679c38029
commit f23b4f63fa
24 changed files with 57 additions and 49 deletions
@@ -148,7 +148,7 @@ export default function Navigation({
        hidden: false,
      },
    ],
-    [environment.id, pathname]
+    [environment.id, pathname, isViewer]
  );

  const dropdownnavigation = [
@@ -6,7 +6,7 @@ import {
 } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResponseFilter";
 import { getTodayDate } from "@/app/lib/surveys/surveys";
-import { createContext, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";

 interface FilterValue {
  questionType: Partial<QuestionOption>;
@@ -60,7 +60,7 @@ function ResponseFilterProvider({ children }: { children: React.ReactNode }) {
    to: getTodayDate(),
  });

-  const resetState = () => {
+  const resetState = useCallback(() => {
    setDateRange({
      from: undefined,
      to: getTodayDate(),
@@ -69,7 +69,7 @@ function ResponseFilterProvider({ children }: { children: React.ReactNode }) {
      filter: [],
      onlyComplete: false,
    });
-  };
+  }, []);

  return (
    <ResponseFilterContext.Provider
@@ -31,7 +31,7 @@ export default function ResponseTimeline({

  useEffect(() => {
    setSortedResponses(responsesAscending ? [...responses].reverse() : responses);
-  }, [responsesAscending]);
+  }, [responsesAscending, responses]);

  return (
    <div className="md:col-span-2">
@@ -198,7 +198,7 @@ export default function SettingsNavbar({
        hidden: false,
      },
    ],
-    [environmentId, isFormbricksCloud, pathname]
+    [environmentId, isFormbricksCloud, pathname, isPricingDisabled, isViewer]
  );

  if (!navigation) return null;
@@ -51,7 +51,7 @@ const ResponsePage = ({
    if (!searchParams?.get("referer")) {
      resetState();
    }
-  }, [searchParams]);
+  }, [searchParams, resetState]);

  // get the filtered array when the selected filter value changes
  const filterResponses: TResponse[] = useMemo(() => {
@@ -34,9 +34,10 @@ export default function ResponseTimeline({

  useEffect(() => {
    setDisplayedResponses(responses.slice(0, responsesPerPage));
-  }, [responses]);
+  }, [responses, setDisplayedResponses, responsesPerPage]);

  useEffect(() => {
+    const currentLoadingRef = loadingRef.current;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
@@ -49,16 +50,16 @@ export default function ResponseTimeline({
      { threshold: 0.8 }
    );

-    if (loadingRef.current) {
-      observer.observe(loadingRef.current);
+    if (currentLoadingRef) {
+      observer.observe(currentLoadingRef);
    }

    return () => {
-      if (loadingRef.current) {
-        observer.unobserve(loadingRef.current);
+      if (currentLoadingRef) {
+        observer.unobserve(currentLoadingRef);
      }
    };
-  }, [responses]);
+  }, [responses, responsesPerPage]);

  return (
    <div className="space-y-4">
@@ -31,7 +31,7 @@ export default function ShareEmbedSurvey({
  product,
  user,
 }: ShareEmbedSurveyProps) {
-  const surveyUrl = useMemo(() => webAppUrl + "/s/" + survey.id, [survey]);
+  const surveyUrl = useMemo(() => webAppUrl + "/s/" + survey.id, [survey, webAppUrl]);
  const isSingleUseLinkSurvey = survey.singleUse?.enabled;
  const { email } = user;
  const { brandColor } = product;
@@ -150,12 +150,13 @@ export default function SummaryDropOffs({ responses, survey, displayCount }: Sum
      viewsCount: viewsArr,
      dropoffPercentage: dropoffPercentageArr,
    };
-  }, [responses, survey.questions, displayCount, initialAvgTtc, avgTtc]);
+  }, [responses, survey.questions, displayCount, initialAvgTtc, avgTtc, survey.welcomeCard.enabled]);

  useEffect(() => {
    const { newAvgTtc, dropoffCount, viewsCount, dropoffPercentage } = calculateMetrics();
    setAvgTtc(newAvgTtc);
    setDropoffMetrics({ dropoffCount, viewsCount, dropoffPercentage });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [responses]);

  return (
@@ -55,7 +55,7 @@ const SummaryPage = ({
    if (!searchParams?.get("referer")) {
      resetState();
    }
-  }, [searchParams]);
+  }, [searchParams, resetState]);

  // get the filtered array when the selected filter value changes
  const filterResponses: TResponse[] = useMemo(() => {
@@ -141,7 +141,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
    return "my_survey_responses";
  }, [survey]);

-  function extracMetadataKeys(obj, parentKey = "") {
+  const extracMetadataKeys = useCallback((obj, parentKey = "") => {
    let keys: string[] = [];

    for (let key in obj) {
@@ -153,7 +153,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
    }

    return keys;
-  }
+  }, []);

  const downloadResponses = useCallback(
    async (filter: FilterDownload, filetype: "csv" | "xlsx") => {
@@ -269,7 +269,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu

      URL.revokeObjectURL(downloadUrl);
    },
-    [downloadFileName, responses, totalResponses, survey]
+    [downloadFileName, responses, totalResponses, survey, extracMetadataKeys]
  );

  const handleDateHoveredChange = (date: Date) => {
@@ -64,6 +64,7 @@ const ResponseFilter = () => {
    if (!isOpen) {
      clearItem();
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen]);

  const handleAddNewFilter = () => {
@@ -40,7 +40,7 @@ export default function QuestionsView({
      acc[question.id] = createId();
      return acc;
    }, {});
-  }, []);
+  }, [localSurvey.questions]);

  const [backButtonLabel, setbackButtonLabel] = useState(null);

@@ -248,7 +248,13 @@ export default function ResponseOptionsCard({
      setCloseOnDate(localSurvey.closeOnDate);
      setSurveyCloseOnDateToggle(true);
    }
-  }, [localSurvey]);
+  }, [
+    localSurvey,
+    singleUseMessage.heading,
+    singleUseMessage.subheading,
+    surveyClosedMessage.heading,
+    surveyClosedMessage.subheading,
+  ]);

  const handleCheckMark = () => {
    if (autoComplete) {
@@ -52,7 +52,7 @@ export default function SurveyEditor({
        setActiveQuestionId(survey.questions[0].id);
      }
    }
-  }, [survey]);
+  }, [survey, localSurvey]);

  // when the survey type changes, we need to reset the active question id to the first question
  useEffect(() => {
@@ -110,7 +110,7 @@ export default function WhenToSendCard({

      setActiveIndex(null);
    }
-  }, [actionClassArray, activeIndex, setTriggerEvent]);
+  }, [actionClassArray, activeIndex, setTriggerEvent, isAddEventModalOpen, localSurvey.triggers]);

  useEffect(() => {
    if (localSurvey.type === "link") {
@@ -11,7 +11,7 @@ import {
  DevicePhoneMobileIcon,
 } from "@heroicons/react/24/solid";
 import { Variants, motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";

 import type { TEnvironment } from "@formbricks/types/environment";
 import type { TProduct } from "@formbricks/types/product";
@@ -156,19 +156,19 @@ export default function PreviewSurvey({
    setActiveQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id);
  }

-  function animationTrigger() {
+  const animationTrigger = useCallback(() => {
    let storePreviewMode = previewMode;
    setPreviewMode("null");
    setTimeout(() => {
      setPreviewMode(storePreviewMode);
    }, 10);
-  }
+  }, [previewMode, setPreviewMode]);

  useEffect(() => {
    if (survey.styling?.background?.bgType === "animation") {
      animationTrigger();
    }
-  }, [survey.styling?.background?.bg]);
+  }, [survey.styling?.background?.bg, survey.styling?.background?.bgType, animationTrigger]);

  useEffect(() => {
    if (environment && environment.widgetSetupCompleted) {
@@ -35,7 +35,7 @@ const Greeting: React.FC<Greeting> = ({ next, skip, name, session }) => {
        button.removeEventListener("keydown", handleKeyDown);
      }
    };
-  }, []);
+  }, [next]);

  return (
    <div className="flex h-full w-full max-w-xl flex-col justify-around gap-8 px-8">
@@ -46,7 +46,7 @@ const ResponsePage = ({
    if (!searchParams?.get("referer")) {
      resetState();
    }
-  }, [searchParams]);
+  }, [searchParams, resetState]);

  // get the filtered array when the selected filter value changes
  const filterResponses: TResponse[] = useMemo(() => {
@@ -31,9 +31,10 @@ export default function ResponseTimeline({

  useEffect(() => {
    setDisplayedResponses(responses.slice(0, responsesPerPage));
-  }, [responses]);
+  }, [responses, responsesPerPage]);

  useEffect(() => {
+    const currentLoadingRef = loadingRef.current;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
@@ -46,16 +47,16 @@ export default function ResponseTimeline({
      { threshold: 0.8 }
    );

-    if (loadingRef.current) {
-      observer.observe(loadingRef.current);
+    if (currentLoadingRef) {
+      observer.observe(currentLoadingRef);
    }

    return () => {
-      if (loadingRef.current) {
-        observer.unobserve(loadingRef.current);
+      if (currentLoadingRef) {
+        observer.unobserve(currentLoadingRef);
      }
    };
-  }, [responses]);
+  }, [responses, responsesPerPage]);

  return (
    <div className="space-y-4">
@@ -49,7 +49,7 @@ const SummaryPage = ({
    if (!searchParams?.get("referer")) {
      resetState();
    }
-  }, [searchParams]);
+  }, [searchParams, resetState]);

  // get the filtered array when the selected filter value changes
  const filterResponses: TResponse[] = useMemo(() => {
@@ -140,7 +140,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
    return "my_survey_responses";
  }, [survey]);

-  function extracMetadataKeys(obj, parentKey = "") {
+  const extracMetadataKeys = useCallback((obj, parentKey = "") => {
    let keys: string[] = [];

    for (let key in obj) {
@@ -152,7 +152,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu
    }

    return keys;
-  }
+  }, []);

  const downloadResponses = useCallback(
    async (filter: FilterDownload, filetype: "csv" | "xlsx") => {
@@ -268,7 +268,7 @@ const CustomFilter = ({ environmentTags, responses, survey, totalResponses }: Cu

      URL.revokeObjectURL(downloadUrl);
    },
-    [downloadFileName, responses, totalResponses, survey]
+    [downloadFileName, responses, totalResponses, survey, extracMetadataKeys]
  );

  const handleDateHoveredChange = (date: Date) => {
@@ -1,7 +1,5 @@
-"use client";
-
 import { signIn } from "next-auth/react";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { FaMicrosoft } from "react-icons/fa";

 import { Button } from "@formbricks/ui/Button";
@@ -9,24 +7,24 @@ import { Button } from "@formbricks/ui/Button";
 export const AzureButton = ({
  text = "Continue with Azure",
  inviteUrl,
-  directRedirect,
+  directRedirect = false,
 }: {
  text?: string;
  inviteUrl?: string | null;
-  directRedirect?: boolean | false;
+  directRedirect?: boolean;
 }) => {
-  const handleLogin = async () => {
+  const handleLogin = useCallback(async () => {
    await signIn("azure-ad", {
      redirect: true,
      callbackUrl: inviteUrl ? inviteUrl : "/",
    });
-  };
+  }, [inviteUrl]);

  useEffect(() => {
    if (directRedirect) {
      handleLogin();
    }
-  }, []);
+  }, [directRedirect, handleLogin]);

  return (
    <Button
@@ -96,7 +96,7 @@ export const SigninForm = ({
    if (error) {
      setSignInError(error);
    }
-  }, []);
+  }, [error]);

  const formLabel = useMemo(() => {
    if (totpBackup) {
@@ -69,7 +69,7 @@ export default function LinkSurvey({
        },
        surveyState
      ),
-    [webAppUrl]
+    [webAppUrl, survey.environmentId, surveyState]
  );
  const [autoFocus, setAutofocus] = useState(false);
  const hasFinishedSingleUseResponse = useMemo(() => {