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

frontend/src/components/Footer.tsx

@@ -7,7 +7,8 @@ import {
 	Tooltip,
 	useColorModeValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 function Footer() {
 	return (
@@ -47,12 +48,12 @@ function Footer() {
 						rel="noopener noreferrer">
 						{intl.formatMessage({ id: "footer.github" })}
 					</Link>
-					<Tooltip label={process.env.REACT_APP_COMMIT}>
+					<Tooltip label={import.meta.env.VITE_APP_COMMIT}>
 						<Link
 							href="https://github.com/NginxProxyManager/nginx-proxy-manager/releases?utm_source=npm"
 							isExternal
 							rel="noopener noreferrer">
-							v{process.env.REACT_APP_VERSION}
+							v{import.meta.env.VITE_APP_VERSION}
 						</Link>
 					</Tooltip>
 				</Stack>

frontend/src/components/HelpDrawer/HelpDrawer.tsx

@@ -8,11 +8,11 @@ import {
 	DrawerBody,
 	useDisclosure,
 } from "@chakra-ui/react";
-import { getLocale } from "locale";
 import { FiHelpCircle } from "react-icons/fi";
 import ReactMarkdown from "react-markdown";
 
-import { getHelpFile } from "../../locale/src/HelpDoc";
+import { getLocale } from "src/locale";
+import { getHelpFile } from "src/locale/src/HelpDoc";
 
 interface HelpDrawerProps {
 	/**

frontend/src/components/Loading.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@chakra-ui/react";
-import { Loader } from "components";
+
+import { Loader } from "src/components";
 
 function Loading() {
 	return (

frontend/src/components/LocalePicker.tsx

@@ -7,14 +7,15 @@ import {
 	MenuList,
 	MenuItem,
 } from "@chakra-ui/react";
-import { Flag } from "components";
-import { useLocaleState } from "context";
+
+import { Flag } from "src/components";
+import { useLocaleState } from "src/context";
 import {
 	changeLocale,
 	getFlagCodeForLocale,
 	intl,
 	localeOptions,
-} from "locale";
+} from "src/locale";
 
 interface LocalPickerProps {
 	onChange?: any;

frontend/src/components/Navigation/Navigation.tsx

@@ -1,5 +1,6 @@
 import { useDisclosure } from "@chakra-ui/react";
-import { NavigationHeader, NavigationMenu } from "components";
+
+import { NavigationHeader, NavigationMenu } from "src/components";
 
 function Navigation() {
 	const {

frontend/src/components/Navigation/NavigationHeader.tsx

@@ -17,13 +17,14 @@ import {
 	useColorModeValue,
 	useDisclosure,
 } from "@chakra-ui/react";
-import { LocalePicker, ThemeSwitcher } from "components";
-import { useAuthState } from "context";
-import { useUser } from "hooks";
-import { intl } from "locale";
-import { ChangePasswordModal, ProfileModal } from "modals";
 import { FiLock, FiLogOut, FiMenu, FiUser, FiX } from "react-icons/fi";
 
+import { LocalePicker, ThemeSwitcher } from "src/components";
+import { useAuthState } from "src/context";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+import { ChangePasswordModal, ProfileModal } from "src/modals";
+
 interface NavigationHeaderProps {
 	mobileNavIsOpen: boolean;
 	toggleMobileNav: () => void;

frontend/src/components/Navigation/NavigationMenu.tsx

@@ -19,7 +19,6 @@ import {
 	Container,
 	useBreakpointValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
 import {
 	FiHome,
 	FiSettings,
@@ -32,6 +31,8 @@ import {
 } from "react-icons/fi";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 
+import { intl } from "src/locale";
+
 interface NavItem {
 	/** Displayed label */
 	label: string;

frontend/src/components/Permissions/AdminPermissionSelector.tsx

@@ -1,7 +1,8 @@
 import { MouseEventHandler } from "react";
 
 import { Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 interface AdminPermissionSelectorProps {
 	selected?: boolean;

frontend/src/components/Permissions/PermissionSelector.tsx

@@ -8,7 +8,8 @@ import {
 	Text,
 	useColorModeValue,
 } from "@chakra-ui/react";
-import { intl } from "locale";
+
+import { intl } from "src/locale";
 
 interface PermissionSelectorProps {
 	capabilities: string[];

frontend/src/components/SiteWrapper.tsx

@@ -1,11 +1,12 @@
 import { useEffect, ReactNode } from "react";
 
 import { Box, Container, useToast } from "@chakra-ui/react";
-import { getSSEToken, SSEMessage } from "api/npm";
-import { Footer, Navigation } from "components";
-import { intl } from "locale";
-import AuthStore from "modules/AuthStore";
-import { useQueryClient } from "react-query";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { getSSEToken, SSEMessage } from "src/api/npm";
+import { Footer, Navigation } from "src/components";
+import { intl } from "src/locale";
+import AuthStore from "src/modules/AuthStore";
 
 interface Props {
 	children?: ReactNode;
@@ -26,7 +27,7 @@ function SiteWrapper({ children }: Props) {
 				const j: SSEMessage = JSON.parse(e.data);
 				if (j) {
 					if (j.affects) {
-						queryClient.invalidateQueries(j.affects);
+						queryClient.invalidateQueries([j.affects]);
 					}
 					if (j.type) {
 						toast({

frontend/src/components/Table/Formatters.tsx

@@ -9,9 +9,10 @@ import {
 	PopoverArrow,
 	PopoverBody,
 } from "@chakra-ui/react";
-import { Monospace, RowAction, RowActionsMenu } from "components";
-import { intl } from "locale";
-import getNiceDNSProvider from "modules/Acmesh";
+
+import { Monospace, RowAction, RowActionsMenu } from "src/components";
+import { intl } from "src/locale";
+import getNiceDNSProvider from "src/modules/Acmesh";
 
 const errorColor = "red.400";
 

frontend/src/components/Table/TableLayout.tsx

@@ -17,8 +17,6 @@ import {
 	Tr,
 	VStack,
 } from "@chakra-ui/react";
-import { TablePagination } from "components";
-import { intl } from "locale";
 import {
 	FiChevronsLeft,
 	FiChevronLeft,
@@ -29,6 +27,9 @@ import {
 	FiX,
 } from "react-icons/fi";
 
+import { TablePagination } from "src/components";
+import { intl } from "src/locale";
+
 export interface TableLayoutProps {
 	pagination: TablePagination;
 	getTableProps: any;
@@ -102,10 +103,11 @@ function TableLayout({
 		<>
 			<Table size="sm" {...getTableProps()}>
 				<Thead>
-					{headerGroups.map((headerGroup: any) => (
-						<Tr {...headerGroup.getHeaderGroupProps()}>
-							{headerGroup.headers.map((column: any) => (
+					{headerGroups.map((headerGroup: any, idx: any) => (
+						<Tr key={idx} {...headerGroup.getHeaderGroupProps()}>
+							{headerGroup.headers.map((column: any, idx2: any) => (
 								<Th
+									key={idx2}
 									userSelect="none"
 									className={column.className}
 									isNumeric={column.isNumeric}>
@@ -134,12 +136,13 @@ function TableLayout({
 				</Thead>
 				<Tbody {...getTableBodyProps()}>
 					{rows.length
-						? rows.map((row: any) => {
+						? rows.map((row: any, idx: any) => {
 								prepareRow(row);
 								return (
-									<Tr {...row.getRowProps()}>
-										{row.cells.map((cell: any) => (
+									<Tr key={idx} {...row.getRowProps()}>
+										{row.cells.map((cell: any, idx2: any) => (
 											<Td
+												key={idx2}
 												{...cell.getCellProps([
 													{
 														className: cell.column.className,

frontend/src/components/Table/TextFilter.tsx

@@ -13,13 +13,14 @@ import {
 	useDisclosure,
 	Select,
 } from "@chakra-ui/react";
-import { PrettyButton } from "components";
 import { Formik, Form, Field } from "formik";
-import { intl } from "locale";
-import { validateString } from "modules/Validations";
 import FocusLock from "react-focus-lock";
 import { FiFilter } from "react-icons/fi";
 
+import { PrettyButton } from "src/components";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
+
 function TextFilter({ column: { filterValue, setFilter } }: any) {
 	const { onOpen, onClose, isOpen } = useDisclosure();
 

frontend/src/components/ThemeSwitcher.tsx

@@ -4,9 +4,10 @@ import {
 	IconButtonProps,
 	useColorMode,
 } from "@chakra-ui/react";
-import { intl } from "locale";
 import { FiSun, FiMoon } from "react-icons/fi";
 
+import { intl } from "src/locale";
+
 interface ThemeSwitcherProps {
 	background?: "normal" | "transparent";
 }

frontend/src/components/Unhealthy.tsx

@@ -1,8 +1,9 @@
 import { Box, Flex, Heading, Text, Stack } from "@chakra-ui/react";
-import { LocalePicker, ThemeSwitcher } from "components";
-import { intl } from "locale";
 import { FaTimes } from "react-icons/fa";
 
+import { LocalePicker, ThemeSwitcher } from "src/components";
+import { intl } from "src/locale";
+
 function Unhealthy() {
 	return (
 		<>