Change components to clients Fix console warning

elpassion · Feb 19, 2024 · db05758 · db05758
1 parent fe1c9bf
commit db05758
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 103 deletions.
diff --git a/apps/web-remix/app/components/form/fields/select.field.tsx b/apps/web-remix/app/components/form/fields/select.field.tsx
@@ -5,10 +5,8 @@ import {
   HiddenField,
   useFieldContext,
 } from "~/components/form/fields/field.context";
-import {
-  SelectInput,
-  SelectInputProps,
-} from "~/components/form/inputs/select/select.input";
+import { SelectInput } from "~/components/form/inputs/select/select.input";
+import { SelectInputProps } from "~/components/form/inputs/select/select.input-impl.client";
 
 interface SelectFieldProps extends SelectInputProps {
   label?: ReactNode;

diff --git a/.../form/inputs/select/select.input-impl.tsx → ...nputs/select/select.input-impl.client.tsx b/.../form/inputs/select/select.input-impl.tsx → ...nputs/select/select.input-impl.client.tsx
diff --git a/apps/web-remix/app/components/form/inputs/select/select.input.css b/apps/web-remix/app/components/form/inputs/select/select.input.css
@@ -1,5 +1,5 @@
 .rc-select{
-    @apply w-full
+    @apply !w-full
 }
 
 .rc-select .rc-select-selector{

diff --git a/apps/web-remix/app/components/form/inputs/select/select.input.tsx b/apps/web-remix/app/components/form/inputs/select/select.input.tsx
@@ -1,20 +1,21 @@
 import { Option } from "rc-select";
-import "rc-select/assets/index.css";
-import React, { Suspense, lazy, useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDebounce } from "usehooks-ts";
-import { SelectInputProps } from "./select.input-impl";
-
-const AsyncSelectInputComponent = lazy(() => import("./select.input-impl"));
+import AsyncSelectInputComponent, {
+  SelectInputProps,
+} from "./select.input-impl.client";
+import { ClientOnly } from "remix-utils/client-only";
+import "rc-select/assets/index.css";
 
 export const SelectInput: React.FC<SelectInputProps> = ({ ...props }) => {
   return (
-    <Suspense
+    <ClientOnly
       fallback={
         <div className="w-full h-[44px] rounded-lg border-[1.5px] border-neutral-200 bg-neutral-800" />
       }
     >
-      <AsyncSelectInputComponent {...props} />
-    </Suspense>
+      {() => <AsyncSelectInputComponent {...props} />}
+    </ClientOnly>
   );
 };
 

diff --git a/...eb-remix/app/components/menu/MenuImpl.tsx → ...remix/app/components/menu/Menu.client.tsx b/...eb-remix/app/components/menu/MenuImpl.tsx → ...remix/app/components/menu/Menu.client.tsx
@@ -1,18 +1,22 @@
-import classNames from "classnames";
 import RcMenu, { MenuProps } from "rc-menu";
 import React from "react";
+import classNames from "classnames";
 import "rc-menu/assets/index.css";
 
-const Menu: React.FC<MenuProps> = ({ className, ...rest }) => {
+export const MenuClient: React.FC<MenuProps> = ({
+  className,
+  children,
+  ...rest
+}) => {
   return (
     <RcMenu
       className={classNames(
         "border border-neutral-100 bg-neutral-700 !rounded-lg !shadow-none !p-0 overflow-hidden divide-y divide-solid",
-        className,
+        className
       )}
       {...rest}
-    />
+    >
+      {children}
+    </RcMenu>
   );
 };
-
-export default Menu;
diff --git a/apps/web-remix/app/components/menu/Menu.tsx b/apps/web-remix/app/components/menu/Menu.tsx
diff --git a/...ges/pipelines/CodePreview/CodePreview.tsx → ...elines/CodePreview/CodePreview.client.tsx b/...ges/pipelines/CodePreview/CodePreview.tsx → ...elines/CodePreview/CodePreview.client.tsx
@@ -1,32 +1,13 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import { Editor, EditorProps } from "@monaco-editor/react";
 
-interface CodePreviewWrapperProps extends CodePreviewProps {
-  children?: (value: string) => ReactNode;
-}
-
-export const CodePreviewWrapper: React.FC<CodePreviewWrapperProps> = ({
-  children,
-  ...props
-}) => {
-  return (
-    <div>
-      <div className="flex gap-2 justify-end px-1">
-        {children?.(props.value)}
-      </div>
-
-      <CodePreview {...props} />
-    </div>
-  );
-};
-
 export interface CodePreviewProps
   extends Omit<EditorProps, "height" | "value"> {
   value: string;
   height: number;
 }
 
-export const CodePreview: React.FC<CodePreviewProps> = ({
+export const CodePreviewClient: React.FC<CodePreviewProps> = ({
   options,
   ...props
 }) => {

diff --git a/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewOptions.tsx b/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewOptions.tsx
@@ -2,10 +2,11 @@ import React, { useMemo, useRef, useState } from "react";
 import type { MenuInfo } from "rc-menu/es/interface";
 import { useOnClickOutside } from "usehooks-ts";
 import { Icon } from "@elpassion/taco";
-import { Menu } from "~/components/menu/Menu";
+import { MenuClient } from "~/components/menu/Menu.client";
 import { MenuItem } from "~/components/menu/MenuItem";
 import { CopyCodeButton } from "~/components/actionButtons/CopyCodeButton";
-import { CodePreviewWrapper } from "./CodePreview";
+import { CodePreviewWrapper } from "./CodePreviewWrapper";
+import { ClientOnly } from "remix-utils/client-only";
 
 interface CodePreviewOptionsProps {
   options: {
@@ -50,18 +51,24 @@ export const CodePreviewOptions: React.FC<CodePreviewOptionsProps> = ({
       {() => (
         <>
           <div className="relative w-fit" ref={wrapperRef}>
-            <Menu
-              hidden={!showMenu}
-              activeKey={activeKey}
-              className="w-[200px] absolute z-10 -top-10 right-0"
-              onClick={onChange}
-            >
-              {options.map((option) => {
-                return (
-                  <MenuItem key={`${option.id}`}>{option.framework}</MenuItem>
-                );
-              })}
-            </Menu>
+            <ClientOnly>
+              {() => (
+                <MenuClient
+                  hidden={!showMenu}
+                  activeKey={activeKey}
+                  className="w-[200px] absolute z-10 -top-10 right-0"
+                  onClick={onChange}
+                >
+                  {options.map((option) => {
+                    return (
+                      <MenuItem key={`${option.id}`}>
+                        {option.framework}
+                      </MenuItem>
+                    );
+                  })}
+                </MenuClient>
+              )}
+            </ClientOnly>
 
             <button
               onClick={handleShow}

diff --git a/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx b/apps/web-remix/app/components/pages/pipelines/CodePreview/CodePreviewWrapper.tsx
@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import { CodePreviewClient, CodePreviewProps } from "./CodePreview.client";
+import { ClientOnly } from "remix-utils/client-only";
+interface CodePreviewWrapperProps extends CodePreviewProps {
+  children?: (value: string) => ReactNode;
+}
+
+export const CodePreviewWrapper: React.FC<CodePreviewWrapperProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div>
+      <div className="flex gap-2 justify-end px-1">
+        {children?.(props.value)}
+      </div>
+
+      <ClientOnly fallback={null}>
+        {() => <CodePreviewClient {...props} />}
+      </ClientOnly>
+    </div>
+  );
+};
diff --git a/apps/web-remix/app/components/pages/pipelines/build/CreateBlock/CreateBlockFloatingMenu.tsx b/apps/web-remix/app/components/pages/pipelines/build/CreateBlock/CreateBlockFloatingMenu.tsx
@@ -1,16 +1,17 @@
 import React, { useMemo } from "react";
 import { useLoaderData } from "@remix-run/react";
 import startCase from "lodash.startcase";
-import { loader } from "../loader";
+import { loader } from "../loader.server";
 import {
   IBlockConfig,
   IBlockType,
   IBlockTypes,
 } from "~/components/pages/pipelines/pipeline.types";
-import { Menu } from "~/components/menu/Menu";
+import { MenuClient } from "~/components/menu/Menu.client";
 import { GroupSubMenu } from "./GroupSubMenu";
 import { CreateBlockDraggableItem } from "./CreateBlockDraggableItem";
 import { PasteConfigItem } from "./PasteConfigItem";
+import { ClientOnly } from "remix-utils/client-only";
 
 interface CreateBlockFloatingMenuProps {
   onCreate: (node: IBlockConfig) => void;
@@ -52,24 +53,28 @@ export const CreateBlockFloatingMenu: React.FC<
 
   return (
     <div className="absolute top-1/2 -translate-y-1/2 right-4 h-auto">
-      <Menu expandIcon={null}>
-        {/*<ELMenuItem />*/}
+      <ClientOnly fallback={null}>
+        {() => (
+          <MenuClient expandIcon={null}>
+            {/*<ELMenuItem />*/}
 
-        {Object.keys(blockGroups).map((group) => (
-          <GroupSubMenu
-            key={group}
-            title={
-              <span className="truncate w-full text-center">
-                {startCase(group)}
-              </span>
-            }
-          >
-            <SubMenuItems group={group} />
-          </GroupSubMenu>
-        ))}
+            {Object.keys(blockGroups).map((group) => (
+              <GroupSubMenu
+                key={group}
+                title={
+                  <span className="truncate w-full text-center">
+                    {startCase(group)}
+                  </span>
+                }
+              >
+                <SubMenuItems group={group} />
+              </GroupSubMenu>
+            ))}
 
-        <PasteConfigItem />
-      </Menu>
+            <PasteConfigItem />
+          </MenuClient>
+        )}
+      </ClientOnly>
     </div>
   );
 };
diff --git a/apps/web-remix/app/components/pages/pipelines/interface/clientSDK/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/clientSDK/page.tsx
@@ -3,7 +3,7 @@ import { routes } from "~/utils/routes.utils";
 import { MetaFunction } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import { CopyCodeButton } from "~/components/actionButtons/CopyCodeButton";
-import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreview";
+import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreviewWrapper";
 import { CodePreviewOptions } from "~/components/pages/pipelines/CodePreview/CodePreviewOptions";
 import {
   PreviewConnector,

diff --git a/apps/web-remix/app/components/pages/pipelines/interface/openaiApi/page.tsx b/apps/web-remix/app/components/pages/pipelines/interface/openaiApi/page.tsx
@@ -3,7 +3,7 @@ import { routes } from "~/utils/routes.utils";
 import { MetaFunction } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
 import { ChatbotSectionWrapper } from "~/components/pages/pipelines/interface/websiteChatbot/ChatbotSectionWrapper";
-import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreview";
+import { CodePreviewWrapper } from "~/components/pages/pipelines/CodePreview/CodePreviewWrapper";
 import { CopyCodeButton } from "~/components/actionButtons/CopyCodeButton";
 import {
   ChatbotSectionHeader,

diff --git a/apps/web-remix/app/routes/_dashboard.$organizationId.tsx b/apps/web-remix/app/routes/_dashboard.$organizationId.tsx
@@ -14,7 +14,7 @@ import Modal from "react-modal";
 import invariant from "tiny-invariant";
 import { useOnClickOutside } from "usehooks-ts";
 import { OrganizationApi } from "~/api/organization/OrganizationApi";
-import { Menu } from "~/components/menu/Menu";
+import { MenuClient } from "~/components/menu/Menu.client";
 import { MenuItem } from "~/components/menu/MenuItem";
 import { PageOverlay } from "~/components/overlay/PageOverlay";
 import {
@@ -29,8 +29,10 @@ import { loaderBuilder } from "~/utils.server";
 import { getCurrentUser } from "~/utils/currentUser.server";
 import { routes } from "~/utils/routes.utils";
 import { getServerToast, setOrganizationId } from "~/utils/toast.server";
+import { ClientOnly } from "remix-utils/client-only";
 
 Modal.setAppElement("#_root");
+
 export async function loader(loaderArgs: DataFunctionArgs) {
   return loaderBuilder(async ({ request, params }, { fetch }) => {
     await requireLogin(request);
@@ -41,7 +43,7 @@ export async function loader(loaderArgs: DataFunctionArgs) {
     const organizationsResponse = await organizationApi.getOrganizations();
 
     const organization = organizationsResponse.data.data.find(
-      (org) => org.id === Number(params.organizationId),
+      (org) => org.id === Number(params.organizationId)
     );
 
     let { cookie, ...toasts } = await getServerToast(request);
@@ -68,7 +70,7 @@ export async function loader(loaderArgs: DataFunctionArgs) {
         headers: {
           "Set-Cookie": cookie,
         },
-      },
+      }
     );
   })(loaderArgs);
 }
@@ -138,7 +140,7 @@ function SidebarMainContent({ isCollapsed }: SidebarContentProps) {
         "gap-2 mt-2 transition-all justify-between h-[calc(100%-8px)]",
         {
           "!px-0": !isCollapsed,
-        },
+        }
       )}
     >
       <div className="flex flex-col gap-1">
@@ -238,18 +240,22 @@ function SidebarTopContent({ isCollapsed }: SidebarContentProps) {
           )}
         </button>
 
-        <Menu
-          hidden={!showMenu}
-          activeKey={`${organization.id}`}
-          className="min-w-[248px] absolute z-[51] top-[60px] left-[30%] max-h-[400px] overflow-y-auto md:left-[85%]"
-          onClick={handleChangeRoute}
-        >
-          <NewOrganizationLink />
-
-          {organizations.map((org) => {
-            return <MenuItem key={`${org.id}`}>{org.name}</MenuItem>;
-          })}
-        </Menu>
+        <ClientOnly fallback={null}>
+          {() => (
+            <MenuClient
+              hidden={!showMenu}
+              activeKey={`${organization.id}`}
+              className="min-w-[248px] absolute z-[51] top-[60px] left-[30%] max-h-[400px] overflow-y-auto md:left-[85%]"
+              onClick={handleChangeRoute}
+            >
+              <NewOrganizationLink />
+
+              {organizations.map((org) => {
+                return <MenuItem key={`${org.id}`}>{org.name}</MenuItem>;
+              })}
+            </MenuClient>
+          )}
+        </ClientOnly>
       </div>
     </SidebarContentWrapper>
   );

diff --git a/apps/web-remix/package.json b/apps/web-remix/package.json
@@ -61,6 +61,7 @@
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.5",
     "reactflow": "^11.8.3",
+    "remix-utils": "^7.5.0",
     "remix-validated-form": "^5.1.5",
     "source-map-support": "^0.5.21",
     "tiny-invariant": "^1.3.1",