Merge pull request #201 from godwinameh/main

fetching api closes #144

mobile-app/components/ApiServices.ts

@@ -0,0 +1,35 @@
+import axios from "axios";
+
+const API_BASE_URL = "https://your-backend-url.com/api"; 
+
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000, // 10 seconds timeout
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Function to fetch lyrics based on difficulty
+export const fetchLyrics = async (difficulty: string) => {
+  try {
+    const response = await api.get(`/lyrics?difficulty=${difficulty}`);
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching lyrics:", error);
+    throw error;
+  }
+};
+
+// Function to fetch multiple-choice options for beginners
+export const fetchMultipleChoiceOptions = async () => {
+  try {
+    const response = await api.get("/game/multiple-choice");
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching multiple-choice options:", error);
+    throw error;
+  }
+};
+
+export default api;

mobile-app/components/Game.jsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { View, Text, ActivityIndicator, Button, StyleSheet } from "react-native";
+import { fetchLyrics, fetchMultipleChoiceOptions } from "./ApiServices"; 
+
+export default function Game() {
+  const [lyrics, setLyrics] = useState("");
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    loadLyrics();
+    loadOptions();
+  }, []);
+
+  const loadLyrics = async () => {
+    setLoading(true);
+    try {
+      const response = await fetchLyrics("easy"); 
+      if (response?.lyrics) {
+        setLyrics(response.lyrics);
+      } else {
+        console.error("Lyrics data missing:", response);
+      }
+    } catch (error) {
+      console.error("Failed to load lyrics:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadOptions = async () => {
+    try {
+      const response = await fetchMultipleChoiceOptions();
+      if (response?.options && Array.isArray(response.options)) {
+        setOptions(response.options);
+      } else {
+        console.error("Unexpected response format:", response);
+      }
+    } catch (error) {
+      console.error("Failed to load multiple-choice options:", error);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {loading ? (
+        <ActivityIndicator size="large" color="blue" />
+      ) : (
+        <>
+          <Text style={styles.lyricsText}>{lyrics}</Text>
+          {options.length > 0 ? (
+            options.map((option, index) => (
+              <Button key={index} title={option} onPress={() => console.log(`Selected: ${option}`)} />
+            ))
+          ) : (
+            <Text>No options available</Text>
+          )}
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  lyricsText: {
+    fontSize: 18,
+    textAlign: "center",
+    marginBottom: 20,
+  },
+});