Integrasi API: Admin Job

Add:
-  service/api-admin/api-admin-job.ts

Fix:
 modified:   app/(application)/admin/job/[status]/status.tsx
        modified:   app/(application)/admin/job/index.tsx
        modified:   components/_ShareComponent/SearchInput.tsx

### No issue

app/(application)/admin/job/[status]/status.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   ActionIcon,
-  BaseBox,
+  LoaderCustom,
   SearchInput,
-  Spacing,
+  StackCustom,
   TextCustom,
   ViewWrapper
 } from "@/components";
@@ -11,17 +12,52 @@ import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
 import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
+import { apiAdminJob } from "@/service/api-admin/api-admin-job";
 import { Octicons } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
 import _ from "lodash";
+import { useCallback, useState } from "react";
 import { Divider } from "react-native-paper";
 
 export default function AdminJobStatus() {
   const { status } = useLocalSearchParams();
+  console.log("[STATUS]", status);
+
+  const [list, setList] = useState<any | null>(null);
+  const [loadList, setLoadList] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [status, search])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminJob({
+        category: status as "publish" | "review" | "reject",
+        search,
+      });
+
+      console.log("[RESPONSE >>]", JSON.stringify(response, null, 2));
+
+      if (response.success) {
+        setList(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   const rightComponent = (
     <SearchInput
-      containerStyle={{ width: "100%", marginBottom: 0 }}
       placeholder="Cari"
+      onChangeText={setSearch}
+      value={search}
     />
   );
   return (
@@ -32,44 +68,53 @@ export default function AdminJobStatus() {
           rightComponent={rightComponent}
         />
 
-        <BaseBox>
+        <StackCustom>
           <AdminTitleTable
             title1="Aksi"
             title2="Username"
             title3="Judul Pekerjaan"
           />
-          <Spacing />
+          {/* <Spacing /> */}
           <Divider />
 
-          {Array.from({ length: 10 }).map((_, index) => (
+          {loadList ? (
-            <AdminTableValue
+            <LoaderCustom />
-              key={index}
+          ) : _.isEmpty(list) ? (
-              value1={
+            <TextCustom align="center" color="gray">
-                <ActionIcon
+              Tidak ada data
-                  icon={
+            </TextCustom>
-                    <Octicons
+          ) : (
-                      name="eye"
+            list?.map((item: any, index: number) => (
-                      size={ICON_SIZE_BUTTON}
+              <AdminTableValue
-                      color="black"
+                key={index}
-                    />
+                value1={
-                  }
+                  <ActionIcon
-                  onPress={() => {
+                    icon={
-                    router.push(`/admin/job/${index}/${status}`);
+                      <Octicons
-                  }}
+                        name="eye"
-                />
+                        size={ICON_SIZE_BUTTON}
-              }
+                        color="black"
-              value2={<TextCustom truncate={1}>Username username</TextCustom>}
+                      />
-              value3={
+                    }
-                <TextCustom truncate={2}>
+                    onPress={() => {
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                      router.push(`/admin/job/${item.id}/${status}`);
-                  Blanditiis asperiores quidem deleniti architecto eaque et
+                    }}
-                  nostrum, ad consequuntur eveniet quisquam quae voluptatum
+                  />
-                  ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
+                }
-                </TextCustom>
+                value2={
-              }
+                  <TextCustom align="center" truncate={1}>
-            />
+                    {item?.Author?.username || "-"}
-          ))}
+                  </TextCustom>
-        </BaseBox>
+                }
+                value3={
+                  <TextCustom truncate={2} align="center">
+                    {item?.title || "-"}
+                  </TextCustom>
+                }
+              />
+            ))
+          )}
+        </StackCustom>
       </ViewWrapper>
     </>
   );

app/(application)/admin/job/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Spacing, StackCustom, ViewWrapper } from "@/components";
 import {
   IconPublish,
@@ -7,15 +8,45 @@ import {
 import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
 import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
 import { MainColor } from "@/constants/color-palet";
+import { apiAdminJob } from "@/service/api-admin/api-admin-job";
+import { useFocusEffect } from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function AdminJob() {
+  const [data, setData] = useState<any | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+
+  useFocusEffect(
+    useCallback(() => {
+      handlerLoadList();
+    }, [])
+  );
+
+  const handlerLoadList = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiAdminJob({
+        category: "dashboard",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
         <AdminTitlePage title="Job Vacancy" />
         <Spacing />
         <StackCustom gap={"xs"}>
-          {listData.map((item, i) => (
+          {listData(data).map((item: any, i: number) => (
             <AdminComp_BoxDashboard key={i} item={item} />
           ))}
         </StackCustom>
@@ -24,20 +55,20 @@ export default function AdminJob() {
   );
 }
 
-const listData = [
+const listData = (data: any) => [
   {
     label: "Publish",
-    value: 4,
+    value: (data && data?.publish) || 0,
     icon: <IconPublish size={25} color={MainColor.green} />,
   },
   {
     label: "Review",
-    value: 7,
+    value: (data && data?.review) || 0,
     icon: <IconReview size={25} color={MainColor.orange} />,
   },
   {
     label: "Reject",
-    value: 5,
+    value: (data && data?.reject) || 0,
     icon: <IconReject size={25} color={MainColor.red} />,
   },
 ];

components/_ShareComponent/SearchInput.tsx

@@ -2,7 +2,7 @@ import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import TextInputCustom from "../TextInput/TextInputCustom";
 import { Ionicons } from "@expo/vector-icons";
-import { StyleProp, ViewStyle, TextStyle } from "react-native";
+import { StyleProp, ViewStyle, TextStyle, StyleSheet } from "react-native";
 
 interface SearchInputProps {
   placeholder?: string;
@@ -12,6 +12,8 @@ interface SearchInputProps {
   containerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<TextStyle>;
   onChangeText?: (value: string) => void;
+  value?: string;
+  disabled?: boolean;
 }
 export default function SearchInput({
   placeholder,
@@ -21,6 +23,8 @@ export default function SearchInput({
   containerStyle,
   style,
   onChangeText,
+  value,
+  disabled,
   ...props
 }: SearchInputProps) {
   return (
@@ -29,14 +33,21 @@ export default function SearchInput({
         <Ionicons
           name="search-outline"
           size={ICON_SIZE_SMALL}
-          color={MainColor.placeholder}
+          color={disabled ? MainColor.white_gray : MainColor.placeholder}
         />
       }
+      value={value}
       onChangeText={onChangeText}
       placeholder={placeholder}
       borderRadius={50}
-      containerStyle={[containerStyle, { marginBottom: 0 }]}
+      containerStyle={[disabled ? styleses.disabled : styleses.containerStyle]}
+      disabled={disabled}
       {...props}
     />
   );
 }
+
+const styleses = StyleSheet.create({
+  containerStyle: { width: "100%", marginBottom: 0 },
+  disabled: { width: "100%", marginBottom: 0, color: MainColor.white_gray },
+});

service/api-admin/api-admin-job.ts

@@ -0,0 +1,18 @@
+import { apiConfig } from "../api-config";
+
+export async function apiAdminJob({
+  category,
+  search,
+}: {
+  category: "dashboard" | "publish" | "review" | "reject";
+  search?: string;
+}) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/admin/job?category=${category}&search=${search}`
+    );
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}