fix sticker on user UI

This commit is contained in:
2025-05-19 14:30:14 +08:00
parent a42d074f2b
commit b1068933c2
5 changed files with 179 additions and 24 deletions

View File

@@ -28,6 +28,7 @@ import {
MODEL_FORUM_KOMENTAR,
MODEL_FORUM_POSTING,
} from "../../model/interface";
import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
const ReactQuill = dynamic(
async () => {
@@ -52,11 +53,13 @@ export default function Forum_V3_CreateKomentar({
data,
userLoginId,
onSetLoadData,
dataSticker,
}: {
postingId: string;
data: MODEL_FORUM_POSTING;
userLoginId: string;
onSetLoadData: (val: string) => void;
dataSticker: ISticker[] | null;
}) {
const [loading, setLoading] = useState(false);
const [isComment, setIsComment] = useState(false);
@@ -196,6 +199,7 @@ export default function Forum_V3_CreateKomentar({
close={close}
opened={opened}
quillRef={quillRef}
dataSticker={dataSticker}
/>
<Button

View File

@@ -13,6 +13,9 @@ 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";
import pLimit from "p-limit";
import global_limit from "@/lib/limit";
import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
export function Forum_V3_Create() {
const router = useRouter();
@@ -21,18 +24,32 @@ 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 [sticker, setSticker] = useState<ISticker[] | null>(null);
const [emotion, setEmotion] = useState<any>([]);
// useShallowEffect(() => {
// handleLoadData();
// }, []);
// async function handleLoadData() {
// const listLoadData = [
// global_limit(onLoadEmotion),
// global_limit(onLoadSticker),
// ];
// await Promise.all(listLoadData);
// }
// useShallowEffect(() => {
// onLoadEmotion();
// }, []);
useShallowEffect(() => {
onLoadSticker();
onLoadEmotion();
}, []);
async function onLoadSticker() {
try {
const response = await apiGetStickerForUser({ emotion });
console.log("response >>", response);
if (response.success) {
setSticker(response.res.data);
} else {
@@ -48,7 +65,6 @@ export function Forum_V3_Create() {
async function onLoadEmotion() {
try {
const response = await apiGetMasterEmotions();
console.log("response >>", response);
if (response.success) {
setEmotion(response.data);
} else {
@@ -124,7 +140,12 @@ export function Forum_V3_Create() {
opened={opened}
quillRef={quillRef}
dataSticker={sticker}
listEmotions={emotion}
// listEmotions={emotion}
// onEmotionSelect={(val) => {
// console.log("val >>", val);
// // setEmotion(val ? [val] : []);
// // onLoadSticker(val ? [val] : []);
// }}
/>
<Forum_ButtonCreatePosting value={editorContent} />

View File

@@ -23,6 +23,8 @@ import {
Forum_SkeletonListKomentar,
} from "../component/skeleton_view";
import { MODEL_FORUM_KOMENTAR, MODEL_FORUM_POSTING } from "../model/interface";
import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
export default function Forum_V3_MainDetail({
userLoginId,
@@ -40,6 +42,28 @@ export default function Forum_V3_MainDetail({
const [activePage, setActivePage] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [sticker, setSticker] = useState<ISticker[] | null>(null);
const [emotion, setEmotion] = useState<any>([]);
useShallowEffect(() => {
onLoadSticker();
}, []);
async function onLoadSticker() {
try {
const response = await apiGetStickerForUser({ emotion: "" });
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([]);
}
}
useShallowEffect(() => {
handleLoadData();
}, []);
@@ -180,6 +204,7 @@ export default function Forum_V3_MainDetail({
onSetLoadData={(val) => {
setListKomentar((prev: any) => [val, ...prev]);
}}
dataSticker={sticker}
/>
)
)}

View File

@@ -14,6 +14,8 @@ import React, { useState } from "react";
import { apiGetOneForumById } from "../../component/api_fetch_forum";
import Forum_ButtonUpdatePosting from "../../component/button/button_update_posting";
import { MODEL_FORUM_POSTING } from "../../model/interface";
import { ISticker } from "@/app_modules/_global/lib/interface/stiker";
import { apiGetStickerForUser } from "@/app_modules/_global/lib/stiker/api_fecth_stiker_for_user";
export default function Forum_V3_EditPosting() {
const param = useParams<{ id: string }>();
@@ -24,6 +26,28 @@ export default function Forum_V3_EditPosting() {
const quillRef = React.useRef<any>(null);
const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
const [sticker, setSticker] = useState<ISticker[] | null>(null);
const [emotion, setEmotion] = useState<any>([]);
useShallowEffect(() => {
onLoadSticker();
}, []);
async function onLoadSticker() {
try {
const response = await apiGetStickerForUser({ emotion: "" });
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([]);
}
}
useShallowEffect(() => {
handleLoadData();
}, []);
@@ -102,6 +126,7 @@ export default function Forum_V3_EditPosting() {
close={close}
opened={opened}
quillRef={quillRef}
dataSticker={sticker}
/>
<Forum_ButtonUpdatePosting