+
{MENU_ITEMS.map(item => (
-
- {item.label}
+
+ {item.label}
))}
diff --git a/packages/app/src/Pages/settings/Root.tsx b/packages/app/src/Pages/settings/Root.tsx
index 21674550..df16e332 100644
--- a/packages/app/src/Pages/settings/Root.tsx
+++ b/packages/app/src/Pages/settings/Root.tsx
@@ -1,5 +1,5 @@
import "./Root.css";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
import { FormattedMessage } from "react-intl";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import Icon from "@/Icons/Icon";
@@ -7,7 +7,6 @@ import { LoginStore, logout } from "@/Login";
import useLogin from "@/Hooks/useLogin";
import { getCurrentSubscription } from "@/Subscription";
import usePageWidth from "@/Hooks/usePageWidth";
-
import messages from "./messages";
const SettingsIndex = () => {
@@ -17,98 +16,59 @@ const SettingsIndex = () => {
const pageWidth = usePageWidth();
const sub = getCurrentSubscription(LoginStore.allSubscriptions());
- function handleLogout() {
+ const handleNavigate = useCallback((path) => {
+ navigate(path);
+ }, [navigate]);
+
+ const handleLogout = useCallback(() => {
logout(login.id);
navigate("/");
- }
+ }, [login.id, navigate]);
useEffect(() => {
if (location.pathname === "/settings" && pageWidth >= 768) {
navigate("/settings/profile", { replace: true });
}
- }, [location, pageWidth]);
+ }, [location, navigate, pageWidth]);
- const [hideMenu, hideContent] = useMemo(() => {
- return [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
- }, [location, pageWidth]);
+ const [hideMenu, hideContent] = [location.pathname !== "/settings" && pageWidth < 768, location.pathname === "/settings" && pageWidth < 768];
+
+ const menuItems = [
+ { icon: "profile", message: messages.Profile, path: "profile" },
+ { icon: "relay", message: messages.Relays, path: "relays" },
+ { icon: "key", message: "Export Keys", id: "08zn6O", path: "keys" },
+ { icon: "shield-tick", message: "Moderation", id: "wofVHy", path: "moderation" },
+ { icon: "badge", message: "Nostr Address", id: "9pMqYs", path: "handle" },
+ { icon: "gear", message: messages.Preferences, path: "preferences" },
+ { icon: "wallet", message: "Wallet", id: "3yk8fB", path: "wallet" },
+ { icon: "heart", message: messages.Donate, path: "/donate" },
+ { icon: "hard-drive", message: "Cache", id: "DBiVK1", path: "cache" },
+ { icon: "profile", message: messages.SocialGraph, path: "/graph" }
+ ];
+
+ if (CONFIG.features.subscriptions) {
+ menuItems.push({ icon: "diamond", message: "Subscription", id: "R/6nsx", path: "/subscribe/manage" });
+ }
+
+ if (CONFIG.features.zapPool) {
+ menuItems.push({ icon: "piggy-bank", message: "Zap Pool", id: "i/dBAR", path: "/zap-pool" });
+ }
+
+ if (sub) {
+ menuItems.push({ icon: "code-circle", message: "Account Switcher", id: "7BX/yC", path: "accounts" });
+ }
return (
{!hideMenu && (
-
navigate("profile")}>
-
-
-
-
-
navigate("relays")}>
-
-
-
-
-
navigate("keys")}>
-
-
-
-
-
navigate("moderation")}>
-
-
-
-
-
navigate("handle")}>
-
-
-
-
- {CONFIG.features.subscriptions && (
-
navigate("/subscribe/manage")}>
-
-
+ {menuItems.map(({ icon, message, id, path }) => (
+
handleNavigate(path)} key={path}>
+
+
- )}
- {sub && (
-
navigate("accounts")}>
-
-
-
-
- )}
-
-
navigate("preferences")}>
-
-
-
-
-
-
navigate("wallet")}>
-
-
-
-
-
navigate("/donate")}>
-
-
-
-
- {CONFIG.features.zapPool && (
-
navigate("/zap-pool")}>
-
-
-
-
- )}
-
navigate("cache")}>
-
-
-
-
-
navigate("/graph")}>
-
-
-
-
+ ))}