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,51 +103,56 @@ 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) => (
<AdminTableValue
key={index}
value1={
<ActionIcon
icon={
<Ionicons
name="ellipsis-vertical-outline"
size={ICON_SIZE_BUTTON}
color="black"
/>
}
onPress={() => {
setOpenDrawerAction(true);
setId(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.
</TextCustom>
}
/>
))}
</BaseBox>
{!listComment ? (
<LoaderCustom />
) : _.isEmpty(listComment) ? (
<TextCustom align="center" color="gray">
Tidak ada komentar
</TextCustom>
) : (
listComment?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
<ActionIcon
icon={
<Ionicons
name="ellipsis-vertical-outline"
size={ICON_SIZE_BUTTON}
color="black"
/>
}
onPress={() => {
setSelectedId(index + 1);
}}
/>
}
value2={
<TextCustom truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
}
/>
))
)}
</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>}
/>
))}
<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>
<GridDetail_4_8
label={<TextCustom bold>Username</TextCustom>}
value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
/>
<GridDetail_4_8
label={<TextCustom bold>Komentar</TextCustom>}
value={<TextCustom>{data?.komentar || "-"}</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) => (
<AdminTableValue
key={index}
value1={
<ActionIcon
icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
onPress={() => {
router.push(`/admin/forum/${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.
</TextCustom>
}
/>
))}
</BaseBox>
{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/${item?.id}`);
}}
/>
}
value2={
<TextCustom truncate={1}>
{item?.Author?.username || "-"}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.diskusi || "-"}</TextCustom>
}
/>
))
)}
</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;
}
}