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

fix sticker on user UI

Browse Source
This commit is contained in:
Bagasbanuna02
2025-05-19 14:30:14 +08:00
parent a42d074f2b
commit b1068933c2
5 changed files with 179 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,40 +1,80 @@
import { APIs } from "@/lib";
import {
ActionIcon,
Box,
Button,
CloseButton,
Image,
Loader,
ScrollArea,
SimpleGrid,
Tooltip,
Loader,
Group,
} from "@mantine/core";
import { IconMoodSmileFilled } from "@tabler/icons-react";
import { useRef, useState } from "react";
import { MainColor } from "../../color";
import { UIGlobal_Modal } from "../../ui";
import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
import { APIs } from "@/lib";
import { ISticker } from "../interface/stiker";
interface Props {
open: () => void;
close: () => void;
opened: boolean;
quillRef: any;
dataSticker: any;
listEmotions: any
dataSticker: ISticker[] | null;
// listEmotions: any[];
// onEmotionSelect?: (val: string | null) => void;
}
export const Comp_ButtonSticker = ({
open,
close,
opened,
quillRef,
dataSticker,
listEmotions,
// listEmotions,
// onEmotionSelect,
}: Props) => {
const scrollRef = useRef<HTMLDivElement>(null);
// Menyimpan id emosi yang dipilih
const [selectedEmotions, setSelectedEmotions] = useState<string[]>([]);
// Menyimpan urutan awal
// const [originalOrder] = useState(listEmotions);
// const handleEmotionClick = (value: string) => {
// setSelectedEmotions(
// (prev) =>
// prev.includes(value)
// ? prev.filter((v) => v !== value) // batal pilih
// : [...prev, value] // tambah pilih
// );
// };
// Urutkan emosi: yang dipilih muncul di depan
// const orderedEmotions = [
// ...selectedEmotions.map((val) => listEmotions.find((e: any) => e.value === val)),
// ...originalOrder.filter((e: any) => !selectedEmotions.includes(e.value)),
// ];
return (
<>
<ActionIcon onClick={open} variant="transparent" disabled={dataSticker.length === 0}>
<IconMoodSmileFilled color={dataSticker.length === 0 ? "gray" : MainColor.white} size={30} />
<ActionIcon
onClick={open}
variant="transparent"
disabled={!dataSticker}
>
<IconMoodSmileFilled
color={
!dataSticker
? "gray"
: MainColor.yellow
}
size={30}
/>
</ActionIcon>
<UIGlobal_Modal
@@ -43,19 +83,59 @@ export const Comp_ButtonSticker = ({
title="Pilih Stiker"
closeButton
closeOnClickOutside={false}
>
<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}>
{/* <ScrollArea type="never" viewportRef={scrollRef}>
<Box
p="sm"
style={{
display: "flex",
flexDirection: "row",
gap: "0.5rem",
overflowX: "auto",
overflowY: "hidden",
whiteSpace: "nowrap",
}}
>
{orderedEmotions.map((item: any) => {
const isSelected = selectedEmotions.includes(item.value);
return (
<Button
key={item.id}
variant={isSelected ? "filled" : "light"}
color={isSelected ? "blue" : "gray"}
radius="xl"
style={{ flexShrink: 0, position: "relative" }}
onClick={() => handleEmotionClick(item.value)}
>
{item.label}
{isSelected && (
<CloseButton
onClick={(e) => {
e.stopPropagation(); // agar tidak trigger lagi handleEmotionClick
handleEmotionClick(item.value);
}}
style={{
position: "absolute",
top: -6,
right: -6,
backgroundColor: "white",
borderRadius: "50%",
boxShadow: "0 0 2px rgba(0,0,0,0.3)",
}}
size="sm"
/>
)}
</Button>
);
})}
</Box>
</ScrollArea> */}
<ScrollArea h={480}>
<SimpleGrid cols={3} spacing="md">
{dataSticker.map((item: any) => (
{dataSticker?.map((item: any) => (
<Box key={item.id}>
<Tooltip label={item.name}>
<Image

4
src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
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

31
src/app_modules/forum/create/V3_create.tsx
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} />

25
src/app_modules/forum/detail/v3_main_detail.tsx
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}
/>
)
)}

25
src/app_modules/forum/edit/posting/V3_edit_posting.tsx
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