github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): Refactor imports to use absolute path (#1288)

Browse Source 
* Refactor imports to use absolute path

* Rename absolute import symbol from src to #

* Refactor imports to use absolute path

* Rename absolute import symbol from src to #

* Remove unused LoadMessageModal
This commit is contained in:
Jim Su 2024-04-22 12:29:03 -04:00 committed by GitHub
parent 39a851bd95
commit b0c3bca915
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
42 changed files with 125 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/.eslintrc
View File

@ -14,7 +14,17 @@
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": ["error"]
"prettier/prettier": ["error"],
// Resolves https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions/59268871#59268871
"import/extensions": [
"error",
"ignorePackages",
{
"": "never",
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
"react": {

9
frontend/package-lock.json generated
View File

@ -32,7 +32,6 @@
"react-syntax-highlighter": "^15.5.0",
"tailwind-merge": "^2.2.2",
"vite": "^5.1.6",
"vite-tsconfig-paths": "^4.3.2",
"web-vitals": "^2.1.4",
"xterm-addon-fit": "^0.8.0"
},
@ -63,6 +62,7 @@
"prettier": "^3.2.5",
"tailwindcss": "^3.4.2",
"typescript": "^5.4.3",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.5.0"
},
"engines": {
@ -8139,7 +8139,8 @@
"node_modules/globrex": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
"node_modules/goober": {
"version": "2.1.14",
@ -13247,6 +13248,7 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/tsconfck/-/tsconfck-3.0.3.tgz",
"integrity": "sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==",
"dev": true,
"bin": {
"tsconfck": "bin/tsconfck.js"
},
@ -13412,7 +13414,7 @@
"version": "5.4.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.4.tgz",
"integrity": "sha512-dGE2Vv8cpVvw28v8HCPqyb08EzbBURxDpuhJvTrusShUfGnhHBafDsLdS1EhhxyL6BJQE+2cT3dDPAv+MQ6oLw==",
"devOptional": true,
"dev": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@ -13692,6 +13694,7 @@
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
"integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==",
"dev": true,
"dependencies": {
"debug": "^4.1.1",
"globrex": "^0.1.2",

2
frontend/package.json
View File

@ -31,7 +31,6 @@
"react-syntax-highlighter": "^15.5.0",
"tailwind-merge": "^2.2.2",
"vite": "^5.1.6",
"vite-tsconfig-paths": "^4.3.2",
"web-vitals": "^2.1.4",
"xterm-addon-fit": "^0.8.0"
},
@ -83,6 +82,7 @@
"prettier": "^3.2.5",
"tailwindcss": "^3.4.2",
"typescript": "^5.4.3",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.5.0"
},
"packageManager": "npm@10.5.0",

24
frontend/src/App.tsx
View File

@ -2,18 +2,18 @@ import React, { useEffect, useState } from "react";
import "./App.css";
import { Toaster } from "react-hot-toast";
import { useDisclosure } from "@nextui-org/react";
import CogTooth from "./assets/cog-tooth";
import ChatInterface from "./components/ChatInterface";
import Errors from "./components/Errors";
import { Container, Orientation } from "./components/Resizable";
import Terminal from "./components/Terminal";
import Workspace from "./components/Workspace";
import { fetchMsgTotal } from "./services/session";
import { initializeAgent } from "./services/settingsService";
import Socket from "./services/socket";
import { ResFetchMsgTotal } from "./types/ResponseType";
import SettingsModal from "./components/modals/settings/SettingsModal";
import LoadPreviousSessionModal from "./components/modals/load-previous-session/LoadPreviousSessionModal";
import CogTooth from "#/assets/cog-tooth";
import ChatInterface from "#/components/ChatInterface";
import Errors from "#/components/Errors";
import { Container, Orientation } from "#/components/Resizable";
import Terminal from "#/components/Terminal";
import Workspace from "#/components/Workspace";
import { fetchMsgTotal } from "#/services/session";
import { initializeAgent } from "#/services/settingsService";
import Socket from "#/services/socket";
import { ResFetchMsgTotal } from "#/types/ResponseType";
import SettingsModal from "#/components/modals/settings/SettingsModal";
import LoadPreviousSessionModal from "#/components/modals/load-previous-session/LoadPreviousSessionModal";
interface Props {
setSettingOpen: (isOpen: boolean) => void;

18
frontend/src/components/AgentControlBar.tsx
View File

@ -1,15 +1,15 @@
import { Button, ButtonGroup, Tooltip } from "@nextui-org/react";
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import ArrowIcon from "../assets/arrow";
import PauseIcon from "../assets/pause";
import PlayIcon from "../assets/play";
import { changeTaskState } from "../services/agentStateService";
import { clearMsgs } from "../services/session";
import { clearMessages } from "../state/chatSlice";
import store, { RootState } from "../store";
import AgentTaskAction from "../types/AgentTaskAction";
import AgentTaskState from "../types/AgentTaskState";
import ArrowIcon from "#/assets/arrow";
import PauseIcon from "#/assets/pause";
import PlayIcon from "#/assets/play";
import { changeTaskState } from "#/services/agentStateService";
import { clearMsgs } from "#/services/session";
import { clearMessages } from "#/state/chatSlice";
import store, { RootState } from "#/store";
import AgentTaskAction from "#/types/AgentTaskAction";
import AgentTaskState from "#/types/AgentTaskState";
const TaskStateActionMap = {
[AgentTaskAction.START]: AgentTaskState.RUNNING,

6
frontend/src/components/AgentStatusBar.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { I18nKey } from "../i18n/declaration";
import { RootState } from "../store";
import AgentTaskState from "../types/AgentTaskState";
import { I18nKey } from "#/i18n/declaration";
import { RootState } from "#/store";
import AgentTaskState from "#/types/AgentTaskState";
const AgentStatusMap: { [k: string]: { message: string; indicator: string } } =
{

2
frontend/src/components/Browser.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../store";
import { RootState } from "#/store";
function Browser(): JSX.Element {
const { url, screenshotSrc } = useSelector(

2
frontend/src/components/ChatInput.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
import { useTranslation } from "react-i18next";
import { twMerge } from "tailwind-merge";
import { VscSend } from "react-icons/vsc";
import { I18nKey } from "../i18n/declaration";
import { I18nKey } from "#/i18n/declaration";
interface ChatInputProps {
disabled?: boolean;

8
frontend/src/components/ChatInterface.tsx
View File

@ -2,15 +2,15 @@ import { Card, CardBody } from "@nextui-org/react";
import React, { useEffect, useRef } from "react";
import { IoMdChatbubbles } from "react-icons/io";
import { useSelector } from "react-redux";
import { useTypingEffect } from "../hooks/useTypingEffect";
import { useTypingEffect } from "#/hooks/useTypingEffect";
import {
addAssistantMessageToChat,
sendChatMessage,
setTypingActive,
takeOneAndType,
} from "../services/chatService";
import { Message } from "../state/chatSlice";
import { RootState } from "../store";
} from "#/services/chatService";
import { Message } from "#/state/chatSlice";
import { RootState } from "#/store";
import AgentControlBar from "./AgentControlBar";
import AgentStatusBar from "./AgentStatusBar";
import ChatInput from "./ChatInput";

6
frontend/src/components/CodeEditor.tsx
View File

@ -3,9 +3,9 @@ import { Tab, Tabs } from "@nextui-org/react";
import type { editor } from "monaco-editor";
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../store";
import { selectFile } from "../services/fileService";
import { setCode } from "../state/codeSlice";
import { RootState } from "#/store";
import { selectFile } from "#/services/fileService";
import { setCode } from "#/state/codeSlice";
import FileExplorer from "./file-explorer/FileExplorer";
function CodeEditor(): JSX.Element {

2
frontend/src/components/Errors.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../store";
import { RootState } from "#/store";
function Errors(): JSX.Element {
const errors = useSelector((state: RootState) => state.errors.errors);

4
frontend/src/components/Planner.tsx
View File

@ -8,8 +8,8 @@ import {
FaRegTimesCircle,
} from "react-icons/fa";
import { useSelector } from "react-redux";
import { Plan, Task, TaskState } from "../services/planService";
import { RootState } from "../store";
import { Plan, Task, TaskState } from "#/services/planService";
import { RootState } from "#/store";
function StatusIcon({ status }: { status: TaskState }): JSX.Element {
switch (status) {

8
frontend/src/components/Terminal.tsx
View File

@ -4,10 +4,10 @@ import React, { useEffect, useRef } from "react";
import { VscTerminal } from "react-icons/vsc";
import { useSelector } from "react-redux";
import { FitAddon } from "xterm-addon-fit";
import Socket from "../services/socket";
import { RootState } from "../store";
import ActionType from "../types/ActionType";
import ObservationType from "../types/ObservationType";
import Socket from "#/services/socket";
import { RootState } from "#/store";
import ActionType from "#/types/ActionType";
import ObservationType from "#/types/ObservationType";
class JsonWebsocketAddon {
_disposables: IDisposable[];

12
frontend/src/components/Workspace.tsx
View File

@ -4,12 +4,12 @@ import { useTranslation } from "react-i18next";
import { IoIosGlobe } from "react-icons/io";
import { VscCode } from "react-icons/vsc";
import { useSelector } from "react-redux";
import Calendar from "../assets/calendar";
import { I18nKey } from "../i18n/declaration";
import { initialState as initialBrowserState } from "../state/browserSlice";
import { initialState as initialCodeState } from "../state/codeSlice";
import { RootState } from "../store";
import { AllTabs, TabOption, TabType } from "../types/TabOption";
import Calendar from "#/assets/calendar";
import { I18nKey } from "#/i18n/declaration";
import { initialState as initialBrowserState } from "#/state/browserSlice";
import { initialState as initialCodeState } from "#/state/codeSlice";
import { RootState } from "#/store";
import { AllTabs, TabOption, TabType } from "#/types/TabOption";
import Browser from "./Browser";
import CodeEditor from "./CodeEditor";
import Planner from "./Planner";

2
frontend/src/components/file-explorer/ExplorerTree.test.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { render } from "@testing-library/react";
import ExplorerTree from "./ExplorerTree";
import { WorkspaceFile } from "../../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
const NODE: WorkspaceFile = {
name: "root-folder-1",

2
frontend/src/components/file-explorer/ExplorerTree.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import TreeNode from "./TreeNode";
import { WorkspaceFile } from "../../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
interface ExplorerTreeProps {
root: WorkspaceFile;

2
frontend/src/components/file-explorer/FileExplorer.test.tsx
View File

@ -3,7 +3,7 @@ import { render, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { act } from "react-dom/test-utils";
import FileExplorer from "./FileExplorer";
import { getWorkspace } from "../../services/fileService";
import { getWorkspace } from "#/services/fileService";
vi.mock("../../services/fileService", async () => ({
getWorkspace: vi.fn(async () => ({

2
frontend/src/components/file-explorer/FileExplorer.tsx
View File

@ -5,7 +5,7 @@ import {
IoIosRefresh,
} from "react-icons/io";
import { twMerge } from "tailwind-merge";
import { WorkspaceFile, getWorkspace } from "../../services/fileService";
import { WorkspaceFile, getWorkspace } from "#/services/fileService";
import ExplorerTree from "./ExplorerTree";
import { removeEmptyNodes } from "./utils";
import IconButton from "../IconButton";

2
frontend/src/components/file-explorer/TreeNode.test.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { act, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import TreeNode from "./TreeNode";
import { WorkspaceFile } from "../../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
const onFileClick = vi.fn();

2
frontend/src/components/file-explorer/TreeNode.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import FolderIcon from "../FolderIcon";
import FileIcon from "../FileIcons";
import { WorkspaceFile } from "../../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
interface TitleProps {
name: string;

2
frontend/src/components/file-explorer/utils.ts
View File

@ -1,4 +1,4 @@
import { WorkspaceFile } from "../../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
export const removeEmptyNodes = (root: WorkspaceFile): WorkspaceFile => {
if (root.children) {

2
frontend/src/components/modals/settings/AutocompleteCombobox.tsx
View File

@ -1,7 +1,7 @@
import { Autocomplete, AutocompleteItem } from "@nextui-org/react";
import React from "react";
import { useTranslation } from "react-i18next";
import { I18nKey } from "../../../i18n/declaration";
import { I18nKey } from "#/i18n/declaration";
type Label = "model" | "agent" | "language";

2
frontend/src/components/modals/settings/SettingsForm.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { AvailableLanguages } from "../../../i18n";
import { AvailableLanguages } from "#/i18n";
import { AutocompleteCombobox } from "./AutocompleteCombobox";
interface SettingsFormProps {

6
frontend/src/components/modals/settings/SettingsModal.test.tsx
View File

@ -10,10 +10,8 @@ import {
} from "../../../services/settingsService";
import SettingsModal from "./SettingsModal";
vi.mock("../../../services/settingsService", async (importOriginal) => ({
...(await importOriginal<
typeof import("../../../services/settingsService")
>()),
vi.mock("../../services/settingsService", async (importOriginal) => ({
...(await importOriginal<typeof import("#/services/settingsService")>()),
getCurrentSettings: vi.fn().mockReturnValue({}),
saveSettings: vi.fn(),
fetchModels: vi

6
frontend/src/components/modals/settings/SettingsModal.tsx
View File

@ -8,9 +8,9 @@ import {
fetchModels,
getCurrentSettings,
saveSettings,
} from "../../../services/settingsService";
import { I18nKey } from "../../../i18n/declaration";
import { AvailableLanguages } from "../../../i18n";
} from "#/services/settingsService";
import { I18nKey } from "#/i18n/declaration";
import { AvailableLanguages } from "#/i18n";
interface SettingsProps {
isOpen: boolean;

2
frontend/src/hooks/useTypingEffect.ts
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { Message } from "../state/chatSlice";
import { Message } from "#/state/chatSlice";
/**
* hook to be used for typing chat effect
*/

2
frontend/src/i18n/index.ts
View File

@ -2,7 +2,7 @@ import i18n from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import { ArgConfigType } from "../types/ConfigType";
import { ArgConfigType } from "#/types/ConfigType";
export const AvailableLanguages = [
{ label: "English", value: "en" },

4
frontend/src/index.tsx
View File

@ -6,8 +6,8 @@ import { Provider } from "react-redux";
import { NextUIProvider } from "@nextui-org/react";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./store";
import "./i18n";
import store from "#/store";
import "#/i18n";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,

22
frontend/src/services/actions.ts
View File

@ -1,14 +1,14 @@
import { changeTaskState } from "../state/agentSlice";
import { setScreenshotSrc, setUrl } from "../state/browserSlice";
import { appendAssistantMessage } from "../state/chatSlice";
import { setCode, updatePath } from "../state/codeSlice";
import { appendInput } from "../state/commandSlice";
import { setPlan } from "../state/planSlice";
import { setInitialized } from "../state/taskSlice";
import store from "../store";
import ActionType from "../types/ActionType";
import { ActionMessage } from "../types/Message";
import { SocketMessage } from "../types/ResponseType";
import { changeTaskState } from "#/state/agentSlice";
import { setScreenshotSrc, setUrl } from "#/state/browserSlice";
import { appendAssistantMessage } from "#/state/chatSlice";
import { setCode, updatePath } from "#/state/codeSlice";
import { appendInput } from "#/state/commandSlice";
import { setPlan } from "#/state/planSlice";
import { setInitialized } from "#/state/taskSlice";
import store from "#/store";
import ActionType from "#/types/ActionType";
import { ActionMessage } from "#/types/Message";
import { SocketMessage } from "#/types/ResponseType";
import { handleObservationMessage } from "./observations";
import { getPlan } from "./planService";

4
frontend/src/services/agentStateService.ts
View File

@ -1,6 +1,6 @@
import ActionType from "../types/ActionType";
import ActionType from "#/types/ActionType";
import AgentTaskAction from "#/types/AgentTaskAction";
import Socket from "./socket";
import AgentTaskAction from "../types/AgentTaskAction";
export function changeTaskState(message: AgentTaskAction): void {
const eventString = JSON.stringify({

2
frontend/src/services/auth.ts
View File

@ -1,5 +1,5 @@
import * as jose from "jose";
import { ResFetchToken } from "../types/ResponseType";
import { ResFetchToken } from "#/types/ResponseType";
const fetchToken = async (): Promise<ResFetchToken> => {
const headers = new Headers({

10
frontend/src/services/chatService.ts
View File

@ -4,12 +4,12 @@ import {
appendUserMessage,
takeOneTypeIt,
toggleTypingActive,
} from "../state/chatSlice";
} from "#/state/chatSlice";
import store from "#/store";
import ActionType from "#/types/ActionType";
import { SocketMessage } from "#/types/ResponseType";
import { ActionMessage } from "#/types/Message";
import Socket from "./socket";
import store from "../store";
import ActionType from "../types/ActionType";
import { SocketMessage } from "../types/ResponseType";
import { ActionMessage } from "../types/Message";
export function sendChatMessage(message: string): void {
store.dispatch(appendUserMessage(message));

12
frontend/src/services/observations.ts
View File

@ -1,9 +1,9 @@
import { appendAssistantMessage } from "../state/chatSlice";
import { setUrl, setScreenshotSrc } from "../state/browserSlice";
import store from "../store";
import { ObservationMessage } from "../types/Message";
import { appendOutput } from "../state/commandSlice";
import ObservationType from "../types/ObservationType";
import { appendAssistantMessage } from "#/state/chatSlice";
import { setUrl, setScreenshotSrc } from "#/state/browserSlice";
import store from "#/store";
import { ObservationMessage } from "#/types/Message";
import { appendOutput } from "#/state/commandSlice";
import ObservationType from "#/types/ObservationType";
export function handleObservationMessage(message: ObservationMessage) {
switch (message.observation) {

2
frontend/src/services/settingsService.test.ts
View File

@ -1,5 +1,5 @@
import { ArgConfigType } from "#/types/ConfigType";
import { getSettingOrDefault, getUpdatedSettings } from "./settingsService";
import { ArgConfigType } from "../types/ConfigType";
Storage.prototype.getItem = vi.fn();

12
frontend/src/services/settingsService.ts
View File

@ -1,10 +1,10 @@
import { setInitialized } from "../state/taskSlice";
import store from "../store";
import ActionType from "../types/ActionType";
import { SupportedSettings } from "../types/ConfigType";
import { setInitialized } from "#/state/taskSlice";
import store from "#/store";
import ActionType from "#/types/ActionType";
import { SupportedSettings } from "#/types/ConfigType";
import { setByKey } from "#/state/settingsSlice";
import toast from "#/utils/toast";
import Socket from "./socket";
import { setByKey } from "../state/settingsSlice";
import toast from "../utils/toast";
export type Settings = { [key: string]: string };

2
frontend/src/services/socket.ts
View File

@ -1,7 +1,7 @@
// import { toast } from "sonner";
import toast from "#/utils/toast";
import { handleAssistantMessage } from "./actions";
import { getToken } from "./auth";
import toast from "../utils/toast";
class Socket {
private static _socket: WebSocket | null = null;

2
frontend/src/state/agentSlice.tsx
View File

@ -1,5 +1,5 @@
import { createSlice } from "@reduxjs/toolkit";
import AgentTaskState from "../types/AgentTaskState";
import AgentTaskState from "#/types/AgentTaskState";
export const agentSlice = createSlice({
name: "agent",

2
frontend/src/state/codeSlice.ts
View File

@ -1,7 +1,7 @@
import { createSlice } from "@reduxjs/toolkit";
import { INode, flattenTree } from "react-accessible-treeview";
import { IFlatMetadata } from "react-accessible-treeview/dist/TreeView/utils";
import { WorkspaceFile } from "../services/fileService";
import { WorkspaceFile } from "#/services/fileService";
export const initialState = {
code: "# Welcome to OpenDevin!",

2
frontend/src/state/planSlice.ts
View File

@ -1,5 +1,5 @@
import { createSlice } from "@reduxjs/toolkit";
import { Plan, TaskState } from "../services/planService";
import { Plan, TaskState } from "#/services/planService";
export const planSlice = createSlice({
name: "plan",

2
frontend/src/state/settingsSlice.ts
View File

@ -1,6 +1,6 @@
import { createSlice } from "@reduxjs/toolkit";
import i18next from "i18next";
import { ArgConfigType } from "../types/ConfigType";
import { ArgConfigType } from "#/types/ConfigType";
export const settingsSlice = createSlice({
name: "settings",

6
frontend/tsconfig.json
View File

@ -19,7 +19,11 @@
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"types": ["vite/client", "vitest/globals"]
"types": ["vite/client", "vitest/globals"],
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
},
"include": [
"src",

1
frontend/vite.config.ts
View File

@ -2,6 +2,7 @@
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import path from "path";
export default defineConfig(({ mode }) => {
const {