wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix button sticker and API Sticket

Browse Source
This commit is contained in:
Bagasbanuna02
2025-05-19 11:30:59 +08:00
parent 2d37a72a2a
commit ef452d1b3e
9 changed files with 281 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/api/sticker/[id]/activation/route.ts → src/app/api/admin/sticker/[id]/activation/route.ts
View File

0
src/app/api/sticker/[id]/route.ts → src/app/api/admin/sticker/[id]/route.ts
View File

132
src/app/api/admin/sticker/route.ts Normal file
View File

@@ -0,0 +1,132 @@
import { prisma } from "@/lib";
import { data } from "autoprefixer";
import _ from "lodash";
import { NextResponse } from "next/server";
export { GET, POST };
interface IPostSticker {
fileId: string;
emotions: string[];
}
async function POST(request: Request) {
const method = request.method;
if (method !== "POST") {
return NextResponse.json(
{ success: false, message: "Method not allowed" },
{ status: 405 }
);
}
try {
const { fileId, emotions } = await request.json();
const newStiker = await prisma.sticker.create({
data: {
fileId,
MasterEmotions: {
connect: emotions.map((value: string) => ({ value })), // id = number[]
},
},
});
if (!newStiker) {
return NextResponse.json(
{ success: false, message: "Gagal membuat stiker" },
{ status: 400 }
);
}
return NextResponse.json(
{ success: true, message: "Berhasil membuat stiker" },
{ status: 200 }
);
} catch (error) {
console.error("Error create sticker", error);
return NextResponse.json(
{ success: false, message: "Failed to create sticker" },
{ status: 500 }
);
}
}
async function GET(request: Request) {
const method = request.method;
if (method !== "GET") {
return NextResponse.json(
{ success: false, message: "Method not allowed" },
{ status: 405 }
);
}
let fixData;
const { searchParams } = new URL(request.url);
const search = searchParams.get("search");
const page = searchParams.get("page");
const dataTake = 10;
const dataSkip = Number(page) * dataTake - dataTake;
try {
if (!page) {
fixData = await prisma.sticker.findMany({
orderBy: {
createdAt: "desc",
},
include: {
MasterEmotions: true,
},
});
} else {
const data = await prisma.sticker.findMany({
skip: dataSkip,
take: dataTake,
where: {
MasterEmotions: {
some: {
value: {
contains: search ? search : "",
mode: "insensitive",
},
},
},
},
orderBy: {
createdAt: "desc",
},
include: {
MasterEmotions: true,
},
});
const nCount = await prisma.sticker.count({
where: {
MasterEmotions: {
some: {
value: {
contains: search ? search : "",
mode: "insensitive",
},
},
},
},
});
fixData = {
data: data,
nPage: _.ceil(nCount / dataTake),
};
}
return NextResponse.json(
{ success: true, message: "Success get data sticker", data: fixData },
{ status: 200 }
);
} catch (error) {
console.error("Error get data sticker", error);
return NextResponse.json(
{ success: false, message: "Error get data sticker" },
{ status: 500 }
);
}
}

80
src/app/api/sticker/route.ts
View File

