Converted to Vite since create-react-app is no longer being developed

frontend/src/pages/AccessLists/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -9,10 +12,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -48,7 +49,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/AccessLists/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useAccessLists } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useAccessLists } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/AccessLists/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { AccessListCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { AccessListCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/AuditLog/index.tsx

@@ -1,5 +1,6 @@
 import { Heading } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function AuditLog() {
 	return (

frontend/src/pages/CertificateAuthorities/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -9,11 +12,9 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { CertificateAuthorityEditModal } from "modals";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { CertificateAuthorityEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -58,7 +59,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.edit",
 						}),
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						icon: <FiEdit />,
 						disabled: (data: any) => data.isReadonly,
 					},

frontend/src/pages/CertificateAuthorities/TableWrapper.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useCertificateAuthorities } from "hooks";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useCertificateAuthorities } from "src/hooks";
 
 import Table from "./Table";
 

frontend/src/pages/CertificateAuthorities/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { CertificateAuthorityCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { CertificateAuthorityCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Certificates/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -13,11 +16,9 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { CertificateEditModal } from "modals";
-import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { CertificateEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -78,7 +79,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.edit",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiEdit />,
 						disabled: (data: any) =>
 							data.type === "dns" || data.type === "http",
@@ -87,7 +88,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.renew",
 						}),
-						onClick: (e: any, { id }: any) => onRenewal(id),
+						onClick: (_: any, { id }: any) => onRenewal(id),
 						icon: <FiRefreshCw />,
 						disabled: (data: any) =>
 							data.type !== "dns" && data.type !== "http",
@@ -96,7 +97,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.download",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiDownload />,
 						disabled: (data: any) => data.isReadonly,
 					},
