Merge branch 'master' of github.com:social-dist0rtion-protocol/thc

social-dist0rtion-protocol · Nov 6, 2024 · eb207b3 · eb207b3
2 parents a3d53a2 + 545b861
commit eb207b3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -1,13 +1,9 @@
 import { Box, Center, VStack } from "@chakra-ui/react";
 import HeaderMenu from "./HeaderMenu";
-import { ReactNode } from "react";
 import useIsMobile from "./hooks/useIsMobile";
+import { Outlet } from "react-router-dom";
 
-type Props = {
-  children: ReactNode;
-};
-
-function App({ children }: Props) {
+function App() {
   const isMobile = useIsMobile();
   return (
     <Center>
@@ -20,7 +16,7 @@ function App({ children }: Props) {
           width={isMobile ? "95%" : "40%"}
           layerStyle="base"
         >
-          {children}
+          <Outlet />
         </Box>
       </VStack>
     </Center>

diff --git a/web/src/HeaderMenu.tsx b/web/src/HeaderMenu.tsx
@@ -1,41 +1,42 @@
-import { Button, Link, Wrap, WrapItem } from "@chakra-ui/react";
+import { Button, Wrap, WrapItem } from "@chakra-ui/react";
 import { HELP_URL, MAP_URL } from "./env";
+import { Link } from "react-router-dom";
 
 function HeaderMenu() {
   return (
     <Wrap justify="center" marginTop="20px">
       <WrapItem>
-        <Link href="/">
+        <Link to="/">
           <Button variant="menu">Home</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href="/#sides">
+        <Link to="/sides">
           <Button variant="menu">Side Quests</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href={MAP_URL}>
+        <Link to={MAP_URL} target="_blank">
           <Button variant="menu">Map</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href={HELP_URL}>
+        <Link to={HELP_URL} target="_blank">
           <Button variant="menu">Help</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href="/#leaderboard">
+        <Link to="/leaderboard">
           <Button variant="menu">Leaderboard</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href="/#settings">
+        <Link to="/settings">
           <Button variant="menu">Settings</Button>
         </Link>
       </WrapItem>
       <WrapItem>
-        <Link href="/#faq">
+        <Link to="/faq">
           <Button variant="menu">FAQ</Button>
         </Link>
       </WrapItem>

diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -24,23 +24,29 @@ const queryClient = new QueryClient();
 const router = createHashRouter([
   {
     path: "/",
-    element: <Quest />,
-  },
-  {
-    path: "/leaderboard",
-    element: <LeaderboardComponent />,
-  },
-  {
-    path: "/settings",
-    element: <Settings />,
-  },
-  {
-    path: "/sides",
-    element: <SideQuest />,
-  },
-  {
-    path: "/faq",
-    element: <FAQ />,
+    element: <App />,
+    children: [
+      {
+        path: "/",
+        element: <Quest />,
+      },
+      {
+        path: "/leaderboard",
+        element: <LeaderboardComponent />,
+      },
+      {
+        path: "/settings",
+        element: <Settings />,
+      },
+      {
+        path: "/sides",
+        element: <SideQuest />,
+      },
+      {
+        path: "/faq",
+        element: <FAQ />,
+      },
+    ],
   },
 ]);
 
@@ -50,9 +56,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
           <ConnectKitProvider>
-            <App>
-              <RouterProvider router={router} />
-            </App>
+            <RouterProvider router={router} />
           </ConnectKitProvider>
         </ChakraProvider>
       </QueryClientProvider>