humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:detail news space y, temporary filtered duplicate image

This commit is contained in:
Rama Priyanto 2025-06-20 16:02:55 +07:00
parent 223d3b367d c018be888e
commit bcd14fdef0
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/news/detail/[id]/page.tsx
View File

@ -8,7 +8,7 @@ type Props = {
};
export async function generateMetadata({ params }: any): Promise<Metadata> {
const res = await getArticleById(params.id?.split("-")[0]);
const res = await getArticleById(params?.id?.split("-")[0]);
const article = res?.data?.data;
return {
title: article.title,
@ -22,7 +22,7 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
}
export default async function NewsPage({ params }: any) {
const articleId = params.id?.split("-")[0];
const articleId = params?.id?.split("-")[0];
const res = await getArticleById(articleId);
const article = res?.data?.data;
return (

48
components/page/detail-news.tsx
View File

@ -39,6 +39,32 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
const params = useParams();
const id: any = params?.id;
const shareText = "Humas Polri";
const [filteredFiles, setFilteredFiles] = useState<any>([]);
useEffect(() => {
getUniqueBaseFiles(data?.files);
}, [data]);
function extractBaseName(fileName: string): string {
const match = fileName.match(/^(.+?)_\w+\.(jpg|jpeg|png|webp)$/i);
return match ? match[1] : fileName;
}
const getUniqueBaseFiles = (files: any) => {
if (files && files.length > 0) {
const seen = new Set<string>();
const result: any = [];
for (const file of files) {
const baseName = extractBaseName(file.file_name);
if (!seen.has(baseName)) {
seen.add(baseName);
result.push(file);
}
}
setFilteredFiles(result);
}
};
const handleShare = async (platform: string) => {
let shareLink = "";
@ -157,9 +183,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
</p>
</div>
<div className="flex justify-center my-2 lg:my-5">
{data?.files ? (
data?.files[0]?.file_name.split(".")[1].includes("doc") ||
data?.files[0]?.file_name.split(".")[1].includes("pdf") ? (
{filteredFiles ? (
filteredFiles[0]?.file_name.split(".")[1].includes("doc") ||
filteredFiles[0]?.file_name.split(".")[1].includes("pdf") ? (
<Image
classNames={{
wrapper: "!w-full !max-w-full",
@ -170,14 +196,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
className="object-cover w-[100%] rounded-md"
/>
) : (
data?.files?.length > 0 && (
filteredFiles?.length > 0 && (
<Image
// classNames={{
// wrapper: "!w-full !max-w-full",
// img: "!w-full",
// }}
alt="Main Image"
src={data?.files[imageNow]?.file_url}
src={filteredFiles[imageNow]?.file_url}
className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
/>
)
@ -186,10 +212,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
""
)}
</div>
{data?.files?.length > 0 &&
(data.files[0].file_name.split(".")[1].includes("doc") ||
data.files[0].file_name.split(".")[1].includes("pdf") ? (
data.files?.map((file: any, index: number) => (
{filteredFiles?.length > 0 &&
(filteredFiles[0].file_name.split(".")[1].includes("doc") ||
filteredFiles[0].file_name.split(".")[1].includes("pdf") ? (
filteredFiles?.map((file: any, index: number) => (
<Accordion key={file?.id} variant="splitted" className="px-0">
<AccordionItem
key={file?.id}
@ -242,7 +268,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
))
) : (
<div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
{data?.files?.map((file: any, index: number) => (
{filteredFiles?.map((file: any, index: number) => (
<a
key={file.id}
onClick={() => setImageNow(index)}
@ -261,7 +287,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
dangerouslySetInnerHTML={removeImgTags(
formatTextToHtmlTag(data?.htmlDescription)
)}
className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
className="text-sm lg:text-xl lg:leading-8 text-justify"
/>
<div className="bg-gray-50 dark:bg-black text-black dark:text-white rounded-lg justify-center items-center p-4 flex flex-col gap-3">