Skip to content

Commit e62f7df

Browse files
kastovkastov
committed
feat: implement clear modal state actions for user and node modals, skeletons in viewUserModal
1 parent 5ebe41f commit e62f7df

File tree

8 files changed

+105
-56
lines changed

8 files changed

+105
-56
lines changed

‎src/entities/dashboard/nodes/nodes-store/interfaces/action.interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { IState } from './state.interface'
44

55
export interface IActions {
66
actions: {
7+
clearEditModal: () => void
78
getInitialState: () => IState
89
resetState: () => Promise<void>
910
setNode: (node: UpdateNodeCommand.Response['response']) => void

‎src/entities/dashboard/nodes/nodes-store/nodes-store.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ export const useNodesStore = create<IActions & IState>()(
2626
set((state) => ({
2727
editModal: { ...state.editModal, isOpen }
2828
}))
29-
if (!isOpen) {
30-
set((state) => ({
31-
editModal: { ...state.editModal, node: null, isLoading: false }
32-
}))
33-
}
29+
},
30+
clearEditModal: () => {
31+
set((state) => ({
32+
editModal: { ...state.editModal, node: null, isLoading: false }
33+
}))
3434
},
3535
toggleCreateModal: (isOpen: boolean) => {
3636
set((state) => ({

‎src/entities/dashboard/user-modal-store/interfaces/action.interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export interface IActions {
44
actions: {
55
changeDetailedUserInfoDrawerState: (state: boolean) => void
66
changeModalState: (state: boolean) => void
7+
clearModalState: () => void
78
getInitialState: () => IState
89
resetState: () => Promise<void>
910
setDrawerUserUuid: (userUuid: string) => Promise<void>

‎src/entities/dashboard/user-modal-store/user-modal-store.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@ export const useUserModalStore = create<IActions & IState>()(
2222
set(() => ({
2323
isModalOpen: false
2424
}))
25-
26-
setTimeout(() => {
27-
set(() => ({
28-
userUuid: null
29-
}))
30-
getState().actions.resetState()
31-
}, 300)
3225
}
3326
},
27+
clearModalState: () => {
28+
set(() => ({
29+
isModalOpen: false,
30+
userUuid: null
31+
}))
32+
getState().actions.resetState()
33+
},
3434
changeDetailedUserInfoDrawerState: (detailedUserInfoDrawerState: boolean) => {
3535
set(() => ({ isDetailedUserInfoDrawerOpen: detailedUserInfoDrawerState }))
3636
if (!detailedUserInfoDrawerState) {

‎src/widgets/dashboard/nodes/edit-node-modal/edit-node-modal.widget.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,25 +49,27 @@ export const EditNodeModalConnectorWidget = () => {
4949
}
5050
})
5151

52-
const handleClose = () => {
53-
actions.toggleEditModal(false)
52+
const handleClose = (closeModal: boolean = false) => {
53+
if (closeModal) {
54+
actions.toggleEditModal(false)
55+
}
56+
57+
actions.clearEditModal()
5458
setAdvancedOpened(false)
5559

5660
queryClient.removeQueries({
5761
queryKey: nodesQueryKeys.getNode({ uuid: node?.uuid ?? '' }).queryKey
5862
})
5963

60-
setTimeout(() => {
61-
form.reset()
62-
form.resetDirty()
63-
form.resetTouched()
64-
}, 200)
64+
form.reset()
65+
form.resetDirty()
66+
form.resetTouched()
6567
}
6668

6769
const { mutate: updateNode, isPending: isUpdateNodePending } = useUpdateNode({
6870
mutationFns: {
6971
onSuccess: async () => {
70-
handleClose()
72+
handleClose(true)
7173
}
7274
}
7375
})
@@ -109,7 +111,8 @@ export const EditNodeModalConnectorWidget = () => {
109111
return (
110112
<Modal
111113
centered
112-
onClose={handleClose}
114+
onClose={() => actions.toggleEditModal(false)}
115+
onExitTransitionEnd={() => handleClose}
113116
opened={isModalOpen}
114117
size="900px"
115118
title={

‎src/widgets/dashboard/nodes/modal-accordeon-widget/error-accordeon.widget.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const ModalAccordionWidget = (props: IProps) => {
1212

1313
const [localStatusMessage, setLocalStatusMessage] = useState<null | string>(null)
1414

15-
const accordionValue = localStatusMessage ? 'error' : 'none'
15+
let accordionValue = localStatusMessage ? 'error' : 'none'
1616

1717
useEffect(() => {
1818
if (fetchedNode) {
@@ -22,8 +22,12 @@ export const ModalAccordionWidget = (props: IProps) => {
2222
}
2323
}, [fetchedNode])
2424

25+
if (!fetchedNode && !node) {
26+
accordionValue = 'info'
27+
}
28+
2529
return (
26-
<Accordion defaultValue={accordionValue} key={node?.uuid} radius="md" variant="contained">
30+
<Accordion defaultValue={accordionValue} key={node?.uuid} radius="md" variant="separated">
2731
<Accordion.Item value="info">
2832
<Accordion.Control
2933
icon={<PiInfo color="var(--mantine-color-red-7)" size={'1.50rem'} />}

‎src/widgets/dashboard/nodes/node-card/node-card.widget.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -155,56 +155,56 @@ export function NodeCardWidget(props: IProps) {
155155
<Grid.Col order={{ base: 4, xs: 4 }} span={{ base: 12, xs: 'content' }}>
156156
<Stack gap="xs">
157157
<Group>
158-
{node.xrayUptime !== '0' && node.isConnected && (
158+
<Badge
159+
autoContrast
160+
color={'gray'}
161+
ff={'monospace'}
162+
radius="md"
163+
size="lg"
164+
style={{ cursor: 'pointer' }}
165+
variant="outline"
166+
>
167+
{`${prettyUsedData} / ${maxData}`}
168+
</Badge>
169+
170+
{node.isTrafficTrackingActive && (
159171
<Badge
160172
color="gray"
161-
leftSection={<PiCpu size={18} />}
162-
maw={'20ch'}
173+
leftSection={<PiArrowsCounterClockwise size={16} />}
163174
radius="md"
164175
size="lg"
165176
style={{ cursor: 'pointer' }}
166177
variant="outline"
167178
>
168-
{getXrayUptimeUtil(node.xrayUptime)}
179+
{getNodeResetDaysUtil(node.trafficResetDay ?? 1)}
169180
</Badge>
170181
)}
171182

172-
{(!node.isConnected || node.xrayUptime === '0') && (
183+
{node.xrayUptime !== '0' && node.isConnected && (
173184
<Badge
174-
color="red"
185+
color="gray"
175186
leftSection={<PiCpu size={18} />}
176187
maw={'20ch'}
177188
radius="md"
178189
size="lg"
179190
style={{ cursor: 'pointer' }}
180191
variant="outline"
181192
>
182-
offline
193+
{getXrayUptimeUtil(node.xrayUptime)}
183194
</Badge>
184195
)}
185196

186-
<Badge
187-
autoContrast
188-
color={'gray'}
189-
ff={'monospace'}
190-
radius="md"
191-
size="lg"
192-
style={{ cursor: 'pointer' }}
193-
variant="outline"
194-
>
195-
{`${prettyUsedData} / ${maxData}`}
196-
</Badge>
197-
198-
{node.isTrafficTrackingActive && (
197+
{(!node.isConnected || node.xrayUptime === '0') && (
199198
<Badge
200-
color="gray"
201-
leftSection={<PiArrowsCounterClockwise size={16} />}
199+
color="red"
200+
leftSection={<PiCpu size={18} />}
201+
maw={'20ch'}
202202
radius="md"
203203
size="lg"
204204
style={{ cursor: 'pointer' }}
205205
variant="outline"
206206
>
207-
{getNodeResetDaysUtil(node.trafficResetDay ?? 1)}
207+
offline
208208
</Badge>
209209
)}
210210
</Group>

‎src/widgets/dashboard/users/view-user-modal/view-user-modal.widget.tsx‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Progress,
1212
Select,
1313
SimpleGrid,
14+
Skeleton,
1415
Stack,
1516
Text,
1617
Textarea,
@@ -52,7 +53,6 @@ import { bytesToGbUtil, gbToBytesUtil, prettyBytesUtil } from '@shared/utils/byt
5253
import { GetUserUsageFeature } from '@features/ui/dashboard/users/get-user-usage'
5354
import { DeleteUserFeature } from '@features/ui/dashboard/users/delete-user'
5455
import { UserStatusBadge } from '@widgets/dashboard/users/user-status-badge'
55-
import { LoaderModalShared } from '@shared/ui/loader-modal'
5656
import { resetDataStrategy } from '@shared/constants'
5757
import { queryClient } from '@shared/api'
5858

@@ -148,14 +148,16 @@ export const ViewUserModal = () => {
148148
})
149149
})
150150

151-
const handleClose = () => {
152-
actions.changeModalState(false)
151+
const handleClose = (closeModal: boolean = false) => {
152+
if (closeModal) {
153+
actions.changeModalState(false)
154+
}
155+
156+
actions.clearModalState()
153157

154-
setTimeout(() => {
155-
form.reset()
156-
form.resetDirty()
157-
form.resetTouched()
158-
}, 300)
158+
form.reset()
159+
form.resetDirty()
160+
form.resetTouched()
159161
}
160162

161163
const userSubscriptionUrlMemo = useMemo(
@@ -166,13 +168,51 @@ export const ViewUserModal = () => {
166168
return (
167169
<Modal
168170
centered
169-
onClose={handleClose}
171+
onClose={() => actions.changeModalState(false)}
172+
onExitTransitionEnd={handleClose}
170173
opened={isViewUserModalOpen}
171174
size="900px"
172175
title={t('view-user-modal.widget.edit-user')}
173176
>
174177
{isUserLoading ? (
175-
<LoaderModalShared h="400" text={t('view-user-modal.widget.loading-user-data')} />
178+
<Stack>
179+
<Group align="flex-start" gap="md" grow={false} wrap="wrap">
180+
<Stack gap="md" style={{ flex: '1 1 350px' }}>
181+
<Group gap="xs" justify="space-between" w="100%">
182+
<Skeleton height={26} width={150} />
183+
<Skeleton height={26} width={80} />
184+
</Group>
185+
<Skeleton height={80} />
186+
<Skeleton height={80} />
187+
<Skeleton height={80} />
188+
<Skeleton height={80} />
189+
<Skeleton height={80} />
190+
<Skeleton height={80} />
191+
<Skeleton height={100} />
192+
</Stack>
193+
194+
<Divider
195+
className="responsive-divider"
196+
orientation="vertical"
197+
visibleFrom="md"
198+
/>
199+
200+
<Stack gap="md" style={{ flex: '1 1 350px' }}>
201+
<Skeleton height={24} width={150} />
202+
<Skeleton height={80} />
203+
<Skeleton height={36} />
204+
<Skeleton height={80} />
205+
<Skeleton height={102} />
206+
<Skeleton height={102} />
207+
<Skeleton height={180} />
208+
</Stack>
209+
</Group>
210+
211+
<Group justify="space-between" mt="xl">
212+
<Skeleton height={40} width={150} />
213+
<Skeleton height={40} width={250} />
214+
</Group>
215+
</Stack>
176216
) : (
177217
<form key="view-user-form" onSubmit={handleSubmit}>
178218
<Group align="flex-start" gap="md" grow={false} wrap="wrap">

0 commit comments

Comments
 (0)