✨ Create ProjectRouter

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import {GroupRouter} from "./components/group/GroupRouter"
 import {InstanceRouter} from "./components/instance/InstanceRouter"
 import {InstanceStepPage} from "./components/instance/InstanceStepPage"
 import {DebugBox} from "./components/placeholder/DebugBox"
+import {ProjectRouter} from "./components/project/ProjectRouter"
 import {ThemedBluelib} from "./components/theme/ThemedBluelib"
 import {ThemedTitle} from "./components/theme/ThemedTitle"
 import {AuthorizationProvider} from "./contexts/authorization"
@@ -34,10 +35,16 @@ function App({}: RouteComponentProps) {
                             selectedRoute={() => <>
                                 <GroupRouter
                                     unselectedRoute={(props) => <GroupListBox viewSet={props.viewSet}/>}
+                                    selectedRoute={(props) => <>
+                                        <ProjectRouter
+                                            groupPk={props.selection.value.slug}
+                                            unselectedRoute={DebugBox}
                                             selectedRoute={DebugBox}
                                         />
                                     </>}
                                 />
+                            </>}
+                        />
                     </AuthorizationProvider>
                 </>}
             />

frontend/src/components/project/ProjectRouter.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import {useManagedViewSet} from "../../hooks/useManagedViewSet"
+import {Dict} from "../../types/ExtraTypes"
+import {SophonResearchProject} from "../../types/SophonTypes"
+import {ViewSetRouter} from "../routing/ViewSetRouter"
+
+
+export interface ProjectRouterProps {
+    groupPk: string,
+    unselectedRoute: (props: Dict<any>) => JSX.Element | null,
+    selectedRoute: (props: Dict<any>) => JSX.Element | null,
+}
+
+
+export function ProjectRouter({groupPk, ...props}: ProjectRouterProps): JSX.Element {
+    return (
+        <ViewSetRouter
+            {...props}
+            viewSet={useManagedViewSet<SophonResearchProject>(`/api/projects/by-group/${groupPk}`, "slug")}
+            pathSegment={"researchGroup"}
+            pkKey={"slug"}
+        />
+    )
+}