✨ Features: added job card and create hooks to fetch apis

Author: coderj001

babel.config.js

@@ -1,11 +1,21 @@
-module.exports = function (api) {
+module.exports = function(api) {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],
     plugins: [
       "@babel/plugin-proposal-export-namespace-from",
       "react-native-reanimated/plugin",
       require.resolve("expo-router/babel"),
+      ["module:react-native-dotenv", {
+        "envName": "APP_ENV",
+        "moduleName": "@env",
+        "path": ".env",
+        "blocklist": null,
+        "allowlist": null,
+        "safe": false,
+        "allowUndefined": true,
+        "verbose": false
+      }]
     ],
   };
 };

components/common/cards/popular/PopularJobCard.jsx

@@ -1,14 +1,24 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TouchableOpacity, Image } from 'react-native'
 
 import styles from './popularjobcard.style'
 
-const PopularJobCard = () => {
+const PopularJobCard = ({ item, selectedJob, handleCardPress }) => {
   return (
-    <View>
-      <Text>PopularJobCard</Text>
-    </View>
+    <TouchableOpacity
+      style={styles.container(selectedJob, item)}
+      onPress={() => handleCardPress(item)}
+    >
+      <TouchableOpacity style={styles.logoContainer(selectedJob, item)}>
+        <Image source={{ uri: item?.employer_logo }} resizeMode='contain' style={styles.logoImage} />
+      </TouchableOpacity>
+      <Text style={styles.companyName} numberOfLines={1}>{item?.employer_name}</Text>
+      <View style={styles.infoContainer}>
+        <Text style={styles.jobName(selectedJob, item)} numberOfLines={1}>{item?.job_title}</Text>
+        <Text style={styles.location}>{item?.job_country}</Text>
+      </View>
+    </TouchableOpacity>
   )
 }
 
-export default PopularJobCard
+export default PopularJobCard

components/home/popular/Popularjobs.jsx

@@ -6,12 +6,16 @@ import PopularJobCard from '../../common/cards/popular/PopularJobCard'
 import styles from './popularjobs.style'
 import { useRouter } from 'expo-router'
 import { TouchableOpacity } from 'react-native-gesture-handler'
+import useFetch from '../../../hook/useFetch'
 
 const Popularjobs = () => {
   const router = useRouter();
-  const isLoading = false
-  const error = false
-
+  const { data, isLoading, error, refetch } = useFetch('search', {
+    query: 'Python developer in Texas, USA',
+    page: '1',
+    num_pages: '1'
+  })
+  console.log(data)
 
 
   return (
@@ -26,7 +30,15 @@ const Popularjobs = () => {
         ) : error ? (
           <Text>Something went worng</Text>
         ) : (
-          <FlatList />
+          <FlatList
+            data={data}
+            renderItem={({ item }) => (
+              <PopularJobCard item={item} />
+            )}
+            keyExtractor={item => item?.job_id}
+            contentContainerStyle={{ columnGap: SIZES.medium }}
+            horizontal
+          />
         )}
       </View>
     </View>

hook/useFetch.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import axios from 'axios';
+import { RAPID_API_KEY } from '@env';
+
+const rapidApiKey = RAPID_API_KEY
+
+const useFetch = (endpoint, query) => {
+  const [data, setData] = useState([])
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const options = {
+    method: 'GET',
+    url: `https://jsearch.p.rapidapi.com/${endpoint}`,
+    headers: {
+      'content-type': 'application/octet-stream',
+      'X-RapidAPI-Key': rapidApiKey,
+      'X-RapidAPI-Host': 'jsearch.p.rapidapi.com'
+    },
+    params: { ...query },
+  };
+
+  const fetchData = async () => {
+    setIsLoading(true)
+    try {
+      const response = await axios.request(options)
+      setData(response.data.data)
+      setIsLoading(false)
+    } catch (error) {
+      setError(error)
+      alert('There is an error')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, []);
+
+  const refetch = () => {
+    setIsLoading(true)
+    fetchData()
+  }
+
+  return { data, isLoading, error, refetch };
+}
+
+export default useFetch;

package-lock.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "axios": "^1.3.6",
+    "dotenv": "^16.0.3",
     "expo": "^48.0.7",
     "expo-constants": "~14.2.1",
     "expo-font": "^11.1.1",