From 6f1d8ec741d270128ec578cc7f66a06ef631d22f Mon Sep 17 00:00:00 2001
From: Jamie Birch work laptop <jbizzle5@gmail.com>
Date: Sat, 16 Jan 2021 17:53:02 +0000
Subject: [PATCH] chore: Demonstrate Marquee component

---
 sample/app/testComponents/AppContainer.tsx |  3 ++-
 sample/app/testComponents/stateful.tsx     | 26 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/sample/app/testComponents/AppContainer.tsx b/sample/app/testComponents/AppContainer.tsx
index aca51f4..2723409 100644
--- a/sample/app/testComponents/AppContainer.tsx
+++ b/sample/app/testComponents/AppContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { StyleSheet } from "react-nativescript";
-import { Clock, ClockFC, Counter } from "./stateful";
+import { Clock, ClockFC, Counter, MarqueeFC } from "./stateful";
 
 function AppContainer(){
     return (
@@ -9,6 +9,7 @@ function AppContainer(){
             <Clock/>
             <ClockFC/>
             <Counter/>
+            <MarqueeFC text="The quick brown fox jumps over the lazy dog."/>
         </stackLayout>
     );
 }
diff --git a/sample/app/testComponents/stateful.tsx b/sample/app/testComponents/stateful.tsx
index ee8fd0d..da951a2 100644
--- a/sample/app/testComponents/stateful.tsx
+++ b/sample/app/testComponents/stateful.tsx
@@ -138,6 +138,26 @@ export class Marquee extends React.Component<{ text: string }, { index: number }
     }
 }
 
+export function MarqueeFC({ text }: { text: string }){
+    const [index, setIndex] = useState(0);
+
+    useEffect(() => {
+        let frame;
+        function retry(){
+            frame = requestAnimationFrame(() => {
+                setIndex(prevIndex => (prevIndex + 1) % text.length);
+
+                retry();
+            });
+        }
+        retry();
+
+        return () => cancelAnimationFrame(frame);
+    }, []);
+
+    return <label>{text.slice(index, text.length)}</label>;
+}
+
 // React.createElement(
 //     MyButton,
 //     {
@@ -232,6 +252,12 @@ export function Counter(){
             <label>{count}</label>
             <button
                 onTap={(eventData) => {
+                    /**
+                     * The useState() hook can take a callback (just like the setState() API
+                     * of Class components) which allows you to do a state update based on the
+                     * current state value.
+                     * @see https://reactjs.org/docs/hooks-reference.html#functional-updates
+                     */
                     setCount((currentCount: number) => {
                         const nextCount = currentCount + 1;
                         console.log(`Increasing count from ${currentCount} -> ${nextCount}`);