= ({
+ inbounds,
+}) => {
const {
onInboundsFilterChange,
inboundsFilters: filters,
selectedInbound,
selectInbound,
+ refetchHosts,
} = useInbounds();
- const { data: inbounds } = useQuery('hosts', () => {
- return fetchInbounds();
- });
const { t } = useTranslation();
@@ -45,7 +50,10 @@ export const InboundsSidebar = () => {
className={classNames('interactive')}
bg={active ? 'gray.300' : undefined}
_dark={{ bg: active ? 'gray.700' : undefined }}
- onClick={() => { selectInbound(inbound) }}>
+ onClick={() => {
+ selectInbound(inbound);
+ refetchHosts();
+ }}>
= (props) => {
+export const HostsTable: FC = ({ hosts }) => {
const {
hostsFilters: filters,
selectedInbound,
+ refetchHosts,
+ onHostsFilterChange,
onEditingHost,
onCreatingHost,
- onHostsFilterChange,
- refetchHosts,
} = useInbounds();
- const { data: hosts } = useQuery('hosts', () => {
- if (selectedInbound !== null) {
- return fetchInboundHosts(selectedInbound.id);
- }
- });
- useEffect(() => { refetchHosts() }, [selectedInbound]);
+ useEffect(() => {
+ refetchHosts();
+ }, [selectedInbound]);
const { t } = useTranslation();
- const [selectedRow, setSelectedRow] = useState(
- undefined
- );
-
- const useTable = useBreakpointValue({ base: false, md: true });
-
- // TODO: Find a different mechancism to to detect ftiler
- // const isFiltered = users.length !== total;
- const toggleAccordion = (index: number) => {
- setSelectedRow(index === selectedRow ? undefined : index);
- };
return (
-
-
-
-
- |
-
- {t('remark')}
-
-
- |
-
-
- {t('hostsTable.address')}
-
-
- |
-
-
- {t('hostsTable.port')}
-
-
- |
- {/* Action buttons (certificate, core settings)*/}
-
-
-
- {!useTable && hosts?.map((host, i) => {
- return (
-
-
- |
- {host.remark}
- |
-
- {host.address}
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
- {t('nodesTable.ipPort')}
-
-
- {host.port}
-
-
-
-
-
- {
- e.stopPropagation();
- onEditingHost(true, host);
- }}
- >
-
-
-
-
-
-
-
-
- |
-
-
- );
- })}
-
-
-
@@ -257,7 +84,7 @@ export const HostsTable: FC = (props) => {
- {useTable && hosts?.map((host, i) => {
+ {hosts?.map((host, i) => {
return (
{
const status = getStatus(readyState.toString());
- const { mutate: handleRestartCore, isLoading: isRestarting } =
- useMutation(restartCore);
+ const {
+ mutate: handleRestartCore,
+ isPending: isRestarting
+ } = useMutation({ mutationFn: restartCore });
const handleOnSave = ({ config }: any) => {
updateConfig(config)
diff --git a/app/dashboard/src/pages/nodes/table/index.tsx b/app/dashboard/src/pages/nodes/table/index.tsx
index ecb5c6e..f951624 100644
--- a/app/dashboard/src/pages/nodes/table/index.tsx
+++ b/app/dashboard/src/pages/nodes/table/index.tsx
@@ -35,7 +35,7 @@ import {
handleSort,
} from 'components/table';
import { fetchNodes, useNodes } from 'stores';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { queryIds } from 'constants/query-ids';
type ExpandedIndex = number | number[];
@@ -49,7 +49,7 @@ export const NodesTable: FC = (props) => {
onAddingNode,
onFilterChange,
} = useNodes();
- const { data: nodes } = useQuery(queryIds.nodes, () => { return fetchNodes() })
+ const { data: nodes } = useQuery({ queryKey: [queryIds.nodes], queryFn: fetchNodes });
const total = nodes?.length || 0;
const { t } = useTranslation();
diff --git a/app/dashboard/src/pages/services/dialog/index.tsx b/app/dashboard/src/pages/services/dialog/index.tsx
index e5e37fc..4f31a3d 100644
--- a/app/dashboard/src/pages/services/dialog/index.tsx
+++ b/app/dashboard/src/pages/services/dialog/index.tsx
@@ -33,7 +33,7 @@ import { InboundsField } from './inbounds-field';
import { NameField } from './name-field';
import { InboundType, Service, ServiceCreate } from 'types';
import { fetchInbounds, useInbounds, useServices } from 'stores';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { queryIds } from 'constants/query-ids';
const formatService = (service: Service): FormType => {
@@ -61,7 +61,7 @@ export const ServiceDialog: FC = () => {
const { refetchInbounds } = useInbounds();
const {
data: inbounds,
- } = useQuery(queryIds.inbounds, () => fetchInbounds());
+ } = useQuery({ queryKey: [queryIds.inbounds], queryFn: () => fetchInbounds() });
const isEditing = !!editingService;
const isOpen = isCreatingNewService || isEditing;
const [loading, setLoading] = useState(false);
diff --git a/app/dashboard/src/pages/services/table.tsx b/app/dashboard/src/pages/services/table.tsx
index ba31756..281e6b4 100644
--- a/app/dashboard/src/pages/services/table.tsx
+++ b/app/dashboard/src/pages/services/table.tsx
@@ -1,6 +1,5 @@
import {
- Accordion,
Box,
HStack,
Table,
@@ -10,11 +9,10 @@ import {
Th,
Thead,
Tr,
- useBreakpointValue,
} from '@chakra-ui/react';
import classNames from 'classnames';
-import { FC, useState, } from 'react';
+import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import {
EmptySection,
@@ -24,10 +22,9 @@ import {
} from 'components/table';
import { fetchServices, useServices } from 'stores';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { queryIds } from 'constants/query-ids';
-type ExpandedIndex = number | number[];
type ServicesTableProps = {} & TableProps;
export const ServicesTable: FC = (props) => {
@@ -37,94 +34,14 @@ export const ServicesTable: FC = (props) => {
onCreateService,
onFilterChange,
} = useServices();
- const { data: services } = useQuery(queryIds.services, () => { return fetchServices(filters) });
- const useTable = useBreakpointValue({ base: false, md: true });
+ const { data: services } = useQuery({
+ queryKey: [queryIds.services],
+ queryFn: () => { return fetchServices(filters) }
+ });
const { t } = useTranslation();
- const [selectedRow,] = useState(
- undefined
- );
return (
-
-
-
-
-
- |
-
- {t('services')}
-
-
- |
-
-
- {t('servicesTable.usersNumber')}
-
-
- |
-
-
- {t('servicesTable.inboundsNumber')}
-
-
- |
-
-
-
-
- {!useTable &&
- services?.map((service, i) => {
- return (
- {
- e.stopPropagation();
- onEditingService(service);
- }}
- >
- |
- {service.name}
- |
-
- {service.users.length}
- |
-
- {service.inbounds.length}
- |
-
- );
- })}
-
-
-
@@ -168,32 +85,31 @@ export const ServicesTable: FC = (props) => {
- {useTable &&
- services?.map((service, i) => {
- return (
- {
- e.stopPropagation();
- onEditingService(service);
- }}
- >
- |
- {service.name}
- |
-
- {service.users.length}
- |
-
- {service.inbounds.length}
- |
-
- );
- })}
+ {services?.map((service, i) => {
+ return (
+ {
+ e.stopPropagation();
+ onEditingService(service);
+ }}
+ >
+ |
+ {service.name}
+ |
+
+ {service.users.length}
+ |
+
+ {service.inbounds.length}
+ |
+
+ );
+ })}
{services?.length == 0 && (
|
diff --git a/app/dashboard/src/pages/users/dialog/index.tsx b/app/dashboard/src/pages/users/dialog/index.tsx
index e9022a0..d2ac165 100644
--- a/app/dashboard/src/pages/users/dialog/index.tsx
+++ b/app/dashboard/src/pages/users/dialog/index.tsx
@@ -51,7 +51,7 @@ import { ExpireDateField } from './expire-date-field';
import { NoteField } from './note-field';
import { useUsers, useServices, fetchServices } from 'stores';
import { queryIds } from 'constants/query-ids';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
const formatUser = (user: User): FormType => {
const services: number[] = user.services.map((service: number | Service): number => {
@@ -81,7 +81,7 @@ export const UserDialog: FC = () => {
} = useUsers();
const { refetchServices, servicesFilters: filters } = useServices();
const { data: services } = useQuery({
- queryKey: queryIds.services,
+ queryKey: [queryIds.services],
initialData: [],
queryFn: () => {
return fetchServices(filters);
diff --git a/app/dashboard/src/pages/users/table/index.tsx b/app/dashboard/src/pages/users/table/index.tsx
index d19e863..123ada5 100644
--- a/app/dashboard/src/pages/users/table/index.tsx
+++ b/app/dashboard/src/pages/users/table/index.tsx
@@ -39,7 +39,7 @@ import { UsageSlider, UsageSliderCompact } from './usage-slider';
import { fetchUsers, useUsers } from 'stores';
import { ActionButtons } from './action-buttons';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { User } from 'types';
import { queryIds } from 'constants/query-ids';
@@ -55,7 +55,7 @@ export const UsersTable: FC = (props) => {
onFilterChange,
} = useUsers();
const { data } = useQuery({
- queryKey: queryIds.users,
+ queryKey: [queryIds.users],
queryFn: () => { return fetchUsers(filters) },
initialData: { total: 0, users: [] },
});
diff --git a/app/dashboard/src/service/react-query.ts b/app/dashboard/src/service/react-query.ts
index 0fd037d..6d46de5 100644
--- a/app/dashboard/src/service/react-query.ts
+++ b/app/dashboard/src/service/react-query.ts
@@ -1,3 +1,3 @@
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
export const queryClient = new QueryClient();
diff --git a/app/dashboard/src/stores/inbounds.store.ts b/app/dashboard/src/stores/inbounds.store.ts
index b8645d9..4f9ce72 100644
--- a/app/dashboard/src/stores/inbounds.store.ts
+++ b/app/dashboard/src/stores/inbounds.store.ts
@@ -44,10 +44,12 @@ export const fetchInbounds = async () => {
});
};
-export const fetchInboundHosts = async (id: number): Promise => {
+export const fetchInboundHosts = async (id: number | undefined): Promise => {
useDashboard.setState({ loading: true });
return fetch(`/inbounds/${id}/hosts`)
- .then((hosts: Hosts) => hosts)
+ .then((hosts: Hosts) => {
+ return hosts
+ })
.finally(() => {
useDashboard.setState({ loading: false });
});
@@ -58,7 +60,7 @@ type InboundsStateType = {
loading: boolean;
setLoading: (value: boolean) => void;
// Inbounds
- selectedInbound: InboundType | null;
+ selectedInbound: InboundType | undefined;
selectInbound: (inbound: InboundType) => void;
refetchInbounds: () => void;
// Hosts
@@ -83,7 +85,7 @@ type InboundsStateType = {
export const useInbounds = create(
subscribeWithSelector((set, get) => ({
selectedHost: null,
- selectedInbound: null,
+ selectedInbound: undefined,
loading: false,
isDeletingHost: false,
isCreatingHost: false,
@@ -118,10 +120,10 @@ export const useInbounds = create(
set({ loading: value })
},
refetchInbounds: () => {
- queryClient.invalidateQueries(queryIds.inbounds);
+ queryClient.invalidateQueries({ queryKey: [queryIds.inbounds] });
},
- refetchHosts: () => {
- queryClient.invalidateQueries(queryIds.hosts);
+ refetchHosts: async () => {
+ queryClient.invalidateQueries({ queryKey: [queryIds.hosts] });
},
selectInbound: (host): void => {
set({ selectedInbound: host })
@@ -149,7 +151,7 @@ export const useInbounds = create(
createHost: async (inboundId: number | undefined, body: HostSchema): Promise => {
if (inboundId !== undefined) {
useDashboard.setState({ loading: true });
- return fetch(`/inbounds/${inboundId}/hosts/${body}`, { method: 'POST', body })
+ return fetch(`/inbounds/${inboundId}/hosts`, { method: 'POST', body })
.then(() => true)
.catch(() => false)
.finally(() => {
diff --git a/app/dashboard/src/stores/nodes.store.ts b/app/dashboard/src/stores/nodes.store.ts
index 9cecb45..91b747e 100644
--- a/app/dashboard/src/stores/nodes.store.ts
+++ b/app/dashboard/src/stores/nodes.store.ts
@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
import { fetch } from 'service/http';
import { create } from 'zustand';
import { z } from 'zod';
@@ -95,9 +95,11 @@ export type NodeStore = {
onShowingNodesUsage: (isShowingNodesUsage: boolean) => void;
};
+// TODO: Refactor all useQuery for inbounds, hosts,
+// services and uses to be a custom hook like this.
export const useNodesQuery = () => {
return useQuery({
- queryKey: FetchNodesQueryKey,
+ queryKey: [FetchNodesQueryKey],
queryFn: fetchNodes,
refetchInterval: useNodes.getState().editingNode ? 3000 : undefined,
refetchOnWindowFocus: false,
@@ -130,7 +132,7 @@ export const useNodes = create((set, get) => ({
return fetch('/nodes', { method: 'POST', body }).then(() => { get().refetchCertificate() });
},
refetchNodes: () => {
- queryClient.invalidateQueries(queryIds.nodes);
+ queryClient.invalidateQueries({ queryKey: [queryIds.nodes] });
},
refetchCertificate: () => {
fetch('/nodes/settings').then((res) => {
diff --git a/app/dashboard/src/stores/services.store.ts b/app/dashboard/src/stores/services.store.ts
index a4a088e..b76f795 100644
--- a/app/dashboard/src/stores/services.store.ts
+++ b/app/dashboard/src/stores/services.store.ts
@@ -1,5 +1,4 @@
import { queryClient } from 'service/react-query';
-import { StatisticsQueryKey } from 'components/statistics-card';
import { Service, ServiceCreate } from 'types/service';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
import { create } from 'zustand';
@@ -60,7 +59,7 @@ export const useServices = create(
get().refetchServices();
},
refetchServices: () => {
- queryClient.invalidateQueries(queryIds.services);
+ queryClient.invalidateQueries({ queryKey: [queryIds.services] });
},
onCreateService: (isCreatingNewService) => set({ isCreatingNewService }),
onEditingService: (editingService) => {
@@ -75,14 +74,12 @@ export const useServices = create(
set({ deletingService: null });
get().refetchServices();
useUsers.getState().refetchUsers();
- queryClient.invalidateQueries(StatisticsQueryKey);
});
},
createService: async (body: ServiceCreate) => {
return fetch('/services', { method: 'POST', body }).then(() => {
set({ editingService: null });
get().refetchServices();
- queryClient.invalidateQueries(StatisticsQueryKey);
});
},
editService: async (body: ServiceCreate) => {
diff --git a/app/dashboard/src/stores/users.store.ts b/app/dashboard/src/stores/users.store.ts
index 8a4c3df..e8c2238 100644
--- a/app/dashboard/src/stores/users.store.ts
+++ b/app/dashboard/src/stores/users.store.ts
@@ -79,7 +79,7 @@ export const useUsers = create(subscribeWithSelector((set, get)
set({ subscribeUrl });
},
refetchUsers: () => {
- queryClient.invalidateQueries(queryIds.users);
+ queryClient.invalidateQueries({ queryKey: [queryIds.users] });
},
resetAllUsage: async () => {
return fetch('/users/reset', { method: 'POST' }).then(() => {
@@ -109,7 +109,7 @@ export const useUsers = create(subscribeWithSelector((set, get)
return fetch(`/users/${user.username}`, { method: 'DELETE' }).then(() => {
set({ deletingUser: null });
get().refetchUsers();
- queryClient.invalidateQueries(StatisticsQueryKey);
+ queryClient.invalidateQueries({ queryKey: [StatisticsQueryKey] });
});
},
createUser: async (body: UserCreate) => {
@@ -117,7 +117,7 @@ export const useUsers = create(subscribeWithSelector((set, get)
set({ editingUser: null });
get().refetchUsers();
useServices.getState().refetchServices();
- queryClient.invalidateQueries(StatisticsQueryKey);
+ queryClient.invalidateQueries({ queryKey: [StatisticsQueryKey] });
});
},
editUser: async (body: UserCreate) => {
diff --git a/makefile b/makefile
index 4b63f02..053e7a4 100644
--- a/makefile
+++ b/makefile
@@ -3,11 +3,11 @@ start:
alembic upgrade head
python main.py
-dashboard-build:
- cd app/dashboard/
+install-deps:
npm install --prefix './app/dashboard'
+
+dashboard-build: install-deps
VITE_BASE_API=/api/ npm run build --prefix './app/dashboard' --if-present -- --outDir dist --base '/dashboard/'
- ls
cp ./app/dashboard/dist/index.html ./app/dashboard/dist/404.html
dashboard-dev:
@@ -17,5 +17,13 @@ dashboard-dev:
--base ./app/dashboard/ \
--clearScreen false
+dashboard-preview:
+ VITE_BASE_API=http://0.0.0.0:8000/api/ npm run preview \
+ --prefix './app/dashboard/' \
+ -- --host 0.0.0.0 \
+ --base ./app/dashboard/ \
+ --clearScreen false
+
+
dashboard-cleanup:
rm -rf app/dashboard/node_modules/
| |