styling changes

Author: Flipfloppm

components/spondee/SessionControls.tsx

@@ -1,9 +1,9 @@
 import Settings from "@/app/(tabs)/settings";
+import { Trial } from "@/app/(tabs)/tests/spondee";
 import { router } from "expo-router";
+import { Dispatch, SetStateAction, useState } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { THIText } from "../THIText";
-import React, {Dispatch, SetStateAction, useState} from "react";
-import {Trial} from "@/app/(tabs)/tests/spondee";
 
 type SessionControlProps = {
   totalTrials: number;
@@ -14,43 +14,47 @@ type SessionControlProps = {
 };
 
 export interface SessionData {
-    attempts: Trial[];
-    soundEnabled: boolean;
-    numCards: number;
+  attempts: Trial[];
+  soundEnabled: boolean;
+  numCards: number;
 }
 
 export function SessionControls({
   totalTrials,
   numCorrect,
   numCards,
   setNumCards,
-  attempts
+  attempts,
 }: SessionControlProps) {
+  const [soundEnabled, setSoundEnabled] = useState(true);
 
-    const [soundEnabled, setSoundEnabled] = useState(true);
-
-    const sessionData: SessionData = {
-        attempts,
-        soundEnabled,
-        numCards,
-    }
+  const sessionData: SessionData = {
+    attempts,
+    soundEnabled,
+    numCards,
+  };
 
   return (
     <View style={styles.controlsContainer}>
       <TouchableOpacity
         onPress={() => {
-            console.log("End Session");
-            console.log(numCorrect, totalTrials, "End Session");
-            router.push({
-                pathname: "/(tabs)/inputSessionNotes",
-                params: { sessionData: JSON.stringify(sessionData) },
-            });
+          console.log("End Session");
+          console.log(numCorrect, totalTrials, "End Session");
+          router.push({
+            pathname: "/(tabs)/inputSessionNotes",
+            params: { sessionData: JSON.stringify(sessionData) },
+          });
         }}
         style={styles.button}
       >
         <THIText style={styles.buttonText}>End Session</THIText>
       </TouchableOpacity>
-      <Settings numCards={numCards} setNumCards={setNumCards} soundEnabled={soundEnabled} setSoundEnabled={setSoundEnabled} />
+      <Settings
+        numCards={numCards}
+        setNumCards={setNumCards}
+        soundEnabled={soundEnabled}
+        setSoundEnabled={setSoundEnabled}
+      />
     </View>
   );
 }

components/spondee/SpondeeCardDefinitions.tsx

@@ -1,33 +1,33 @@
 type SpondeeCard = {
-    word: string;
+  word: string;
 };
 
 const SpondeeCards: SpondeeCard[] = [
-    {word: "outside"},
-    {word: "playground"},
-    {word: "hotdog"},
-    {word: "icecream"},
-    {word: "railroad"},
-    {word: "snowman"},
-    {word: "bathtub"},
-    {word: "cowboy"},
-    {word: "toothbrush"},
-    {word: "pancake"},
-    {word: "mailman"},
-    {word: "bluebird"},
-    {word: "popcorn"},
-    {word: "bedroom"},
-    {word: "football"},
-    {word: "suitcase"},
-    {word: "starfish"},
-    {word: "doghouse"},
-    {word: "airplane"},
-    {word: "sunshine"},
-    {word: "doorbell"},
-    {word: "cupcake"},
-    {word: "firetruck"},
-    {word: "sidewalk"}
+  { word: "outside" },
+  { word: "playground" },
+  { word: "hotdog" },
+  { word: "icecream" },
+  { word: "railroad" },
+  { word: "snowman" },
+  { word: "bathtub" },
+  { word: "cowboy" },
+  { word: "toothbrush" },
+  { word: "pancake" },
+  { word: "mailman" },
+  { word: "bluebird" },
+  { word: "popcorn" },
+  { word: "bedroom" },
+  { word: "football" },
+  { word: "suitcase" },
+  { word: "starfish" },
+  { word: "doghouse" },
+  { word: "airplane" },
+  { word: "sunshine" },
+  { word: "doorbell" },
+  { word: "cupcake" },
+  { word: "firetruck" },
+  { word: "sidewalk" },
 ];
 
 export default SpondeeCards;
-export {SpondeeCard}
+export { SpondeeCard };

components/spondee/TestGrid.tsx

@@ -1,7 +1,7 @@
+import { Trial } from "@/app/(tabs)/tests/spondee";
 import Card from "@/components/spondee/Card";
-import { useState } from "react";
-import {Trial} from "@/app/(tabs)/tests/spondee";
-import {FlatList, ListRenderItemInfo, StyleSheet, View} from "react-native";
+import { useEffect, useState } from "react";
+import { FlatList, ListRenderItemInfo, StyleSheet, View } from "react-native";
 
 export default function TestGrid({
   numCards,
@@ -18,17 +18,21 @@ export default function TestGrid({
   setAttempts: (attempts: Trial[]) => void;
   callback: (item: { id: number; title: string }) => void;
 }) {
+  useEffect(() => {}, [numCards]);
   const [selectedId, setSelectedId] = useState<number>();
 
   let columns = Math.min(Math.trunc((numCards + 1) / 2), 4);
 
-  const renderCard = ({ item }: ListRenderItemInfo<{ id: number; title: string }>) => {
+  const renderCard = ({
+    item,
+  }: ListRenderItemInfo<{ id: number; title: string }>) => {
     const backgroundColor = item.id === selectedId ? "#6D88B433" : "#FFFFFF";
     const submitButton = item.id === selectedId;
+    console.log("card thing");
 
     const addItem = (newItem: Trial) => {
       setAttempts([...attempts, newItem]);
-    }
+    };
 
     const handlePress = () => {
       console.log(item.title, correctCard);
@@ -49,10 +53,10 @@ export default function TestGrid({
         size={columns}
         numCards={numCards}
         onSubmit={() => {
-            // Call callback to spondee.tsx
-            callback(item);
-            // Handle press ourselves too
-            handlePress();
+          // Call callback to spondee.tsx
+          callback(item);
+          // Handle press ourselves too
+          handlePress();
         }}
       />
     );