61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { PageWrapper, PageWrapperProps } from './PageWrapper';
|
|
|
|
/**
|
|
* Stateful Page Wrapper - CLIENT SIDE ONLY
|
|
* Adds loading/error state management for client-side fetching
|
|
*
|
|
* Usage:
|
|
* ```typescript
|
|
* 'use client';
|
|
*
|
|
* export default function ProfilePage() {
|
|
* const { data, isLoading, error, refetch } = usePageData(...);
|
|
*
|
|
* return (
|
|
* <StatefulPageWrapper
|
|
* data={data}
|
|
* isLoading={isLoading}
|
|
* error={error}
|
|
* retry={refetch}
|
|
* Template={ProfileTemplate}
|
|
* loading={{ variant: 'skeleton', message: 'Loading profile...' }}
|
|
* />
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
export function StatefulPageWrapper<TData>({
|
|
data,
|
|
isLoading = false,
|
|
error = null,
|
|
retry,
|
|
Template,
|
|
loading,
|
|
errorConfig,
|
|
empty,
|
|
children,
|
|
className = '',
|
|
}: PageWrapperProps<TData>) {
|
|
// Same implementation but with 'use client' for CSR-specific features
|
|
return (
|
|
<PageWrapper
|
|
data={data}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
retry={retry}
|
|
Template={Template}
|
|
loading={loading}
|
|
errorConfig={errorConfig}
|
|
empty={empty}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</PageWrapper>
|
|
);
|
|
}
|
|
|
|
// Re-export types for convenience
|
|
export type { PageWrapperProps, PageWrapperLoadingConfig, PageWrapperErrorConfig, PageWrapperEmptyConfig } from './PageWrapper'; |