Refactor code structure for improved readability and maintainability

2026-05-22 17:53:35 +07:00
parent af0fe70ac6
commit 4260e240a0
37 changed files with 2915 additions and 74 deletions
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { publicContentServices } from '../data/public.data-services';
+import type { PublicContentEntity } from '../data/public.data-services';
+import type { ApiResponse } from '@repo/core-api/http-client';
+import { ApiError } from '@repo/core-api/errors';
+
+/**
+ * Sample component demonstrating the `@repo/core-api` integration
+ * for the Landing App with TelemetryContext escape hatch.
+ *
+ * Pipeline: Faro auto-instrumentation → No Auth → GET /content
+ *           + Custom span "public.content.fetch" with enriched tags
+ */
+export default function LandingSample() {
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<ApiResponse<PublicContentEntity[]> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFetch = async () => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const response = await publicContentServices.getMany<PublicContentEntity[]>({
+        // ── Telemetry Escape Hatch ──────────────────────────────
+        // Even the lightweight landing app can push custom spans
+        // and business events when needed.
+        telemetryContext: {
+          customSpanName: 'public.content.fetch',
+          tags: {
+            'feature': 'landing',
+            'ui.component': 'LandingSample',
+            'ui.action': 'content_fetch',
+          },
+          pushEventOnSuccess: 'public_content_loaded',
+        },
+      });
+      setResult(response);
+      console.log('[LandingSample] Response:', response);
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(`[${err.code}] ${err.message} (HTTP ${err.status})`);
+        console.error('[LandingSample] ApiError:', err.toJSON());
+      } else {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ padding: 24, fontFamily: 'monospace' }}>
+      <h2>🧪 Public Content Services — Integration Test</h2>
+      <p style={{ color: '#888', fontSize: 14 }}>
+        Pipeline: Faro + Custom Span &quot;public.content.fetch&quot; → No Auth → GET /content
+      </p>
+
+      <button
+        onClick={handleFetch}
+        disabled={loading}
+        style={{
+          padding: '10px 20px',
+          fontSize: 16,
+          cursor: loading ? 'wait' : 'pointer',
+          background: loading ? '#555' : '#059669',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 6,
+          marginTop: 12,
+        }}
+      >
+        {loading ? 'Fetching…' : 'Test Public Fetch'}
+      </button>
+
+      {error && (
+        <pre style={{ color: '#ef4444', marginTop: 16, whiteSpace: 'pre-wrap' }}>
+          ❌ {error}
+        </pre>
+      )}
+
+      {result && (
+        <pre style={{ marginTop: 16, background: '#1e1e2e', color: '#a6e3a1', padding: 16, borderRadius: 8, overflow: 'auto' }}>
+          {JSON.stringify(result, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}