🖌️ User Interface: for near by jobs, list

Author: coderj001

.gitignore

@@ -12,3 +12,4 @@ web-build/
 
 # macOS
 .DS_Store
+.env

components/common/cards/nearby/NearbyJobCard.jsx

@@ -1,14 +1,34 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TouchableOpacity, Image } from 'react-native'
+import { checkImageURL } from '../../../../utils'
 
 import styles from './nearbyjobcard.style'
 
-const NearbyJobCard = () => {
+const NearbyJobCard = ({ job, handleNavigate }) => {
+
   return (
-    <View>
-      <Text>NearbyJobCard</Text>
-    </View>
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => handleNavigate}
+    >
+      <TouchableOpacity style={styles.logoContainer}>
+        <Image
+          source={{
+            uri: checkImageURL(job.employer_logo) ? job.employer_logo : 'https://dummyimage.com/600x400/000/fff',
+          }}
+          resizeMode='contain'
+          style={styles.logImage}
+        />
+      </TouchableOpacity>
+      <View style={styles.textContainer}>
+        <Text
+          style={styles.jobName}
+          numberOfLines={1}
+        >{job?.job_title}</Text>
+        <Text style={styles.jobType}>{job?.job_employment_type}</Text>
+      </View>
+    </TouchableOpacity>
   )
 }
 
-export default NearbyJobCard
+export default NearbyJobCard

components/common/cards/popular/PopularJobCard.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { View, Text, TouchableOpacity, Image } from 'react-native'
+import { checkImageURL } from '../../../../utils'
 
 import styles from './popularjobcard.style'
 
@@ -10,11 +11,23 @@ const PopularJobCard = ({ item, selectedJob, handleCardPress }) => {
       onPress={() => handleCardPress(item)}
     >
       <TouchableOpacity style={styles.logoContainer(selectedJob, item)}>
-        <Image source={{ uri: item?.employer_logo }} resizeMode='contain' style={styles.logoImage} />
+        <Image
+          source={{
+            uri: checkImageURL(item.employer_logo) ? item.employer_logo : 'https://dummyimage.com/600x400/000/fff',
+          }}
+          resizeMode='contain'
+          style={styles.logoImage}
+        />
       </TouchableOpacity>
-      <Text style={styles.companyName} numberOfLines={1}>{item?.employer_name}</Text>
+      <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.jobName(selectedJob, item)}
+          numberOfLines={1}
+        >{item?.job_title}</Text>
         <Text style={styles.location}>{item?.job_country}</Text>
       </View>
     </TouchableOpacity>

components/home/nearby/Nearbyjobs.jsx

@@ -1,14 +1,44 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import React, { useState } from 'react'
+import { View, Text, ActivityIndicator, TouchableOpacity } from 'react-native'
+import { COLORS, SIZES } from '../../../constants'
+import NearbyJobCard from '../../common/cards/nearby/NearbyJobCard'
+
+import { useRouter } from 'expo-router'
+import useFetch from '../../../hook/useFetch'
 
 import styles from './nearbyjobs.style'
 
 const Nearbyjobs = () => {
+  const router = useRouter();
+  const { data, isLoading, error, refetch } = useFetch('search', {
+    query: 'Python developer in Kolkata, India',
+    page: '1',
+    num_pages: '1'
+  })
+
   return (
-    <View>
-      <Text>Nearbyjobs</Text>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Near By 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>Something went worng</Text>
+        ) : (
+          data?.map((job) => (
+            <NearbyJobCard
+              job={job}
+              key={`nearby-${job?.job_id}`}
+              handleNavigate={() => router.push(`/job-details/${job?.job_id}`)}
+            />
+          ))
+        )}
+      </View>
     </View>
   )
 }
 
-export default Nearbyjobs
+export default Nearbyjobs;

components/home/popular/Popularjobs.jsx

@@ -15,8 +15,6 @@ const Popularjobs = () => {
     page: '1',
     num_pages: '1'
   })
-  console.log(data)
-
 
   return (
     <View style={styles.container}>

utils/index.js

@@ -0,0 +1,8 @@
+export const checkImageURL = (url) => {
+  if (!url) return false;
+  else {
+    const pattern = new RegExp('^https?:\\/\\/.+\\.(png|jpg|jpeg|bmp|gif|webp)$', 'i');
+    return pattern.test(url);
+  }
+}
+