Integrasi API: Admin forum

Add:
app/(application)/admin/forum/[id]/list-comment.tsx
        components/_Icon/IconOpenTo.tsx
        service/api-admin/api-admin-forum.ts

Fix:
app/(application)/admin/collaboration/index.tsx
app/(application)/admin/forum/[id]/index.tsx
app/(application)/admin/forum/[id]/list-report-comment.tsx
app/(application)/admin/forum/index.tsx
app/(application)/admin/forum/posting.tsx

### Issue: Report komentar masih belum berfungsi
This commit is contained in:
2025-10-17 17:41:25 +08:00
parent 90cfb042d8
commit d31df8c390
8 changed files with 490 additions and 188 deletions

View File

@@ -22,8 +22,6 @@ export default function AdminCollaboration() {
category: "dashboard",
});
console.log("[RESPONSE]", JSON.stringify(response, null, 2));
if (response.success) {
setList(response.data);
}
@@ -46,7 +44,6 @@ export default function AdminCollaboration() {
}
const listData = (list: any) => {
console.log("[LIST masuk]", JSON.stringify(list, null, 2));
return [
{
label: "Publish",

View File

@@ -1,58 +1,84 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
AlertDefaultSystem,
BadgeCustom,
BaseBox,
DrawerCustom,
MenuDrawerDynamicGrid,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { IconDot, IconView } from "@/components/_Icon/IconComponent";
import { IconTrash } from "@/components/_Icon/IconTrash";
import { IconDot } from "@/components/_Icon/IconComponent";
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
import { MainColor } from "@/constants/color-palet";
import {
ICON_SIZE_BUTTON,
ICON_SIZE_MEDIUM,
ICON_SIZE_XLARGE,
} from "@/constants/constans-value";
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
import { apiAdminForumPostingById } from "@/service/api-admin/api-admin-forum";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useState } from "react";
import { Divider } from "react-native-paper";
import Toast from "react-native-toast-message";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import { useCallback, useState } from "react";
export default function AdminForumDetailPosting() {
const { id } = useLocalSearchParams();
const [openDrawerPage, setOpenDrawerPage] = useState(false);
const [openDrawerAction, setOpenDrawerAction] = useState(false);
const [id, setId] = useState<any>();
const [selectedId, setSelectedId] = useState<any>();
const handlerAction = (item: { value: string; path: string }) => {
if (item.value === "delete") {
AlertDefaultSystem({
title: "Hapus Posting",
message: "Apakah Anda yakin ingin menghapus posting ini?",
textLeft: "Batal",
textRight: "Hapus",
onPressRight: () => {
Toast.show({
type: "success",
text1: "Posting berhasil dihapus",
const [data, setData] = useState<any | null>(null);
const [listComment, setListComment] = useState<any[] | null>(null);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
const response = await apiAdminForumPostingById({
id: id as string,
});
},
});
} else {
router.navigate(item.path as any);
console.log("[RES DATA]", JSON.stringify(response, null, 2));
if (response.success) {
setData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
}
setOpenDrawerAction(false);
};
const listDataAction = [
{
label: "Username",
value: data?.Author?.username || "-",
},
{
label: "Status",
value:
(data && (
<BadgeCustom
color={
data?.ForumMaster_StatusPosting?.status === "Open"
? MainColor.green
: MainColor.red
}
>
{data?.ForumMaster_StatusPosting?.status || "-"}
</BadgeCustom>
)) ||
"-",
},
{
label: "Komentar",
value: data?.JumlahKomentar || 0,
},
{
label: "Total Report",
value: data?.JumlahReportPosting || 0,
},
];
return (
<>
<ViewWrapper
@@ -77,22 +103,28 @@ export default function AdminForumDetailPosting() {
value={<TextCustom>{item.value}</TextCustom>}
/>
))}
<TextCustom bold>Posting</TextCustom>
<TextCustom>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
assumenda aut vero provident!
</TextCustom>
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"sm"}>
<TextCustom bold>Postingan</TextCustom>
<TextCustom>{(data && data?.diskusi) || "-"}</TextCustom>
</StackCustom>
</BaseBox>
{/* <AdminComp_BoxTitle title="Komentar" rightComponent={rightComponent} /> */}
<BaseBox>
{/* <StackCustom>
<AdminTitleTable title1="Aksi" title2="Username" title3="Komentar" />
<Spacing />
<Divider />
{Array.from({ length: 10 }).map((_, index) => (
{!listComment ? (
<LoaderCustom />
) : _.isEmpty(listComment) ? (
<TextCustom align="center" color="gray">
Tidak ada komentar
</TextCustom>
) : (
listComment?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
@@ -105,23 +137,22 @@ export default function AdminForumDetailPosting() {
/>
}
onPress={() => {
setOpenDrawerAction(true);
setId(index + 1);
setSelectedId(index + 1);
}}
/>
}
value2={<TextCustom truncate={1}>Username username</TextCustom>}
value3={
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis asperiores quidem deleniti architecto eaque et
nostrum, ad consequuntur eveniet quisquam quae voluptatum
ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
value2={
<TextCustom truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
}
/>
))}
</BaseBox>
))
)}
</StackCustom> */}
</ViewWrapper>
<DrawerCustom
@@ -143,6 +174,18 @@ export default function AdminForumDetailPosting() {
value: "detail",
path: `/admin/forum/${id}/list-report-posting`,
},
{
icon: (
<Ionicons
name="list"
size={ICON_SIZE_XLARGE}
color={MainColor.white}
/>
),
label: "Daftar Komentar",
value: "detail",
path: `/admin/forum/${id}/list-comment`,
},
]}
onPressItem={(item) => {
router.navigate(item.path as any);
@@ -150,54 +193,6 @@ export default function AdminForumDetailPosting() {
}}
/>
</DrawerCustom>
<DrawerCustom
isVisible={openDrawerAction}
closeDrawer={() => setOpenDrawerAction(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconView />,
label: "Detail Komentar",
value: "detail",
path: `admin/forum/${id}/list-report-comment`,
},
{
icon: (
<IconTrash size={ICON_SIZE_MEDIUM} color={MainColor.white} />
),
label: "Hapus Komentar",
value: "delete",
path: "",
color: MainColor.red,
},
]}
onPressItem={(item) => {
handlerAction(item as any);
}}
/>
</DrawerCustom>
</>
);
}
const listDataAction = [
{
label: "Username",
value: "Username",
},
{
label: "Status",
value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
},
{
label: "Komentar",
value: "10",
},
{
label: "Total Report",
value: "1",
},
];

