-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor loading with useQuery and adopt formik for form data (#148)
- Loading branch information
Showing
23 changed files
with
845 additions
and
931 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,121 +1,95 @@ | ||
| "use client"; | ||
| import React, { useState, useEffect } from "react"; | ||
| import React, { useState } from "react"; | ||
| import { | ||
| Row, | ||
| Col, | ||
| Button, | ||
| Card, | ||
| ConfirmationModal, | ||
| ConfirmationButton, | ||
| } from "@canonical/react-components"; | ||
| import { deleteNetworkSlice } from "@/utils/deleteNetworkSlice"; | ||
| import { getNetworkSlices } from "@/utils/getNetworkSlices"; | ||
| import CreateNetworkSliceModal from "@/components/CreateNetworkSliceModal"; | ||
| import NetworkSliceEmptyState from "@/components/NetworkSliceEmptyState"; | ||
| import { NetworkSlice } from "@/components/types"; | ||
| import { NetworkSliceTable } from "@/components/NetworkSliceTable"; | ||
| import Loader from "@/components/Loader"; | ||
| import { useQuery, useQueryClient } from "@tanstack/react-query"; | ||
| import { queryKeys } from "@/utils/queryKeys"; | ||
|
|
||
| export default function NetworkConfiguration() { | ||
| const [loading, setLoading] = useState(true); | ||
| const [networkSlices, setNetworkSlices] = useState<NetworkSlice[]>([]); | ||
| const [ | ||
| isCreateNetworkSliceModalVisible, | ||
| setisCreateNetworkSliceModalVisible, | ||
| ] = useState(false); | ||
| const [isDeleteNetworkSliceModalOpen, setIsDeleteNetworkSliceModalOpen] = | ||
| useState(false); | ||
| const [selectedSliceName, setSelectedSliceName] = useState<string | null>( | ||
| null, | ||
| ); | ||
|
|
||
| const fetchDataAndUpdateState = async () => { | ||
| const slices = await getNetworkSlices(); | ||
| setNetworkSlices(slices); | ||
| setLoading(false); | ||
| }; | ||
| const NetworkConfiguration = () => { | ||
| const queryClient = useQueryClient(); | ||
| const [isModalVisible, setModalVisible] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| fetchDataAndUpdateState(); | ||
| }, []); | ||
| const { data: networkSlices = [], isLoading: loading } = useQuery({ | ||
| queryKey: [queryKeys.networkSlices], | ||
| queryFn: getNetworkSlices, | ||
| }); | ||
|
|
||
| const toggleCreateNetworkSliceModal = () => | ||
| setisCreateNetworkSliceModalVisible((prev) => !prev); | ||
|
|
||
| const openDeleteConfirmationModal = (sliceName: string) => { | ||
| setSelectedSliceName(sliceName); | ||
| setIsDeleteNetworkSliceModalOpen(true); | ||
| }; | ||
| setModalVisible((prev) => !prev); | ||
|
|
||
| const handleConfirmDelete = async () => { | ||
| if (selectedSliceName) { | ||
| await deleteNetworkSlice(selectedSliceName); | ||
| setSelectedSliceName(null); | ||
| setIsDeleteNetworkSliceModalOpen(false); | ||
| fetchDataAndUpdateState(); | ||
| } | ||
| const handleConfirmDelete = async (sliceName: string) => { | ||
| await deleteNetworkSlice(sliceName); | ||
| void queryClient.invalidateQueries({ queryKey: [queryKeys.networkSlices] }); | ||
| }; | ||
|
|
||
| const closeDeleteNetworkSliceModal = () => | ||
| setIsDeleteNetworkSliceModalOpen(false); | ||
|
|
||
| if (loading) return <div>Loading...</div>; | ||
|
|
||
| if (!networkSlices.length) { | ||
| return ( | ||
| <NetworkSliceEmptyState | ||
| onSliceCreatedInEmptyState={fetchDataAndUpdateState} | ||
| /> | ||
| ); | ||
| if (loading) { | ||
| return <Loader text="Loading..." />; | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <Row> | ||
| <Col size={6}> | ||
| <h2>Network Slices</h2> | ||
| <div className="u-align--right"> | ||
| <Button | ||
| appearance="positive" | ||
| onClick={toggleCreateNetworkSliceModal} | ||
| > | ||
| Create | ||
| </Button> | ||
| </div> | ||
| {networkSlices.map((slice) => ( | ||
| <Card key={slice.SliceName} title={slice.SliceName}> | ||
| <NetworkSliceTable sliceName={slice.SliceName} /> | ||
| <hr /> | ||
| <h1 className="p-heading--4">Network Slices ({networkSlices.length})</h1> | ||
| {networkSlices.length === 0 && <NetworkSliceEmptyState />} | ||
| {networkSlices.length > 0 && ( | ||
| <> | ||
| <div className="u-align--right"> | ||
| <Button | ||
| appearance="negative" | ||
| onClick={() => openDeleteConfirmationModal(slice.SliceName)} | ||
| appearance="positive" | ||
| onClick={toggleCreateNetworkSliceModal} | ||
| > | ||
| Delete | ||
| Create | ||
| </Button> | ||
| </div> | ||
| </Card> | ||
| ))} | ||
| {networkSlices.map((slice) => ( | ||
| <Card key={slice.SliceName}> | ||
| <h2 className="p-heading--5">{slice.SliceName}</h2> | ||
| <NetworkSliceTable slice={slice} /> | ||
| <hr /> | ||
| <div className="u-align--right"> | ||
| <ConfirmationButton | ||
| appearance="negative" | ||
| className="u-no-margin--bottom" | ||
| shiftClickEnabled | ||
| showShiftClickHint | ||
| confirmationModalProps={{ | ||
| title: "Confirm Delete", | ||
| confirmButtonLabel: "Delete", | ||
| onConfirm: () => handleConfirmDelete(slice.SliceName), | ||
| children: ( | ||
| <p> | ||
| This will permanently delete the network slice <b>{slice.SliceName}</b><br/> | ||
| This action cannot be undone. | ||
| </p> | ||
| ), | ||
| }} > | ||
| Delete | ||
| </ConfirmationButton> | ||
| </div> | ||
| </Card> | ||
| ))} | ||
| </> | ||
| )} | ||
| </Col> | ||
| </Row> | ||
| {isCreateNetworkSliceModalVisible && ( | ||
| {isModalVisible && ( | ||
| <CreateNetworkSliceModal | ||
| toggleModal={toggleCreateNetworkSliceModal} | ||
| onSliceCreated={fetchDataAndUpdateState} | ||
| /> | ||
| )} | ||
| {isDeleteNetworkSliceModalOpen && ( | ||
| <ConfirmationModal | ||
| title="Confirm delete" | ||
| confirmButtonLabel="Delete" | ||
| onConfirm={handleConfirmDelete} | ||
| close={closeDeleteNetworkSliceModal} | ||
| > | ||
| <p> | ||
| {`This will permanently delete the network slice "${selectedSliceName}".`} | ||
| <br /> | ||
| You cannot undo this action. | ||
| </p> | ||
| </ConfirmationModal> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
| export default NetworkConfiguration; |
Oops, something went wrong.