axios CRUD

api/index.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const apiClient = axios.create({
+    baseURL: 'https://pets-react-query-backend.eapi.joincoded.com',
+
+});
+
+
+export default apiClient;
+

api/pets.ts

@@ -0,0 +1,19 @@
+import { Pet } from "@/data/pets";
+import apiClient from ".";
+
+const getAllPets = async () => {
+    const response = await apiClient.get('/pets');
+    return response.data;
+}
+
+const getOnePet = async (id: string) => {
+    const response = await apiClient.get(`/pets/${id}`);
+    return response.data;
+}
+
+const addPet = async (pet: Pet) => {
+    const response = await apiClient.post('/pets', pet);
+    return response.data;
+}
+export { addPet, getAllPets, getOnePet };
+

app/[id].tsx

@@ -1,19 +1,24 @@
+import { getOnePet } from "@/api/pets";
+import PetButton from "@/components/PetButton";
+import { Pet } from "@/data/pets";
 import { useLocalSearchParams } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { pets } from "../data/pets";
 
 export default function PetDetails() {
   const { id } = useLocalSearchParams();
-
-  const pet = pets.find((p) => p.id === Number(id));
+  const [pet, setPet] = useState<Pet | null>(null);
+  const handleGetOnePet = async () => {
+    const pet = await getOnePet(id as string);
+    setPet(pet);
+  };
 
   if (!pet) {
     return (
       <SafeAreaView style={styles.container} edges={["bottom"]}>
         <View style={styles.errorContainer}>
-          <Text style={styles.errorText}>Pet not found!</Text>
+          <PetButton title="Get Pet" onPress={() => handleGetOnePet()} />
         </View>
       </SafeAreaView>
     );

app/index.tsx

@@ -1,12 +1,8 @@
+import { getAllPets } from "@/api/pets";
+import PetButton from "@/components/PetButton";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AddPetModal } from "../components/AddPetModal";
 import { PetCard } from "../components/PetCard";
@@ -17,6 +13,11 @@ export default function Index() {
   const [pets, setPets] = useState<Pet[]>(initialPets);
   const [modalVisible, setModalVisible] = useState(false);
 
+  const handleGetPets = async () => {
+    const pets = await getAllPets();
+    setPets(pets);
+  };
+
   const handlePetPress = (id: number) => {
     router.push(`/${id}`);
   };
@@ -27,12 +28,8 @@ export default function Index() {
 
   return (
     <>
-      <TouchableOpacity
-        onPress={() => setModalVisible(true)}
-        style={styles.headerButton}
-      >
-        <Text style={styles.headerButtonText}>Add Pet</Text>
-      </TouchableOpacity>
+      <PetButton title="Get Pets" onPress={() => handleGetPets()} />
+      <PetButton title="Add Pet" onPress={() => setModalVisible(true)} />
 
       <SafeAreaView style={styles.container} edges={["bottom"]}>
         <ScrollView contentContainerStyle={styles.scrollContent}>
@@ -46,7 +43,7 @@ export default function Index() {
               <PetCard
                 key={pet.id}
                 pet={pet}
-                onPress={() => handlePetPress(pet.id)}
+                onPress={() => handlePetPress(pet.id as number)}
               />
             ))
           )}

components/AddPetModal.tsx

@@ -1,3 +1,4 @@
+import { addPet } from "@/api/pets";
 import React, { useState } from "react";
 import {
   KeyboardAvoidingView,
@@ -27,16 +28,19 @@ export const AddPetModal: React.FC<AddPetModalProps> = ({
   const [adopted, setAdopted] = useState("");
   const [image, setImage] = useState("");
 
-  const handleAdd = () => {
+  const handleAdd = async () => {
     if (name.trim() && type.trim()) {
       const maxId = Date.now(); // Generate unique ID using rtimestamp
-      onAdd({
+      const newPet = await addPet({
         id: maxId,
         name: name.trim(),
         type: type.trim(),
         adopted: adopted.trim() || "No",
-        image: image.trim() || "https://images.unsplash.com/photo-1450778869180-41d0601e046e?w=400&h=400&fit=crop",
+        image:
+          image.trim() ||
+          "https://images.unsplash.com/photo-1450778869180-41d0601e046e?w=400&h=400&fit=crop",
       });
+      onAdd(newPet);
       // Reset form
       setName("");
       setType("");
@@ -216,4 +220,3 @@ const styles = StyleSheet.create({
     fontWeight: "600",
   },
 });
-

components/PetButton.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+const PetButton = ({
+  title,
+  onPress,
+}: {
+  title: string;
+  onPress: () => void;
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.headerButton}>
+      <Text style={styles.headerButtonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default PetButton;
+
+const styles = StyleSheet.create({
+  headerButton: {
+    margin: 8,
+    borderRadius: 8,
+    backgroundColor: "#6200EE",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 10,
+  },
+  headerButtonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "300",
+    marginTop: -2,
+    textAlign: "center",
+  },
+});

data/pets.ts

@@ -1,5 +1,5 @@
 export interface Pet {
-    id: number;
+    id?: number;
     name: string;
     type: string;
     adopted: string;