api updated

app/challenge.tsx

@@ -1,25 +1,63 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { ScrollView } from 'react-native';
 
 import { useQuery } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { useTranslation } from 'react-i18next';
 
 import { fetchFlashCardSets } from '@/api/challenges';
 import { queryKeys } from '@/api/queryKyes';
-import { BackgroundContainer, Typography } from '@/components';
-import { useCreateFlashCardSet } from '@/hooks';
+import { BackgroundContainer, Button, Typography } from '@/components';
+import { useQuestions } from '@/hooks';
 
 const Challenge = () => {
-  const { mutate } = useCreateFlashCardSet();
+  const { t } = useTranslation();
+
+  // const {mutate} = useCreateFlashCardSet();
+
   const { data } = useQuery({ queryKey: queryKeys.sets(), queryFn: fetchFlashCardSets });
+  const router = useRouter();
+
+  console.log(data);
 
   return (
     <BackgroundContainer>
-        <Typography size="LARGE" font="REGULAR">
-            Uzupełnij ten widok :)
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <View style={styles.innerContainer}>
+          <RenderSets data={data}></RenderSets>
+
+          <Typography size="LARGE" font="REGULAR">
+            {t('challenge.createNewFlashcards')}
           </Typography>
+          <View style={styles.content}>
+            <Button onPress={router.back}>{t('challenge.back')}</Button>
+          </View>
+        </View>
+      </ScrollView>
     </BackgroundContainer>
   );
 };
 
+const RenderSets = ({ data = [] }) => {
+  console.log(data);
+
+  const { mutate: createQuestions } = useQuestions();
+
+  const handleQuestions = () => {
+    createQuestions();
+  };
+
+  return (
+    <View>
+      {data.map((cardSet) => (
+        <Typography key={cardSet.id} size="LARGE" font="REGULAR">
+          <Button onPress={handleQuestions}>{cardSet.title}</Button>
+        </Typography>
+      ))}
+    </View>
+  );
+};
+
 export default Challenge;
 
 const styles = StyleSheet.create({

app/index.tsx

@@ -1,45 +1,52 @@
+import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useTranslation } from 'react-i18next';
 
 import { BackgroundContainer, Button, Popup, Typography } from '@/components';
+import { useCreateFlashCardSet, useChallenge } from '@/hooks';
+
 import LogoIcon from '../assets/svgs/logo.svg';
-import { useState } from 'react';
-import { useCreateFlashCardSet} from '@/hooks';
+
+// import {useRouter} from "expo-router";
 
 export default function Index() {
   const { t } = useTranslation();
   // const router = useRouter();
   const [popupVisible, setPopupVisible] = useState(false);
-  const { mutate } = useCreateFlashCardSet();
+  const { mutate: createSet } = useCreateFlashCardSet();
+  const { mutate: createChallenge } = useChallenge();
 
   const handleCreateFlashCards = () => {
-      setPopupVisible(true)
-  }
+    setPopupVisible(true);
+  };
 
   const handleSave = (name: string) => {
     if (!name.trim()) {
       console.warn('Name cannot be empty');
       return;
     }
 
-    mutate(name);
+    createSet(name);
   };
 
+  const handleChallenge = () => {
+    createChallenge();
+  };
 
   return (
     <BackgroundContainer imagePath={require('../assets/images/home.png')}>
       <View style={styles.innerContainer}>
-      <Popup
-        visible={popupVisible}
-        onClose={() => setPopupVisible(false)}
-        onSave={handleSave}
-      />
+        <Popup visible={popupVisible} onClose={() => setPopupVisible(false)} onSave={handleSave} />
         <LogoIcon />
         <View style={styles.content}>
           <Typography>{t('home.createFlashcards')}</Typography>
           <Button onPress={handleCreateFlashCards}>{t('home.startHere')}</Button>
         </View>
+        <View style={styles.content}>
+          <Typography>{t('home.challengeYourself')}</Typography>
+          <Button onPress={handleChallenge}>{t('home.testYourself')}</Button>
+        </View>
       </View>
     </BackgroundContainer>
   );
@@ -53,8 +60,8 @@ const styles = StyleSheet.create({
     paddingVertical: 100,
   },
   content: {
-    rowGap: 10, 
-    marginBottom: 10, 
+    rowGap: 10,
+    marginBottom: 10,
     justifyContent: 'center',
     alignItems: 'center',
   },

app/questions.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, View } from 'react-native';
+
+import { BackgroundContainer, Typography } from '@/components';
+
+const Questions = () => {
+  return (
+    <BackgroundContainer>
+      <View style={styles.innerContainer}>
+        <Typography size="LARGE" font="REGULAR">
+          questions test
+        </Typography>
+      </View>
+    </BackgroundContainer>
+  );
+};
+
+export default Questions;
+
+const styles = StyleSheet.create({
+  innerContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 100,
+  },
+  logo: {
+    gap: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  flashCardsButtons: { gap: 5, width: '90%' },
+});

src/api/axios.ts

@@ -1,5 +1,6 @@
 import Axios from 'axios';
 
 export const axios = Axios.create({
-  baseURL: `http://10.93.0.120:8000/api/`,
+  // baseURL: `http://10.93.0.120:8000/api/`,
+  baseURL: `https://backend-4.w2025.deployed.space/api/`,
 });

src/components/index.tsx

@@ -1,6 +1,6 @@
 export { Button } from './Button';
 export { Typography } from './Typography';
 export { BackgroundContainer } from './BackgroundContainer';
-export {Popup} from './Popup';
-export { FlashCardInput} from './FlashCardInput';
-export {FlipCard} from './FlipCard';
+export { Popup } from './Popup';
+export { FlashCardInput } from './FlashCardInput';
+// export {FlipCard} from './FlipCard';

src/hooks/index.tsx

@@ -1,5 +1,5 @@
 export { useCreateFlashCardSet } from './useCreateFlashCardSet';
-export { useDeleteFlashCardSet } from './useDeleteFlashCardSet';
+// export { useDeleteFlashCardSet } from './useDeleteFlashCardSet';
 export { useEditFlashCard } from './useEditFlashCard';
-export { useMarkAsKnown } from './useMarkAsKnown';
-export { useMarkAsUnknown } from './useMarkAsUnknown';
+export { useChallenge } from './useChallenge';
+export { useQuestions } from './useQuestions';

src/hooks/useChallenge.ts

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+
+// import {fetchFlashCardSets} from "@/api/challenges";
+
+export function useChallenge() {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (data) => {
+      // const cardSets = fetchFlashCardSets()
+      //
+      // console.log(cardSets)
+
+      return Promise.resolve(data);
+    },
+    onSuccess: () => {
+      router.push('/challenge');
+    },
+  });
+}

src/hooks/useQuestions.ts

@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+
+// import {fetchFlashCardSets} from "@/api/challenges";
+
+export function useQuestions() {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (data) => {
+      return Promise.resolve(data);
+    },
+    onSuccess: () => {
+      router.push('/questions');
+    },
+  });
+}