@@ -1,55 +1,8 @@
import { prisma } from "@/lib";
import { data } from "autoprefixer";
import _ from "lodash";
import { NextResponse } from "next/server";
export { GET, POST };
interface IPostSticker {
fileId: string;
emotions: string[];
}
async function POST(request: Request) {
const method = request.method;
if (method !== "POST") {
return NextResponse.json(
{ success: false, message: "Method not allowed" },
{ status: 405 }
);
}
try {
const { fileId, emotions } = await request.json();
const newStiker = await prisma.sticker.create({
data: {
fileId,
MasterEmotions: {
connect: emotions.map((value: string) => ({ value })), // id = number[]
},
},
});
if (!newStiker) {
return NextResponse.json(
{ success: false, message: "Gagal membuat stiker" },
{ status: 400 }
);
}
return NextResponse.json(
{ success: true, message: "Berhasil membuat stiker" },
{ status: 200 }
);
} catch (error) {
console.error("Error create sticker", error);
return NextResponse.json(
{ success: false, message: "Failed to create sticker" },
{ status: 500 }
);
}
}
export { GET };
async function GET(request: Request) {
const method = request.method;
@@ -62,30 +15,48 @@ async function GET(request: Request) {
let fixData;
const { searchParams } = new URL(request.url);
const search = searchParams.get("search");
const emotion = searchParams.get("emotion");
const page = searchParams.get("page");
const dataTake = 10
const dataTake = 10;
const dataSkip = Number(page) * dataTake - dataTake;
try {
if (!page) {
fixData = await prisma.sticker.findMany({
// Without page
const getData = await prisma.sticker.findMany({
orderBy: {
createdAt: "desc",
},
where: {
isActive: true,
MasterEmotions: {
some: {
value: {
contains: emotion ? emotion : "",
mode: "insensitive",
},
},
},
},
include: {
MasterEmotions: true,
},
});
fixData = {
data: getData,
};
} else {
// With page
const data = await prisma.sticker.findMany({
skip: dataSkip,
take: dataTake,
where: {
isActive: true,
MasterEmotions: {
some: {
value: {
contains: search ? search : "",
contains: emotion ? emotion : "",
mode: "insensitive",
},
},
@@ -101,10 +72,11 @@ async function GET(request: Request) {
const nCount = await prisma.sticker.count({
where: {
isActive: true,
MasterEmotions: {
some: {
value: {
contains: search ? search : "",
contains: emotion ? emotion : "",
mode: "insensitive",
},
},
@@ -119,7 +91,7 @@ async function GET(request: Request) {
}
return NextResponse.json(
{ success: true, message: "Success get data sticker", data: fixData },
{ success: true, message: "Success get data sticker", res: fixData },
{ status: 200 }
);
} catch (error) {

32
src/app_modules/_global/lib/stiker/api_fecth_stiker_for_user.tsx Normal file
View File

@@ -0,0 +1,32 @@
export const apiGetStickerForUser = async ({ emotion }: { emotion?: string }) => {
try {
// Fetch token from cookie
const { token } = await fetch("/api/get-cookie").then((res) => res.json());
if (!token) {
console.error("No token found");
return null;
}
const response = await fetch(`/api/sticker?emotion=${emotion || ""}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
Authorization: `Bearer ${token}`,
},
});
// Check if the response is OK
if (!response.ok) {
const errorData = await response.json().catch(() => null);
console.error("Failed to get sticker", response.statusText, errorData);
throw new Error(errorData?.message || "Failed to get sticker");
}
// Return the JSON response
return await response.json();
} catch (error) {
console.error("Error get sticker", error);
throw error; // Re-throw the error to handle it in the calling function
}
};

49
src/app_modules/_global/lib/stiker/comp_button_sticker.tsx
View File

@@ -1,21 +1,40 @@
import { ActionIcon, Box, Image, ScrollArea, SimpleGrid, Tooltip } from "@mantine/core";
import {
ActionIcon,
Box,
Image,
ScrollArea,
SimpleGrid,
Tooltip,
Loader,
Group,
} from "@mantine/core";
import { IconMoodSmileFilled } from "@tabler/icons-react";
import { MainColor } from "../../color";
import { UIGlobal_Modal } from "../../ui";
import { listStiker } from "../stiker";
import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
import { APIs } from "@/lib";
interface Props {
open: () => void;
close: () => void;
opened: boolean;
quillRef: any;
dataSticker: any;
listEmotions: any
}
export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
export const Comp_ButtonSticker = ({
open,
close,
opened,
quillRef,
dataSticker,
listEmotions,
}: Props) => {
return (
<>
<ActionIcon onClick={open} variant="transparent">
<IconMoodSmileFilled color={MainColor.white} size={30} />
<ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
<IconMoodSmileFilled color={dataSticker.length === 0 ? "gray" : MainColor.white} size={30} />
</ActionIcon>
<UIGlobal_Modal
@@ -23,22 +42,32 @@ export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
close={close}
title="Pilih Stiker"
closeButton
closeOnClickOutside={false}
>
<Box mah={`${400}dvh`}>
<Box mah={`${500}dvh`}>
{/* <Group position="center">
{listEmotions.map((item: any) => (
<ActionIcon key={item.id} onClick={() => open()}>
<IconMoodSmileFilled color={item.value} size={30} />
</ActionIcon>
))}
</Group> */}
<ScrollArea h={380}>
<SimpleGrid cols={3} spacing="md">
{listStiker.map((item) => (
{dataSticker.map((item: any) => (
<Box key={item.id}>
<Tooltip label={item.name}>
<Image
src={item.url}
onLoad={() => <Loader />}
src={APIs.GET({ fileId: item.fileId })}
height={100}
width={100}
alt={item.name}
style={{ cursor: "pointer" }}
onClick={() =>
insertStickerReactQuill({
stickerUrl: item.url,
stickerUrl: APIs.GET({ fileId: item.fileId }),
quillRef: quillRef,
close: close,
})
@@ -53,4 +82,4 @@ export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
</UIGlobal_Modal>
</>
);
}
};

3
src/app_modules/_global/ui/ui_modal.tsx
View File

@@ -21,6 +21,7 @@ export default function UIGlobal_Modal({
buttonKanan,
children,
closeButton,
closeOnClickOutside,
}: {
opened: any;
close: any;
@@ -29,6 +30,7 @@ export default function UIGlobal_Modal({
buttonKanan?: any;
children?: React.ReactNode;
closeButton?: boolean;
closeOnClickOutside?: boolean;
}) {
return (
<>
@@ -39,6 +41,7 @@ export default function UIGlobal_Modal({
}}
centered
withCloseButton={false}
closeOnClickOutside={closeOnClickOutside}
styles={{
content: {
backgroundColor: MainColor.darkblue,

12
src/app_modules/admin/app_info/lib/api_fetch_stiker.tsx
View File

@@ -7,7 +7,7 @@ export const apiAdminCreateSticker = async ({ data }: { data: any }) => {
return null;
}
const response = await fetch(`/api/sticker`, {
const response = await fetch(`/api/admin/sticker`, {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -41,7 +41,7 @@ export const apiAdminGetSticker = async ({ page }: { page: number }) => {
return null;
}
const response = await fetch(`/api/sticker?page=${page}`, {
const response = await fetch(`/api/admin/sticker?page=${page}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
@@ -74,7 +74,7 @@ export const apiAdminGetStickerById = async ({ id }: { id: string }) => {
return null;
}
const response = await fetch(`/api/sticker/${id}`, {
const response = await fetch(`/api/admin/sticker/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
@@ -108,7 +108,7 @@ export const apiAdminUpdateSticker = async ({ data }: { data: any }) => {
return null;
}
const response = await fetch(`/api/sticker/${data.id}`, {
const response = await fetch(`/api/admin/sticker/${data.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
@@ -142,7 +142,7 @@ export const apiAdminDeleteSticker = async ({ id }: { id: string }) => {
return null;
}
const response = await fetch(`/api/sticker/${id}`, {
const response = await fetch(`/api/admin/sticker/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
@@ -175,7 +175,7 @@ export const apiAdminUpdateStatusStickerById = async ({ data }: { data: any }) =
return null;
}
const response = await fetch(`/api/sticker/${data.id}/activation`, {
const response = await fetch(`/api/admin/sticker/${data.id}/activation`, {
method: "PUT",
headers: {
"Content-Type": "application/json",

43
src/app_modules/forum/create/V3_create.tsx
View File

@@ -11,6 +11,8 @@ import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import Forum_ButtonCreatePosting from "../component/button/button_create_posting";
import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
import { apiGetMasterEmotions } from "@/app_modules/_global/lib/api_fetch_master";
export function Forum_V3_Create() {
const router = useRouter();
@@ -19,6 +21,45 @@ export function Forum_V3_Create() {
const quillRef = React.useRef<any>(null);
const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
const [isReady, setIsReady] = useState<boolean>(false);
const [sticker, setSticker] = useState<any>([]);
const [emotion, setEmotion] = useState<any>([]);
useShallowEffect(() => {
onLoadSticker();
onLoadEmotion();
}, []);
async function onLoadSticker() {
try {
const response = await apiGetStickerForUser({ emotion });
console.log("response >>", response);
if (response.success) {
setSticker(response.res.data);
} else {
console.error("Failed to get sticker", response.message);
setSticker([]);
}
} catch (error) {
console.error("Error get sticker", error);
setSticker([]);
}
}
async function onLoadEmotion() {
try {
const response = await apiGetMasterEmotions();
console.log("response >>", response);
if (response.success) {
setEmotion(response.data);
} else {
console.error("Failed to get emotion", response.message);
setEmotion([]);
}
} catch (error) {
console.error("Error get emotion", error);
setEmotion([]);
}
}
useShallowEffect(() => {
setIsReady(true); // Set ready on client-side mount
@@ -82,6 +123,8 @@ export function Forum_V3_Create() {
close={close}
opened={opened}
quillRef={quillRef}
dataSticker={sticker}
listEmotions={emotion}
/>
<Forum_ButtonCreatePosting value={editorContent} />