simplify the ux

Author: tcouper

apps/learner-ux/src/App.js

@@ -6,13 +6,12 @@ const API_OAUTH_CLIENT_SECRET = import.meta.env.VITE_API_OAUTH_CLIENT_SECRET ??
 const API_OAUTH_SCOPE = import.meta.env.VITE_API_OAUTH_SCOPE ?? "";
 let tokenCache;
 export async function fetchLearnerContext(learnerId, options) {
-    const query = new URLSearchParams();
+    const query = new URLSearchParams({ learnerId });
     if (options?.view)
         query.set("view", options.view);
     if (options?.stackBy)
         query.set("stackBy", options.stackBy);
-    const suffix = query.toString() ? `?${query.toString()}` : "";
-    const response = await fetch(buildUrl(`/learners/${encodeURIComponent(learnerId)}/context${suffix}`), {
+    const response = await fetch(buildUrl(`/learners/by-id/context?${query.toString()}`), {
         headers: await authHeaders()
     });
     if (!response.ok)

apps/learner-ux/src/App.tsx

@@ -20,11 +20,10 @@ export async function fetchLearnerContext(
   learnerId: string,
   options?: { view?: "timeline"; stackBy?: "day" | "hour" | "session" }
 ): Promise<LearnerContextResponse> {
-  const query = new URLSearchParams();
+  const query = new URLSearchParams({ learnerId });
   if (options?.view) query.set("view", options.view);
   if (options?.stackBy) query.set("stackBy", options.stackBy);
-  const suffix = query.toString() ? `?${query.toString()}` : "";
-  const response = await fetch(buildUrl(`/learners/${encodeURIComponent(learnerId)}/context${suffix}`), {
+  const response = await fetch(buildUrl(`/learners/by-id/context?${query.toString()}`), {
     headers: await authHeaders()
   });
   if (!response.ok) throw new Error("Failed to load learner context");

apps/learner-ux/src/api.js

@@ -12,12 +12,12 @@ export function SessionCredentialCard(props: Readonly<{
 
   return (
     <Card>
-      <div className="mb-3 flex items-center justify-between">
-        <div>
-          <h3 className="text-sm font-semibold">{credential.title}</h3>
-          <p className="text-xs text-slate-600">{credential.issuerId} - {new Date(credential.issuedAt).toLocaleDateString()}</p>
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <h3 className="text-sm font-semibold break-words">{credential.title}</h3>
+          <p className="text-xs text-slate-600 break-all">{credential.issuerId} - {new Date(credential.issuedAt).toLocaleDateString()}</p>
           {credential.provenance && (
-            <p className="text-[11px] text-slate-500">
+            <p className="text-[11px] text-slate-500 break-all">
               source {credential.provenance.submissionId} | hash {credential.provenance.payloadHash.slice(0, 12)}
             </p>
           )}
@@ -29,7 +29,7 @@ export function SessionCredentialCard(props: Readonly<{
           const checked = selectedClaimIds.includes(claim.claimId);
           return (
             <label key={claim.claimId} className="flex items-center justify-between gap-2 rounded border border-slate-100 p-2">
-              <span className="text-sm">{claim.label}: {String(claim.value)}</span>
+              <span className="text-sm break-words">{claim.label}: {String(claim.value)}</span>
               {!readOnly && (
                 <input
                   type="checkbox"

apps/learner-ux/src/api.ts

@@ -70,6 +70,12 @@ export class ApiConstruct extends Construct {
       integration: learnerContextIntegration,
       ...(authorizer ? { authorizer } : {})
     });
+    this.api.addRoutes({
+      path: "/learners/by-id/context",
+      methods: [HttpMethod.GET],
+      integration: learnerContextIntegration,
+      ...(authorizer ? { authorizer } : {})
+    });
     this.api.addRoutes({
       path: "/users",
       methods: [HttpMethod.GET],

apps/learner-ux/src/components/SessionCredentialCard.js

@@ -40,6 +40,7 @@ interface HttpEvent {
     to?: string;
     stackBy?: string;
     includeRawEvents?: string;
+    learnerId?: string;
     userId?: string;
   };
   body?: string | null;
@@ -114,8 +115,11 @@ export async function handler(event: HttpEvent): Promise<{
     const method = event.requestContext?.http?.method;
     const path = event.rawPath ?? event.requestContext?.http?.path ?? "";
 
+    if (method === "GET" && path === "/learners/by-id/context") {
+      return await handleGetLearnerContext(event, true);
+    }
     if (method === "GET" && path.includes("/learners/") && path.endsWith("/context")) {
-      return await handleGetLearnerContext(event);
+      return await handleGetLearnerContext(event, false);
     }
     if (method === "GET" && path === "/users") {
       return await handleListUsers();
@@ -157,13 +161,13 @@ export async function handler(event: HttpEvent): Promise<{
   }
 }
 
-async function handleGetLearnerContext(event: HttpEvent) {
-  const learnerId = event.pathParameters?.learnerId;
+async function handleGetLearnerContext(event: HttpEvent, fromQuery: boolean) {
+  const learnerId = fromQuery ? event.queryStringParameters?.learnerId : event.pathParameters?.learnerId;
   if (!learnerId) {
     return json(400, {
       status: "rejected",
       reason: "missing_learner_id",
-      details: ["learnerId path parameter is required."]
+      details: ["learnerId is required."]
     });
   }