chore: web app use client directive (#4747)

* chore: use client directive

* chore: use client directive

web/components/modules/applied-filters/members.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // ui

web/components/modules/applied-filters/status.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react-lite";
 import { X } from "lucide-react";
 // ui

web/components/modules/archived-modules/modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, Fragment } from "react";
 import { useRouter } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";

web/components/modules/delete-module-modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";

web/components/modules/dropdowns/filters/lead.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/modules/dropdowns/filters/members.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState } from "react";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react-lite";

web/components/modules/dropdowns/filters/root.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Search, X } from "lucide-react";

web/components/modules/dropdowns/filters/status.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { TModuleStatus } from "@plane/types";
@@ -20,8 +22,8 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
-  const appliedFiltersCount = appliedFilters?.length ?? 0;
   const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
 
   return (
     <>

web/components/modules/dropdowns/order-by.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
 import { TModuleOrderByOptions } from "@plane/types";
 // ui

web/components/modules/form.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { IModule } from "@plane/types";

web/components/modules/gantt-chart/blocks.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";

web/components/modules/modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";

web/components/modules/module-card-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
@@ -109,8 +111,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     e.stopPropagation();
     e.preventDefault();
 
-    const query = generateQueryParams(searchParams, ['peekModule']);
-    if (searchParams.has('peekModule')) {
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule")) {
       router.push(`${pathname}?${query}`);
     } else {
       router.push(`${pathname}?${query}&peekModule=${moduleId}`);

web/components/modules/module-list-item-action.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/modules/module-list-item.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";

web/components/modules/module-view-header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { FC, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";

web/components/modules/quick-actions.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";

web/components/modules/select/status.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 
 // react hook form

web/components/modules/sidebar-select/select-status.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 // react
 import React from "react";
 // react-hook-form

web/components/modules/sidebar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useCallback, useEffect, useState } from "react";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";