@rsdoctor/components 0.0.2-beta.0 → 0.0.2-beta.2

package/dist/components/Charts/TimelineCharts/index.js

@@ -1,24 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useState, useEffect, memo } from "react";
 import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts/core";
 import dayjs from "dayjs";
 import { groupBy } from "lodash-es";
-const ColorMap = [
-  { color: "#DC2626" },
-  { color: "#FFE382" },
-  { color: "#7B66FF" },
-  { color: "#96EFFF" },
-  { color: "#E25E3E" },
-  { color: "#D0F288" },
-  { color: "#8ADAB2" },
-  { color: "#FFC5C5" },
-  { color: "#3876BF" }
-];
-const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
+import randomColor from "randomcolor";
+const LINE_HEIGHT = 60;
+const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
   const data = [];
   let categories = [];
-  useMemo(() => {
+  const [optionsData, setOptinsData] = useState({});
+  useEffect(() => {
     if (!loaderData)
       return;
     const _categories = [];
@@ -27,26 +19,24 @@ const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal
       _categories.unshift(_l.n);
     });
     loaderData.forEach(function(_loaderData, _i) {
-      var _a;
-      const typeItem = ColorMap[_i % 9];
       data.push({
         name: _loaderData.n + " total",
         value: [_categories.indexOf(_loaderData.n + " total"), _loaderData.s, _loaderData.e, _loaderData.e - _loaderData.s],
         itemStyle: {
           normal: {
-            color: typeItem.color
+            color: randomColor()
           }
         }
       });
-      if (!(_loaderData == null ? void 0 : _loaderData.c))
+      if (!_loaderData?.c)
         return;
-      for (let l = 0; l < ((_a = _loaderData == null ? void 0 : _loaderData.c) == null ? void 0 : _a.length); l++) {
+      for (let l = 0; l < _loaderData?.c?.length; l++) {
         data.push({
           name: _loaderData.n,
           value: [_categories.indexOf(_loaderData.n), _loaderData.c[l].s, _loaderData.c[l].e, _loaderData.c[l].e - _loaderData.c[l].s],
           itemStyle: {
             normal: {
-              color: ColorMap[Math.round(Math.random() * (ColorMap.length - 1))].color
+              color: randomColor()
             }
           },
           ext: _loaderData.c[l].ext
@@ -61,7 +51,7 @@ const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal
       }
     });
   }, [loaderData]);
-  useMemo(() => {
+  useEffect(() => {
     if (!pluginsData)
       return;
     const _pluginsData = groupBy(pluginsData, (e) => e.pid);
@@ -72,7 +62,7 @@ const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal
           value: [i, _plugin.args.s, _plugin.args.e, _plugin.args.e - _plugin.args.s],
           itemStyle: {
             normal: {
-              color: ColorMap[Math.round(Math.random() * (ColorMap.length - 1))].color
+              color: randomColor()
             }
           },
           ext: _plugin
@@ -81,117 +71,120 @@ const TimelineCom = ({ loaderData, pluginsData, formatterFn, chartType = "normal
       categories.push(String(key.charAt(0).toUpperCase() + key.slice(1)));
     });
   }, [pluginsData]);
-  function renderItem(params, api) {
-    const categoryIndex = api.value(0);
-    const start = api.coord([api.value(1), categoryIndex]);
-    const end = api.coord([api.value(2), categoryIndex]);
-    const height = api.size([0, 1])[1] * 0.4;
-    const rectShape = echarts.graphic.clipRectByRect(
-      {
-        x: start[0],
-        y: chartType === "loader" ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height) : start[1],
-        width: end[0] - start[0] || 5,
-        height
-      },
-      {
-        x: params.coordSys.x,
-        y: params.coordSys.y,
-        width: params.coordSys.width,
-        height: params.coordSys.height
-      }
-    );
-    return rectShape && {
-      type: "rect",
-      transition: ["shape"],
-      shape: rectShape,
-      style: api.style(),
-      enterFrom: {
-        style: { opacity: 0 },
-        x: 0
-      }
-    };
-  }
-  const option = {
-    tooltip: {
-      formatter: (raw) => {
-        return formatterFn(raw);
-      }
-    },
-    dataZoom: [
-      {
-        type: "slider",
-        filterMode: "weakFilter",
-        showDataShadow: false,
-        top: -10,
-        labelFormatter: ""
-      },
-      {
-        type: "inside",
-        filterMode: "weakFilter"
-      }
-    ],
-    grid: {
-      top: 10,
-      left: 0,
-      bottom: 10,
-      right: 0,
-      height: categories.length > 2 ? "auto" : chartType === "loader" ? categories.length * 150 : categories.length * 100,
-      containLabel: true
-    },
-    xAxis: {
-      position: "top",
-      splitLine: {
-        show: false
-      },
-      scale: true,
-      axisLine: {
-        show: false
-      },
-      axisLabel: {
-        formatter(val) {
-          return dayjs(val).format("HH:mm:ss");
+  useEffect(() => {
+    function renderItem(params, api) {
+      const categoryIndex = api.value(0);
+      const start = api.coord([api.value(1), categoryIndex]);
+      const end = api.coord([api.value(2), categoryIndex]);
+      const height = api.size([0, 1])[1] * 0.3;
+      const rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: chartType === "loader" ? start[1] - (categoryIndex % 2 !== 0 ? 0 : height * 2) : start[1],
+          width: end[0] - start[0] || 5,
+          height
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height
+        }
+      );
+      return rectShape && {
+        type: "rect",
+        transition: ["shape"],
+        shape: rectShape,
+        style: api.style(),
+        enterFrom: {
+          style: { opacity: 0 },
+          x: 0
+        }
+      };
+    }
+    const option = {
+      tooltip: {
+        formatter: (raw) => {
+          return formatterFn(raw);
         }
-      }
-    },
-    yAxis: {
-      type: "category",
-      splitLine: {
-        interval: chartType === "loader" ? 1 : 0,
-        show: true
-      },
-      axisLabel: {
-        inside: true,
-        lineHeight: 20,
-        width: 100,
-        fontSize: 12,
-        color: "#000",
-        verticalAlign: "bottom"
       },
-      axisLine: {
-        show: true
+      dataZoom: [
+        {
+          type: "slider",
+          filterMode: "weakFilter",
+          showDataShadow: false,
+          top: -10,
+          labelFormatter: ""
+        },
+        {
+          type: "inside",
+          filterMode: "weakFilter"
+        }
+      ],
+      grid: {
+        top: 10,
+        left: 0,
+        bottom: 10,
+        right: 0,
+        height: categories.length > (chartType === "loader" ? 6 : 3) ? "auto" : categories.length * LINE_HEIGHT,
+        containLabel: true
       },
-      axisTick: {
-        show: false
+      xAxis: {
+        position: "top",
+        splitLine: {
+          show: false
+        },
+        scale: true,
+        axisLine: {
+          show: false
+        },
+        axisLabel: {
+          formatter(val) {
+            return dayjs(val).format("HH:mm:ss");
+          }
+        }
       },
-      data: categories
-    },
-    series: [
-      {
-        type: "custom",
-        renderItem,
-        itemStyle: {
-          opacity: 0.8
+      yAxis: {
+        type: "category",
+        splitLine: {
+          interval: chartType === "loader" ? 1 : 0,
+          show: true
         },
-        encode: {
-          x: [1, 2],
-          y: 0
+        axisLabel: {
+          inside: true,
+          lineHeight: 20,
+          width: 100,
+          fontSize: 12,
+          color: "#000",
+          verticalAlign: "bottom"
         },
-        data
-      }
-    ]
-  };
-  return /* @__PURE__ */ jsx(ReactECharts, { option, echarts, style: { width: "100%", minHeight: "400px" } });
-};
+        axisLine: {
+          show: true
+        },
+        axisTick: {
+          show: false
+        },
+        data: categories
+      },
+      series: [
+        {
+          type: "custom",
+          renderItem,
+          itemStyle: {
+            opacity: 0.8
+          },
+          encode: {
+            x: [1, 2],
+            y: 0
+          },
+          data
+        }
+      ]
+    };
+    setOptinsData(option);
+  }, [loaderData, pluginsData]);
+  return /* @__PURE__ */ jsx(ReactECharts, { option: optionsData, echarts, style: { width: "100%", minHeight: "400px" } });
+});
 export {
   TimelineCom
 };

package/dist/components/Charts/common.js

@@ -43,7 +43,7 @@ const CommonExecutionEmptyTips = () => {
     {
       message: /* @__PURE__ */ jsxs(Typography.Text, { children: [
         /* @__PURE__ */ jsx(Typography.Text, { children: "make sure that you have turn on " }),
-        /* @__PURE__ */ jsx(Typography.Text, { children: " in configuration for the Web Doctor plugin." })
+        /* @__PURE__ */ jsx(Typography.Text, { children: " in configuration for the Rsdoctor plugin." })
       ] }),
       type: "info",
       showIcon: true

package/dist/components/Charts/loader.js

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useEffect, useState } from "react";
 import { groupBy } from "lodash-es";
 import { Empty } from "antd";
 import "./loader.css";
@@ -11,27 +11,19 @@ import { renderTotalLoadersTooltip, getTooltipHtmlForLoader } from "./utils";
 const LoaderExecutionsChart = ({ loaders, cwd }) => {
   const { isDark } = useTheme();
   const ref = useRef(null);
+  const [data, setData] = useState([]);
   const groupByLoader = useMemo(() => groupBy(loaders, (e) => e.loader), [loaders]);
   const formatterForLoader = useCallback((raw) => {
     const { name, data: data2 } = raw;
     const loaderName = name.replace(" total", "");
-    if (data2 == null ? void 0 : data2.ext) {
+    if (data2?.ext) {
       return getTooltipHtmlForLoader(data2.ext);
     }
     return renderTotalLoadersTooltip(loaderName, loaders, cwd);
   }, []);
-  const data = useMemo(() => {
-    return Object.keys(groupByLoader).map((loaderName) => {
+  useEffect(() => {
+    const _data = Object.keys(groupByLoader).map((loaderName) => {
       const list = groupByLoader[loaderName] || [];
-      if (list.length === 1) {
-        const { startAt, endAt } = list[0];
-        return {
-          p: loaderName,
-          n: loaderName,
-          s: startAt,
-          e: endAt
-        };
-      }
       const { start, end } = findLoaderTotalTiming(list);
       return {
         p: loaderName,
@@ -50,10 +42,9 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
         })
       };
     });
+    setData(_data);
   }, [groupByLoader]);
-  if (!data.length)
-    return /* @__PURE__ */ jsx(Empty, {});
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: data?.length ? /* @__PURE__ */ jsx(
     "div",
     {
       className: ["loader-chart-container", isDark ? "loader-chart-container_dark" : ""].join(" ").trim(),
@@ -61,7 +52,7 @@ const LoaderExecutionsChart = ({ loaders, cwd }) => {
       style: { width: "100%", height: "600px" },
       children: /* @__PURE__ */ jsx(TimelineCom, { loaderData: data, formatterFn: formatterForLoader, chartType: "loader" })
     }
-  );
+  ) : /* @__PURE__ */ jsx(Empty, {}) });
 };
 export {
   LoaderExecutionsChart

package/dist/components/CodeViewer/diff.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import { DiffEditor } from "@monaco-editor/react";
 import { Size } from "../../constants";
@@ -24,16 +5,16 @@ import { getModifiedLanguage, getOriginalLanguage } from "../../utils";
 const DiffViewer = ({ before, after, filepath, className, editorProps }) => {
   return /* @__PURE__ */ jsx(
     DiffEditor,
-    __spreadProps(__spreadValues({
+    {
       className,
       originalLanguage: getOriginalLanguage(filepath),
       modifiedLanguage: getModifiedLanguage(filepath),
       theme: "vs-dark",
       original: before,
       modified: after,
-      width: "100%"
-    }, editorProps), {
-      options: __spreadValues({
+      width: "100%",
+      ...editorProps,
+      options: {
         readOnly: true,
         originalEditable: false,
         renderSideBySide: true,
@@ -43,9 +24,10 @@ const DiffViewer = ({ before, after, filepath, className, editorProps }) => {
         domReadOnly: true,
         fontSize: 14,
         minimap: { enabled: false },
-        diffWordWrap: "on"
-      }, editorProps == null ? void 0 : editorProps.options)
-    })
+        diffWordWrap: "on",
+        ...editorProps?.options
+      }
+    }
   );
 };
 export {

package/dist/components/CodeViewer/hightlight.js

@@ -10,9 +10,9 @@ const FileHightLightViewer = ({ dependency, module, cwd, moduleCode }) => {
   if (!dependency)
     return null;
   const { statements } = dependency;
-  const hasSourceRange = Boolean(statements[0].position.source);
-  const { start, end } = hasSourceRange ? statements[0].position.source : statements[0].position.transformed;
-  const content = hasSourceRange ? moduleCode == null ? void 0 : moduleCode.source : moduleCode == null ? void 0 : moduleCode.transformed;
+  const hasSourceRange = Boolean(statements?.[0]?.position?.source);
+  const { start, end } = statements?.[0]?.position ? hasSourceRange ? statements[0].position.source : statements[0].position.transformed : { start: { line: 0, column: 0 }, end: { line: 0, column: 0 } };
+  const content = hasSourceRange ? moduleCode?.source : moduleCode?.transformed || moduleCode?.source;
   const modulePath = module.path;
   const handleEditorDidMount = (editor2, monaco) => {
     editorRef.current = editor2;

package/dist/components/CodeViewer/viewer.js

@@ -1,23 +1,7 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { jsx } from "react/jsx-runtime";
 import Editor from "@monaco-editor/react";
 import { isNumber } from "lodash-es";
-import { CodepenOutlined } from "@ant-design/icons";
+import { CodepenCircleOutlined } from "@ant-design/icons";
 import { getOriginalLanguage, getSelectionRange } from "../../utils";
 import { DefaultEditorConfig } from "./config";
 import { TextDrawer } from "../TextDrawer";
@@ -46,7 +30,7 @@ const CodeViewer = ({ content, ranges, path, defaultLine, editorConfig = {} }) =
       value: content,
       width: "100%",
       height: window.innerHeight / 1.5,
-      options: __spreadValues(__spreadValues({}, DefaultEditorConfig), editorConfig),
+      options: { ...DefaultEditorConfig, ...editorConfig },
       onMount: handleEditorDidMount
     }
   );
@@ -58,7 +42,7 @@ const CodeViewerWithDrawer = (props) => {
       text: "",
       buttonProps: {
         size: "small",
-        icon: /* @__PURE__ */ jsx(CodepenOutlined, {}),
+        icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
         type: "default"
       },
       buttonStyle: { padding: `0 4px` },
@@ -66,7 +50,7 @@ const CodeViewerWithDrawer = (props) => {
         destroyOnClose: true,
         title: `Code of "${props.path}"`
       },
-      children: /* @__PURE__ */ jsx(CodeViewer, __spreadValues({}, props))
+      children: /* @__PURE__ */ jsx(CodeViewer, { ...props })
     }
   );
 };

package/dist/components/Configuration/{webpack.d.ts → builder.d.ts}

@@ -7,7 +7,7 @@ interface WebpackConfigurationViewerBaseProps {
 export declare const WebpackConfigurationViewerBase: React.FC<WebpackConfigurationViewerBaseProps>;
 export declare const WebpackConfigurationViewer: React.FC<Omit<WebpackConfigurationViewerBaseProps, "configs"> & Partial<{
   body: {
-    key: import("@rsdoctor/types/dist/manifest").DoctorManifestMappingKeys;
+    key: import("@rsdoctor/types/dist/manifest").RsdoctorManifestMappingKeys;
   };
 }>>;
 export {};

package/dist/components/Configuration/{webpack.js → builder.js}

@@ -12,11 +12,11 @@ const WebpackConfigurationViewerBase = ({
   defaultKeys,
   configs
 }) => {
-  const webpackData = useWebpackConfigurationByConfigs(configs || []);
-  if (!webpackData)
+  const builderConfigData = useWebpackConfigurationByConfigs(configs || []);
+  if (!builderConfigData)
     return null;
-  const { config: webpack, version } = webpackData;
-  const keys = Object.keys(webpack);
+  const { config, version, name } = builderConfigData;
+  const keys = Object.keys(config);
   const [selectKeys, setSelectKeys] = useState(defaultKeys || keys);
   return /* @__PURE__ */ jsx(TextDrawer, { text: "View Builder Config", children: /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsx(Title, { text: `Builder Config Viewer` }),
@@ -46,9 +46,9 @@ const WebpackConfigurationViewerBase = ({
     /* @__PURE__ */ jsx(
       ReactJson,
       {
-        name: version && version !== "unknown" ? `webpack@${version}` : `webpack.config`,
+        name: version && version !== "unknown" ? `${name}@${version}` : `webpack.config`,
         theme: "monokai",
-        src: selectKeys.length === 0 ? webpack : pick(webpack, selectKeys),
+        src: selectKeys.length === 0 ? config : pick(config, selectKeys),
         displayDataTypes: false,
         displayObjectSize: false
       }

package/dist/components/Configuration/index.d.ts

@@ -1 +1 @@
-export * from './webpack';
+export * from './builder';

package/dist/components/Configuration/index.js

@@ -1 +1 @@
-export * from "./webpack";
+export * from "./builder";

package/dist/components/FileTree/index.js

@@ -1,51 +1,40 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Space } from "antd";
+import { Space, theme } from "antd";
 import { FileOutlined, FolderOpenOutlined, FolderOutlined, RightOutlined } from "@ant-design/icons";
 import Tree from "rc-tree";
 import { Size } from "../../constants";
 import "./index.css";
 import { useTheme } from "../../utils";
+const { useToken } = theme;
 const FileTree = (props) => {
   const { isDark } = useTheme();
-  const color = isDark ? "#fff" : "#000";
+  const { token } = useToken();
+  const color = isDark ? token.colorWhite : token.colorText;
+  const style = { fontSize: token.fontSize };
   return /* @__PURE__ */ jsx(
     Tree,
-    __spreadValues({
+    {
       checkable: false,
       selectable: true,
       switcherIcon: ({ data, expanded }) => {
-        if (data == null ? void 0 : data.children) {
+        if (data?.children) {
           return /* @__PURE__ */ jsxs(Space, { style: { color }, children: [
             /* @__PURE__ */ jsx(
               RightOutlined,
               {
+                twoToneColor: color,
                 className: `file-tree-switcher-arrow ${expanded ? "file-tree-switcher-arrow-expand" : ""}`,
-                style: { fontSize: 10, color }
+                style
               }
             ),
-            expanded ? /* @__PURE__ */ jsx(FolderOpenOutlined, { style: { fontSize: 14, color } }) : /* @__PURE__ */ jsx(FolderOutlined, { style: { fontSize: 14, color } })
+            expanded ? /* @__PURE__ */ jsx(FolderOpenOutlined, { twoToneColor: color, style }) : /* @__PURE__ */ jsx(FolderOutlined, { twoToneColor: color, style })
           ] });
         }
         return /* @__PURE__ */ jsx(FileOutlined, { style: { marginLeft: Size.BasePadding - 6, color } });
       },
-      expandAction: "click"
-    }, props)
+      expandAction: "click",
+      ...props
+    }
   );
 };
 export {

package/dist/components/Form/keyword.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Button, Input, Typography } from "antd";
@@ -30,7 +14,7 @@ const KeywordInput = ({
 }) => {
   const labelWidth = 120;
   const [filename, setFilename] = useState("");
-  const labelStyle = __spreadValues({ width: labelWidth }, ls);
+  const labelStyle = { width: labelWidth, ...ls };
   const ref = useRef(null);
   let timer;
   useEffect(() => {