(frontend) imrpove typing of props.children

Author: enchant97

frontend/src/MainApp.tsx

@@ -1,5 +1,5 @@
 import { useParams, A } from '@solidjs/router';
-import { Component, For, Show, createResource, createSignal } from 'solid-js';
+import { Component, For, ParentProps, Show, createResource, createSignal } from 'solid-js';
 import Header from './components/header';
 import { useApi } from './contexts/ApiProvider';
 import { DrawerProvider } from './contexts/DrawerProvider';
@@ -30,7 +30,7 @@ function performBookOrNoteSort(rows: Note[] | Book[], method: SortChoice) {
   }
 }
 
-const MainApp: Component = (props) => {
+const MainApp: Component<ParentProps> = (props) => {
   const params = useParams()
   const { api } = useApi()
   const { pushToast } = useToast()

frontend/src/components/modals/base.tsx

@@ -1,8 +1,7 @@
-import type { Component, JSX } from 'solid-js';
+import type { Component, ParentProps } from 'solid-js';
 
-type BaseModalProps = {
+type BaseModalProps = ParentProps & {
   title: string
-  children: JSX.Element
 }
 
 const BaseModal: Component<BaseModalProps> = (props) => {

frontend/src/components/show_or_redirect.tsx

@@ -1,10 +1,9 @@
-import { JSX, Show } from "solid-js";
+import { ParentProps, Show } from "solid-js";
 import Redirect from "./redirect";
 
-type ShowOrRedirectProps = {
+type ShowOrRedirectProps = ParentProps & {
   when: () => boolean
   redirectTo: string
-  children: JSX.Element
 }
 
 export default function ShowOrRedirect(props: ShowOrRedirectProps) {

frontend/src/components/with_api_select.tsx

@@ -1,13 +1,9 @@
-import { Component, JSX, createSignal, onMount } from "solid-js";
+import { Component, ParentProps, createSignal, onMount } from "solid-js";
 import { useApi } from "../contexts/ApiProvider";
 import { ToastType, useToast } from "../contexts/ToastProvider";
 import Api from "../core/api";
 
-type WithApiSelectProps = {
-  children: JSX.Element
-}
-
-const WithApiSelect: Component<WithApiSelectProps> = (props) => {
+const WithApiSelect: Component<ParentProps> = (props) => {
   const { apiDetails, setApiDetails } = useApi()
   const { pushToast } = useToast()
   const [apiUrl, setApiUrl] = createSignal(apiDetails().apiServer)

frontend/src/contexts/DrawerProvider.tsx

@@ -1,4 +1,4 @@
-import { JSX, createContext, useContext } from "solid-js"
+import { ParentProps, createContext, useContext } from "solid-js"
 import { optionExpect } from "../core/core"
 import { Book, Note } from "../core/types"
 
@@ -20,8 +20,7 @@ export const useDrawer = () => {
   return optionExpect(ctx, "current drawer context was undefined")
 }
 
-type DrawerProviderProps = DrawerContextProps & {
-  children: JSX.Element
+type DrawerProviderProps = DrawerContextProps & ParentProps & {
 }
 
 export const DrawerProvider = (props: DrawerProviderProps) => {

frontend/src/wrapper.tsx

@@ -2,8 +2,9 @@ import { ToastProvider, Toasts } from "./contexts/ToastProvider";
 import { Modal, ModalProvider } from "./contexts/ModalProvider";
 import { ApiProvider } from "./contexts/ApiProvider";
 import { CurrentUserProvider } from "./contexts/CurrentUserProvider";
+import { ParentProps } from "solid-js";
 
-export default function Wrapper(props) {
+export default function Wrapper(props: ParentProps) {
   return (
     <ToastProvider>
       <Toasts />