Sidebar should only show parent resources (#27)

* move resource type list over to a different file

* added first test

* test is working

* filter out child resources

* PR comments

Author: rambleraptor

package-lock.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -39,6 +40,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -48,6 +51,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "tailwindcss": "^3.4.17",

package.json

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { ResourceTypeList } from './resource_type_list';
+import { describe, expect, it } from 'vitest';
+import fs from 'fs';
+import { parseOpenAPI } from '../../state/openapi'
+import { Sidebar, SidebarProvider } from '@/components/ui/sidebar';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('ResourceTypeList', () => {
+    it("should render the correct number of links", () => {
+        const fileContents = fs.readFileSync('src/example_oas.json', 'utf8');
+        const openAPI = parseOpenAPI(fileContents);
+        render(
+        <BrowserRouter>
+            <SidebarProvider>
+                <ResourceTypeList resources={openAPI.resources()} />
+            </SidebarProvider>
+        </BrowserRouter>
+        );
+
+        expect(screen.getByText('publishers')).toBeInTheDocument();
+        expect(screen.getByText('books')).toBeInTheDocument();
+        expect(screen.getByText('book-editions')).toBeInTheDocument();
+        expect(screen.getByText('isbns')).toBeInTheDocument();
+        
+    })
+});
+

src/app/sidebar/resource_type_list.test.tsx

@@ -0,0 +1,36 @@
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { ResourceSchema } from "@/state/openapi";
+import { Link } from "react-router-dom";
+
+type ResourceTypeListProps = {
+    resources: ResourceSchema[];
+};
+
+export function ResourceTypeList(props: ResourceTypeListProps) {
+    return (
+        <SidebarGroup>
+            <SidebarGroupLabel>Resources</SidebarGroupLabel>
+            <SidebarMenu>
+                {props.resources.map((resource: ResourceSchema) => (
+                    <ResourceMenuItem resource={resource} />
+                ))}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}
+
+type ResourceMenuItemProps = {
+    resource: ResourceSchema
+};
+
+function ResourceMenuItem(props: ResourceMenuItemProps) {
+    return (
+        <SidebarMenuItem key={props.resource.singular_name}>
+            <SidebarMenuButton asChild>
+                <Link to={`${props.resource.base_url()}`}>
+                    <span>{props.resource.plural_name}</span>
+                </Link>
+            </SidebarMenuButton>
+        </SidebarMenuItem>
+    )
+}

src/app/sidebar/resource_type_list.tsx

@@ -4,42 +4,25 @@ import {
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
   SidebarInput,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar";
-import { Link } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "@/hooks/store";
-import { selectHeaders, selectResources, setHeaders } from "@/state/store";
+import { selectHeaders, selectRootResources, setHeaders } from "@/state/store";
 import { Label } from "./ui/label";
+import { ResourceTypeList } from "@/app/sidebar/resource_type_list";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const resources = useAppSelector(selectResources);
+  const resources = useAppSelector(selectRootResources);
 
   return (
     <Sidebar {...props}>
       <SidebarHeader>
         <HeadersInput />
       </SidebarHeader>
       <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Resources</SidebarGroupLabel>
-          <SidebarMenu>
-            {resources.map((resource) => (
-              <SidebarMenuItem key={resource.singular_name}>
-                <SidebarMenuButton asChild>
-                  <Link to={`${resource.base_url()}`}>
-                    <span>{resource.plural_name}</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            ))}
-          </SidebarMenu>
-        </SidebarGroup>
+        <ResourceTypeList resources={resources} />
       </SidebarContent>
       <SidebarRail />
     </Sidebar>