From 0f414f6963cbb1f6126c2ee85d4e72fef36700f8 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 15:46:10 +0800 Subject: [PATCH 1/5] refactor: update disabled button styles in EditorButton component for improved accessibility --- app/components/text-editor/editor-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/text-editor/editor-button.tsx b/app/components/text-editor/editor-button.tsx index cd51d13..e71113f 100644 --- a/app/components/text-editor/editor-button.tsx +++ b/app/components/text-editor/editor-button.tsx @@ -21,7 +21,7 @@ export const EditorButton = (properties: TProperties) => { onClick={onClick} disabled={disabled} className={twMerge( - 'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:hover:bg-[#2E2F7C]/50', + 'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50', isActive ? 'bg-[#2E2F7C]/10' : '', className, )} From c7583413bbb84e7c9b8d8cd7fd54c0f117a89e6a Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 20:22:48 +0800 Subject: [PATCH 2/5] feat: add AdminContext for managing upload state in admin dashboard --- app/contexts/admin.tsx | 47 +++++++++++++++++++++++ app/layouts/admin/dashboard.tsx | 3 ++ app/routes/_admin.lg-admin._dashboard.tsx | 9 +++-- 3 files changed, 56 insertions(+), 3 deletions(-) create mode 100644 app/contexts/admin.tsx diff --git a/app/contexts/admin.tsx b/app/contexts/admin.tsx new file mode 100644 index 0000000..7e093a1 --- /dev/null +++ b/app/contexts/admin.tsx @@ -0,0 +1,47 @@ +import { + createContext, + useState, + useContext, + type PropsWithChildren, + type Dispatch, + type SetStateAction, +} from 'react' + +type TUpload = + | 'featured_image' + | 'ads' + | 'content' + | 'profile_picture' + | undefined + +type AdminContextProperties = { + isUploadOpen: TUpload + setIsUploadOpen: Dispatch> +} + +const AdminContext = createContext( + undefined, +) + +export const AdminProvider = ({ children }: PropsWithChildren) => { + const [isUploadOpen, setIsUploadOpen] = useState() + + return ( + + {children} + + ) +} + +export const useAdminContext = (): AdminContextProperties => { + const context = useContext(AdminContext) + if (!context) { + throw new Error('useAdminContext must be used within a AdminProvider') + } + return context +} diff --git a/app/layouts/admin/dashboard.tsx b/app/layouts/admin/dashboard.tsx index a57480e..c23d2f1 100644 --- a/app/layouts/admin/dashboard.tsx +++ b/app/layouts/admin/dashboard.tsx @@ -1,10 +1,13 @@ import type { PropsWithChildren } from 'react' +import { useAdminContext } from '~/contexts/admin' + import { Navbar } from './navbar' import { Sidebar } from './sidebar' export const AdminDashboardLayout = (properties: PropsWithChildren) => { const { children } = properties + const {} = useAdminContext() return (
diff --git a/app/routes/_admin.lg-admin._dashboard.tsx b/app/routes/_admin.lg-admin._dashboard.tsx index 11b5ffc..61edd57 100644 --- a/app/routes/_admin.lg-admin._dashboard.tsx +++ b/app/routes/_admin.lg-admin._dashboard.tsx @@ -2,6 +2,7 @@ import { Outlet } from 'react-router' import { getCategories } from '~/apis/common/get-categories' import { getTags } from '~/apis/common/get-tags' +import { AdminProvider } from '~/contexts/admin' import { AdminDashboardLayout } from '~/layouts/admin/dashboard' import type { Route } from './+types/_admin.lg-admin._dashboard' @@ -18,9 +19,11 @@ export const loader = async ({}: Route.LoaderArgs) => { const DashboardLayout = () => { return ( - - - + + + + + ) } export default DashboardLayout From f291290f55dd9efa0144d2016bd56bef2bfcbfa7 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 20:46:10 +0800 Subject: [PATCH 3/5] refactor: handle 401 errors in staff and user data loading with logout headers --- app/routes/_admin.lg-admin.tsx | 22 +++++++++++++++------- app/routes/_news.tsx | 16 ++++++++++++---- 2 files changed, 27 insertions(+), 11 deletions(-) diff --git a/app/routes/_admin.lg-admin.tsx b/app/routes/_admin.lg-admin.tsx index eea1a83..3beecde 100644 --- a/app/routes/_admin.lg-admin.tsx +++ b/app/routes/_admin.lg-admin.tsx @@ -1,9 +1,11 @@ import { Outlet, redirect } from 'react-router' +import { XiorError } from 'xior' import { getStaff } from '~/apis/admin/get-staff' import { AUTH_PAGES } from '~/configs/pages' import { AdminDefaultLayout } from '~/layouts/admin/default' import { handleCookie } from '~/libs/cookies' +import { setStaffLogoutHeaders } from '~/libs/logout-header.server' import type { Route } from './+types/_admin.lg-admin' @@ -13,6 +15,19 @@ export const loader = async ({ request }: Route.LoaderArgs) => { const isAuthPage = AUTH_PAGES.includes(pathname) let staffData + if (staffToken) { + try { + const { data } = await getStaff({ + accessToken: staffToken, + }) + staffData = data + } catch (error) { + if (error instanceof XiorError && error.response?.status === 401) { + setStaffLogoutHeaders() + } + } + } + if (!isAuthPage && !staffToken) { throw redirect('/lg-admin/login') } @@ -21,13 +36,6 @@ export const loader = async ({ request }: Route.LoaderArgs) => { throw redirect('/lg-admin') } - if (staffToken) { - const { data } = await getStaff({ - accessToken: staffToken, - }) - staffData = data - } - return { staffData, } diff --git a/app/routes/_news.tsx b/app/routes/_news.tsx index 18f091d..2ec9028 100644 --- a/app/routes/_news.tsx +++ b/app/routes/_news.tsx @@ -1,4 +1,5 @@ import { Outlet } from 'react-router' +import { XiorError } from 'xior' import { getCategories } from '~/apis/common/get-categories' import { getSubscriptions } from '~/apis/common/get-subscriptions' @@ -6,6 +7,7 @@ import { getUser } from '~/apis/news/get-user' import { NewsProvider } from '~/contexts/news' import { NewsDefaultLayout } from '~/layouts/news/default' import { handleCookie } from '~/libs/cookies' +import { setUserLogoutHeaders } from '~/libs/logout-header.server' import type { Route } from './+types/_news' @@ -13,10 +15,16 @@ export const loader = async ({ request }: Route.LoaderArgs) => { const { userToken } = await handleCookie(request) let userData if (userToken) { - const { data } = await getUser({ - accessToken: userToken, - }) - userData = data + try { + const { data } = await getUser({ + accessToken: userToken, + }) + userData = data + } catch (error) { + if (error instanceof XiorError && error.response?.status === 401) { + setUserLogoutHeaders() + } + } } const { data: subscriptionsData } = await getSubscriptions() const { data: categoriesData } = await getCategories() From 4bb7a2379504249880c134f7598c1afefcb0e913 Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 20:52:50 +0800 Subject: [PATCH 4/5] feat: implement upload dialog in admin dashboard with context management --- app/components/ui/input-file.tsx | 7 ++++++- app/layouts/admin/dashboard.tsx | 25 ++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/app/components/ui/input-file.tsx b/app/components/ui/input-file.tsx index c6bb7d8..5078214 100644 --- a/app/components/ui/input-file.tsx +++ b/app/components/ui/input-file.tsx @@ -11,6 +11,8 @@ import { import { useRemixFormContext } from 'remix-hook-form' import { twMerge } from 'tailwind-merge' +import { useAdminContext } from '~/contexts/admin' + import { Button } from './button' type TInputProperties = Omit< @@ -40,6 +42,7 @@ export const InputFile = >( labelClassName, ...restProperties } = properties + const { setIsUploadOpen } = useAdminContext() const { register, @@ -71,7 +74,9 @@ export const InputFile = >( variant="icon" size="fit" className="absolute right-3 h-[42px]" - onClick={() => {}} + onClick={() => { + setIsUploadOpen('featured_image') + }} > diff --git a/app/layouts/admin/dashboard.tsx b/app/layouts/admin/dashboard.tsx index c23d2f1..74e7858 100644 --- a/app/layouts/admin/dashboard.tsx +++ b/app/layouts/admin/dashboard.tsx @@ -1,3 +1,4 @@ +import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react' import type { PropsWithChildren } from 'react' import { useAdminContext } from '~/contexts/admin' @@ -7,7 +8,7 @@ import { Sidebar } from './sidebar' export const AdminDashboardLayout = (properties: PropsWithChildren) => { const { children } = properties - const {} = useAdminContext() + const { isUploadOpen, setIsUploadOpen } = useAdminContext() return (
@@ -15,6 +16,28 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
{children}
+ + { + setIsUploadOpen(undefined) + }} + className="relative z-50" + transition + > + +
+ + Upload di mari {isUploadOpen} + +
+
) } From 4bc185434b248235889323ce80fcf5c78bf22c2e Mon Sep 17 00:00:00 2001 From: Ardeman Date: Sun, 9 Mar 2025 21:20:29 +0800 Subject: [PATCH 5/5] fix: adjust padding in InputFile and Input components for better layout --- app/components/ui/input-file.tsx | 2 +- app/components/ui/input.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/ui/input-file.tsx b/app/components/ui/input-file.tsx index 5078214..b3570cc 100644 --- a/app/components/ui/input-file.tsx +++ b/app/components/ui/input-file.tsx @@ -62,7 +62,7 @@ export const InputFile = >( >(