Add axios and react-native-dotenv dependencies

.gitignore

@@ -33,3 +33,5 @@ yarn-error.*
 
 # typescript
 *.tsbuildinfo
+
+.env

babel.config.js

@@ -1,6 +1,15 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          moduleName: 'react-native-dotenv',
+          verbose: false,
+        },
+      ],
+    ],
   };
-};
+};

package.json

@@ -13,6 +13,7 @@
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
     "@types/react": "~18.2.45",
+    "axios": "^1.6.8",
     "expo": "~50.0.14",
     "expo-font": "~11.10.3",
     "expo-router": "^3.4.8",
@@ -26,7 +27,8 @@
     "typescript": "^5.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "react-native-dotenv": "^3.4.11"
   },
   "private": true
 }

src/Api/index.ts

@@ -0,0 +1,76 @@
+import axios, { AxiosRequestConfig, AxiosError } from "axios";
+
+const BASE_URL = `http://api.openweathermap.org/data/2.5/weather/?q=`;
+const FIND_URL = `https://openweathermap.org/find`;
+
+type Response<T> = {
+  statusCode: string | null;
+  data: T | null;
+};
+
+const Config: AxiosRequestConfig = {
+  baseURL: BASE_URL,
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+};
+
+async function GET<T>(
+  url: string,
+  params: Record<string, unknown>
+): Promise<Response<T>> {
+  try {
+    const controller = new AbortController();
+    Config.signal = controller.signal;
+    Config.params = params;
+    const response = await axios.get<T>(`${BASE_URL}${url}`, Config);
+    return {
+      statusCode: response.status.toString(),
+      data: response.data,
+    };
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const axiosError: AxiosError = error;
+      return {
+        statusCode: axiosError.response?.status.toString() || ("500" as string),
+        data: null,
+      };
+    } else {
+      return {
+        statusCode: "500" as string,
+        data: null,
+      };
+    }
+  }
+}
+
+async function POST<T>(
+  url: string,
+  data: Record<string, unknown>
+): Promise<Response<T>> {
+  try {
+    const controller = new AbortController();
+    Config.signal = controller.signal;
+    const response = await axios.post<T>(`${BASE_URL}${url}`, data, Config);
+    return {
+      statusCode: response.status.toString(),
+      data: response.data,
+    };
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const axiosError: AxiosError = error;
+      return {
+        statusCode: axiosError.response?.status.toString() || ("500" as string),
+        data: null,
+      };
+    } else {
+      return {
+        statusCode: "500" as string,
+        data: null,
+      };
+    }
+  }
+}
+
+export default { GET, POST };

src/Api/services/weatherApi.ts

@@ -0,0 +1,7 @@
+import Api from "..";
+
+class WeatherApi {
+  private endpoints = {};
+}
+
+export default new WeatherApi();

src/screens/Home/Home.tsx

@@ -4,12 +4,13 @@ import { AppInput, AppText } from "../../components";
 import LongLogo from "../../assets/icons/logoLong.svg";
 import { navigate, Props } from "./types";
 import { styles } from "./index.style";
+import Api from "../../Api";
+import axios from "axios";
 
 const Home = (props: Props) => {
   const { navigation } = props;
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [filteredData, setFilteredData] = useState<any[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
 
   const dummyData = [
     {
@@ -172,6 +173,7 @@ const Home = (props: Props) => {
   useEffect(() => {
     setFilteredData(dummyData);
   }, []);
+
   const handleSearch = (text: string) => {
     const searchTerm =
       text.toLocaleLowerCase("tr-TR") || text.toLocaleLowerCase("en-US");
@@ -194,6 +196,17 @@ const Home = (props: Props) => {
     setFilteredData(filtered);
   };
 
+  const fetchWeather = async (city: string) => {
+    try {
+      const response = await Api.GET(city, {
+        APPID: process.env.API_KEY,
+      });
+      console.log(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <>
       <View style={{ flex: 1 }}>
@@ -223,6 +236,7 @@ const Home = (props: Props) => {
               value={searchQuery}
               filterData={filteredData}
               navigate={(city: navigate) => {
+                fetchWeather(city.name);
                 navigation.navigate("Detail", { city });
               }}
             />