@@ -104,7 +105,7 @@ function Table({
 						title: intl.formatMessage({
 							id: "action.delete",
 						}),
-						onClick: (e: any, { id }: any) => alert(id),
+						onClick: (_: any, { id }: any) => alert(id),
 						icon: <FiTrash2 />,
 						disabled: (data: any) => data.isReadonly,
 					},

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, useToast } from "@chakra-ui/react";
-import { renewCertificate } from "api/npm";
-import { EmptyList, SpinnerPage, tableEventReducer } from "components";
-import { useCertificates } from "hooks";
-import { intl } from "locale";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { renewCertificate } from "src/api/npm";
+import { EmptyList, SpinnerPage, tableEventReducer } from "src/components";
+import { useCertificates } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 
@@ -54,7 +55,7 @@ function TableWrapper() {
 				isClosable: true,
 			});
 			setTimeout(() => {
-				queryClient.invalidateQueries("certificates");
+				queryClient.invalidateQueries(["certificates"]);
 			}, 500);
 		} catch (err: any) {
 			toast({

frontend/src/pages/Certificates/index.tsx

@@ -8,12 +8,13 @@ import {
 	MenuItem,
 	MenuDivider,
 } from "@chakra-ui/react";
-import { HelpDrawer, PrettyMenuButton } from "components";
-import { useDNSProviders } from "hooks";
-import { intl } from "locale";
-import { CertificateCreateModal } from "modals";
 import { FiGlobe, FiServer, FiShieldOff, FiUpload } from "react-icons/fi";
 
+import { HelpDrawer, PrettyMenuButton } from "src/components";
+import { useDNSProviders } from "src/hooks";
+import { intl } from "src/locale";
+import { CertificateCreateModal } from "src/modals";
+
 import TableWrapper from "./TableWrapper";
 
 function Certificates() {

frontend/src/pages/DNSProviders/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,10 +14,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -63,7 +64,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/DNSProviders/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useDNSProviders } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useDNSProviders } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/DNSProviders/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { DNSProviderCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { DNSProviderCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Dashboard/index.tsx

@@ -1,5 +1,6 @@
 import { Heading } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function Dashboard() {
 	return (

frontend/src/pages/Hosts/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -13,10 +16,8 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 export interface TableProps {
 	data: any;
@@ -74,7 +75,7 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, data: any) => {
+						onClick: (_: any, data: any) => {
 							alert(JSON.stringify(data, null, 2));
 						},
 						icon: <FiEdit />,

frontend/src/pages/Hosts/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useHosts } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useHosts } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/Hosts/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { HostCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { HostCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Login/index.tsx

@@ -12,13 +12,14 @@ import {
 	useColorModeValue,
 	useToast,
 } from "@chakra-ui/react";
-import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
 
-import logo from "../../img/logo-256.png";
+import { LocalePicker, PrettyButton, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
+
+// import logo from "../../img/logo-256.png";
 
 function Login() {
 	const toast = useToast();
@@ -67,7 +68,7 @@ function Login() {
 				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
 					<Box>
 						<Center>
-							<img src={logo} width={100} alt="Logo" />
+							<img src="/images/logo-256.png" width={100} alt="Logo" />
 						</Center>
 					</Box>
 					<Box

frontend/src/pages/NginxTemplates/NginxTemplatesTable.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -10,15 +13,13 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 const rowActions = [
 	{
 		title: intl.formatMessage({ id: "action.edit" }),
-		onClick: (e: any, data: any) => {
+		onClick: (_: any, data: any) => {
 			alert(JSON.stringify(data, null, 2));
 		},
 		icon: <FiEdit />,

frontend/src/pages/NginxTemplates/index.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
+
 import {
 	HelpDrawer,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useNginxTemplates } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useNginxTemplates } from "src/hooks";
+import { intl } from "src/locale";
 
 import { NginxTemplatesTable } from "./NginxTemplatesTable";
 

frontend/src/pages/Settings/SettingsTable.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo } from "react";
 
+import { FiEdit } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -8,15 +11,13 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { intl } from "locale";
-import { FiEdit } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
 
 const rowActions = [
 	{
 		title: intl.formatMessage({ id: "action.edit" }),
-		onClick: (e: any, data: any) => {
+		onClick: (_: any, data: any) => {
 			alert(JSON.stringify(data, null, 2));
 		},
 		icon: <FiEdit />,

frontend/src/pages/Settings/index.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon, Heading } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useSettings } from "hooks";
-import { intl } from "locale";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useSettings } from "src/hooks";
+import { intl } from "src/locale";
 
 import { SettingsTable } from "./SettingsTable";
 

frontend/src/pages/Setup/index.tsx

@@ -13,15 +13,15 @@ import {
 	useColorModeValue,
 	useToast,
 } from "@chakra-ui/react";
-import { createUser } from "api/npm";
-import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
+import { useQueryClient } from "@tanstack/react-query";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateEmail, validateString } from "modules/Validations";
-import { useQueryClient } from "react-query";
 
-import logo from "../../img/logo-256.png";
+import { createUser } from "src/api/npm";
+// import logo from "src/assets/logo-256.png";
+import { LocalePicker, PrettyButton, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { intl } from "src/locale";
+import { validateEmail, validateString } from "src/modules/Validations";
 
 interface Payload {
 	name: string;
@@ -67,7 +67,7 @@ function Setup() {
 				try {
 					await login(response.email, password);
 					// Trigger a Health change
-					await queryClient.refetchQueries("health");
+					await queryClient.refetchQueries(["health"]);
 					// window.location.reload();
 				} catch (err: any) {
 					showErr(err.message);
@@ -101,7 +101,7 @@ function Setup() {
 				<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
 					<Box>
 						<Center>
-							<img src={logo} width={100} alt="Logo" />
+							<img src="/images/logo-256.png" width={100} alt="Logo" />
 						</Center>
 					</Box>
 					<Box

frontend/src/pages/Upstreams/Table.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 
+import { FiEdit, FiHardDrive } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,11 +14,9 @@ import {
 	TableSortBy,
 	TextFilter,
 	UpstreamStatusFormatter,
-} from "components";
-import { intl } from "locale";
-import { UpstreamEditModal, UpstreamNginxConfigModal } from "modals";
-import { FiEdit, FiHardDrive } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { intl } from "src/locale";
+import { UpstreamEditModal, UpstreamNginxConfigModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -69,12 +70,12 @@ function Table({
 				Cell: ActionsFormatter([
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						icon: <FiEdit />,
 					},
 					{
 						title: intl.formatMessage({ id: "action.nginx-config" }),
-						onClick: (e: any, { id }: any) => setConfigId(id),
+						onClick: (_: any, { id }: any) => setConfigId(id),
 						icon: <FiHardDrive />,
 					},
 				]),

frontend/src/pages/Upstreams/TableWrapper.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
+
 import {
 	EmptyList,
 	PrettyButton,
 	SpinnerPage,
 	tableEventReducer,
-} from "components";
-import { useUpstreams } from "hooks";
-import { intl } from "locale";
+} from "src/components";
+import { useUpstreams } from "src/hooks";
+import { intl } from "src/locale";
 
 import Table from "./Table";
 

frontend/src/pages/Upstreams/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
-import { intl } from "locale";
-import { UpstreamCreateModal } from "modals";
+
+import { HelpDrawer, PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { UpstreamCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";
 

frontend/src/pages/Users/Table.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect, useMemo } from "react";
 
+import { FiEdit, FiLock } from "react-icons/fi";
+import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+
 import {
 	tableEvents,
 	ActionsFormatter,
@@ -11,12 +14,10 @@ import {
 	TablePagination,
 	TableSortBy,
 	TextFilter,
-} from "components";
-import { useUser } from "hooks";
-import { intl } from "locale";
-import { SetPasswordModal, UserEditModal } from "modals";
-import { FiEdit, FiLock } from "react-icons/fi";
-import { useSortBy, useFilters, useTable, usePagination } from "react-table";
+} from "src/components";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+import { SetPasswordModal, UserEditModal } from "src/modals";
 
 export interface TableProps {
 	data: any;
@@ -68,13 +69,13 @@ function Table({
 					{
 						title: intl.formatMessage({ id: "action.edit" }),
 						icon: <FiEdit />,
-						onClick: (e: any, { id }: any) => setEditId(id),
+						onClick: (_: any, { id }: any) => setEditId(id),
 						disabled: (data: any) => data.isSystem || data.id === me?.id,
 					},
 					{
 						title: intl.formatMessage({ id: "action.set-password" }),
 						icon: <FiLock />,
-						onClick: (e: any, { id }: any) => setSetPasswordUserId(id),
+						onClick: (_: any, { id }: any) => setSetPasswordUserId(id),
 						disabled: (data: any) => data.isSystem || data.id === me?.id,
 					},
 				]),

frontend/src/pages/Users/TableWrapper.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useReducer, useState } from "react";
 
 import { Alert, AlertIcon } from "@chakra-ui/react";
-import { SpinnerPage, tableEventReducer } from "components";
-import { useUsers } from "hooks";
+
+import { SpinnerPage, tableEventReducer } from "src/components";
+import { useUsers } from "src/hooks";
 
 import Table from "./Table";
 

frontend/src/pages/Users/index.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
 import { Heading, HStack } from "@chakra-ui/react";
-import { PrettyButton } from "components";
-import { intl } from "locale";
-import { UserCreateModal } from "modals";
+
+import { PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { UserCreateModal } from "src/modals";
 
 import TableWrapper from "./TableWrapper";