Use default interface for props with children (#1433)

src/client/src/auth/AuthOverlay.tsx

@@ -1,24 +1,21 @@
-import React, { useEffect } from "react";
+import { FC, PropsWithChildren, useEffect } from "react";
 import { useAuth } from "react-oidc-context";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Alert, Button, CircularProgress } from "@mui/material";
 import { loadUser } from "../api-lib";
 import { SplashScreen } from "./SplashScreen.tsx";
 
-interface AuthOverlayProps {
-  children?: React.ReactNode;
-}
-
 interface User {
   data: object;
   error?: string;
 }
+
 interface ReduxState {
   core_user: User;
 }
 
-export const AuthOverlay: React.FC<AuthOverlayProps> = ({ children }) => {
+export const AuthOverlay: FC<PropsWithChildren> = ({ children }) => {
   const auth = useAuth();
   const dispatch = useDispatch();
   const user = useSelector<ReduxState, User>(state => state.core_user);

src/client/src/auth/SplashScreen.tsx

@@ -1,15 +1,11 @@
-import React from "react";
+import { FC, PropsWithChildren } from "react";
 import { Stack, Typography } from "@mui/material";
 import styled from "@mui/material/styles/styled";
 import TranslationKeys from "./translationKeys";
 import { useTranslation } from "react-i18next";
 import { theme } from "../AppTheme.ts";
 
-interface AuthOverlayProps {
-  children?: React.ReactNode;
-}
-
-export const SplashScreen: React.FC<AuthOverlayProps> = ({ children }) => {
+export const SplashScreen: FC<PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation();
 
   const OuterContainer = styled("div")({

src/client/src/components/alert/alertContext.tsx

@@ -1,6 +1,6 @@
-import { createContext, FC, useEffect, useState } from "react";
+import { createContext, FC, PropsWithChildren, useEffect, useState } from "react";
 import { AlertColor } from "@mui/material";
-import { AlertContextInterface, AlertOptions, AlertProviderProps } from "./alertInterfaces";
+import { AlertContextInterface, AlertOptions } from "./alertInterfaces";
 
 export const AlertContext = createContext<AlertContextInterface>({
   alertIsOpen: false,
@@ -11,7 +11,7 @@ export const AlertContext = createContext<AlertContextInterface>({
   closeAlert: () => {},
 });
 
-export const AlertProvider: FC<AlertProviderProps> = ({ children }) => {
+export const AlertProvider: FC<PropsWithChildren> = ({ children }) => {
   const [currentAlert, setCurrentAlert] = useState<AlertOptions>();
   const [alerts, setAlerts] = useState<AlertOptions[]>([]);
 

src/client/src/components/alert/alertInterfaces.ts

@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { AlertColor } from "@mui/material";
 
 export interface AlertContextInterface {
@@ -15,7 +14,3 @@ export interface AlertOptions {
   severity?: AlertColor;
   allowAutoHide?: boolean;
 }
-
-export interface AlertProviderProps {
-  children: ReactNode;
-}

src/client/src/components/basemapSelector/basemapContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from "react";
+import { createContext, FC, PropsWithChildren, useState } from "react";
 
 interface BasemapContextType {
   currentBasemapName: string;
@@ -10,7 +10,7 @@ export const BasemapContext = createContext<BasemapContextType>({
   setBasemapName: () => {},
 });
 
-export const BasemapProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const BasemapProvider: FC<PropsWithChildren> = ({ children }) => {
   const [currentBasemapName, setCurrentBasemapName] = useState<string>("ch.swisstopo.pixelkarte-farbe");
 
   const setBasemapName = (layerName: string) => {

src/client/src/components/prompt/promptContext.tsx

@@ -1,5 +1,5 @@
-import { createContext, FC, useState } from "react";
-import { PromptAction, PromptContextInterface, PromptOptions, PromptProviderProps } from "./promptInterface";
+import { createContext, FC, PropsWithChildren, useState } from "react";
+import { PromptAction, PromptContextInterface, PromptOptions } from "./promptInterface";
 
 export const PromptContext = createContext<PromptContextInterface>({
   message: "",
@@ -9,7 +9,7 @@ export const PromptContext = createContext<PromptContextInterface>({
   closePrompt: () => {},
 });
 
-export const PromptProvider: FC<PromptProviderProps> = ({ children }) => {
+export const PromptProvider: FC<PropsWithChildren> = ({ children }) => {
   const [prompt, setPrompt] = useState<PromptOptions>();
 
   const showPrompt = (message: string, actions: PromptAction[]) => {

src/client/src/components/prompt/promptInterface.ts

@@ -1,16 +1,11 @@
-import * as React from "react";
 import { ReactNode } from "react";
 
-export interface PromptProviderProps {
-  children: ReactNode;
-}
-
 export interface PromptAction {
   label: string;
   disabled?: boolean;
   action?: () => void;
   variant?: "text" | "contained" | "outlined";
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 export interface PromptContextInterface {

src/client/src/pages/overview/sidePanelContent/filter/filterContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useState } from "react";
+import { createContext, FC, PropsWithChildren, useState } from "react";
 import Polygon from "ol/geom/Polygon";
 
 interface FilterContextInterface {
@@ -12,10 +12,6 @@ interface FilterContextInterface {
   setActiveFilterLength: (length: number) => void;
 }
 
-interface FilterProviderProps {
-  children: ReactNode;
-}
-
 export const FilterContext = createContext<FilterContextInterface>({
   filterPolygon: null,
   setFilterPolygon: () => {},
@@ -27,7 +23,7 @@ export const FilterContext = createContext<FilterContextInterface>({
   setActiveFilterLength: () => {},
 });
 
-export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
+export const FilterProvider: FC<PropsWithChildren> = ({ children }) => {
   const [filterPolygon, setFilterPolygon] = useState<Polygon | null>(null);
   const [polygonSelectionEnabled, setPolygonSelectionEnabled] = useState(false);
   const [featureIds, setFeatureIds] = useState<number[]>([]);