// App.js import React, { useState } from 'react'; import {View,Text,FlatList,TextInput,Button, ScrollView,Modal,StyleSheet,TouchableOpacity, } from 'react-native'; import initialJobData from './initialJobData'; const JobBoard = () => { const [jobData, setJobData] = useState(initialJobData); const [showFilters, setShowFilters] = useState(true); const [titleFilter, setTitleFilter] = useState(''); const [companyFilter, setCompanyFilter] = useState(''); const [locationFilter, setLocationFilter] = useState(''); const [selectedJob, setSelectedJob] = useState(null); const [isModalVisible, setIsModalVisible] = useState(false); const applyFilters = () => { const filteredJobs = initialJobData.filter( (job) => job.title.toLowerCase() .includes(titleFilter.toLowerCase()) && job.company.toLowerCase() .includes(companyFilter.toLowerCase()) && job.location.toLowerCase() .includes(locationFilter.toLowerCase()) ); setJobData(filteredJobs); setShowFilters(false); }; const toggleFilters = () => { setShowFilters(!showFilters); }; const renderJobItem = ({ item }) => ( <TouchableOpacity onPress={ () => handleViewDetails(item) }> <View style={styles.jobItem}> <Text style={styles.jobTitle}> {item.title} </Text> <Text style={styles.jobCompany}> {item.company} </Text> <Text style={styles.jobLocation}> {item.location} </Text> <Text style={styles.jobDescription}> {item.description} </Text> </View> </TouchableOpacity> ); const handleViewDetails = (job) => { setSelectedJob(job); setIsModalVisible(true); }; const renderJobDetailsModal = () => { if (!selectedJob) { return null; } return ( <Modal animationType="slide" transparent={true} visible={isModalVisible} onRequestClose={() => { setIsModalVisible(false); }} > <View style={styles.modalContainer}> <View style={styles.modalContent}> <Text style={styles.modalTitle}> {selectedJob.title} </Text> <Text style={styles.modalCompany}> {selectedJob.company} </Text> <Text style={styles.modalLocation}> {selectedJob.location} </Text> <Text style={styles.modalDescription}> {selectedJob.description} </Text> <Text style={styles.modalApplyMethod}> {selectedJob.applyMethod} </Text> <Button title="Close" onPress={ () => setIsModalVisible(false) } /> </View> </View> </Modal> ); }; return ( <View style={styles.container}> <Text style={styles.header}> Job Board App </Text> <Text style={styles.subHeading}> By GeekforGeeks </Text> <View style={styles.filterContainer}> {showFilters ? ( <> <View style={styles.row}> <View style={styles.filterColumn}> <Text style={styles.filterLabel}> Title </Text> <TextInput style={styles.filterInput} value={titleFilter} onChangeText={ (text) => setTitleFilter(text) } /> </View> <View style={styles.filterColumn}> <Text style={styles.filterLabel}> Company </Text> <TextInput style={styles.filterInput} value={companyFilter} onChangeText={ (text) => setCompanyFilter(text) } /> </View> <View style={styles.filterColumn}> <Text style={styles.filterLabel}> Location </Text> <TextInput style={styles.filterInput} value={locationFilter} onChangeText={ (text) => setLocationFilter(text) } /> </View> </View> <Button title="Apply Filters" onPress={applyFilters} /> </> ) : ( <Button title="Show Filters" onPress={toggleFilters} /> )} </View> <ScrollView> <FlatList data={jobData} keyExtractor={ (item) => item.id} renderItem={renderJobItem} /> </ScrollView> {renderJobDetailsModal()} </View> ); }; const styles = StyleSheet.create({ container: { padding: 16, backgroundColor: '#fff', }, header: { fontSize: 34, fontWeight: 'bold', marginBottom: 16, }, subHeading: { color: 'green', fontSize: 20, fontWeight: 'bold', marginLeft: 90, marginTop: -20, }, filterContainer: { marginBottom: 16, marginTop: 20, }, row: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', }, filterColumn: { flex: 1, marginRight: 8, marginBottom: 16, }, filterLabel: { fontSize: 16, marginBottom: 4, }, filterInput: { padding: 8, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, }, jobItem: { marginBottom: 20, borderBottomWidth: 1, borderBottomColor: '#ccc', }, jobTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 4, }, jobCompany: { fontSize: 16, color: '#555', marginBottom: 4, }, jobLocation: { fontSize: 16, color: '#555', marginBottom: 4, }, jobDescription: { fontSize: 14, color: '#777', }, modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, modalContent: { backgroundColor: '#fff', padding: 16, borderRadius: 8, width: '80%', }, modalTitle: { fontSize: 20, fontWeight: 'bold', marginBottom: 8, }, modalCompany: { fontSize: 18, color: '#555', marginBottom: 8, }, modalLocation: { fontSize: 16, color: '#555', marginBottom: 8, }, modalDescription: { fontSize: 14, color: '#777', marginBottom: 8, }, modalApplyMethod: { fontSize: 14, color: 'blue', marginBottom: 8, }, }); export default JobBoard;