View File

@@ -0,0 +1,153 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
AlertDefaultSystem,
DrawerCustom,
LoaderCustom,
MenuDrawerDynamicGrid,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { IconView } from "@/components/_Icon/IconComponent";
import { IconOpenTo } from "@/components/_Icon/IconOpenTo";
import { IconTrash } from "@/components/_Icon/IconTrash";
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import { MainColor } from "@/constants/color-palet";
import {
ICON_SIZE_BUTTON,
ICON_SIZE_MEDIUM,
ICON_SIZE_XLARGE,
} from "@/constants/constans-value";
import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
import { Ionicons } from "@expo/vector-icons";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { Divider } from "react-native-paper";
import Toast from "react-native-toast-message";
export default function AdminForumListComment() {
const { id } = useLocalSearchParams();
const [openDrawerAction, setOpenDrawerAction] = useState(false);
console.log("[ID]", id);
const [listComment, setListComment] = useState<any[] | null>(null);
useFocusEffect(
useCallback(() => {
onLoadComment();
}, [id])
);
const onLoadComment = async () => {
try {
const response = await apiAdminForumCommentById({
id: id as string,
category: "get-all",
});
console.log("[RES COMMENT]", JSON.stringify(response, null, 2));
if (response.success) {
setListComment(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
setListComment([]);
}
};
const handlerAction = (item: { value: string; path: string }) => {
if (item.value === "delete") {
AlertDefaultSystem({
title: "Hapus Posting",
message: "Apakah Anda yakin ingin menghapus posting ini?",
textLeft: "Batal",
textRight: "Hapus",
onPressRight: () => {
Toast.show({
type: "success",
text1: "Posting berhasil dihapus",
});
},
});
} else {
router.navigate(item.path as any);
}
setOpenDrawerAction(false);
};
return (
<>
<ViewWrapper
headerComponent={<AdminBackButtonAntTitle title="Daftar Komentar" />}
>
<StackCustom>
<AdminTitleTable title1="Aksi" title2="Username" title3="Komentar" />
<Divider />
{!listComment ? (
<LoaderCustom />
) : _.isEmpty(listComment) ? (
<TextCustom align="center" color="gray">
Tidak ada komentar
</TextCustom>
) : (
listComment?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
<IconOpenTo
onPress={() => {
router.push(
`/admin/forum/${item.id}/list-report-comment`
);
}}
/>
}
value2={
<TextCustom truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
}
/>
))
)}
</StackCustom>
</ViewWrapper>
<DrawerCustom
isVisible={openDrawerAction}
closeDrawer={() => setOpenDrawerAction(false)}
height={"auto"}
>
<MenuDrawerDynamicGrid
data={[
{
icon: <IconView />,
label: "Detail Komentar",
value: "detail",
path: `admin/forum/${id}/list-report-comment`,
},
{
icon: (
<IconTrash size={ICON_SIZE_MEDIUM} color={MainColor.white} />
),
label: "Hapus Komentar",
value: "delete",
path: "",
color: MainColor.red,
},
]}
onPressItem={(item) => {
handlerAction(item as any);
}}
/>
</DrawerCustom>
</>
);
}

