added a prop for arrows without animation

uclaacm · Jan 23, 2024 · 2ad7026 · 2ad7026
1 parent d953c75
commit 2ad7026
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/FillArrow.tsx b/src/components/FillArrow.tsx
@@ -4,6 +4,7 @@ import '../styles/FillArrow.scss';
 interface FillArrowProps {
   text1: string;
   text2: string;
+  noAnimation?: boolean;
 }
 
 function useIsInViewport(ref) {
@@ -29,14 +30,16 @@ function useIsInViewport(ref) {
 }
 
 function FillArrow(props: FillArrowProps): JSX.Element {
+  const { text1, text2, noAnimation } = props;
+
   const ref = useRef(null);
 
   const isInViewport = useIsInViewport(ref);
 
   const [animate, setAnimate] = useState(false);
 
   useEffect(() => {
-    if (isInViewport && !animate) setAnimate(true);
+    if (isInViewport && !animate && !noAnimation) setAnimate(true);
   }, [isInViewport, animate]);
 
   return (

diff --git a/src/pages/Lesson3.tsx b/src/pages/Lesson3.tsx
@@ -61,7 +61,11 @@ const Lesson3: FC = () => {
             store the address of <span className="code">myVariable</span>:
           </p>
           <div className="diagram">
-            <FillArrow text1="myPointer" text2="myVariable" />
+            <FillArrow
+              text1="myPointer"
+              text2="myVariable"
+              noAnimation={true}
+            />
           </div>
           <p>
             The <span className="code">&</span> operator gives you the address

diff --git a/src/pages/Lesson4.tsx b/src/pages/Lesson4.tsx
@@ -24,7 +24,11 @@ const Lesson4: FC = () => {
         <div className="page-wrapper">
           <h1>Dereferencing Pointers</h1>
           <div className="diagram">
-            <FillArrow text1="myPointer" text2="myVariable" />
+            <FillArrow
+              text1="myPointer"
+              text2="myVariable"
+              noAnimation={true}
+            />
           </div>
           <p>
             Now you might be wondering, what good will knowing an address do?