feat: Migrate Job screens to NewWrapper_V2 with keyboard handling
- Migrate ScreenJobCreate.tsx to NewWrapper_V2
- Migrate ScreenJobEdit.tsx to NewWrapper_V2
- Add NewWrapper_V2 component with auto-scroll keyboard handling
- Add useKeyboardForm hook for keyboard management
- Add FormWrapper component for forms
- Create ScreenJobEdit.tsx from edit route (separation of concerns)
- Add documentation for keyboard implementation
- Add TASK-004 migration plan
- Fix: Footer width 100% with safe positioning
- Fix: Content padding bottom 80px for navigation bar
- Fix: Auto-scroll to focused input
- Fix: No white area when keyboard close
- Fix: Footer not raised after keyboard close
Phase 1 completed: Job screens migrated
### No Issue
This commit is contained in:
@@ -1,198 +1,11 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BaseBox,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
DummyLandscapeImage,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
LoaderCustom,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { apiJobGetOne, apiJobUpdateData } from "@/service/api-client/api-job";
|
||||
import {
|
||||
deleteFileService,
|
||||
uploadFileService,
|
||||
} from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Toast from "react-native-toast-message";
|
||||
import { Job_ScreenEdit } from "@/screens/Job/ScreenJobEdit";
|
||||
import { Job_ScreenEdit2 } from "@/screens/Job/ScreenJobEdit2";
|
||||
|
||||
export default function JobEdit() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any>({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
});
|
||||
const [isLoadData, setIsLoadData] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [imageUri, setImageUri] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
onLoadData();
|
||||
}, [id]);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setIsLoadData(true);
|
||||
const response = await apiJobGetOne({ id: id as string });
|
||||
if (response.success) {
|
||||
setData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoadData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerOnUpdate = async () => {
|
||||
if (!data.title || !data.content || !data.deskripsi) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
let newImageId = "";
|
||||
|
||||
if (imageUri) {
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: imageUri,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
newImageId = responseUploadImage.data.id;
|
||||
}
|
||||
}
|
||||
|
||||
if (data?.imageId) {
|
||||
const responseDeleteImage = await deleteFileService({
|
||||
id: data.imageId,
|
||||
});
|
||||
|
||||
if (!responseDeleteImage.success) {
|
||||
console.log("[ERROR DELETE IMAGE]", responseDeleteImage.message);
|
||||
}
|
||||
}
|
||||
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
imageId: newImageId,
|
||||
};
|
||||
|
||||
const response = await apiJobUpdateData({
|
||||
id: id as string,
|
||||
data: newData,
|
||||
category: "edit",
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: response.message,
|
||||
});
|
||||
router.back();
|
||||
} else {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: response.message,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnUpdate()}>
|
||||
Update
|
||||
</ButtonCustom>
|
||||
<Spacing />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<ViewWrapper>
|
||||
{isLoadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
{imageUri ? (
|
||||
<LandscapeFrameUploaded image={imageUri as any} />
|
||||
) : (
|
||||
<BaseBox>
|
||||
<DummyLandscapeImage imageId={data?.imageId} />
|
||||
</BaseBox>
|
||||
)}
|
||||
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
pickImage({
|
||||
setImageUri,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
|
||||
{buttonSubmit()}
|
||||
</StackCustom>
|
||||
)}
|
||||
</ViewWrapper>
|
||||
<>
|
||||
{/* <Job_ScreenEdit />; */}
|
||||
<Job_ScreenEdit2 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,168 +1,11 @@
|
||||
import {
|
||||
BoxButtonOnFooter,
|
||||
ButtonCenteredOnly,
|
||||
ButtonCustom,
|
||||
InformationBox,
|
||||
LandscapeFrameUploaded,
|
||||
NewWrapper,
|
||||
Spacing,
|
||||
StackCustom,
|
||||
TextAreaCustom,
|
||||
TextInputCustom
|
||||
} from "@/components";
|
||||
import DIRECTORY_ID from "@/constants/directory-id";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { apiJobCreate } from "@/service/api-client/api-job";
|
||||
import { uploadFileService } from "@/service/upload-service";
|
||||
import pickImage from "@/utils/pickImage";
|
||||
import { router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import Toast from "react-native-toast-message";
|
||||
import { Job_ScreenCreate } from "@/screens/Job/ScreenJobCreate";
|
||||
import { Job_ScreenCreate2 } from "@/screens/Job/ScreenJobCreate2";
|
||||
|
||||
export default function JobCreate() {
|
||||
const nextUrl = "/(application)/(user)/job/(tabs)/status?status=review";
|
||||
const { user } = useAuth();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [image, setImage] = useState<string | null>(null);
|
||||
const [data, setData] = useState({
|
||||
title: "",
|
||||
content: "",
|
||||
deskripsi: "",
|
||||
authorId: "",
|
||||
});
|
||||
|
||||
const handlerOnSubmit = async () => {
|
||||
let imageId = "";
|
||||
const newData = {
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
deskripsi: data.deskripsi,
|
||||
authorId: user?.id,
|
||||
imageId: "",
|
||||
};
|
||||
|
||||
if (!data.title || !data.content || !data.deskripsi || !user?.id) {
|
||||
Toast.show({
|
||||
type: "info",
|
||||
text1: "Info",
|
||||
text2: "Harap isi semua data",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
if (image === null || !image) {
|
||||
const response = await apiJobCreate(newData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const responseUploadImage = await uploadFileService({
|
||||
imageUri: image,
|
||||
dirId: DIRECTORY_ID.job_image,
|
||||
});
|
||||
|
||||
if (responseUploadImage.success) {
|
||||
imageId = responseUploadImage.data.id;
|
||||
}
|
||||
|
||||
const fixData = {
|
||||
...newData,
|
||||
imageId: imageId,
|
||||
};
|
||||
|
||||
const response = await apiJobCreate(fixData);
|
||||
if (response.success) {
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Berhasil",
|
||||
text2: "Lowongan berhasil dibuat",
|
||||
});
|
||||
router.replace(nextUrl);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR]", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonSubmit = () => {
|
||||
return (
|
||||
<>
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom isLoading={isLoading} onPress={() => handlerOnSubmit()}>
|
||||
Simpan
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<NewWrapper footerComponent={buttonSubmit()}>
|
||||
<StackCustom gap={"xs"}>
|
||||
<InformationBox text="Poster atau gambar lowongan kerja bersifat opsional, tidak wajib untuk dimasukkan dan upload lah gambar yang sesuai dengan deskripsi lowongan kerja." />
|
||||
|
||||
{/* <BaseBox>
|
||||
<Image
|
||||
source={image ? { uri: image } : DUMMY_IMAGE.dummy_image}
|
||||
style={{ width: "100%", height: 200 }}
|
||||
/>
|
||||
</BaseBox> */}
|
||||
<LandscapeFrameUploaded image={image as string} />
|
||||
<ButtonCenteredOnly
|
||||
onPress={() => {
|
||||
// router.push("/(application)/(image)/take-picture/123");
|
||||
pickImage({
|
||||
setImageUri: setImage,
|
||||
});
|
||||
}}
|
||||
icon="upload"
|
||||
>
|
||||
Upload
|
||||
</ButtonCenteredOnly>
|
||||
|
||||
<Spacing />
|
||||
|
||||
<TextInputCustom
|
||||
label="Judul Lowongan"
|
||||
placeholder="Masukan Judul Lowongan Kerja"
|
||||
required
|
||||
value={data.title}
|
||||
onChangeText={(value) => setData({ ...data, title: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Syarat & Kualifikasi"
|
||||
placeholder="Masukan Syarat & Kualifikasi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.content}
|
||||
onChangeText={(value) => setData({ ...data, content: value })}
|
||||
/>
|
||||
|
||||
<TextAreaCustom
|
||||
label="Deskripsi Lowongan"
|
||||
placeholder="Masukan Deskripsi Lowongan Kerja"
|
||||
required
|
||||
showCount
|
||||
maxLength={1000}
|
||||
value={data.deskripsi}
|
||||
onChangeText={(value) => setData({ ...data, deskripsi: value })}
|
||||
/>
|
||||
</StackCustom>
|
||||
</NewWrapper>
|
||||
<>
|
||||
{/* <Job_ScreenCreate /> */}
|
||||
<Job_ScreenCreate2/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user