Merge remote-tracking branch 'origin/master' into feature/slicing

app/components/ui/carousel.tsx

@@ -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 (
-    <div className="">
-      <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
-        <div className="grid">
-          <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
-            {title}
-          </h2>
-          <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
-            {description}
-          </p>
-        </div>
-        {!hasCategory && (
-          <div className="flex gap-2.5">
-            <CarouselPreviousIcon
-              color="#DCDCDC"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-              onClick={previousSlide}
-            />
-            <CarouselNextIcon
-              color="#2E2F7C"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-              onClick={nextSlide}
-            />
-          </div>
-        )}
-      </div>
-
-      <div
-        className={twMerge(
-          'grid sm:gap-x-8',
-          type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
-        )}
-      >
-        {items
-          .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
-          .map(({ featured, title, content, tags, slug, isPremium }, index) => (
-            <div
-              key={index}
-              className={twMerge(
-                'grid sm:gap-x-8',
-                type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
-              )}
-            >
-              <img
-                className={twMerge(
-                  'w-full object-cover',
-                  type === 'hero'
-                    ? 'col-span-2 aspect-[174/100]'
-                    : 'aspect-[5/4] rounded-md',
-                )}
-                src={featured}
-                alt={title}
-              />
-              <div
-                className={twMerge(
-                  'flex flex-col justify-between',
-                  type === 'hero' ? 'gap-7' : 'gap-4',
-                )}
-              >
-                <div
-                  className={twMerge(
-                    'uppercase',
-                    type === 'hero' ? 'hidden' : '',
-                  )}
-                >
-                  {tags?.map((item) => (
-                    <span
-                      key={`${index}-${item}`}
-                      className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
-                    >
-                      {item}
-                    </span>
-                  ))}
-                  {isPremium && (
-                    <span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
-                      Premium Content
-                    </span>
-                  )}
-                </div>
-
-                <div>
-                  <h3
-                    className={twMerge(
-                      'mt-2 w-full font-bold sm:mt-0',
-                      type === 'hero'
-                        ? 'text-2xl sm:text-4xl'
-                        : 'text-xl sm:text-2xl',
-                    )}
-                  >
-                    {title}
-                  </h3>
-                  <p className="text-md mt-5 text-[#777777] sm:text-xl">
-                    {content}
-                  </p>
-                </div>
-                <Button
-                  size="block"
-                  {...(isPremium
-                    ? {
-                        onClick: () => {
-                          setIsSuccessOpen('warning')
-                        },
-                        to: '',
-                      }
-                    : { as: Link, to: `/detail/${slug}` })}
-                  className={twMerge('', type === 'hero' ? '' : 'mb-5')}
-                >
-                  View More
-                </Button>
-              </div>
-            </div>
-          ))}
-      </div>
-
-      {hasCategory && (
-        <div className="my-5 mt-5 flex flex-row-reverse">
-          <div className="flex gap-2.5">
-            <CarouselPreviousIcon
-              color="#DCDCDC"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-              onClick={previousSlide}
-            />
-            <CarouselNextIcon
-              color="#2E2F7C"
-              className="cursor-pointer"
-              width={45}
-              height={45}
-              onClick={nextSlide}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

app/components/ui/table.tsx

@@ -1,22 +0,0 @@
-import DT from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
-
-export const TableComponent = () => {
-  DataTable.use(DT)
-  return (
-    <>
-      <h1>test</h1>
-      <DataTable
-        className="cell-border"
-        data={[]}
-        columns={[]}
-        options={{
-          paging: true,
-          searching: true,
-          ordering: true,
-          info: true,
-        }}
-      ></DataTable>
-    </>
-  )
-}

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 ',

app/layouts/news/form-register.tsx

@@ -31,6 +31,7 @@ export const FormRegister = () => {
   const [disabled, setDisabled] = useState(false)
   const fetcher = useFetcher()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const subscriptions = loaderData?.subscriptionsData
 
   const formMethods = useRemixForm<TRegisterSchema>({
     mode: 'onSubmit',
@@ -98,7 +99,7 @@ export const FormRegister = () => {
               name="subscribe_plan"
               label="Subscription"
               placeholder="Pilih Subscription"
-              options={loaderData?.subscriptionsData}
+              options={subscriptions}
             />
 
             {error && (

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<typeof loader>('routes/_layout')
+  const userToken = loaderData?.userToken
   const fetcher = useFetcher()
 
   return (
@@ -29,7 +30,7 @@ export const HeaderTop = () => {
         <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
           About Us
         </Button>
-        {loaderData?.userToken ? (
+        {userToken ? (
           <fetcher.Form
             method="POST"
             action="/actions/logout"

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',

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<typeof loader>('routes/_layout')
+  const { name } =
+    loaderData?.categoriesData.find((item) => item.code === code) || {}
+  const { items } = BERITA
+
   return (
     <div className="relative">
       <Card>
-        <CategorySection {...BERITA} />
+        <CategorySection
+          title={name || ''}
+          description={DUMMY_DESCRIPTION}
+          items={items}
+        />
       </Card>
     </div>
   )

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',

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'