Factor out useDynamicFlow hook

client/ionic/src/hooks/useDynamicFlow.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { FlowLoader, LoadedFlow } from '../content/flow';
+import { getUserContext } from '../content/userContext';
+
+export default function useDynamicFlow(id: string) {
+  const [flow, setFlow] = useState({} as LoadedFlow);
+
+  useEffect(() => {
+    async function fetchFlow() {
+      const f = await FlowLoader.loadFlow(id, getUserContext());
+      setFlow(f);
+    }
+    fetchFlow();
+  }, [id]);
+
+  return flow;
+}

client/ionic/src/pages/About.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FlowLoader, Flow, LoadedFlow } from '../content/flow';
 import {
   IonContent,
   IonPage,
@@ -14,23 +13,7 @@ import {
   IonImg,
 } from '@ionic/react';
 import 'tachyons';
-import { getUserContext } from '../content/userContext';
-
-// TODO: Abstract this, DRY.
-
-function useDynamicFlow(id: string) {
-  const [flow, setFlow] = React.useState({} as LoadedFlow);
-
-  React.useEffect(() => {
-    async function fetchFlow() {
-      const f = await FlowLoader.loadFlow(id, getUserContext());
-      setFlow(f);
-    }
-    fetchFlow();
-  }, [id]);
-
-  return flow;
-}
+import useDynamicFlow from '../hooks/useDynamicFlow';
 
 // TODO: Rename to Splash, after other PRs to avoid conflicts.
 const About: React.FC = () => {

client/ionic/src/pages/ProtectYourself.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FlowLoader, Flow, LoadedFlow } from '../content/flow';
 import {
   IonContent,
   IonPage,
@@ -11,23 +10,7 @@ import {
 } from '@ionic/react';
 import TopNav from '../components/TopNav';
 import 'tachyons';
-import { getUserContext } from '../content/userContext';
-
-// TODO: Abstract this, DRY.
-
-function useDynamicFlow(id: string) {
-  const [flow, setFlow] = React.useState({} as LoadedFlow);
-
-  React.useEffect(() => {
-    async function fetchFlow() {
-      const f = await FlowLoader.loadFlow(id, getUserContext());
-      setFlow(f);
-    }
-    fetchFlow();
-  }, [id]);
-
-  return flow;
-}
+import useDynamicFlow from '../hooks/useDynamicFlow';
 
 const ProtectYourself: React.FC = () => {
   // TODO: Refactor this out to separate Flow components. Use a dictionary

content/credits.yaml

@@ -19,6 +19,7 @@ team:
   - Mark Graves, Jr
   - Hunter Spinks
   - Bob Lee
+  - Simon Sturmer
 
 # Add yourself here when you first submit a contribution.