Separate refs from large sections

source-academy · Jun 21, 2021 · 1c1728f · 1c1728f
1 parent 09951fc
commit 1c1728f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
@@ -42,7 +42,8 @@ const handleFootnote = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   return (
     <div>
       {obj['count'] === 1 && <hr />}
-      <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-footnote">
+      <div className="sicp-footnote">
+        <div ref={ref => (refs.current[obj['id']!] = ref)} />
         <a href={obj['href']}>{'[' + obj['count'] + '] '}</a>
         {parseArr(obj['child']!, refs)}
       </div>
@@ -113,7 +114,8 @@ const handleSnippet = (obj: JsonType) => {
 };
 
 const handleFigure = (obj: JsonType, refs: React.MutableRefObject<{}>) => (
-  <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-figure">
+  <div className="sicp-figure">
+    <div ref={ref => (refs.current[obj['id']!] = ref)} />
     {handleImage(obj, refs)}
     {obj['captionName'] && (
       <h5 className="sicp-caption">
@@ -152,7 +154,8 @@ const handleTD = (obj: JsonType, refs: React.MutableRefObject<{}>, index: intege
 
 const handleExercise = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
   return (
-    <div ref={ref => (refs.current[obj['id']!] = ref)}>
+    <div>
+      <div ref={ref => (refs.current[obj['id']!] = ref)} />
       <SicpExercise
         title={obj['title']!}
         body={parseArr(obj['child']!, refs)}
@@ -253,7 +256,8 @@ export const processingFunctions = {
 
   TEXT: (obj: JsonType, refs: React.MutableRefObject<{}>) => (
     <>
-      <div ref={ref => (refs.current[obj['id']!] = ref)} className="sicp-text">
+      <div className="sicp-text">
+        <div ref={ref => (refs.current[obj['id']!] = ref)} />
         {parseArr(obj['child']!, refs)}
       </div>
       <br />

diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -115,18 +115,21 @@ exports[`Parse epigraph EPIGRAPH with title successful 1`] = `
 
 exports[`Parse exercise EXERCISE with solution successful 1`] = `
 "<div>
+  <div />
   <SicpExercise title={[undefined]} body={{...}} solution={{...}} />
 </div>"
 `;
 
 exports[`Parse exercise EXERCISE without solution successful 1`] = `
 "<div>
+  <div />
   <SicpExercise title=\\"Title\\" body={{...}} solution={[undefined]} />
 </div>"
 `;
 
 exports[`Parse figures FIGURE with image and scale successful 1`] = `
 "<div className=\\"sicp-figure\\">
+  <div />
   <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width=\\"50%\\" />
   <h5 className=\\"sicp-caption\\">
     name
@@ -141,6 +144,7 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
 
 exports[`Parse figures FIGURE with image successful 1`] = `
 "<div className=\\"sicp-figure\\">
+  <div />
   <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width=\\"100%\\" />
   <h5 className=\\"sicp-caption\\">
     name
@@ -155,6 +159,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 
 exports[`Parse figures FIGURE with snippet successful 1`] = `
 "<div className=\\"sicp-figure\\">
+  <div />
   <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output={[undefined]} />
   <h5 className=\\"sicp-caption\\">
     name
@@ -169,6 +174,7 @@ exports[`Parse figures FIGURE with snippet successful 1`] = `
 
 exports[`Parse figures FIGURE with table successful 1`] = `
 "<div className=\\"sicp-figure\\">
+  <div />
   <table>
     <tbody>
       <tr>
@@ -220,6 +226,7 @@ exports[`Parse footnote DISPLAYFOOTNOTE count is 1 successful 1`] = `
 "<div>
   <hr />
   <div className=\\"sicp-footnote\\">
+    <div />
     <a href=\\"\\">
       [1] 
     </a>
@@ -235,6 +242,7 @@ exports[`Parse footnote DISPLAYFOOTNOTE count is 1 successful 1`] = `
 exports[`Parse footnote DISPLAYFOOTNOTE count is 2 successful 1`] = `
 "<div>
   <div className=\\"sicp-footnote\\">
+    <div />
     <a href=\\"\\">
       [2] 
     </a>
@@ -364,6 +372,7 @@ exports[`Parse section SECTION  successful 1`] = `
   <div>
     <span>
       <div className=\\"sicp-text\\">
+        <div />
         <span>
           <p>
             Mock Text
@@ -379,6 +388,7 @@ exports[`Parse section SECTION  successful 1`] = `
     </span>
     <span>
       <div className=\\"sicp-text\\">
+        <div />
         <span>
           <p>
             Mock Text

diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
@@ -100,12 +100,6 @@ const Sicp: React.FC<SicpProps> = props => {
     }
 
     const hash = props.location.hash;
-
-    if (!hash) {
-      scrollRefIntoView(topRef.current);
-      return;
-    }
-
     const ref = refs.current[hash];
 
     scrollRefIntoView(ref);