Fix props type errors

Author: zwliew

website/src/entry/App.tsx

@@ -1,6 +1,7 @@
 import { Store } from 'redux';
 
 import * as React from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -18,7 +19,7 @@ type Props = {
   persistor: Persistor;
 };
 
-const App: React.FC<Props> = ({ store, persistor }) => {
+const App: FC<PropsWithChildren<Props>> = ({ store, persistor }) => {
   const onBeforeLift = () => {
     const { theme, settings } = store.getState();
 

website/src/entry/export/TimetableOnly.tsx

@@ -43,6 +43,7 @@ export default class TimetableOnly extends Component<Props, State> {
               semester={semester}
               timetable={timetable}
               colors={timetableColors}
+              hiddenImportedModules={null}
               readOnly
             />
           </div>

website/src/entry/main.tsx

@@ -26,6 +26,9 @@ subscribeOnlineEvents(store);
 ReactModal.setAppElement('#app');
 
 const container = document.getElementById('app');
+if (!container) {
+  throw new Error('#app element not found');
+}
 const root = createRoot(container);
 root.render(<App store={store} persistor={persistor} />);
 

website/src/views/AppShell.tsx

@@ -1,4 +1,5 @@
-import { FC, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import type { SemTimetableConfig } from 'types/timetables';
 import type { Semester } from 'types/modules';
 import { DARK_COLOR_SCHEME } from 'types/settings';
@@ -103,7 +104,7 @@ function useFetchModuleListAndTimetableModules(): {
   };
 }
 
-const AppShell: FC = ({ children }) => {
+const AppShell: FC<PropsWithChildren> = ({ children }) => {
   const { moduleListError, refetchModuleListAndTimetableModules } =
     useFetchModuleListAndTimetableModules();
 

website/src/views/components/Modal.tsx

@@ -1,4 +1,5 @@
-import { FC, useCallback, useLayoutEffect, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import ReactModal, { Props as ModalProps } from 'react-modal';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import classnames from 'classnames';
@@ -13,7 +14,7 @@ type Props = ModalProps & {
   animate?: boolean;
 };
 
-const Modal: FC<Props> = ({
+const Modal: FC<PropsWithChildren<Props>> = ({
   isOpen,
   overlayClassName,
   className,
@@ -27,7 +28,7 @@ const Modal: FC<Props> = ({
   // `contentRef`, `contentRef` needs to be stored in component state, even if
   // this causes additional renders.
   const [modalContent, setModalContent] = useState<HTMLDivElement | undefined>();
-  const contentRefCallback = useCallback((node) => setModalContent(node), []);
+  const contentRefCallback = useCallback((node: HTMLDivElement) => setModalContent(node), []);
 
   // Disable body scrolling if modal is open, but allow modal to scroll.
   useLayoutEffect(() => {

website/src/views/components/Tooltip/index.tsx

@@ -38,7 +38,7 @@ const TooltipGroup = React.memo<TooltipGroupProps>(({ children, ...props }) => {
   if (!AsyncTooltipGroup) {
     // cast needed because TooltipGroupProps types children as React.ReactElement which is not
     // compatible with the return type of React.FC, React.ReactElement
-    return children as React.ReactElement;
+    return children;
   }
 
   return <AsyncTooltipGroup {...props}>{children}</AsyncTooltipGroup>;

website/src/views/components/filters/FilterContainer.tsx

@@ -3,7 +3,11 @@ import { PanelProps } from 'searchkit';
 
 import styles from './styles.scss';
 
-const FilterContainer: React.FC<PanelProps> = ({ disabled, title, children }) => {
+const FilterContainer: React.FC<React.PropsWithChildren<PanelProps>> = ({
+  disabled,
+  title,
+  children,
+}) => {
   if (disabled) return null;
 
   return (

website/src/views/components/map/LeafletControl.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 
 /**
  * Classes used by Leaflet to position controls.
@@ -19,7 +19,10 @@ type MapCustomControlProps = {
  *
  * See: https://github.com/LiveBy/react-leaflet-control/issues/44#issuecomment-723469330
  */
-const LeafletControl: FC<MapCustomControlProps> = ({ position = 'topleft', children }) => (
+const LeafletControl: FC<PropsWithChildren<MapCustomControlProps>> = ({
+  position = 'topleft',
+  children,
+}) => (
   <div className={POSITION_CLASSES[position]}>
     <div className="leaflet-control leaflet-bar">{children}</div>
   </div>

website/src/views/errors/ErrorBoundary.test.tsx

@@ -18,7 +18,7 @@ jest.mock(
 const error = new Error('Test error');
 
 // Stateless React component which throws error
-const ThrowsError: React.FC<unknown> = (): never => {
+const ThrowsError: React.FC<React.PropsWithChildren> = (): never => {
   throw error;
 };
 

website/src/views/static/StaticPage.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import classnames from 'classnames';
 
 import Title from 'views/components/Title';
@@ -9,7 +9,7 @@ type Props = {
   className?: string;
 };
 
-const StaticPage: FC<Props> = ({ title, className, children }) => {
+const StaticPage: FC<PropsWithChildren<Props>> = ({ title, className, children }) => {
   useScrollToTop();
   return (
     <div className={classnames('page-container', className)}>