build and integrate home page

proalaa · Mar 25, 2024 · 3ccb424 · 3ccb424
1 parent ff47d8e
commit 3ccb424
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 34 deletions.
diff --git a/components/common/cards/nearby/NearbyJobCard.jsx b/components/common/cards/nearby/NearbyJobCard.jsx
@@ -1,14 +1,32 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TouchableOpacity, Image } from "react-native";
 
-import styles from './nearbyjobcard.style'
+import styles from "./nearbyjobcard.style";
+import { checkImageURL } from "../../../../utils";
 
-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://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",
+          }}
+          resizeMode="contain"
+          style={styles.logImage}
+        />
+      </TouchableOpacity>
 
-export default NearbyJobCard
+      <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;
diff --git a/components/common/cards/popular/PopularJobCard.jsx b/components/common/cards/popular/PopularJobCard.jsx
@@ -1,14 +1,42 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, TouchableOpacity, Image } from "react-native";
 
-import styles from './popularjobcard.style'
+import styles from "./popularjobcard.style";
+import { checkImageURL } from "../../../../utils";
 
-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: checkImageURL(item?.employer_logo)
+              ? item.employer_logo
+              : "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",
+          }}
+          resizeMode="contain"
+          style={styles.logoImage}
+        />
+      </TouchableOpacity>
+      <Text style={styles.companyName} numberOfLines={1}>
+        {item.employer_name}
+      </Text>
 
-export default PopularJobCard
+      <View style={styles.infoContainer}>
+        <Text style={styles.jobName(selectedJob, item)} numberOfLines={1}>
+          {item.job_title}
+        </Text>
+        <View style={styles.infoWrapper}>
+          <Text style={styles.publisher(selectedJob, item)}>
+            {item?.job_publisher} -
+          </Text>
+          <Text style={styles.location}> {item.job_country}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default PopularJobCard;
diff --git a/components/common/cards/popular/popularjobcard.style.js b/components/common/cards/popular/popularjobcard.style.js
@@ -44,9 +44,9 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "center",
   },
-  publisher: (selectedJob) => ({
+  publisher: (selectedJob, item) => ({
     fontSize: SIZES.medium - 2,
-    fontFamily: FONT.bold,
+    fontFamily: FONT.regular,
     color: selectedJob === item.job_id ? COLORS.white : COLORS.primary,
   }),
   location: {

diff --git a/components/home/nearby/Nearbyjobs.jsx b/components/home/nearby/Nearbyjobs.jsx
@@ -1,14 +1,45 @@
-import React from 'react'
-import { View, Text } from 'react-native'
+import React from "react";
+import { useRouter } from "expo-router";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
 
-import styles from './nearbyjobs.style'
+import styles from "./nearbyjobs.style";
+import { COLORS } from "../../../constants";
+import NearbyJobCard from "../../common/cards/nearby/NearbyJobCard";
+import useFetch from "../../../hook/useFetch";
 
 const Nearbyjobs = () => {
+  const router = useRouter();
+  const { data, isLoading, error } = useFetch("search", {
+    query: "React Native developer",
+    num_pages: "1",
+  });
+
   return (
-    <View>
-      <Text>Nearbyjobs</Text>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Nearby 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 wrong</Text>
+        ) : (
+          data?.map((job) => (
+            <NearbyJobCard
+              job={job}
+              key={`nearby-job-${job.job_id}`}
+              handleNavigate={() => router.push(`/job-details/${job.job_id}`)}
+            />
+          ))
+        )}
+      </View>
     </View>
-  )
-}
+  );
+};
 
-export default Nearbyjobs
+export default Nearbyjobs;
diff --git a/components/home/popular/Popularjobs.jsx b/components/home/popular/Popularjobs.jsx
@@ -1,12 +1,62 @@
-import React from "react";
-import { View, Text } from "react-native";
+import { useState } from "react";
+import { useRouter } from "expo-router";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  ActivityIndicator,
+} from "react-native";
 
 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",
+  });
+
+  const [selectedJob, setSelectedJob] = useState();
+
+  const handleCardPress = (item) => {
+    router.push(`/job-details/${item.job_id}`);
+    setSelectedJob(item.job_id);
+  };
+
   return (
-    <View>
-      <Text></Text>
+    <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>Something went wrong</Text>
+        ) : (
+          <FlatList
+            data={data}
+            renderItem={({ item }) => (
+              <PopularJobCard
+                item={item}
+                selectedJob={selectedJob}
+                handleCardPress={handleCardPress}
+              />
+            )}
+            keyExtractor={(item) => item.job_id}
+            contentContainerStyle={{ columnGap: SIZES.medium }}
+            horizontal
+          />
+        )}
+      </View>
     </View>
   );
 };

diff --git a/hook/useFetch.js b/hook/useFetch.js
@@ -0,0 +1,47 @@
+import { useState, useEffect } 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": "8cf63f2becmsh2707d400616d579p10792ajsn93584592bd9d",
+      "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);
+      console.log(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const refetch = () => {
+    setIsLoading(true);
+    fetchData();
+  };
+
+  return { data, isLoading, error, refetch };
+};
+
+export default useFetch;
diff --git a/utils/index.js b/utils/index.js
@@ -0,0 +1,10 @@
+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);
+  }
+};