From 152c91cae9a1b572836e5914d441023e60e112f5 Mon Sep 17 00:00:00 2001 From: David Edler Date: Fri, 20 Oct 2023 13:43:03 +0200 Subject: [PATCH] Refactor loading with useQuery and adopt formik for form data (#148) --- app/layout.tsx | 15 +- app/network-configuration/page.tsx | 140 +++++------- app/subscribers/page.tsx | 114 ++++------ components/CreateNetworkSliceModal.tsx | 269 +++++++++-------------- components/CreateSubscriberModal.tsx | 255 ++++++++++------------ components/DeleteSubscriberButton.tsx | 6 +- components/DeviceGroupModal.tsx | 243 +++++++-------------- components/Loader.tsx | 19 ++ components/NetworkSliceEmptyState.tsx | 20 +- components/NetworkSliceGroups.tsx | 167 +++++++++++++++ components/NetworkSliceTable.tsx | 284 +++---------------------- package-lock.json | 132 +++++++++++- package.json | 5 +- utils/checkBackendAvailable.tsx | 6 +- utils/checkNetworkSliceExists.tsx | 6 +- utils/createNetworkSlice.tsx | 10 +- utils/getDeviceGroup.tsx | 18 +- utils/getGnbList.tsx | 23 ++ utils/getNetworkSlice.tsx | 4 +- utils/getNetworkSlices.tsx | 4 +- utils/getSubscribers.tsx | 9 +- utils/getUpfList.tsx | 20 ++ utils/queryKeys.tsx | 7 + 23 files changed, 845 insertions(+), 931 deletions(-) create mode 100644 components/Loader.tsx create mode 100644 components/NetworkSliceGroups.tsx create mode 100644 utils/getGnbList.tsx create mode 100644 utils/getUpfList.tsx create mode 100644 utils/queryKeys.tsx diff --git a/app/layout.tsx b/app/layout.tsx index cd1c8a52..bc5298f3 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,7 @@ "use client"; import "./globals.scss"; import { Inter } from "next/font/google"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, Suspense } from "react"; import { usePathname } from 'next/navigation' import { checkBackendAvailable } from "@/utils/checkBackendAvailable"; import { @@ -11,8 +11,10 @@ import { Navigation, Row, } from "@canonical/react-components"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const inter = Inter({ subsets: ["latin"] }); +const queryClient = new QueryClient(); export default function RootLayout({ children, @@ -24,8 +26,6 @@ export default function RootLayout({ ); const pathname = usePathname() - - useEffect(() => { const fetchData = async () => { const isBackendAvailable = await checkBackendAvailable(); @@ -37,6 +37,9 @@ export default function RootLayout({ return ( + + SD Core +
)} - {backendAvailable === true && children} + {backendAvailable === true && ( + + {children} + + )}