refactor: add dynamic routeing and based on results in quiz

app/(tabs)/_layout.js

@@ -4,6 +4,7 @@ import { AntDesign } from "@expo/vector-icons";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useState } from "react";
 import { Fontisto } from "@expo/vector-icons";
+import { Entypo } from "@expo/vector-icons";
 
 export default function Layout() {
   const [count, setCount] = useState(0);
@@ -80,6 +81,20 @@ export default function Layout() {
             ),
         }}
       />
+      <Tabs.Screen
+        name="music"
+        options={{
+          tabBarLabel: "music",
+          tabBarLabelStyle: { color: "#7CB9E8" },
+          headerShown: false,
+          tabBarIcon: ({ focused }) =>
+            focused ? (
+              <Entypo name="music" size={24} color="#7CB9E8" />
+            ) : (
+              <Entypo name="music" size={24} color="black" />
+            ),
+        }}
+      />
     </Tabs>
   );
 }

app/(tabs)/music/_layout.js

@@ -0,0 +1,9 @@
+import {Stack} from "expo-router";
+
+export default function Layout(){
+    return (
+        <Stack screenOptions={{headerShown:false}}>
+            <Stack.Screen name="music"/>
+        </Stack>
+    )
+}

app/(tabs)/music/index.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import { Text, View } from "react-native";
+
+export default class index extends Component {
+  render() {
+    return (
+      <View>
+        <Text> Music </Text>
+      </View>
+    );
+  }
+}

app/index.js

@@ -13,6 +13,8 @@ const index = () => {
   const router = useRouter();
   const handleLoginButtonClick = () => {
     // will take this to login
+    console.log("button pressed");
+    router.replace("/quiz");
   };
   return (
     <View style={styles.container}>

app/quiz/quiz-questions.js

@@ -1,43 +1,12 @@
 export const quizQuestions = [
-  {
-    question: "How often do you feel sad or down?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you have trouble concentrating?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you feel overwhelmed by daily tasks?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you experience anxiety?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you have trouble sleeping?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you feel irritable or angry?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you feel hopeless about the future?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you engage in activities you used to enjoy?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question:
-      "How often do you experience physical symptoms like headaches or stomachaches?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
-  {
-    question: "How often do you feel disconnected from others?",
-    options: ["Never", "Rarely", "Sometimes", "Frequently"],
-  },
+  "How often do you feel sad or down?",
+  "How often do you have trouble concentrating?",
+  "How often do you feel overwhelmed by daily tasks?",
+  "How often do you experience anxiety?",
+  "How often do you have trouble sleeping?",
+  "How often do you feel irritable or angry?",
+  "How often do you feel hopeless about the future?",
+  "How often do you engage in activities you used to enjoy?",
+  "How often do you experience physical symptoms like headaches or stomachaches?",
+  "How often do you feel disconnected from others?",
 ];

app/quiz/quiz.js

@@ -1,68 +1,57 @@
 import React, { useState, useEffect } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { StyleSheet, Text, TouchableOpacity, View, Button } from "react-native";
 import { quizQuestions } from "./quiz-questions";
+// ... other imports
+import { useRouter } from "expo-router";
 
-const shuffleArray = (array) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-};
+const Quiz = () => {
+  const router = useRouter();
 
-const Quiz = ({ navigation }) => {
   const [questions, setQuestions] = useState(quizQuestions);
   const [ques, setQues] = useState(0);
-  const [options, setOptions] = useState([]);
+  const [options] = useState(["Never", "Rarely", "Sometimes", "Frequently"]);
   const [score, setScore] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const getQuiz = async () => {
-      setIsLoading(true);
-      const url =
-        "https://opentdb.com/api.php?amount=10&type=multiple&encode=url3986";
-      const res = await fetch(url);
-      const data = await res.json();
-      setQuestions(data.results);
-      setOptions(generateOptionsAndShuffle(data.results[0]));
+    setTimeout(() => {
       setIsLoading(false);
-    };
-    getQuiz();
+    }, 1000);
   }, []);
 
-  const handleNextPress = () => {
-    setQues(ques + 1);
-    setOptions(generateOptionsAndShuffle(questions[ques + 1]));
+  const showResultsHandler = () => {
+    if (score > 7) {
+      router.replace("/(tabs)/consultants");
+    } else if (score > 3) {
+      router.replace("/(tabs)/home");
+    } else {
+      router.replace("/(tabs)/music");
+    }
   };
 
-  const generateOptionsAndShuffle = (_question) => {
-    const options = [..._question.incorrect_answers];
-    options.push(_question.correct_answer);
-
-    shuffleArray(options);
-
-    return options;
+  const handleNextPress = () => {
+    setQues(ques + 1);
   };
-
-  const handlSelectedOption = (_option) => {
-    if (_option === questions[ques].correct_answer) {
-      setScore(score + 10);
-    }
-    if (ques !== 9) {
-      setQues(ques + 1);
-      setOptions(generateOptionsAndShuffle(questions[ques + 1]));
-    }
-    if (ques === 9) {
-      handleShowResult();
+  const handleSelectedOption = (selectedOption) => {
+    if (selectedOption === "Frequently") {
+      setScore(score + 1);
     }
+    handleNextPress();
   };
-
-  const handleShowResult = () => {
-    navigation.navigate("Result", {
-      score: score,
-    });
-  };
-
+  const [resultText] = useState([
+    "Seek Help, please contact consultant",
+    "Have some clear goals,Go set them",
+    "your are okay just increase your focus go listen meditative music",
+  ]);
+  if (ques == questions.length) {
+    let resultTextIndex = score > 7 ? 0 : score > 3 ? 1 : 2;
+    return (
+      <View style={styles.container}>
+        <Text>{resultText[resultTextIndex]}</Text>
+        <Button title="See Results" onPress={showResultsHandler} />
+      </View>
+    );
+  }
   return (
     <View style={styles.container}>
       {isLoading ? (
@@ -72,18 +61,16 @@ const Quiz = ({ navigation }) => {
       ) : (
         <View style={styles.parent}>
           <View style={styles.top}>
-            <Text style={styles.question}>
-              Q. {decodeURIComponent(questions[ques].question)}
-            </Text>
+            <Text style={styles.question}>Q. {questions[ques]}</Text>
           </View>
           <View style={styles.options}>
             {options.map((option, index) => (
               <TouchableOpacity
                 key={index}
                 style={styles.optionButtom}
-                onPress={() => handlSelectedOption(option)}
+                onPress={() => handleSelectedOption(option)}
               >
-                <Text style={styles.option}>{decodeURIComponent(option)}</Text>
+                <Text style={styles.option}>{option}</Text>
               </TouchableOpacity>
             ))}
           </View>
@@ -96,7 +83,7 @@ const Quiz = ({ navigation }) => {
             {ques === 9 && (
               <TouchableOpacity
                 style={styles.button}
-                onPress={handleShowResult}
+                // onPress={handleShowResult}
               >
                 <Text style={styles.buttonText}>SHOW RESULTS</Text>
               </TouchableOpacity>