@jmruthers/pace-core 0.5.136 → 0.5.139

package/examples/public-pages/PublicEventPage.tsx

@@ -0,0 +1,274 @@
+/**
+ * @file Public Event Page Example
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * A complete example of how to implement a public event page using the public pages feature.
+ * This example demonstrates all the key components and hooks working together.
+ *
+ * @example
+ * ```tsx
+ * import { PublicEventPage } from '@jmruthers/pace-core/examples';
+ * 
+ * function App() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Routes>
+ *         <Route path="/public/event/:eventCode" element={<PublicEventPage />} />
+ *       </Routes>
+ *     </BrowserRouter>
+ *   );
+ * }
+ * ```
+ *
+ * @dependencies
+ * - React 18+ - Component framework
+ * - React Router - Routing
+ * - Public pages components - Layout and data access
+ * - Tailwind CSS - Styling
+ */
+
+import React from 'react';
+import { 
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner,
+  PublicErrorBoundary
+} from '../../src';
+
+/**
+ * Complete public event page example
+ * 
+ * This component demonstrates how to create a public event page that displays
+ * event information, dishes, and branding without requiring authentication.
+ * 
+ * @returns React element with complete public event page
+ */
+export function PublicEventPage() {
+  const { eventCode } = usePublicRouteParams();
+  const { event, isLoading: eventLoading, error: eventError, refetch: refetchEvent } = usePublicEvent(eventCode || '');
+
+  // Handle loading state
+  if (eventLoading) {
+    return (
+      <PublicLoadingSpinner 
+        message="Loading event details..."
+      />
+    );
+  }
+
+  // Handle error state
+  if (eventError) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <div className="mb-6">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
+              Event Not Found
+            </h1>
+            <p className="text-sec-600 mb-6">
+              The event code "{eventCode}" is invalid or the event is not available for public viewing.
+            </p>
+            <button
+              onClick={refetchEvent}
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Handle missing event
+  if (!event) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
+            Event Not Available
+          </h1>
+          <p className="text-sec-600 mb-6">
+            This event is not available for public viewing.
+          </p>
+          <button
+            onClick={refetchEvent}
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <PublicErrorBoundary>
+      <PublicPageLayout eventCode={eventCode || ''} event={event}>
+        <PublicPageHeader 
+          event={event}
+          eventCode={eventCode || ''}
+          title="Event Details"
+          description="Public information about this event"
+        />
+        
+        <main className="max-w-6xl mx-auto px-4 py-8">
+          {/* Event Overview */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+            {/* Event Information */}
+            <div className="lg:col-span-2 space-y-6">
+              <div>
+                <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+                <div className="bg-sec-50 rounded-lg p-6 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Date</h3>
+                      <p className="text-sec-900">
+                        {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
+                          weekday: 'long',
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric'
+                        }) : 'TBA'}
+                      </p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Venue</h3>
+                      <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Participants</h3>
+                      <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-sec-700">Event Code</h3>
+                      <p className="text-sec-900 font-mono">{event.event_code}</p>
+                    </div>
+                  </div>
+                  
+                  {event.event_news && (
+                    <div>
+                      <h3 className="font-semibold text-sec-700 mb-2">Event News</h3>
+                      <p className="text-sec-900">{event.event_news}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Event Logo */}
+            <div className="flex justify-center lg:justify-start">
+              <div className="text-center">
+                <EventLogo
+                  eventId={event.event_id}
+                  eventName={event.event_name}
+                  organisationId={event.organisation_id}
+                  size="2xl"
+                  className="rounded-lg shadow-lg"
+                />
+                <p className="mt-4 text-sm text-sec-600">Event Logo</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Note about dishes */}
+          <div className="mb-12">
+            <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+              <h3 className="font-semibold text-main-900 mb-2">Event Dishes</h3>
+              <p className="text-main-800">
+                For CAKE applications, implement your own dishes functionality using the 
+                <code className="bg-main-100 px-1 rounded">usePublicDishes</code> hook 
+                as described in the CAKE implementation guide.
+              </p>
+            </div>
+          </div>
+
+          {/* Event Footer Information */}
+          {event.event_footer && (
+            <div className="bg-sec-50 rounded-lg p-6">
+              <h3 className="font-semibold text-sec-900 mb-2">Additional Information</h3>
+              <p className="text-sec-700">{event.event_footer}</p>
+            </div>
+          )}
+        </main>
+
+        <PublicPageFooter event={event} />
+      </PublicPageLayout>
+    </PublicErrorBoundary>
+  );
+}
+
+/**
+ * Compact version of the public event page for smaller displays
+ */
+export function PublicEventPageCompact() {
+  const { eventCode } = usePublicRouteParams();
+  const { event, isLoading, error } = usePublicEvent(eventCode || '');
+
+  if (isLoading) return <PublicLoadingSpinner message="Loading..." />;
+  if (error || !event) return <div>Event not found</div>;
+
+  return (
+    <PublicErrorBoundary>
+      <PublicPageLayout eventCode={eventCode || ''} event={event}>
+        <PublicPageHeader 
+          event={event}
+          eventCode={eventCode || ''}
+          showEventLogo={true}
+          showAppLogo={true}
+        />
+        
+        <main className="max-w-4xl mx-auto px-4 py-6">
+          <div className="text-center mb-6">
+            <EventLogo
+              eventId={event.event_id}
+              eventName={event.event_name}
+              organisationId={event.organisation_id}
+              size="xl"
+              className="mx-auto mb-4"
+            />
+            <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
+            {event.event_date && (
+              <p className="text-sec-600 mt-2">
+                {new Date(event.event_date).toLocaleDateString('en-AU')}
+              </p>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+            <div className="bg-sec-50 rounded p-4">
+              <h3 className="font-semibold text-sec-700">Venue</h3>
+              <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
+            </div>
+            <div className="bg-sec-50 rounded p-4">
+              <h3 className="font-semibold text-sec-700">Participants</h3>
+              <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
+            </div>
+          </div>
+
+          {event.event_news && (
+            <div className="bg-main-50 border border-main-200 rounded p-4">
+              <h3 className="font-semibold text-main-900 mb-2">Event News</h3>
+              <p className="text-main-800">{event.event_news}</p>
+            </div>
+          )}
+        </main>
+
+        <PublicPageFooter event={event} />
+      </PublicPageLayout>
+    </PublicErrorBoundary>
+  );
+}
+
+export default PublicEventPage;

package/examples/public-pages/PublicPageApp.tsx

@@ -0,0 +1,308 @@
+/**
+ * @file Public Page App Example
+ * @package @jmruthers/pace-core
+ * @module Examples/PublicPages
+ * @since 1.0.0
+ *
+ * A complete example showing how to properly implement public pages
+ * that are completely isolated from the authentication context.
+ *
+ * This example demonstrates the correct architecture for public pages:
+ * 1. Separate routing structure outside authentication context
+ * 2. PublicPageProvider for environment variables
+ * 3. No authentication context initialization
+ * 4. Proper error handling and loading states
+ *
+ * @example
+ * ```tsx
+ * import { PublicPageApp } from '@jmruthers/pace-core/examples';
+ * 
+ * // In your main App.tsx, use this for public routes
+ * function App() {
+ *   return (
+ *     <BrowserRouter>
+ *       <Routes>
+ *         <Route path="/public/*" element={<PublicPageApp />} />
+ *         <Route path="/*" element={<AuthenticatedApp />} />
+ *       </Routes>
+ *     </BrowserRouter>
+ *   );
+ * }
+ * ```
+ */
+
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { 
+  PublicPageProvider,
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter,
+  EventLogo,
+  usePublicEvent,
+  usePublicRouteParams,
+  PublicLoadingSpinner,
+  PublicErrorBoundary
+} from '../../src';
+
+/**
+ * Complete public page application that works independently
+ * of the main application's authentication context.
+ * 
+ * This component should be used for all public routes that don't
+ * require authentication, such as:
+ * - Event pages: /events/:eventCode/recipe-grid-report
+ * - Public reports: /reports/:reportId
+ * - Public information: /info/:pageId
+ */
+export function PublicPageApp() {
+  return (
+    <PublicPageProvider>
+      <Routes>
+        {/* Public event pages */}
+        <Route path="/events/:eventCode/recipe-grid-report" element={<PublicRecipeGridReportPage />} />
+        <Route path="/events/:eventCode" element={<PublicEventPage />} />
+        
+        {/* Add more public routes as needed */}
+        <Route path="/info/:pageId" element={<PublicInfoPage />} />
+        <Route path="/reports/:reportId" element={<PublicReportPage />} />
+      </Routes>
+    </PublicPageProvider>
+  );
+}
+
+/**
+ * Public recipe grid report page
+ * 
+ * This is the specific page mentioned in the bug report.
+ * It demonstrates the correct usage pattern for public pages.
+ */
+function PublicRecipeGridReportPage() {
+  // Step 1: Extract event code from URL (no auth context triggered)
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  
+  // Step 2: Fetch event data using the event code
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+  
+  // Step 3: Handle loading state
+  if (isLoading) {
+    return (
+      <PublicLoadingSpinner 
+        message="Loading recipe grid report..."
+      />
+    );
+  }
+
+  // Step 4: Handle error state
+  if (error) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <div className="mb-6">
+            <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-acc-100 mb-4">
+              <svg className="h-6 w-6 text-acc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-bold text-sec-900 mb-2">
+              Recipe Grid Report Not Found
+            </h1>
+            <p className="text-sec-600 mb-6">
+              The event code "{eventCode}" is invalid or the recipe grid report is not available for public viewing.
+            </p>
+            <button
+              onClick={refetch}
+              className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 5: Handle missing event
+  if (!event) {
+    return (
+      <div className="min-h-screen bg-main-50 flex items-center justify-center">
+        <div className="max-w-md mx-auto text-center px-4">
+          <h1 className="text-2xl font-bold text-sec-900 mb-4">
+            Recipe Grid Report Not Available
+          </h1>
+          <p className="text-sec-600 mb-6">
+            This recipe grid report is not available for public viewing.
+          </p>
+          <button
+            onClick={refetch}
+            className="px-4 py-2 bg-main-600 text-main-50 rounded-md hover:bg-main-700 transition-colors"
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Step 6: Render the public page with event data
+  return (
+    <PublicPageLayout eventCode={eventCode || ''} event={event}>
+      <PublicPageHeader 
+        event={event}
+        eventCode={eventCode || ''}
+        title="Recipe Grid Report"
+        description="Public recipe grid report for this event"
+      />
+      
+      <main className="max-w-6xl mx-auto px-4 py-8">
+        {/* Recipe Grid Report Content */}
+        <div className="mb-12">
+          <div className="bg-main-50 border border-main-200 rounded-lg p-6">
+            <h3 className="font-semibold text-main-900 mb-2">Recipe Grid Report</h3>
+            <p className="text-main-800">
+              This is where your recipe grid report content would go. 
+              The public page is now working correctly without authentication context conflicts.
+            </p>
+            <div className="mt-4 text-sm text-main-700">
+              <p><strong>Event Code:</strong> {eventCode}</p>
+              <p><strong>Event ID:</strong> {event.event_id}</p>
+              <p><strong>Event Name:</strong> {event.event_name}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Event Information */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
+          <div className="lg:col-span-2 space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold text-sec-900 mb-4">Event Information</h2>
+              <div className="bg-sec-50 rounded-lg p-6 space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <h3 className="font-semibold text-sec-700">Date</h3>
+                    <p className="text-sec-900">
+                      {event.event_date ? new Date(event.event_date).toLocaleDateString('en-AU', {
+                        weekday: 'long',
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric'
+                      }) : 'TBA'}
+                    </p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-sec-700">Venue</h3>
+                    <p className="text-sec-900">{event.event_venue || 'TBA'}</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-sec-700">Participants</h3>
+                    <p className="text-sec-900">{event.event_participants || 'TBA'}</p>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-sec-700">Event Code</h3>
+                    <p className="text-sec-900 font-mono">{event.event_code}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Event Logo */}
+          <div className="flex justify-center lg:justify-start">
+            <div className="text-center">
+              <EventLogo
+                eventId={event.event_id}
+                eventName={event.event_name}
+                organisationId={event.organisation_id}
+                size="2xl"
+                className="rounded-lg shadow-lg"
+              />
+              <p className="mt-4 text-sm text-sec-600">Event Logo</p>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <PublicPageFooter event={event} />
+    </PublicPageLayout>
+  );
+}
+
+/**
+ * Generic public event page
+ */
+function PublicEventPage() {
+  const { eventCode } = usePublicRouteParams({ fetchEventData: false });
+  const { event, isLoading, error, refetch } = usePublicEvent(eventCode || '');
+
+  if (isLoading) return <PublicLoadingSpinner message="Loading event..." />;
+  if (error || !event) return <div>Event not found</div>;
+
+  return (
+    <PublicPageLayout eventCode={eventCode || ''} event={event}>
+      <PublicPageHeader 
+        event={event}
+        eventCode={eventCode || ''}
+        title="Event Details"
+        description="Public information about this event"
+      />
+      
+      <main className="max-w-4xl mx-auto px-4 py-6">
+        <div className="text-center mb-6">
+          <EventLogo
+            eventId={event.event_id}
+            eventName={event.event_name}
+            organisationId={event.organisation_id}
+            size="xl"
+            className="mx-auto mb-4"
+          />
+          <h1 className="text-2xl font-bold text-sec-900">{event.event_name}</h1>
+          {event.event_date && (
+            <p className="text-sec-600 mt-2">
+              {new Date(event.event_date).toLocaleDateString('en-AU')}
+            </p>
+          )}
+        </div>
+      </main>
+
+      <PublicPageFooter event={event} />
+    </PublicPageLayout>
+  );
+}
+
+/**
+ * Generic public info page
+ */
+function PublicInfoPage() {
+  return (
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
+      <div className="max-w-md mx-auto text-center px-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
+          Public Information Page
+        </h1>
+        <p className="text-sec-600">
+          This is a public information page that doesn't require authentication.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Generic public report page
+ */
+function PublicReportPage() {
+  return (
+    <div className="min-h-screen bg-main-50 flex items-center justify-center">
+      <div className="max-w-md mx-auto text-center px-4">
+        <h1 className="text-2xl font-bold text-sec-900 mb-4">
+          Public Report Page
+        </h1>
+        <p className="text-sec-600">
+          This is a public report page that doesn't require authentication.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default PublicPageApp;