Searchbar style + Breadcrumb names (#21)

* sidebar now collapses properly

* remove _explorer endpoint

* breadcrumbs show proper names now

src/App.tsx

@@ -21,10 +21,6 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
         path: "/",
         element: <SpecSpecifierPage />,
       },
-      {
-        path: "/_explorer",
-        element: <div />,
-      },
     ].concat(resources.map((resource) => {
       return [
         {

src/app/spec_specifier/page.tsx

@@ -1,9 +1,16 @@
 import { LoginForm } from "@/components/login-form";
+import { useAppSelector } from "@/hooks/store";
+import { schemaState } from "@/state/store";
 
 export default function SpecSpecifierPage() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center px-4">
-      <LoginForm />
-    </div>
-  );
+  const state = useAppSelector(schemaState);
+  if(state == 'unset') {
+    return (
+      <div className="flex h-screen w-full items-center justify-center px-4">
+        <LoginForm />
+      </div>
+    )
+  } else {
+    return <div />
+  }
 }

src/components/app-sidebar.tsx

@@ -21,7 +21,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const resources = useAppSelector(selectResources);
 
   return (
-    <Sidebar collapsible="icon" {...props}>
+    <Sidebar {...props}>
       <SidebarHeader>
         <HeadersInput />
       </SidebarHeader>

src/components/breadcrumb.tsx

@@ -1,13 +1,19 @@
 import { useMatches } from "react-router-dom";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./ui/breadcrumb"
+import { createRouteObjects } from "@/lib/utils";
+import { useAppSelector } from "@/hooks/store";
+import { selectResources } from "@/state/store";
 
 export default function AppBreadcrumb() {
     const breadcrumbs = useMatches();
+    const resources = useAppSelector(selectResources);
+
+    const routeObjects = createRouteObjects(resources);
 
     const breadcrumb_elements = [];
     for(const i of breadcrumbs) {
         breadcrumb_elements.push(<BreadcrumbItem className="hidden md:block">
-                        <BreadcrumbPage>{i.pathname}</BreadcrumbPage>
+                        <BreadcrumbPage>{routeObjects[i.pathname]}</BreadcrumbPage>
                     </BreadcrumbItem>);
         breadcrumb_elements.push(<BreadcrumbSeparator className="hidden md:block" />);
     }

src/components/login-form.tsx

@@ -13,11 +13,9 @@ import { toast } from "@/hooks/use-toast";
 import { OpenAPI } from "@/state/openapi";
 import { setSchema } from "@/state/store";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 export function LoginForm() {
   const [state, setState] = useState("");
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const onSubmit = async (event: React.FormEvent) => {
@@ -26,7 +24,6 @@ export function LoginForm() {
       const response = await fetch(state);
       const data = await response.json();
       dispatch(setSchema(new OpenAPI(data)));
-      navigate("/_explorer");
     } catch (error) {
       toast({description: `Failed to fetch OpenAPI spec: ${error}`})
     }

src/lib/utils.ts

@@ -7,14 +7,17 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function createRouteObjects(resources: ResourceSchema[]): object {
+  let base = {
+    '/': 'Home',
+  }
   if(resources === null) {
-    return {};
+    return base;
   }
   return resources.reduce((acc, resource) => {
     acc[resource.base_url()] = `${resource.plural_name}`;
     acc[`${resource.base_url()}/_create`] = `${resource.singular_name} Create`;
     acc[`${resource.base_url()}/:resourceId`] = `${resource.singular_name} Info`;
     acc[`${resource.base_url()}/:resourceId/_update`] = `${resource.singular_name} Update`;
     return acc;
-  }, {});
+  }, base);
 }

src/state/store.ts

@@ -5,10 +5,12 @@ import { OpenAPI } from './openapi'
 // Schema reducers + selectors.
 interface SchemaState {
   value: OpenAPI | null
+  state: 'unset' | 'set'
 }
 
 const initialState: SchemaState = {
-  value: null
+  value: null,
+  state: 'unset'
 }
 
 const schemaSlice = createSlice({
@@ -17,6 +19,7 @@ const schemaSlice = createSlice({
   reducers: {
     setSchema: (state, action: PayloadAction<OpenAPI>) => {
       state.value = action.payload
+      state.state = 'set';
     }
   }
 })
@@ -32,6 +35,8 @@ export const selectResources = (state: RootState) => {
   }
 }
 
+export const schemaState = (state: RootState) => state.schema.state
+
 // Headers reducers + selectors.
 interface HeadersState {
   value: string
@@ -56,8 +61,6 @@ const headersReducer = headersSlice.reducer;
 
 export const selectHeaders = (state: RootState) => state.headers.value;
 
-
-
 // Store
 const store = configureStore({
     reducer: {