feat: code splitting step

Author: allforabit

src/challenges/step-08-code-splitting.js

@@ -0,0 +1,3 @@
+export const CodeSplittingChallenge = () => {
+  return <></>
+}

src/challenges/step-08-code-splitting/CodeSplittingChallenge.js

@@ -0,0 +1,57 @@
+export const DetailedHelpBox = () => {
+  return (
+    <div style={{ height: '100px', overflowY: 'auto', padding: '10px' }}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta
+        ultricies tincidunt. Vivamus volutpat tincidunt metus, vel pellentesque
+        orci fringilla ac. Sed tempor, augue at tristique posuere, ligula nibh
+        elementum nisi, sed rhoncus nunc mauris vel erat. Curabitur facilisis
+        ligula a orci mollis consequat. Curabitur vel lectus scelerisque,
+        imperdiet augue fermentum, ultricies eros. Nam porta dui at tempor
+        fringilla. Nunc maximus blandit arcu eu rutrum. Nunc in ligula
+        vestibulum lacus facilisis finibus vel eget justo. Maecenas at augue at
+        ligula sodales eleifend. Nunc non nibh sed tortor condimentum
+        sollicitudin. Vivamus efficitur, felis in iaculis vehicula, purus elit
+        rhoncus quam, in scelerisque leo nisl vitae massa. Nulla pellentesque
+        fermentum lacinia. Ut pretium eros vitae erat commodo, sit amet semper
+        sem porttitor. Maecenas a est bibendum, pulvinar purus eget, semper
+        lorem. Donec ut erat rutrum, suscipit est et, elementum massa.
+      </p>
+      <p>
+        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+        inceptos himenaeos. Nam tortor sapien, sodales vel diam at, vehicula
+        varius lectus. Morbi ut nulla at odio dictum consequat eget id mauris.
+        Proin sit amet lectus diam. Pellentesque habitant morbi tristique
+        senectus et netus et malesuada fames ac turpis egestas. Nunc erat
+        ligula, mattis eu dignissim sed, vulputate a metus. Orci varius natoque
+        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed
+        dignissim fringilla augue, eget tincidunt leo tempor vel. Morbi et nunc
+        hendrerit, tempus risus sed, consequat mi. Phasellus tellus enim,
+        sagittis a diam id, pulvinar ullamcorper risus.
+      </p>
+      <p>
+        Mauris feugiat arcu sed elit vestibulum, quis luctus augue tempus.
+        Suspendisse quis maximus dui. Praesent nec lobortis libero. Sed
+        fermentum ornare vestibulum. Quisque aliquam id urna eget viverra.
+        Praesent eget gravida dui. Sed id eros et sem facilisis elementum at in
+        mauris.
+      </p>
+      <p>
+        Integer convallis rutrum dolor sit amet consectetur. Sed feugiat urna
+        vel tristique ornare. Pellentesque at urna vel ex lobortis auctor. Duis
+        consectetur enim eu orci suscipit ornare. Integer pellentesque est sed
+        neque blandit, vel semper purus feugiat. Pellentesque lobortis augue
+        elit, in imperdiet odio sagittis vitae. Cras ultricies faucibus urna eu
+        mattis. Fusce tincidunt lorem ut pulvinar commodo. Mauris eget elementum
+        sapien. Curabitur fringilla fringilla efficitur. Nunc tincidunt dui at
+        varius accumsan. Cras ut convallis felis. Sed pharetra rutrum sem, eget
+        mattis dui aliquam in. Integer ut turpis a eros eleifend imperdiet eu
+        non mi. In vitae ligula et mauris mattis eleifend. Vestibulum sit amet
+        lobortis eros, sed cursus est. Phasellus nisl arcu, facilisis eget nisi
+        non, hendrerit volutpat lorem. Ut vel libero vitae lorem auctor sodales.
+      </p>
+    </div>
+  )
+}
+
+export default DetailedHelpBox

src/components/DetailedHelpBox/DetailedHelpBox.js

@@ -5,6 +5,8 @@ import { useFilterStateChallenge } from '../../challenges/step-02-context/useFil
 import { useMovieQuerySolution } from '../../solutions/step-01-server-state/useMovieQuerySolution.js'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
 import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateChallenge()
@@ -23,6 +25,7 @@ const Step01ServerState = () => {
       <FilterStateProviderChallenge>
         <FilterModalChallenge>
           <FilterFormFinalChallenge />
+          <CodeSplittingChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderChallenge>

src/pages/solutions/step-01-server-state.jsx

@@ -7,6 +7,8 @@ import { MovieList } from '../../components/MovieList/MovieList.jsx'
 import { ErrorBoundaryChallenge } from '../../challenges/step-04-error-boundaries/ErrorBoundaryChallenge'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
 import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge.js'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -25,6 +27,7 @@ const Step02Context = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormFinalChallenge />
+          <CodeSplittingChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-02-context.jsx

@@ -7,6 +7,7 @@ import { FilterFormSolution } from '../../solutions/step-03-uncontrolled-compone
 import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundaryChallenge } from '../../challenges/step-04-error-boundaries/ErrorBoundaryChallenge'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -25,6 +26,7 @@ const Step03UncontrolledComponents = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormSolution />
