From 2f87b455ca0045cc635ed816dc67630b073964ff Mon Sep 17 00:00:00 2001 From: Maksym Sadovnychyy Date: Wed, 12 Jun 2024 22:25:03 +0200 Subject: [PATCH] (feature): front end layout improve --- .gitignore | 4 +- src/ClientApp/ApiRoutes.tsx | 15 +++ src/ClientApp/app/layout.tsx | 66 ++++++++-- src/ClientApp/components/footer.tsx | 2 +- src/ClientApp/components/loader/index.tsx | 13 ++ src/ClientApp/components/loader/loader.css | 34 +++++ src/ClientApp/components/sidemenu.tsx | 7 +- src/ClientApp/components/topmenu.tsx | 9 +- src/ClientApp/http-common.tsx | 12 ++ src/ClientApp/package-lock.json | 95 +++++++++++++- src/ClientApp/package.json | 4 +- src/ClientApp/services/HttpService.tsx | 122 ++++++++++++++++++ .../Controllers/CacheController.cs | 6 + .../Middlewares/GlobalExceptionMiddleware.cs | 32 +++++ src/LetsEncryptServer/Program.cs | 9 ++ src/docker-compose.override.yml | 22 ++-- src/docker-compose.yml | 14 +- src/docker-compose/ClientApp/nginx/nginx.conf | 16 --- ...TpgCMVyk7RMm0qKEURrgcfHI5Y0RKRWlF0Up1y1xMs | 1 - ...f6oq1qazlokoWqGJam03udFEYOanTus2DmShjnfAcw | 1 - 20 files changed, 420 insertions(+), 64 deletions(-) create mode 100644 src/ClientApp/ApiRoutes.tsx create mode 100644 src/ClientApp/components/loader/index.tsx create mode 100644 src/ClientApp/components/loader/loader.css create mode 100644 src/ClientApp/http-common.tsx create mode 100644 src/ClientApp/services/HttpService.tsx create mode 100644 src/LetsEncryptServer/Middlewares/GlobalExceptionMiddleware.cs delete mode 100644 src/docker-compose/ClientApp/nginx/nginx.conf delete mode 100644 src/docker-compose/LetsEncryptServer/acme/VTpgCMVyk7RMm0qKEURrgcfHI5Y0RKRWlF0Up1y1xMs delete mode 100644 src/docker-compose/LetsEncryptServer/acme/sf6oq1qazlokoWqGJam03udFEYOanTus2DmShjnfAcw diff --git a/.gitignore b/.gitignore index 212ee0c..5f09bf8 100644 --- a/.gitignore +++ b/.gitignore @@ -262,5 +262,5 @@ __pycache__/ *.pyc -**/*docker_compose/LetsEncryptServer/acme -**/*docker_compose/LetsEncryptServer/cache \ No newline at end of file +**/*docker-compose/LetsEncryptServer/acme +**/*docker-compose/LetsEncryptServer/cache \ No newline at end of file diff --git a/src/ClientApp/ApiRoutes.tsx b/src/ClientApp/ApiRoutes.tsx new file mode 100644 index 0000000..2324ad8 --- /dev/null +++ b/src/ClientApp/ApiRoutes.tsx @@ -0,0 +1,15 @@ +enum ApiRoutes { + + CACHE_GET_ACCOUNTS = `/api/Cache/GetAccounts`, + CACHE_GET_CONTACTS = `/api/Cache/GetContacts/{accountId}`, + CACHE_SET_CONTACTS = `/api/Cache/SetContacts/{accountId}`, + + CERTS_FLOW_CONFIGURE_CLIENT = `/api/CertsFlow/ConfigureClient`, + CERTS_FLOW_TERMS_OF_SERVICE = `/api/CertsFlow/TermsOfService/{sessionId}`, + CERTS_FLOW_INIT = `/api/CertsFlow/Init/{sessionId}/{accountId}`, + CERTS_FLOW_NEW_ORDER = `/api/CertsFlow/NewOrder/{sessionId}`, + CERTS_FLOW_GET_ORDER = `/api/CertsFlow/GetOrder/{sessionId}`, + CERTS_FLOW_GET_CERTIFICATES = `/api/CertsFlow/GetCertificates/{sessionId}`, + CERTS_FLOW_APPLY_CERTIFICATES = `/api/CertsFlow/ApplyCertificates/{sessionId}`, + CERTS_FLOW_HOSRS_WITH_UPCOMING_SSL_EXPIRY = `/api/CertsFlow/HostsWithUpcomingSslExpiry/{sessionId}` +} \ No newline at end of file diff --git a/src/ClientApp/app/layout.tsx b/src/ClientApp/app/layout.tsx index c6ee797..c5d6b42 100644 --- a/src/ClientApp/app/layout.tsx +++ b/src/ClientApp/app/layout.tsx @@ -1,11 +1,12 @@ "use client"; // Add this line -import React, { FC, useState } from 'react'; +import React, { FC, useState, useEffect, useRef } from 'react'; import './globals.css'; import { SideMenu } from '../components/sidemenu'; import { TopMenu } from '../components/topmenu'; import { Footer } from '../components/footer'; import { OffCanvas } from '../components/offcanvas'; +import Loader from '../components/loader'; // Import the Loader component import { Metadata } from 'next'; const metadata: Metadata = { @@ -13,32 +14,71 @@ const metadata: Metadata = { description: "Generated by create next app", }; -const Layout = ({ children }: Readonly<{ - children: React.ReactNode; -}>) => { +const Layout: FC<{ children: React.ReactNode }> = ({ children }) => { const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); - const [isOffCanvasOpen, setIsOffCanvasOpen] = useState(false); + const [isManuallyCollapsed, setManuallyCollapsed] = useState(false); + const [isLoading, setIsLoading] = useState(true); // State to control the loader visibility + + const init = useRef(false); const toggleSidebar = () => { - setIsSidebarCollapsed(!isSidebarCollapsed); + setIsSidebarCollapsed((prev) => !prev); }; + const manuallyToggleSidebar = () => { + setManuallyCollapsed((prev) => !prev); + toggleSidebar(); + }; + + const handleResize = () => { + if (!isManuallyCollapsed) { + if (window.innerWidth <= 768) { + if (!isSidebarCollapsed) setIsSidebarCollapsed(true); + } else { + if (isSidebarCollapsed) setIsSidebarCollapsed(false); + } + } else { + if (isManuallyCollapsed) return; + + // Reset manualCollapse if the window is resized to a state that should automatically collapse/expand the sidebar + if (window.innerWidth > 768 && isSidebarCollapsed) { + setIsSidebarCollapsed(false); + } else if (window.innerWidth <= 768 && !isSidebarCollapsed) { + setIsSidebarCollapsed(true); + } + } + }; + + useEffect(() => { + if (!init.current) { + handleResize(); // Set the initial state based on the current window width + init.current = true; + } + + window.addEventListener('resize', handleResize); + setTimeout(() => setIsLoading(false), 2000); // Simulate loading for 2 seconds + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [isSidebarCollapsed, isManuallyCollapsed]); + + const [isOffCanvasOpen, setIsOffCanvasOpen] = useState(false); + const toggleOffCanvas = () => { - setIsOffCanvasOpen(!isOffCanvasOpen); + setIsOffCanvasOpen((prev) => !prev); }; return ( - {/* - - - */} + + {isLoading && } {/* Show loader if isLoading is true */} +
- +
-
+
{children}