react native jobs app initial setup

Author: Stephany-Doris

.gitignore

@@ -8,6 +8,7 @@ npm-debug.*
 *.key
 *.mobileprovision
 *.orig.*
+.env
 web-build/
 
 # macOS

app/_layout.js

@@ -0,0 +1,26 @@
+import { Stack } from "expo-router";
+import { useCallback } from "react";
+import { useFonts } from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+
+SplashScreen.preventAutoHideAsync();
+
+const Layout = () => {
+  const [fontsLoaded] = useFonts({
+    DMBold: require("../assets/fonts/DMSans-Bold.ttf"),
+    DMMedium: require("../assets/fonts/DMSans-Medium.ttf"),
+    DMRegular: require("../assets/fonts/DMSans-Regular.ttf"),
+  });
+
+  const onLayoutRootView = useCallback(async () => {
+    if (fontsLoaded) {
+      await SplashScreen.hideAsync();
+    }
+  }, [fontsLoaded]);
+
+  if (!fontsLoaded) return null;
+
+  return <Stack onLayout={onLayoutRootView} />;
+};
+
+export default Layout;

app/index.js

@@ -0,0 +1,51 @@
+import { View, ScrollView, SafeAreaView, Text } from "react-native";
+import { useState } from "react";
+import { Stack, useRouter } from "expo-router";
+
+import {
+  Nearbyjobs,
+  Popularjobs,
+  ScreenHeaderBtn,
+  Welcome,
+} from "../components";
+import { COLORS, icons, images, SIZES } from "../constants";
+
+const Home = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const router = useRouter();
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
+      <Stack.Screen
+        options={{
+          headerStyle: { backgroundColor: COLORS.lightWhite },
+          headerShadowVisible: false,
+          headerTitle: "",
+          headerLeft: () => (
+            <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
+          ),
+          headerRight: () => (
+            <ScreenHeaderBtn iconUrl={images.profile} dimension="100%" />
+          ),
+        }}
+      />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={{ flex: 1, padding: SIZES.medium }}>
+          <Welcome
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            handleClick={() => {
+              if (searchTerm) {
+                router.push(`/search/${searchTerm}`);
+              }
+            }}
+          />
+          <Popularjobs />
+          <Nearbyjobs />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default Home;

app/job-details/[id].js

@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from "react";
+import {
+  Text,
+  View,
+  ScrollView,
+  ActivityIndicator,
+  RefreshControl,
+  SafeAreaView,
+} from "react-native";
+import { Stack, useRouter, useSearchParams } from "expo-router";
+
+import {
+  Company,
+  JobAbout,
+  JobFooter,
+  JobTabs,
+  ScreenHeaderBtn,
+  Specifics,
+} from "../../components";
+import { COLORS, SIZES, icons } from "../../constants";
+import useFetch from "../../hooks/useFetchHook";
+
+const tabs = ["About", "Qualifications", "Responsibilities"];
+
+const JobDetails = () => {
+  const [refreshing, setRefreshing] = useState(false);
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const params = useSearchParams();
+  const router = useRouter();
+  const { data, isLoading, error, refetch } = useFetch("job-details", {
+    job_id: params.id,
+  });
+
+  const onRefresh = () => {};
+
+  const displayTabContent = () => {
+    switch (activeTab) {
+      case "Qualifications":
+        return (
+          <Specifics
+            title="Qualifications"
+            points={data[0].job_highlights?.Qualifications ?? ["N/A"]}
+          />
+        );
+      case "About":
+        return (
+          <JobAbout info={data[0].job_description ?? "No data provided"} />
+        );
+      case "Responsibilities":
+        return (
+          <Specifics
+            title="Responsibilities"
+            points={data[0].job_highlights?.Responsibilities ?? ["N/A"]}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
+      <Stack.Screen
+        options={{
+          headerStyle: { backgroundColor: COLORS.lightWhite },
+          headerShadowVisible: false,
+          headerBackVisible: false,
+          headerLeft: () => (
+            <ScreenHeaderBtn
+              iconUrl={icons.left}
+              dimension="60%"
+              handlePress={() => router.back()}
+            />
+          ),
+          headerRight: () => (
+            <ScreenHeaderBtn iconUrl={icons.share} dimension="60%" />
+          ),
+          headerTitle: "",
+        }}
+      />
+      <>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        >
+          {isLoading ? (
+            <ActivityIndicator size="large" color={COLORS.primary} />
+          ) : error ? (
+            <Text>Something went wrong!</Text>
+          ) : data?.length === 0 ? (
+            <Text>No data</Text>
+          ) : (
+            <View style={{ padding: SIZES.medium, paddingBottom: 100 }}>
+              <Company
+                companyLogo={data[0].employer_logo}
+                jobTitle={data[0].job_title}
+                companyName={data[0].employer_name}
+                location={data[0].job_country}
+              />
+              <JobTabs
+                tabs={tabs}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+              />
+
+              {displayTabContent()}
+            </View>
+          )}
+        </ScrollView>
+        <JobFooter
+          url={
+            data[0]?.job_google_link ??
+            "https://careers.google.com/jobs/results/"
+          }
+        />
+      </>
+    </SafeAreaView>
+  );
+};
+
+export default JobDetails;

app/search/[id].js

@@ -0,0 +1,145 @@
+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";
+
+import { RAPID_API_KEY } from "@env";
+const rapidAPIKey = RAPID_API_KEY;
+
+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": rapidAPIKey,
+          "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;

assets/adaptive-icon.png

@@ -5,6 +5,7 @@ module.exports = function (api) {
     plugins: [
       "@babel/plugin-proposal-export-namespace-from",
       "react-native-reanimated/plugin",
+      "module:react-native-dotenv",
       require.resolve("expo-router/babel"),
     ],
   };