Hooked training content to backend, did refactors to training components and record.tsx

src/components/TrainingContent/Exercise.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from "react";
 import ExerciseWalkthrough from "@/training/ExerciseWalkthrough";
-import { WalkthroughConfigs } from "./TrainingInterfaces";
+import { ITrainingTip, WalkthroughConfigs } from "./TrainingInterfaces";
 
 
 // This wrapper is just to test new exercises from the handbook, will be removed when all the tips and exercises are in firestore
-const TrainingExercise: React.FC = () => {
+const TrainingExercise: React.FC<ITrainingTip> = (trainingTip: ITrainingTip) => {
   const leftText = "<div class=\"container mx-auto px-4 overflow-x-auto\"><table class=\"min-w-full bg-white border border-gray-300\"><thead><tr class=\"bg-gray-100\"><th class=\"py-2 px-4 border-b font-semibold text-left\">Category</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option A</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option B</th></tr></thead><tbody><tr><td class=\"py-2 px-4 border-b font-medium\">Self</td><td class=\"py-2 px-4 border-b\">You need to take care of yourself and connect with the people around you.</td><td class=\"py-2 px-4 border-b\">Focus on your interests and talents and meet people who are like you.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Home</td><td class=\"py-2 px-4 border-b\">It's a good idea to paint your living room yellow.</td><td class=\"py-2 px-4 border-b\">You should arrange your home so that it makes you feel happy.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Financial Life</td><td class=\"py-2 px-4 border-b\">You can be happy if you have enough money, but don't want money too much.</td><td class=\"py-2 px-4 border-b\">If you waste money on things you don't need, you won't have enough money for things that you do need.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Social Life</td><td class=\"py-2 px-4 border-b\">A good group of friends can increase your happiness.</td><td class=\"py-2 px-4 border-b\">Researchers say that a happy friend can increase our mood by nine percent.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Workplace</td><td class=\"py-2 px-4 border-b\">You spend a lot of time at work, so you should like your workplace.</td><td class=\"py-2 px-4 border-b\">Your boss needs to be someone you enjoy working for.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Community</td><td class=\"py-2 px-4 border-b\">The place where you live is more important for happiness than anything else.</td><td class=\"py-2 px-4 border-b\">Live around people who have the same amount of money as you do.</td></tr></tbody></table></div>";
   const tip = {
     category: "Strategy",
@@ -68,14 +68,21 @@ const TrainingExercise: React.FC = () => {
     }
   ]
 
+  const mockTip: ITrainingTip = {
+      id: "some random id",
+      tipCategory: tip.category,
+      tipHtml: tip.body,
+      standalone: false,
+      exercise: {
+        question: question,
+        highlightable: leftText,
+        segments: rightTextData
+      }
+  }
 
   return (
-    <div className="flex min-h-screen flex-col p-10">
-      <ExerciseWalkthrough
-        question={question}
-        highlightable={leftText}
-        walkthrough={rightTextData}
-        tip={tip}
+    <div className="flex flex-col p-10">
+      <ExerciseWalkthrough {...trainingTip}
       />
     </div>
   );