continue flow integartion

src/screens/Writing/CreatingLyrics.js

@@ -9,9 +9,23 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../../components/GradientButton";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
+import firebase from "../../config/firebase";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 
-const CreatingLyrics = ({ active }) => {
+const CreatingLyrics = ({ active, config, regenerateKey, selections }) => {
   const [progress, setProgress] = useState(0);
+  const [called, setCalled] = useState(false);
+  const [result, setResult] = useState(null);
+  const { setIsLoading } = useMinuit();
+
+  // When asked to regenerate, reset flags so effect runs again
+  useEffect(() => {
+    if (active) {
+      setCalled(false);
+      setResult(null);
+      setProgress(0);
+    }
+  }, [regenerateKey, active]);
 
   useEffect(() => {
     if (active) {
@@ -29,6 +43,39 @@ const CreatingLyrics = ({ active }) => {
     }
   }, [active]);
 
+  useEffect(() => {
+    const run = async () => {
+      try {
+        setCalled(true);
+        await setIsLoading(true);
+        const callable = firebase
+          .functions()
+          .httpsCallable("lyrics-generateLyrics");
+        const { data } = await callable({
+          objective: config?.objective,
+          context: config?.context,
+          emotion: config?.emotion,
+          style: config?.style,
+          audience: config?.audience,
+          structure: config?.structure,
+          rhymes: config?.rhymes,
+        });
+        setResult(data);
+        setProgress(100);
+      } catch (e) {
+        console.log(e);
+      } finally {
+        await setIsLoading(false);
+      }
+    };
+
+    if (active && !called) {
+      run();
+    }
+  }, [active, called, config, setIsLoading]);
+
+  console.log(result);
+
   return (
     <View
       style={{
@@ -113,7 +160,9 @@ const CreatingLyrics = ({ active }) => {
                   width: "80%",
                   alignSelf: "center",
                 }}
-                onPress={() => navigate(Routes.Lyrics)}
+                onPress={() =>
+                  navigate(Routes.Lyrics, { lyricsData: result, config, selections })
+                }
               />
             </View>
           </BlurView>