so much (#43)

Author: rambleraptor

src/App.tsx

@@ -11,6 +11,10 @@ import { selectResources, store } from './state/store';
 import { Provider } from 'react-redux'
 import { useAppSelector } from "./hooks/store";
 
+function transformUrlForRouter(url: string): string {
+  return url.replace(/\{([^}]+)\}/g, ':$1');
+}
+
 function createRoutes(resources: ResourceSchema[]): RouteObject[] {
   const routes = [{
     path: "/",
@@ -21,21 +25,22 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
         element: <SpecSpecifierPage />,
       },
     ].concat(resources.map((resource) => {
+      const baseUrl = transformUrlForRouter(resource.base_url());
       return [
         {
-          path: resource.base_url(),
+          path: baseUrl,
           element: <ResourceListPage resource={resource} />
         },
         {
-          path: `${resource.base_url()}/_create`,
+          path: `${baseUrl}/_create`,
           element: <CreateForm resource={resource} />
         },
         {
-          path: `${resource.base_url()}/:resourceId`,
+          path: `${baseUrl}/:resourceId`,
           element: <InfoPage resource={resource} />
         },
         {
-          path: `${resource.base_url()}/:resourceId/_update`,
+          path: `${baseUrl}/:resourceId/_update`,
           element: <UpdateForm schema={resource} />
         }
       ]

src/app/explorer/form.tsx

@@ -1,9 +1,9 @@
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input";
-import { useMemo, } from "react";
+import { useMemo, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "@/hooks/use-toast";
 import { useAppSelector } from "@/hooks/store";
 import { selectHeaders } from "@/state/store";
@@ -15,6 +15,7 @@ type CreateFormProps = {
 
 export default function CreateForm(props: CreateFormProps) {
     const form = useForm();
+    const params = useParams();
     const navigate = useNavigate();
 
     const headers = useAppSelector(selectHeaders);
@@ -52,6 +53,17 @@ export default function CreateForm(props: CreateFormProps) {
             });
     }, [props, form.control]);
 
+    useEffect(() => {
+        // Set parent parameters from URL params, excluding resourceId
+        const parentParams = new Map<string, string>();
+        for (const [key, value] of Object.entries(params)) {
+            if (key !== 'resourceId' && value) {
+                parentParams.set(key, value);
+            }
+        }
+        props.resource.parents = parentParams;
+    }, [params, props.resource])
+
     return (
         <Form {...form}>
             <form>

src/app/explorer/info.tsx

@@ -3,24 +3,46 @@ import { useParams } from "react-router-dom";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ResourceInstance } from "@/state/fetch";
 import { ResourceSchema } from "@/state/openapi";
+import { useAppSelector } from "@/hooks/store";
+import { selectChildResources } from "@/state/store";
+import ResourceListPage from "./resource_list";
+
+type ResourceProperties = {
+    path: string;
+    [key: string]: string | number | boolean;
+}
 
 type InfoPageProps = {
     resource: ResourceSchema
 }
 
 export default function InfoPage(props: InfoPageProps) {
-    const { resourceId }= useParams();
-    const [state, setState] = useState<ResourceInstance>({});
+    const params = useParams();
+    const [state, setState] = useState<ResourceInstance | null>(null);
+    
+    const childResources = useAppSelector((globalState) => 
+        state ? selectChildResources(globalState, props.resource, (state.properties as ResourceProperties)?.path?.split('/').pop() || '') : []
+    );
 
     useEffect(() => {
-        props.resource.get(resourceId!).then((instance) => setState(instance));
-    }, [resourceId, props.resource])
+        // Set parent parameters from URL params, excluding resourceId
+        const parentParams = new Map<string, string>();
+        for (const [key, value] of Object.entries(params)) {
+            if (key !== 'resourceId' && value) {
+                parentParams.set(key, value);
+            }
+        }
+        props.resource.parents = parentParams;
+
+        // Fetch the resource instance
+        props.resource.get(params['resourceId']!).then((instance) => setState(instance));
+    }, [params, props.resource])
 
     const properties = useMemo(() => {
-            if(state.properties) {
-                let results = [];
-                for (const [key, value] of Object.entries(state.properties)) {
-                    results.push(<p>
+            if(state?.properties) {
+                const results = [];
+                for (const [key, value] of Object.entries(state.properties as ResourceProperties)) {
+                    results.push(<p key={key}>
                         <b>{key}:</b> {value}
                     </p>)
                 }
@@ -30,13 +52,23 @@ export default function InfoPage(props: InfoPageProps) {
     }, [state]);
 
     return (
-        <Card>
-        <CardHeader>
-            <CardTitle>{state.properties?.path}</CardTitle>
-        </CardHeader>
-        <CardContent>
-            {properties}
-        </CardContent>
-        </Card>
+        <div className="space-y-6">
+            {/* Resource Instance card. */}
+            <Card>
+                <CardHeader>
+                    <CardTitle>{(state?.properties as ResourceProperties)?.path}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    {properties}
+                </CardContent>
+            </Card>
+
+            {/* Listing Child Resources */}
+            {childResources.map((childResource) => (
+                <div key={childResource.singular_name} className="mt-6">
+                    <ResourceListPage resource={childResource} />
+                </div>
+            ))}
+        </div>
     )
 }

src/app/explorer/resource_list.tsx

@@ -45,7 +45,7 @@ export default function ResourceListPage(props: ResourceListProps) {
             <div className="flex items-center justify-between mb-4">
                 <h1>{props.resource.plural_name.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}</h1>
                 <div className="flex gap-2">
-                    <Button variant="outline" size="icon" onClick={() => navigate("_create")}>
+                    <Button variant="outline" size="icon" onClick={() => navigate(props.resource.substituteUrlParameters(props.resource.base_url()) + "/_create")}>
                         <Plus className="h-4 w-4" />
                     </Button>
                     <Button variant="outline" size="icon" onClick={refreshList}>

src/state/openapi.ts

@@ -1,11 +1,11 @@
-import {List, ResourceInstance, Create, Get} from './fetch';
+import { List, ResourceInstance, Create, Get } from './fetch';
 // Responsible for handling the schema for a given resource.
 class ResourceSchema {
   schema: any;
   singular_name: string;
   plural_name: string;
   server_url: string;
-  parents: Map<string, ResourceInstance>;
+  parents: Map<string, string>;
 
   constructor(
     singular_name: string,
@@ -20,22 +20,17 @@ class ResourceSchema {
     this.parents = new Map();
   }
 
-  private substituteUrlParameters(url: string): string {
+  public substituteUrlParameters(url: string): string {
     const paramRegex = /\{([^}]+)\}/g;
     let match;
     let resultUrl = url;
 
     while ((match = paramRegex.exec(url)) !== null) {
       const paramName = match[1];
-      const parent = this.parents.get(paramName);
-      
-      if (!parent) {
-        throw new Error(`Missing required parent resource: ${paramName}`);
-      }
+      const parentId = this.parents.get(paramName);
 
-      const parentId = parent.properties.id;
       if (!parentId) {
-        throw new Error(`Parent resource ${paramName} has no id property`);
+        throw new Error(`Missing required parent resource: ${paramName}`);
       }
 
       resultUrl = resultUrl.replace(`{${paramName}}`, parentId);
@@ -60,7 +55,7 @@ class ResourceSchema {
     const baseUrl = this.base_url();
     let url = `${this.server_url}${baseUrl}`;
     if (this.properties().find(prop => prop.name === 'id')) {
-        url += `?id=${body.id}`;
+      url += `?id=${body.id}`;
     }
     url = this.substituteUrlParameters(url);
     return Create(url, body, headers);
@@ -69,7 +64,7 @@ class ResourceSchema {
   base_url(): string {
     const pattern = this.schema["x-aep-resource"]["patterns"][0];
     const subset = pattern.substring(0, pattern.lastIndexOf("/"));
-    if(subset[0] != "/") {
+    if (subset[0] != "/") {
       return "/" + subset;
     }
     return subset;
@@ -132,6 +127,34 @@ class OpenAPI {
     }
     throw new Error(`Resource not found: ${plural}`);
   }
+
+  childResources(r: ResourceSchema, id: string): ResourceSchema[] {
+    const children: ResourceSchema[] = [];
+    const allResources = this.resources();
+
+    for (const resource of allResources) {
+      const parents = resource.schema["x-aep-resource"]["parents"] || [];
+      // Get all valid parent names (current resource + its parents)
+      const validParents = new Set([r.singular_name, ...r.parents.keys()]);
+
+      // Check if all parents in the resource's parents array are valid
+      const allParentsValid =
+        parents.length === validParents.size &&
+        parents.every(parent => validParents.has(parent));
+
+      if (allParentsValid) {
+        // Copy parent relationships from the parent resource
+        for (const [key, value] of r.parents.entries()) {
+          resource.parents.set(key, value);
+        }
+        // Add the parent resource's ID
+        resource.parents.set(r.singular_name, id);
+        children.push(resource);
+      }
+    }
+
+    return children;
+  }
 }
 
 function parseOpenAPI(jsonString: string): OpenAPI {

src/state/store.ts

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { OpenAPI } from './openapi'
+import { OpenAPI, ResourceSchema } from './openapi'
 
 // Schema reducers + selectors.
 interface SchemaState {
@@ -35,6 +35,14 @@ export const selectResources = (state: RootState) => {
   }
 }
 
+export const selectChildResources = (state: RootState, resource: ResourceSchema, id: string) => {
+  if (state.schema.value != null) {
+    return state.schema.value.childResources(resource, id);
+  } else {
+    return [];
+  }
+}
+
 export const schemaState = (state: RootState) => state.schema.state
 
 // Headers reducers + selectors.