View File

@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
AlertDefaultSystem,
@@ -18,15 +19,42 @@ import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import { router } from "expo-router";
import { useState } from "react";
import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import { useCallback, useState } from "react";
import { Divider } from "react-native-paper";
import Toast from "react-native-toast-message";
export default function AdminForumReportComment() {
const { id } = useLocalSearchParams();
console.log("[ID]", id);
const [data, setData] = useState<any | null>(null);
const [openDrawer, setOpenDrawer] = useState(false);
const [openDrawerAction, setOpenDrawerAction] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
const response = await apiAdminForumCommentById({
id: id as string,
category: "get-one",
});
console.log("[RES GET ONE COMMENT]", JSON.stringify(response, null, 2));
if (response.success) {
setData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
setData(null);
}
};
return (
<>
<ViewWrapper
@@ -44,20 +72,14 @@ export default function AdminForumReportComment() {
>
<BaseBox>
<StackCustom gap={"sm"}>
{listData.map((item, i) => (
<GridDetail_4_8
key={i}
label={<TextCustom bold>{item.label}</TextCustom>}
value={<TextCustom>{item.value}</TextCustom>}
label={<TextCustom bold>Username</TextCustom>}
value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
/>
<GridDetail_4_8
label={<TextCustom bold>Komentar</TextCustom>}
value={<TextCustom>{data?.komentar || "-"}</TextCustom>}
/>
))}
<TextCustom bold>Posting</TextCustom>
<TextCustom>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
assumenda aut vero provident!
</TextCustom>
</StackCustom>
</BaseBox>

View File

@@ -1,13 +1,54 @@
import { Spacing, StackCustom, ViewWrapper } from "@/components";
import {
IconPublish,
IconReport,
} from "@/components/_Icon/IconComponent";
import { IconPublish, IconReport } from "@/components/_Icon/IconComponent";
import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
import AdminTitlePage from "@/components/_ShareComponent/Admin/TitlePage";
import { MainColor } from "@/constants/color-palet";
import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
import { useFocusEffect } from "expo-router";
import { useCallback, useState } from "react";
export default function AdminForum() {
const [data, setData] = useState<any | null>(null);
useFocusEffect(
useCallback(() => {
handlerLoadList();
}, [])
);
const handlerLoadList = async () => {
try {
const response = await apiAdminForum({
category: "dashboard",
});
console.log("[RES DASHBOARD]", JSON.stringify(response, null, 2));
if (response.success) {
setData(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
}
};
const listData = [
{
label: "Posting",
value: data?.posting || 0,
icon: <IconPublish size={25} color={MainColor.green} />,
},
{
label: "Report Posting",
value: data?.report_posting || 0,
icon: <IconReport size={25} color={MainColor.orange} />,
},
{
label: "Report Comment",
value: data?.report_comment || 0,
icon: <IconReport size={25} color={MainColor.red} />,
},
];
return (
<>
<ViewWrapper>
@@ -22,21 +63,3 @@ export default function AdminForum() {
</>
);
}
const listData = [
{
label: "Posting",
value: 4,
icon: <IconPublish size={25} color={MainColor.green} />,
},
{
label: "Report Posting",
value: 7,
icon: <IconReport size={25} color={MainColor.orange} />,
},
{
label: "Report Comment",
value: 5,
icon: <IconReport size={25} color={MainColor.red} />,
},
];

View File

@@ -1,8 +1,11 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
BaseBox,
LoaderCustom,
SearchInput,
Spacing,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
@@ -12,15 +15,48 @@ 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 { router } from "expo-router";
import React from "react";
import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
import { router, useFocusEffect } from "expo-router";
import _ from "lodash";
import React, { useCallback, useState } from "react";
import { Divider } from "react-native-paper";
export default function AdminForumPosting() {
const [list, setList] = useState<any | null>(null);
const [loadList, setLoadList] = useState(false);
const [search, setSearch] = useState("");
useFocusEffect(
useCallback(() => {
handlerLoadList();
}, [search])
);
const handlerLoadList = async () => {
try {
setLoadList(true);
const response = await apiAdminForum({
category: "posting",
search: search,
});
// console.log("[RES LIST POSTING]", 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"
value={search}
onChangeText={setSearch}
/>
);
@@ -28,33 +64,39 @@ export default function AdminForumPosting() {
<>
<ViewWrapper headerComponent={<AdminTitlePage title="Forum" />}>
<AdminComp_BoxTitle title={"Posting"} rightComponent={rightComponent} />
<BaseBox>
<StackCustom>
<AdminTitleTable title1="Aksi" title2="Username" title3="Postingan" />
<Spacing />
<Divider />
{Array.from({ length: 10 }).map((_, index) => (
{loadList ? (
<LoaderCustom />
) : _.isEmpty(list) ? (
<TextCustom align="center" color="gray">
Belum ada data
</TextCustom>
) : (
list?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
<ActionIcon
icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
onPress={() => {
router.push(`/admin/forum/${index + 1}`);
router.push(`/admin/forum/${item?.id}`);
}}
/>
}
value2={<TextCustom truncate={1}>Username username</TextCustom>}
value3={
<TextCustom truncate={2}>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Blanditiis asperiores quidem deleniti architecto eaque et
nostrum, ad consequuntur eveniet quisquam quae voluptatum
ducimus! Dolorem nobis modi officia debitis, beatae mollitia.
value2={
<TextCustom truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.diskusi || "-"}</TextCustom>
}
/>
))}
</BaseBox>
))
)}
</StackCustom>
</ViewWrapper>
</>
);

View File

@@ -0,0 +1,27 @@
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
import { Ionicons } from "@expo/vector-icons";
import React from "react";
export { IconOpenTo };
function IconOpenTo({
color,
size,
onPress,
}: {
color?: string;
size?: number;
onPress?: () => void;
}) {
return (
<>
<Ionicons
onPress={onPress}
name="open"
size={size || ICON_SIZE_XLARGE}
color={color || MainColor.yellow}
/>
</>
);
}

View File

@@ -0,0 +1,43 @@
import { apiConfig } from "../api-config";
export async function apiAdminForum({
category,
search,
}: {
category: "dashboard" | "posting" | "report_posting" | "report_comment";
search?: string;
}) {
try {
const response = await apiConfig.get(
`/mobile/admin/forum?category=${category}&search=${search}`
);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiAdminForumPostingById({ id }: { id: string }) {
try {
const response = await apiConfig.get(`/mobile/admin/forum/${id}`);
return response.data;
} catch (error) {
throw error;
}
}
export async function apiAdminForumCommentById({
id,
category,
}: {
id: string;
category: "get-all" | "get-one";
}) {
try {
const response = await apiConfig.get(
`/mobile/admin/forum/${id}/comment?category=${category}`
);
return response.data;
} catch (error) {
throw error;
}
}