A couple of minor React tweaks

client/src/App.js

@@ -7,44 +7,19 @@ import "./Blocks/dom";
 import "./Blocks/cyf";
 import useBlockly from "./Blockly/useBlockly";
 
-import * as Exercise1 from "./Exercises/01-stuff";
-import * as Exercise2 from "./Exercises/02-more-stuff";
-
 import Split from "react-split-grid";
 import TextPanel from "./TextPanel/TextPanel";
 import Output from "./Output/Output";
 import Header from "./Layout/Header/Header";
 import Menu from "./Layout/Menu/Menu";
 import Footer from "./Layout/Footer/Footer";
-import Button from "./Button/Button";
-import "./App.scss";
+import { useExercise } from "./Exercises/useExercise";
 
+import "./App.scss";
 import { ReactComponent as Background } from "../src/svgs/Humaaans-Phone.svg";
 
 Blockly.setLocale(locale);
 
-// just left all this and presumed you will pass whatever you decide to do into the text panel
-const exercises = [Exercise1, Exercise2];
-
-function useExercise() {
-  const [exerciseIndex, setExerciseIndex] = useState(0);
-
-  function nextExercise() {
-    setExerciseIndex(exerciseIndex + 1);
-  }
-  function prevExercise() {
-    setExerciseIndex(exerciseIndex - 1);
-  }
-
-  return {
-    exercise: exercises[exerciseIndex],
-    hasNextExercise: exerciseIndex + 1 < exercises.length,
-    nextExercise,
-    hasPrevExercise: exerciseIndex - 1 >= 0,
-    prevExercise,
-  };
-}
-
 export default function App() {
   const {
     exercise,

client/src/Exercises/useExercise.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+import * as Exercise1 from "./01-stuff";
+import * as Exercise2 from "./02-more-stuff";
+
+const exercises = [Exercise1, Exercise2];
+
+export function useExercise() {
+  const [exerciseIndex, setExerciseIndex] = useState(0);
+
+  function nextExercise() {
+    setExerciseIndex(exerciseIndex + 1);
+  }
+  function prevExercise() {
+    setExerciseIndex(exerciseIndex - 1);
+  }
+
+  return {
+    exercise: exercises[exerciseIndex],
+    hasNextExercise: exerciseIndex + 1 < exercises.length,
+    nextExercise,
+    hasPrevExercise: exerciseIndex - 1 >= 0,
+    prevExercise,
+  };
+}

client/src/Layout/Footer/Footer.jsx

@@ -5,7 +5,7 @@ const Footer = () => (
   <footer className="c-layout__footer c-footer">
     <h3 className="c-footer__title">
       <Logo width="180px" />
-      <span class="invisible">Code Your Future</span>
+      <span className="invisible">Code Your Future</span>
     </h3>
   </footer>
 );