refactor: add Page component (@fehmer) (#7987)

Author: fehmer

frontend/src/ts/collections/presets.ts

@@ -36,6 +36,7 @@ const presetsCollection = createCollection(
     getKey: (it) => it._id,
     queryFn: async () => {
       if (!isAuthenticated()) return [];
+
       const response = await Ape.presets.get();
 
       if (response.status !== 200) {

frontend/src/ts/components/common/Page.tsx

@@ -0,0 +1,16 @@
+import { ParentProps, Show } from "solid-js";
+
+import { PageName } from "../../pages/page";
+import { getActivePage, isAuthenticated } from "../../states/core";
+
+export function Page(
+  props: {
+    id: PageName;
+    needsAuthentication?: boolean;
+  } & ParentProps,
+) {
+  const isOpen = () => getActivePage() === props.id;
+  const isAllowed = () => !props.needsAuthentication || isAuthenticated();
+
+  return <Show when={isOpen() && isAllowed()}>{props.children}</Show>;
+}

frontend/src/ts/components/mount.tsx

@@ -18,14 +18,14 @@ import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
 import { LoginPage } from "./pages/login/LoginPage";
 import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
-import { Settings } from "./pages/settings/Settings";
+import { SettingsPage } from "./pages/settings/SettingsPage";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
   aboutpage: () => <AboutPage />,
-  settingspage: () => <Settings />,
+  settingspage: () => <SettingsPage />,
   accountpage: () => <AccountPage />,
   loginpage: () => <LoginPage />,
   leaderboardpage: () => <LeaderboardPage />,
@@ -40,7 +40,6 @@ const components: Record<string, () => JSXElement> = {
   devtools: () => <DevTools />,
   testconfig: () => <TestConfig />,
   commandlinehotkey: () => <CommandlineHotkey />,
-  solidSettings: () => <Settings />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {