Create skeleton for component hierarchy with page layout (#184)

packages/frontend-design-poc/package.json

@@ -16,7 +16,8 @@
     "@digdir/design-system-tokens": "^0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3"
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.16.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.1.2",

packages/frontend-design-poc/src/App.tsx

@@ -1,15 +1,20 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { HelloWorld } from './components/HelloWorld/HelloWorld.tsx';
-import styles from './app.module.css'
-
-const queryClient = new QueryClient();
+import { Route, Routes } from "react-router-dom";
+import { HelloWorld } from "./components/HelloWorld";
+import { PageNotFound } from "./pages/PageNotFound";
+import { PageLayout } from "./pages/PageLayout";
+import styles from "./app.module.css";
 
 function App() {
-  return (<QueryClientProvider client={queryClient}>
-    <section data-testid="app" className={styles.app}>
-      <HelloWorld />
-    </section>
-  </QueryClientProvider>);
+  return (
+    <div className={styles.app} role="main">
+      <Routes>
+        <Route element={<PageLayout />}>
+          <Route path="/" element={<HelloWorld />} />
+          <Route path="*" element={<PageNotFound />} />
+        </Route>
+      </Routes>
+    </div>
+  );
 }
 
 export default App;

packages/frontend-design-poc/src/components/HelloWorld/HelloWorld.tsx

@@ -1,11 +1,12 @@
-import styles from './helloWorld.module.css';
-import { useQuery } from 'react-query';
-import { getUser } from '../../api/queries.ts';
+import styles from "./helloWorld.module.css";
+import { useQuery } from "react-query";
+import { getUser } from "../../api/queries.ts";
 
 export const HelloWorld = () => {
-  const { isLoading, data } = useQuery('user', getUser);
-
-  return (<section className={styles.helloWorld}>
+  const { isLoading, data } = useQuery("user", getUser);
+  return (
+    <section className={styles.helloWorld}>
       {isLoading ? <span>Loading ...</span> : <h1>Hello, {data?.name}!</h1>}
-    </section>);
-};
+    </section>
+  );
+};

packages/frontend-design-poc/src/components/HelloWorld/index.ts

@@ -0,0 +1 @@
+export { HelloWorld } from "./HelloWorld.tsx";

packages/frontend-design-poc/src/main.tsx

@@ -1,17 +1,27 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { BrowserRouter } from "react-router-dom";
 
 async function enableMocking() {
-  if (import.meta.env.MODE === 'development') {
-    const { worker } = await import('./mocks/browser');
+  if (import.meta.env.MODE === "development") {
+    const { worker } = await import("./mocks/browser");
     return worker.start();
   }
 }
 
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+const queryClient = new QueryClient();
+
 enableMocking().then(() => {
-  ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode>
-    <App />
-  </React.StrictMode>);
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
 });
-

packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx

@@ -1,25 +1,9 @@
-import { HeaderContext } from 'app-shared/navigation/main-header/Header';
-import { Outlet } from 'react-router-dom';
-import { useUserQuery } from 'app-shared/hooks/queries';
-import React, { useMemo } from 'react';
-import type { IHeaderContext } from 'app-shared/navigation/main-header/Header';
-import AppHeader from 'app-shared/navigation/main-header/Header';
+import { Outlet } from "react-router-dom";
 
 export const PageLayout = () => {
-  const { data: user } = useUserQuery();
-
-  const headerContextValue: IHeaderContext = useMemo(
-    () => ({
-      user,
-    }),
-    [user],
-  );
-
   return (
     <>
-      <HeaderContext.Provider value={headerContextValue}>
-        <AppHeader showMenu={false} />
-      </HeaderContext.Provider>
+      <nav aria-label="hovedmeny" />
       <Outlet />
     </>
   );

packages/frontend-design-poc/src/pages/PageNotFound/PageNotFound.tsx

@@ -0,0 +1,7 @@
+export const PageNotFound = () => {
+  return (
+    <div>
+      <h1>Ooops... page not found :(</h1>
+    </div>
+  );
+};

packages/frontend-design-poc/src/pages/PageNotFound/index.ts

@@ -0,0 +1 @@
+export { PageNotFound } from "./PageNotFound.tsx";