Upgrade react (#304)

* Update FC definitions and versions

* Sort out dependencies

* Use typed dispatch and remove React.FC

* Bump

* Type the thunk correctly

* Version bump

core/components/chapter.tsx

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux'
 
 import { setSectionCount } from 'core/features/navigation'
 import { getChapter } from 'core/util'
-import { RootState, TocItem } from 'core/types'
+import { ReactFCC, RootState, TocItem } from 'core/types'
 
 type ContextProps = {
     filename: string
@@ -43,7 +43,7 @@ export interface ChapterType {
  * @param showOnlyCurrentSection Whether to show all sections up to the current (the default) or to only show the current
  * @returns the chapter
  */
-const Chapter: React.FC<ChapterType> = ({ children, filename, showOnlyCurrentSection = false }) => {
+const Chapter: ReactFCC<ChapterType> = ({ children, filename, showOnlyCurrentSection = false }) => {
     const [thisFilename] = React.useState({ filename })
 
     const item = useChapterSetup(filename, React.Children.count(children))

core/components/choice.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
 
-import { WidgetType, RootState, Next, Option, Options, NextType } from 'core/types'
+import {
+    WidgetType,
+    Next,
+    Option,
+    Options,
+    NextType,
+    useAppDispatch,
+    useAppSelector
+} from 'core/types'
 
 import { ChapterContext } from 'core/components/chapter'
 import { InlineListEN } from 'core/components/widgets/inline-list'
@@ -40,8 +47,8 @@ const Choice = ({
     defaultOption = null,
     className = null
 }: ChoiceProps): JSX.Element => {
-    const dispatch = useDispatch()
-    const choice = useSelector((state: RootState) => {
+    const dispatch = useAppDispatch()
+    const choice = useAppSelector((state) => {
         return state.choices.present
     })
     React.useEffect(() => {
@@ -76,10 +83,10 @@ const MutableChoice = ({
     last,
     className
 }: ChoiceProps): JSX.Element => {
-    const dispatch = useDispatch()
+    const dispatch = useAppDispatch()
     const { filename } = React.useContext(ChapterContext)
 
-    const choice = useSelector((state: RootState) => {
+    const choice = useAppSelector((state) => {
         return state.choices.present[tag]
     })
     const [inventory] = useInventory([tag])

core/components/link.tsx

@@ -25,6 +25,7 @@ const Link = ({ text, handler, tag }: LinkProps): JSX.Element => {
                     e.preventDefault()
                     const target = e.target as HTMLInputElement
                     const option = target.textContent
+                    console.log(option)
                     handler(option)
                 }}
                 dangerouslySetInnerHTML={{ __html: text }}

core/components/section.tsx

@@ -1,9 +1,11 @@
+import { ReactFCC } from 'core/types'
 import * as React from 'react'
 
 export type SectionType = {
     className?: string
+    children: React.ReactNode
 }
-const Section: React.FC<SectionType> = ({ children, className = '' }) => {
+const Section: ReactFCC<SectionType> = ({ children, className = '' }) => {
     return <section className={`windrift--section ${className}`}>{children}</section>
 }
 Section.displayName = 'Section'

core/components/ui/fadein.tsx

@@ -1,7 +1,9 @@
 import { Transition, AnimatedComponent, animated, config } from '@react-spring/web'
+import { ReactFCC } from 'core/types'
 
 interface Props {
     wrapper?: AnimatedComponent<any>
+    children: React.ReactNode
 }
 /**
  * Animate a fade-in transition for a single React node. This is typically used inside a <Response>.
@@ -11,7 +13,7 @@ interface Props {
  * @param wrapper The animated HTML element type that will wrap the children; defaults to <span>
  * @returns
  */
-const FadeIn: React.FC<Props> = ({ children, wrapper = animated('span') }) => {
+const FadeIn: ReactFCC<Props> = ({ children, wrapper = animated('span') }) => {
     const AnimatedContent = wrapper
     return (
         <Transition

core/components/ui/layouts/grid.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head'
 
 import ResetButton from 'core/components/ui/reset-button'
 import { StoryContext } from 'core/containers/store-container'
+import { ReactFCC } from 'core/types'
 
 export type GridProps = {
     /**
@@ -26,6 +27,8 @@ export type GridProps = {
      * import styles from 'public/stories/manual/styles/Index.module.scss'
      */
     styles?: Record<string, string>
+
+    children: React.ReactNode
 }
 
 /**
@@ -36,7 +39,7 @@ export type GridProps = {
  * @see stories/manual/index for an example implementation
  *
  */
-const Grid: React.FC<GridProps> = ({ children, head, header, left, right, styles }) => {
+const Grid: ReactFCC<GridProps> = ({ children, head, header, left, right, styles }) => {
     const { config } = React.useContext(StoryContext)
 
     return (

core/components/ui/layouts/minimal.tsx

@@ -12,7 +12,10 @@ import { StoryContext } from 'core/containers/store-container'
  *
  * Does not inject any styles properties; assumes they are all defined externally.
  */
-const Minimal: React.FC = ({ children }) => {
+type Props = {
+    children: React.ReactNode
+}
+const Minimal = ({ children }: Props): JSX.Element => {
     const { config } = React.useContext(StoryContext)
     return (
         <>

core/components/ui/reset-button.tsx

@@ -33,8 +33,9 @@ export const resetStory = (
 }
 type ResetType = {
     message?: string
+    children?: React.ReactNode
 }
-const ResetButton: React.FC<ResetType> = ({ children = 'Reset', message }) => {
+const ResetButton = ({ children = 'Reset', message }: ResetType): JSX.Element => {
     const { persistor, config } = React.useContext(StoryContext)
     const router = useRouter()
     return (

core/components/when.tsx

@@ -3,9 +3,10 @@ import * as React from 'react'
 interface WhenProps {
     condition: any
     otherwise?: React.ReactNode
+    children?: React.ReactNode
 }
 
-const When: React.FC<WhenProps> = ({ children, condition, otherwise }): JSX.Element => {
+const When = ({ children, condition, otherwise }: WhenProps): JSX.Element => {
     // eslint-disable-next-line no-extra-boolean-cast
     if (!!condition) {
         return <>{children}</>

core/containers/store-container.tsx

@@ -17,7 +17,7 @@ import { configureStore } from '@reduxjs/toolkit'
 
 import reducers from 'core/features'
 import { Config, Toc } from 'core/types'
-import dynamic from 'next/dynamic'
+import dynamic, { DynamicOptions } from 'next/dynamic'
 import { Provider } from 'react-redux'
 import { Story } from 'core/components'
 import StoryContainer from 'core/containers/story-container'
@@ -33,14 +33,15 @@ type ContextProps = {
     config: Config
 }
 
-const StoreContainer = ({ config, toc }: StoreProps): JSX.Element => {
+function initStore(config: Config, toc: Toc) {
     const persistConfig = {
         key: config.identifier,
         storage: storage,
         blacklist: ['config']
     }
     const persistedReducers = persistReducer(persistConfig, reducers)
-    const store = configureStore({
+
+    return configureStore({
         reducer: persistedReducers,
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({
@@ -65,9 +66,18 @@ const StoreContainer = ({ config, toc }: StoreProps): JSX.Element => {
         },
         devTools: true
     })
+}
+
+const StoreContainer = ({ config, toc }: StoreProps): JSX.Element => {
+    const store = initStore(config, toc)
     const persistor = persistStore(store)
 
-    const Index = dynamic(() => import(`../../stories/${config.identifier}/index`))
+    const Index = dynamic(
+        import(`../../stories/${config.identifier}/index`) as DynamicOptions<
+            Record<string, unknown>
+        >,
+        {}
+    )
 
     return (
         <Provider store={store}>
@@ -84,3 +94,7 @@ const StoreContainer = ({ config, toc }: StoreProps): JSX.Element => {
     )
 }
 export default StoreContainer
+
+export type Store = ReturnType<typeof initStore>
+export type AppDispatch = Store['dispatch']
+export type RootState = ReturnType<Store['getState']>

core/features/choice.ts

@@ -1,11 +1,12 @@
 import undoable, { excludeAction } from 'redux-undo'
-import { createSlice, Dispatch, PayloadAction } from '@reduxjs/toolkit'
+import { AnyAction, createSlice, Dispatch, PayloadAction, ThunkAction } from '@reduxjs/toolkit'
 import { v4 as uuidv4 } from 'uuid'
 import { update as updateInventory } from 'core/features/inventory'
 import { update as logUpdate } from 'core/features/log'
 import { Tag, ENTRY_TYPES, Next, Config, NextType, RootState } from 'core/types'
 import { gotoChapter, incrementSection } from 'core/features/navigation'
 import { increment } from 'core/features/counter'
+import { AppDispatch } from 'core/containers/store-container'
 
 export type Option = string
 export type OptionGroup = Array<Option>
@@ -34,8 +35,13 @@ interface OptionAdvancePayload {
 const initialState: ChoiceState = null
 
 export const makeChoice =
-    (tag: Tag, option: Option, next?: NextType, filename?: string) =>
-    (dispatch: Dispatch, getState: () => RootState, config: Config): void => {
+    (
+        tag: Tag,
+        option: Option,
+        next?: NextType,
+        filename?: string
+    ): ThunkAction<void, RootState, unknown, AnyAction> =>
+    (dispatch: AppDispatch, getState: () => RootState, config: Config): void => {
         const choiceId = uuidv4()
 
         dispatch(updateInventory({ tag, option }))

core/features/index.ts

@@ -13,5 +13,4 @@ const rootReducer = combineReducers({
     log
 })
 
-export type RootState = ReturnType<typeof rootReducer>
 export default rootReducer

core/types.ts

@@ -1,8 +1,12 @@
 /* Re-export common types */
 
+import { AppDispatch, RootState } from 'core/containers/store-container'
+import { PropsWithChildren } from 'react'
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+
 export type { Option, Options, OptionGroup } from 'core/features/choice'
 export { ENTRY_TYPES } from 'core/features/log'
-export type { RootState } from 'core/features'
+export type { RootState } from 'core/containers/store-container'
 export { Next } from 'core/features/navigation'
 export type { NextType } from 'core/features/navigation'
 export type { CounterState } from 'core/features/counter'
@@ -61,4 +65,8 @@ export type Toc = {
     [c: string]: TocItem
 }
 
-export type PageType = React.FC
+export type ReactFCC<P = Record<string, unknown>> = React.FC<PropsWithChildren<P>>
+export type PageType = ReactFCC
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector