refactor: move website component into folder

src/client/components/DateFilter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Button, DatePicker, Dropdown, MenuProps, Modal, Space } from 'antd';
 import { Dayjs } from 'dayjs';
 import { DownOutlined } from '@ant-design/icons';
@@ -19,82 +19,85 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
   const { label, startDate, endDate } = useGlobalRangeDate();
   const [range, setRange] = useState<[Dayjs, Dayjs]>([startDate, endDate]);
 
-  const menu: MenuProps = {
+  const menu: MenuProps = useMemo(
-    onClick: () => {
+    () => ({
-      setShowDropdown(false);
+      onClick: () => {
-    },
+        setShowDropdown(false);
-    items: compact([
+      },
-      {
+      items: compact([
-        label: 'Today',
+        {
-        onClick: () => {
+          label: 'Today',
-          useGlobalStateStore.setState({ dateRange: DateRange.Today });
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Today });
+          },
         },
-      },
+        {
-      {
+          label: 'Last 24 Hours',
-        label: 'Last 24 Hours',
+          onClick: () => {
-        onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
-          useGlobalStateStore.setState({ dateRange: DateRange.Last24Hours });
+          },
         },
-      },
+        {
-      {
+          label: 'Yesterday',
-        label: 'Yesterday',
+          onClick: () => {
-        onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
-          useGlobalStateStore.setState({ dateRange: DateRange.Yesterday });
+          },
         },
-      },
+        {
-      {
+          type: 'divider',
-        type: 'divider',
-      },
-      {
-        label: 'This week',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
         },
-      },
+        {
-      {
+          label: 'This week',
-        label: 'Last 7 days',
+          onClick: () => {
-        onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisWeek });
-          useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
+          },
         },
-      },
+        {
-      {
+          label: 'Last 7 days',
-        type: 'divider',
+          onClick: () => {
-      },
+            useGlobalStateStore.setState({ dateRange: DateRange.Last7Days });
-      {
+          },
-        label: 'This Month',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
         },
-      },
+        {
-      {
+          type: 'divider',
-        label: 'Last 30 days',
-        onClick: () => {
-          useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
         },
-      },
+        {
-      {
+          label: 'This Month',
-        label: 'Last 90 days',
+          onClick: () => {
-        onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisMonth });
-          useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
+          },
         },
-      },
+        {
-      {
+          label: 'Last 30 days',
-        label: 'This year',
+          onClick: () => {
-        onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Last30Days });
-          useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
+          },
         },
-      },
+        {
-      {
+          label: 'Last 90 days',
-        type: 'divider',
+          onClick: () => {
-      },
+            useGlobalStateStore.setState({ dateRange: DateRange.Last90Days });
-      {
+          },
-        label: 'Custom',
-        onClick: () => {
-          setShowPicker(true);
         },
-      },
+        {
-    ] as MenuProps['items']),
+          label: 'This year',
-  };
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.ThisYear });
+          },
+        },
+        {
+          type: 'divider',
+        },
+        {
+          label: 'Custom',
+          onClick: () => {
+            setShowPicker(true);
+          },
+        },
+      ] as MenuProps['items']),
+    }),
+    []
+  );
 
   return (
     <>

src/client/components/website/MetricCard.tsx

@@ -1,6 +1,6 @@
 import { Tag } from 'antd';
 import React from 'react';
-import { formatNumber } from '../utils/common';
+import { formatNumber } from '../../utils/common';
 
 interface MetricCardProps {
   value?: number;

src/client/components/website/WebsiteInfo.tsx

@@ -1,21 +1,21 @@
 import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
 import React from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { deleteWorkspaceWebsite } from '../api/model/website';
+import { deleteWorkspaceWebsite } from '../../api/model/website';
-import { useRequest } from '../hooks/useRequest';
+import { useRequest } from '../../hooks/useRequest';
-import { useCurrentWorkspaceId } from '../store/user';
+import { useCurrentWorkspaceId } from '../../store/user';
-import { ErrorTip } from './ErrorTip';
+import { ErrorTip } from '../ErrorTip';
-import { Loading } from './Loading';
+import { Loading } from '../Loading';
-import { NoWorkspaceTip } from './NoWorkspaceTip';
+import { NoWorkspaceTip } from '../NoWorkspaceTip';
-import { MonitorPicker } from './monitor/MonitorPicker';
+import { MonitorPicker } from '../monitor/MonitorPicker';
 import {
   defaultErrorHandler,
   defaultSuccessHandler,
   getQueryKey,
   trpc,
-} from '../api/trpc';
+} from '../../api/trpc';
 import { useQueryClient } from '@tanstack/react-query';
-import { useEvent } from '../hooks/useEvent';
+import { useEvent } from '../../hooks/useEvent';
 
 export const WebsiteInfo: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
@@ -107,7 +107,11 @@ export const WebsiteInfo: React.FC = React.memo(() => {
                 <Input size="large" />
               </Form.Item>
 
-              <Form.Item label="Monitor" name="monitorId" tooltip="You can bind a monitor which will display health status in website overview">
+              <Form.Item
+                label="Monitor"
+                name="monitorId"
+                tooltip="You can bind a monitor which will display health status in website overview"
+              >
                 <MonitorPicker size="large" allowClear={true} />
               </Form.Item>
 

src/client/components/website/WebsiteList.tsx

@@ -12,15 +12,15 @@ import {
   refreshWorkspaceWebsites,
   useWorspaceWebsites,
   WebsiteInfo,
-} from '../api/model/website';
+} from '../../api/model/website';
-import { Loading } from './Loading';
+import { Loading } from '../Loading';
-import { NoWorkspaceTip } from './NoWorkspaceTip';
+import { NoWorkspaceTip } from '../NoWorkspaceTip';
-import { useRequest } from '../hooks/useRequest';
+import { useRequest } from '../../hooks/useRequest';
-import { useUserStore } from '../store/user';
+import { useUserStore } from '../../store/user';
-import { useEvent } from '../hooks/useEvent';
+import { useEvent } from '../../hooks/useEvent';
 import { useNavigate } from 'react-router';
-import { PageHeader } from './PageHeader';
+import { PageHeader } from '../PageHeader';
-import { ModalButton } from './ModalButton';
+import { ModalButton } from '../ModalButton';
 
 export const WebsiteList: React.FC = React.memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);

src/client/components/website/WebsiteOnlineCount.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { trpc } from '../api/trpc';
+import { trpc } from '../../api/trpc';
 
 export const WebsiteOnlineCount: React.FC<{
   workspaceId: string;

src/client/components/website/WebsiteOverview.tsx

@@ -16,10 +16,10 @@ import {
   getDateArray,
 } from '../../utils/date';
 import { useEvent } from '../../hooks/useEvent';
-import { MetricCard } from '../MetricCard';
+import { MetricCard } from './MetricCard';
 import { formatNumber, formatShortTime } from '../../utils/common';
 import { useTheme } from '../../hooks/useTheme';
-import { WebsiteOnlineCount } from '../WebsiteOnlineCount';
+import { WebsiteOnlineCount } from './WebsiteOnlineCount';
 import { useGlobalRangeDate } from '../../hooks/useGlobalRangeDate';
 import { MonitorHealthBar } from '../monitor/MonitorHealthBar';
 import { useNavigate } from 'react-router';

src/client/pages/Settings/index.tsx

@@ -1,8 +1,8 @@
 import { Menu, MenuProps } from 'antd';
 import React from 'react';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
-import { WebsiteInfo } from '../../components/WebsiteInfo';
+import { WebsiteInfo } from '../../components/website/WebsiteInfo';
-import { WebsiteList } from '../../components/WebsiteList';
+import { WebsiteList } from '../../components/website/WebsiteList';
 import { useEvent } from '../../hooks/useEvent';
 import { NotificationList } from './NotificationList';
 import { Profile } from './Profile';

src/client/pages/Website/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Routes } from 'react-router';
-import { WebsiteList } from '../../components/WebsiteList';
+import { WebsiteList } from '../../components/website/WebsiteList';
 import { WebsiteDetail } from './Detail';
 
 export const WebsitePage: React.FC = React.memo(() => {