+          <CodeSplittingChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-03-uncontrolled-components.jsx

@@ -8,6 +8,7 @@ import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/Er
 import { useEffect } from 'react'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
 import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -30,6 +31,7 @@ const Step04ErrorBoundaries = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormFinalChallenge />
+          <CodeSplittingChallenge />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-04-error-boundaries.jsx

@@ -9,6 +9,7 @@ import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/Er
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge'
 import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
 import { FilterFormFinalChallenge } from '../../challenges/step-12-third-party-libs/FilterFormFinalChallenge'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -27,6 +28,7 @@ const Step05Portals = () => {
       <FilterStateProviderSolution>
         <FilterModalSolution>
           <FilterFormSolution />
+          <CodeSplittingChallenge />
         </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-05-portals.jsx

@@ -7,6 +7,7 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
 import { FilterFormWithStyledInputSolution } from '../../solutions/step-06-forwarding-refs/FilterFormWithStyledInputSolution'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -25,6 +26,7 @@ const StepO6ForwardingRefs = () => {
       <FilterStateProviderSolution>
         <FilterModalSolution>
           <FilterFormWithStyledInputSolution />
+          <CodeSplittingChallenge />
         </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-06-forwarding-refs.jsx

@@ -7,6 +7,7 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { FilterFormWithAutofocusSolution } from '../../solutions/step-07-refs-and-the-dom/FilterFormWithAutofocusSolution.js'
 import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
+import { CodeSplittingChallenge } from '../../challenges/step-08-code-splitting/CodeSplittingChallenge.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -25,6 +26,7 @@ const Step07RefsAndTheDom = () => {
       <FilterStateProviderSolution>
         <FilterModalSolution>
           <FilterFormWithAutofocusSolution />
+          <CodeSplittingChallenge />
         </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-07-refs-and-the-dom.jsx

@@ -3,20 +3,16 @@ import {
   FilterStateProviderSolution,
   useFilterStateSolution
 } from '../../solutions/step-02-context/FilterStateContextSolution.jsx'
-import { FilterFormSolution } from '../../solutions/step-03-uncontrolled-components/FilterFormSolution'
 import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
-import { useEffect } from 'react'
-import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { FilterFormWithAutofocusSolution } from '../../solutions/step-07-refs-and-the-dom/FilterFormWithAutofocusSolution'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
+import { FilterModalSolution } from '../../solutions/step-05-portals/FilterModalSolution'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
   const movieQuery = useMovieQuerySolution(filterState)
 
-  useEffect(() => {
-    throw new Error("I'm an error")
-  }, [])
-
   if (!movieQuery.data) {
     return null
   }
@@ -28,9 +24,10 @@ const Step08CodeSplitting = () => {
   return (
     <ErrorBoundarySolution>
       <FilterStateProviderSolution>
-        <FilterModalChallenge>
-          <FilterFormSolution />
-        </FilterModalChallenge>
+        <FilterModalSolution>
+          <FilterFormWithAutofocusSolution />
+          <CodeSplittingSolution />
+        </FilterModalSolution>
         <MovieListContainer />
       </FilterStateProviderSolution>
     </ErrorBoundarySolution>

src/pages/solutions/step-08-code-splitting.jsx

@@ -8,15 +8,12 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { useEffect } from 'react'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
   const movieQuery = useMovieQuerySolution(filterState)
 
-  useEffect(() => {
-    throw new Error("I'm an error")
-  }, [])
-
   if (!movieQuery.data) {
     return null
   }
@@ -30,6 +27,7 @@ const Step09ListVirtualization = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormSolution />
+          <CodeSplittingSolution />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-09-list-virtualization.jsx

@@ -8,15 +8,12 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { useEffect } from 'react'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
   const movieQuery = useMovieQuerySolution(filterState)
 
-  useEffect(() => {
-    throw new Error("I'm an error")
-  }, [])
-
   if (!movieQuery.data) {
     return null
   }
@@ -30,6 +27,7 @@ const Step10UseMemoUseCallbackMemo = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormSolution />
+          <CodeSplittingSolution />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-10-usememo-usecallback-memo.jsx

@@ -8,6 +8,7 @@ import { MovieList } from '../../components/MovieList/MovieList'
 import { ErrorBoundarySolution } from '../../solutions/step-04-error-boundary/ErrorBoundarySolution'
 import { useEffect } from 'react'
 import { FilterModalChallenge } from '../../challenges/step-05-portals/FilterModalChallenge.js'
+import { CodeSplittingSolution } from '../../solutions/step-08-code-splitting/CodeSplitttingSolution.js'
 
 const MovieListContainer = () => {
   const filterState = useFilterStateSolution()
@@ -30,6 +31,7 @@ const Step11Ssr = () => {
       <FilterStateProviderSolution>
         <FilterModalChallenge>
           <FilterFormSolution />
+          <CodeSplittingSolution />
         </FilterModalChallenge>
         <MovieListContainer />
       </FilterStateProviderSolution>

src/pages/solutions/step-11-ssr.jsx

@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react'
+
+const HelpBox = React.lazy(() =>
+  import('../../components/DetailedHelpBox/DetailedHelpBox')
+)
+
+export const CodeSplittingSolution = () => {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <HelpBox />
+    </Suspense>
+  )
+}