-
-
Save adrianhajdin/dcc49a54d2822daae4b71b74265c397e to your computer and use it in GitHub Desktop.
| import React, { useEffect, useState } from 'react' | |
| import { ActivityIndicator, FlatList, Image, TouchableOpacity, View } from 'react-native' | |
| import { Stack, useRouter, useSearchParams } from 'expo-router' | |
| import { Text, SafeAreaView } from 'react-native' | |
| import axios from 'axios' | |
| import { ScreenHeaderBtn, NearbyJobCard } from '../../components' | |
| import { COLORS, icons, SIZES } from '../../constants' | |
| import styles from '../../styles/search' | |
| const JobSearch = () => { | |
| const params = useSearchParams(); | |
| const router = useRouter() | |
| const [searchResult, setSearchResult] = useState([]); | |
| const [searchLoader, setSearchLoader] = useState(false); | |
| const [searchError, setSearchError] = useState(null); | |
| const [page, setPage] = useState(1); | |
| const handleSearch = async () => { | |
| setSearchLoader(true); | |
| setSearchResult([]) | |
| try { | |
| const options = { | |
| method: "GET", | |
| url: `https://jsearch.p.rapidapi.com/search`, | |
| headers: { | |
| "X-RapidAPI-Key": '', | |
| "X-RapidAPI-Host": "jsearch.p.rapidapi.com", | |
| }, | |
| params: { | |
| query: params.id, | |
| page: page.toString(), | |
| }, | |
| }; | |
| const response = await axios.request(options); | |
| setSearchResult(response.data.data); | |
| } catch (error) { | |
| setSearchError(error); | |
| console.log(error); | |
| } finally { | |
| setSearchLoader(false); | |
| } | |
| }; | |
| const handlePagination = (direction) => { | |
| if (direction === 'left' && page > 1) { | |
| setPage(page - 1) | |
| handleSearch() | |
| } else if (direction === 'right') { | |
| setPage(page + 1) | |
| handleSearch() | |
| } | |
| } | |
| useEffect(() => { | |
| handleSearch() | |
| }, []) | |
| return ( | |
| <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}> | |
| <Stack.Screen | |
| options={{ | |
| headerStyle: { backgroundColor: COLORS.lightWhite }, | |
| headerShadowVisible: false, | |
| headerLeft: () => ( | |
| <ScreenHeaderBtn | |
| iconUrl={icons.left} | |
| dimension='60%' | |
| handlePress={() => router.back()} | |
| /> | |
| ), | |
| headerTitle: "", | |
| }} | |
| /> | |
| <FlatList | |
| data={searchResult} | |
| renderItem={({ item }) => ( | |
| <NearbyJobCard | |
| job={item} | |
| handleNavigate={() => router.push(`/job-details/${item.job_id}`)} | |
| /> | |
| )} | |
| keyExtractor={(item) => item.job_id} | |
| contentContainerStyle={{ padding: SIZES.medium, rowGap: SIZES.medium }} | |
| ListHeaderComponent={() => ( | |
| <> | |
| <View style={styles.container}> | |
| <Text style={styles.searchTitle}>{params.id}</Text> | |
| <Text style={styles.noOfSearchedJobs}>Job Opportunities</Text> | |
| </View> | |
| <View style={styles.loaderContainer}> | |
| {searchLoader ? ( | |
| <ActivityIndicator size='large' color={COLORS.primary} /> | |
| ) : searchError && ( | |
| <Text>Oops something went wrong</Text> | |
| )} | |
| </View> | |
| </> | |
| )} | |
| ListFooterComponent={() => ( | |
| <View style={styles.footerContainer}> | |
| <TouchableOpacity | |
| style={styles.paginationButton} | |
| onPress={() => handlePagination('left')} | |
| > | |
| <Image | |
| source={icons.chevronLeft} | |
| style={styles.paginationImage} | |
| resizeMode="contain" | |
| /> | |
| </TouchableOpacity> | |
| <View style={styles.paginationTextBox}> | |
| <Text style={styles.paginationText}>{page}</Text> | |
| </View> | |
| <TouchableOpacity | |
| style={styles.paginationButton} | |
| onPress={() => handlePagination('right')} | |
| > | |
| <Image | |
| source={icons.chevronRight} | |
| style={styles.paginationImage} | |
| resizeMode="contain" | |
| /> | |
| </TouchableOpacity> | |
| </View> | |
| )} | |
| /> | |
| </SafeAreaView> | |
| ) | |
| } | |
| export default JobSearch |
doing something like this below but still get the same error.
import { useState, useEffect } from "react";
import axios from "axios";
const useFetch = () => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
// Fetch data from local JSON file
const response = await axios.get("../../assets/data.json");
console.log(response);
setData(response.data);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
};
fetchData();
}, []);
const refetch = async () => {
setIsLoading(true);
try {
// Fetch data from local JSON file
const response = await axios.get("../../assets/data.json");
console.log(response);
setData(response.data);
setIsLoading(false);
} catch (error) {
setError(error);
setIsLoading(false);
}
};
return { data, isLoading, error, refetch };
};
export default useFetch;
FYI everyone, use useLocalSearchParams instead from expo-router
FYI everyone, use useLocalSearchParams instead from expo-router
Thanks for this info
hello guys, so when i try to create popularjobcard's touchableOpacity its purple i mean it should be white with logos and text and this purple thing covers everythign up cna anyone help me i have chekced the code and even coppied from github but still same also checked the styles container and color should be white it says #FFF please help
fixed it i just assigen data= {data} in popularjobs.jsx
I fixed the problem, thanks a lot
I am stuck, please help
<FlatList data={data} renderItem={({ item }) => ( Use this code in flatlist in popularjobs.jsx file. Let me know for any help bruh!!
thanks alot that helped me too
I can't go inside to the popular jobs part and also my search bar is not working! how to fix that?
Thankyou so much for your help. Can i have your useFetch.js code please ?