Untitled
unknown
javascript
2 years ago
3.3 kB
5
Indexable
//useFetch.js import { useEffect, useState } from "react"; import axios from "axios"; 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: { "X-RapidAPI-Key": "4bf281d16dmshe695f2c47c7bfb6p1121d9jsn61144a33a6e4", "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(error); } finally { setIsLoading(false); } }; useEffect(() => { fetchData(); }, []); const refetch = () => { setIsLoading(true); fetchData(); }; return data, isLoading, error, refetch; }; export default useFetch; //PopularJobCard.js import { View, Text, TouchableOpacity, Image } from "react-native"; import styles from "./popularjobcard.style"; const PopularJobCard = ({item, selectedJob, handleCardPress}) => { return ( <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>{item.employer_name}</Text> </TouchableOpacity> ); }; export default PopularJobCard; //Popularjobs.js import { useState } from "react"; import { View, Text, TouchableOpacity, FlatList, ActivityIndicator, } from "react-native"; import { useRouter } from "expo-router"; import styles from "./popularjobs.style"; import { COLORS, SIZES } from "../../../constants"; import PopularJobCard from "../../common/cards/popular/PopularJobCard"; import useFetch from "../../../hook/useFetch"; const Popularjobs = () => { const router = useRouter(); const { data, isLoading, error } = useFetch("search", { query: "React developer", num_pages: 1, }); // console.log(data) return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.headerTitle}>Popular jobs</Text> <TouchableOpacity> <Text style={styles.headerBtn}>Show all</Text> </TouchableOpacity> </View> <View style={styles.cardsContainer}> {isLoading ? ( <ActivityIndicator size="large" color={COLORS.primary} /> ) : error ? ( <Text>Someting went wrong</Text> ) : ( <FlatList data={[1, 2, 3, 4,5,6,7,8]} renderItem={({ item }) => (<PopularJobCard item={item} />)} keyExtractor={item => item?.job_id} contentContainerStyle={{ columnGap: SIZES.medium }} horizontal /> )} </View> </View> ); }; export default Popularjobs;
Editor is loading...