From 9980cb90dfadde0bc46dea218effd6610336e544 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 2 Mar 2025 12:21:18 +0800 Subject: [PATCH 1/3] feat: refactor subscription handling in registration form and header component --- app/layouts/news/form-register.tsx | 3 ++- app/layouts/news/header-top.tsx | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/layouts/news/form-register.tsx b/app/layouts/news/form-register.tsx index e7f6dde..5f1c01c 100644 --- a/app/layouts/news/form-register.tsx +++ b/app/layouts/news/form-register.tsx @@ -31,6 +31,7 @@ export const FormRegister = () => { const [disabled, setDisabled] = useState(false) const fetcher = useFetcher() const loaderData = useRouteLoaderData('routes/_layout') + const subscriptions = loaderData?.subscriptionsData const formMethods = useRemixForm({ mode: 'onSubmit', @@ -98,7 +99,7 @@ export const FormRegister = () => { name="subscribe_plan" label="Subscription" placeholder="Pilih Subscription" - options={loaderData?.subscriptionsData} + options={subscriptions} /> {error && ( diff --git a/app/layouts/news/header-top.tsx b/app/layouts/news/header-top.tsx index aac8b4e..a1ba0d2 100644 --- a/app/layouts/news/header-top.tsx +++ b/app/layouts/news/header-top.tsx @@ -3,11 +3,12 @@ import { Link, useFetcher, useRouteLoaderData } from 'react-router' import { Button } from '~/components/ui/button' import { APP } from '~/configs/meta' import { useNewsContext } from '~/contexts/news' -import type { loader } from '~/routes/_layout' +import { loader } from '~/routes/_layout' export const HeaderTop = () => { const { setIsLoginOpen } = useNewsContext() const loaderData = useRouteLoaderData('routes/_layout') + const userToken = loaderData?.userToken const fetcher = useFetcher() return ( @@ -29,7 +30,7 @@ export const HeaderTop = () => { - {loaderData?.userToken ? ( + {userToken ? ( Date: Sun, 2 Mar 2025 12:22:30 +0800 Subject: [PATCH 2/3] refactor: remove Carousel and TableComponent for code cleanup --- app/components/ui/carousel.tsx | 171 --------------------------------- app/components/ui/table.tsx | 22 ----- 2 files changed, 193 deletions(-) delete mode 100644 app/components/ui/carousel.tsx delete mode 100644 app/components/ui/table.tsx diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx deleted file mode 100644 index 6fe2f3b..0000000 --- a/app/components/ui/carousel.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { useState } from 'react' -import { Link, useLocation } from 'react-router' -import { twMerge } from 'tailwind-merge' - -import { CarouselNextIcon } from '~/components/icons/carousel-next' -import { CarouselPreviousIcon } from '~/components/icons/carousel-previous' -import { useNewsContext } from '~/contexts/news' -import type { TNews } from '~/types/news' - -import { Button } from './button' - -export const Carousel = (properties: TNews) => { - const { setIsSuccessOpen } = useNewsContext() - const [currentIndex, setCurrentIndex] = useState(0) - const { pathname } = useLocation() - const hasCategory = pathname.includes('/category/') - - const { title, description, items, type } = properties - const itemsPerPage = type === 'hero' ? 1 : 3 - const totalPages = Math.ceil(items.length / itemsPerPage) - - const nextSlide = () => { - setCurrentIndex((previousIndex) => (previousIndex + 1) % totalPages) - } - - const previousSlide = () => { - setCurrentIndex( - (previousIndex) => (previousIndex - 1 + totalPages) % totalPages, - ) - } - return ( -
-
-
-

- {title} -

-

- {description} -

-
- {!hasCategory && ( -
- - -
- )} -
- -
- {items - .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage) - .map(({ featured, title, content, tags, slug, isPremium }, index) => ( -
- {title} -
-
- {tags?.map((item) => ( - - {item} - - ))} - {isPremium && ( - - Premium Content - - )} -
- -
-

- {title} -

-

- {content} -

-
- -
-
- ))} -
- - {hasCategory && ( -
-
- - -
-
- )} -
- ) -} diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx deleted file mode 100644 index 12a9334..0000000 --- a/app/components/ui/table.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import DT from 'datatables.net-dt' -import DataTable from 'datatables.net-react' - -export const TableComponent = () => { - DataTable.use(DT) - return ( - <> -

test

- - - ) -} From 20fa80370b60089cbaebf3dc6ab8288c2613fc6b Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 2 Mar 2025 12:37:19 +0800 Subject: [PATCH 3/3] refactor: replace hardcoded descriptions with a constant for consistency --- app/data/contents.ts | 11 +++++------ app/pages/news-categories/data.ts | 4 ++-- app/pages/news-categories/index.tsx | 17 ++++++++++++++++- app/pages/news-detail/data.ts | 4 ++-- app/types/news.ts | 1 - 5 files changed, 25 insertions(+), 12 deletions(-) diff --git a/app/data/contents.ts b/app/data/contents.ts index 2606211..9fcd64a 100644 --- a/app/data/contents.ts +++ b/app/data/contents.ts @@ -1,9 +1,10 @@ import type { TNews } from '~/types/news' +export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini' + export const SPOTLIGHT: TNews = { title: 'SPOTLIGHT', - description: 'Berita Terhangat hari ini', - type: 'hero', + description: DUMMY_DESCRIPTION, items: [ { title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik', @@ -31,8 +32,7 @@ export const SPOTLIGHT: TNews = { export const BERITA: TNews = { title: 'BERITA', - description: 'Berita Terhangat hari ini', - type: 'grid', + description: DUMMY_DESCRIPTION, items: [ { title: '01 Travelling as a way of self-discovery and progress ', @@ -89,8 +89,7 @@ export const BERITA: TNews = { export const KAJIAN: TNews = { title: 'KAJIAN', - description: 'Berita Terhangat hari ini', - type: 'grid', + description: DUMMY_DESCRIPTION, items: [ { title: 'Travelling as a way of self-discovery and progress', diff --git a/app/pages/news-categories/data.ts b/app/pages/news-categories/data.ts index af44db7..a640e10 100644 --- a/app/pages/news-categories/data.ts +++ b/app/pages/news-categories/data.ts @@ -1,9 +1,9 @@ +import { DUMMY_DESCRIPTION } from '~/data/contents' import type { TNews } from '~/types/news' export const BERITA: TNews = { title: 'BERITA', - description: 'Berita Terhangat hari ini', - type: 'grid', + description: DUMMY_DESCRIPTION, items: [ { title: 'Travelling as a way of self-discovery and progress', diff --git a/app/pages/news-categories/index.tsx b/app/pages/news-categories/index.tsx index 1e8768d..9e66742 100644 --- a/app/pages/news-categories/index.tsx +++ b/app/pages/news-categories/index.tsx @@ -1,13 +1,28 @@ +import { useLocation, useRouteLoaderData } from 'react-router' + import { Card } from '~/components/ui/card' import { CategorySection } from '~/components/ui/category-section' +import { DUMMY_DESCRIPTION } from '~/data/contents' +import type { loader } from '~/routes/_layout' import { BERITA } from './data' export const NewsCategoriesPage = () => { + const { pathname } = useLocation() + const code = pathname.split('/')[2] + const loaderData = useRouteLoaderData('routes/_layout') + const { name } = + loaderData?.categoriesData.find((item) => item.code === code) || {} + const { items } = BERITA + return (
- +
) diff --git a/app/pages/news-detail/data.ts b/app/pages/news-detail/data.ts index cb61d9b..92f69b4 100644 --- a/app/pages/news-detail/data.ts +++ b/app/pages/news-detail/data.ts @@ -1,3 +1,4 @@ +import { DUMMY_DESCRIPTION } from '~/data/contents' import type { TNews, TNewsDetail } from '~/types/news' export const CONTENT: TNewsDetail = { @@ -40,8 +41,7 @@ export const CONTENT: TNewsDetail = { export const BERITA: TNews = { title: 'BERITA', - description: 'Berita Terhangat hari ini', - type: 'grid', + description: DUMMY_DESCRIPTION, items: [ { title: 'Travelling as a way of self-discovery and progress', diff --git a/app/types/news.ts b/app/types/news.ts index bb9ff12..d04e998 100644 --- a/app/types/news.ts +++ b/app/types/news.ts @@ -1,7 +1,6 @@ export type TNews = { title: string description: string - type: 'hero' | 'grid' items: Pick< TNewsDetail, 'title' | 'content' | 'featured' | 'slug' | 'tags' | 'isPremium'