[#286] Don't allow server-side initialization of any pages (#287)

core/components/index.ts

@@ -1,7 +1,6 @@
 export * from './link'
 
 export { default as Story } from './story'
-export { default as StoryContainer } from './story-container'
 export { default as Section } from './section'
 export { default as Chapter } from './chapter'
 export { default as Counter } from './counter'

core/components/ui/layouts/grid.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Head from 'next/head'
 
 import ResetButton from 'core/components/ui/reset-button'
-import { StoryContext } from 'pages/[story]/[[...chapter]]'
+import { StoryContext } from 'core/containers/store-container'
 
 export type GridProps = {
     /**

core/components/ui/layouts/minimal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { StoryContext } from 'pages/[story]/[[...chapter]]'
+import { StoryContext } from 'core/containers/store-container'
 
 /**
  * A minimal HTML layout for non-traditional UIs or heavily customized layout.

core/components/ui/reset-button.tsx

@@ -3,7 +3,7 @@ import { Persistor } from 'redux-persist'
 import { NextRouter, useRouter } from 'next/router'
 
 import { Config } from 'core/types'
-import { StoryContext } from 'pages/[story]/[[...chapter]]'
+import { StoryContext } from 'core/containers/store-container'
 
 /* Reset the story and remove the local storage */
 export const resetStory = (

core/containers/store-container.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+
+import {
+    persistStore,
+    persistReducer,
+    Persistor,
+    FLUSH,
+    REHYDRATE,
+    PAUSE,
+    PERSIST,
+    PURGE,
+    REGISTER
+} from 'redux-persist'
+import { PersistGate } from 'redux-persist/integration/react'
+import storage from 'redux-persist/lib/storage'
+import { configureStore } from '@reduxjs/toolkit'
+
+import reducers from 'core/features'
+import { Config, Toc } from 'core/types'
+import dynamic from 'next/dynamic'
+import { Provider } from 'react-redux'
+import { Story } from 'core/components'
+import StoryContainer from 'core/containers/story-container'
+
+export interface StoreProps {
+    config: Config
+    toc: Toc
+}
+export const StoryContext = React.createContext<Partial<ContextProps>>({})
+
+type ContextProps = {
+    persistor: Persistor
+    config: Config
+}
+
+const StoreContainer = ({ config, toc }: StoreProps): JSX.Element => {
+    const persistConfig = {
+        key: config.identifier,
+        storage: storage,
+        blacklist: ['config']
+    }
+    const persistedReducers = persistReducer(persistConfig, reducers)
+    const store = configureStore({
+        reducer: persistedReducers,
+        middleware: (getDefaultMiddleware) =>
+            getDefaultMiddleware({
+                serializableCheck: {
+                    ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+                },
+                thunk: {
+                    extraArgument: { config }
+                }
+            }),
+        preloadedState: {
+            navigation: {
+                past: [],
+                present: { toc },
+                future: []
+            },
+            choices: {
+                past: [],
+                present: {},
+                future: []
+            }
+        },
+        devTools: true
+    })
+    const persistor = persistStore(store)
+
+    const Index = dynamic(() => import(`../../stories/${config.identifier}/index`))
+
+    return (
+        <Provider store={store}>
+            <PersistGate persistor={persistor}>
+                <StoryContainer config={config}>
+                    <StoryContext.Provider value={{ persistor, config }}>
+                        <Index>
+                            <Story story={config.identifier} />
+                        </Index>
+                    </StoryContext.Provider>
+                </StoryContainer>
+            </PersistGate>
+        </Provider>
+    )
+}
+export default StoreContainer

package.json

@@ -1,6 +1,6 @@
 {
     "name": "windrift",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "private": true,
     "scripts": {
         "build": "next build",

pages/[story]/[[...chapter]].tsx

@@ -11,28 +11,10 @@ import * as React from 'react'
 import fs from 'fs'
 import path from 'path'
 import yaml from 'js-yaml'
-import { configureStore } from '@reduxjs/toolkit'
-import { Provider } from 'react-redux'
-import {
-    persistStore,
-    persistReducer,
-    Persistor,
-    FLUSH,
-    REHYDRATE,
-    PAUSE,
-    PERSIST,
-    PURGE,
-    REGISTER
-} from 'redux-persist'
-import { PersistGate } from 'redux-persist/integration/react'
-import storage from 'redux-persist/lib/storage'
-
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { GetStaticProps, GetStaticPaths } from 'next'
-import dynamic from 'next/dynamic'
 
-import reducers from 'core/features'
-import { Story, StoryContainer } from 'core/components'
 import { Config, Toc, TocItem } from 'core/types'
 import { getChapter } from 'core/util'
 
@@ -85,12 +67,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
     return { paths, fallback: false }
 }
 
-type ContextProps = {
-    persistor: Persistor
-    config: Config
-}
-export const StoryContext = React.createContext<Partial<ContextProps>>({})
-
 export default function Start(props: WindriftProps): JSX.Element {
     const router = useRouter()
     const { story, chapter } = router.query
@@ -104,11 +80,6 @@ export default function Start(props: WindriftProps): JSX.Element {
         configYaml.extra
     )
 
-    const persistConfig = {
-        key: config.identifier,
-        storage: storage,
-        blacklist: ['config']
-    }
     if (chapter) {
         const chapters = Object.values(toc)
         chapters.filter((i) => i.visible).forEach((i) => (i.visible = false))
@@ -118,46 +89,8 @@ export default function Start(props: WindriftProps): JSX.Element {
     else if (config.players && config.players.length === 1) {
         getChapter(toc, config.players[0].start).visible = true
     }
-    const persistedReducers = persistReducer(persistConfig, reducers)
-
-    const store = configureStore({
-        reducer: persistedReducers,
-        middleware: (getDefaultMiddleware) =>
-            getDefaultMiddleware({
-                serializableCheck: {
-                    ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
-                },
-                thunk: {
-                    extraArgument: { config }
-                }
-            }),
-        preloadedState: {
-            navigation: {
-                past: [],
-                present: { toc },
-                future: []
-            },
-            choices: {
-                past: [],
-                present: {},
-                future: []
-            }
-        }
+    const StoreContainer = dynamic(() => import(`../../core/containers/store-container`), {
+        ssr: false
     })
-    const persistor = persistStore(store)
-
-    const Index = dynamic(() => import(`../../stories/${story}/index`))
-    return (
-        <Provider store={store}>
-            <PersistGate persistor={persistor}>
-                <StoryContainer config={config}>
-                    <StoryContext.Provider value={{ persistor, config }}>
-                        <Index>
-                            <Story story={story as string} />
-                        </Index>
-                    </StoryContext.Provider>
-                </StoryContainer>
-            </PersistGate>
-        </Provider>
-    )
+    return <StoreContainer toc={toc} config={config} />
 }

stories/manual/table-of-contents.tsx

@@ -9,7 +9,7 @@ import { Nav } from 'core/components'
 import { RootState } from 'core/types'
 
 import styles from 'public/stories/manual/styles/Index.module.scss'
-import { StoryContext } from 'pages/[story]/[[...chapter]]'
+import { StoryContext } from 'core/containers/store-container'
 
 const TableOfContents = (): JSX.Element => {
     const { config } = React.useContext(StoryContext)