From a677fbefbfe842c9fbdbb36a8b63330083c72e26 Mon Sep 17 00:00:00 2001 From: Ben Phelps Date: Wed, 21 Sep 2022 09:00:57 +0300 Subject: [PATCH] add global settings context will be useful going forward, and simplify widget props being passed around all over the place --- src/components/bookmarks/group.jsx | 4 ++-- src/components/bookmarks/item.jsx | 9 +++++++-- src/components/bookmarks/list.jsx | 4 ++-- src/components/services/group.jsx | 4 ++-- src/components/services/item.jsx | 10 +++++++--- src/components/services/list.jsx | 4 ++-- src/pages/_app.jsx | 5 ++++- src/pages/index.jsx | 30 ++++++++++++++++-------------- src/utils/settings-context.jsx | 15 +++++++++++++++ 9 files changed, 57 insertions(+), 28 deletions(-) create mode 100644 src/utils/settings-context.jsx diff --git a/src/components/bookmarks/group.jsx b/src/components/bookmarks/group.jsx index c4a56dec7..af5100816 100644 --- a/src/components/bookmarks/group.jsx +++ b/src/components/bookmarks/group.jsx @@ -1,10 +1,10 @@ import List from "components/bookmarks/list"; -export default function BookmarksGroup({ group, target }) { +export default function BookmarksGroup({ group }) { return (

{group.name}

- +
); } diff --git a/src/components/bookmarks/item.jsx b/src/components/bookmarks/item.jsx index d618911de..c3c5b452f 100644 --- a/src/components/bookmarks/item.jsx +++ b/src/components/bookmarks/item.jsx @@ -1,12 +1,17 @@ -export default function Item({ bookmark, target = "_blank" }) { +import { useContext } from "react"; + +import { SettingsContext } from "utils/settings-context"; + +export default function Item({ bookmark }) { const { hostname } = new URL(bookmark.href); + const { settings } = useContext(SettingsContext); return (
  • diff --git a/src/components/bookmarks/list.jsx b/src/components/bookmarks/list.jsx index 06001c232..3b3774c95 100644 --- a/src/components/bookmarks/list.jsx +++ b/src/components/bookmarks/list.jsx @@ -1,10 +1,10 @@ import Item from "components/bookmarks/item"; -export default function List({ bookmarks, target }) { +export default function List({ bookmarks }) { return (
      {bookmarks.map((bookmark) => ( - + ))}
    ); diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx index 222e908c1..daae19094 100644 --- a/src/components/services/group.jsx +++ b/src/components/services/group.jsx @@ -2,7 +2,7 @@ import classNames from "classnames"; import List from "components/services/list"; -export default function ServicesGroup({ services, target, layout }) { +export default function ServicesGroup({ services, layout }) { return (

    {services.name}

    - +
    ); } diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx index 4a06b1145..82f3741c8 100644 --- a/src/components/services/item.jsx +++ b/src/components/services/item.jsx @@ -1,10 +1,13 @@ import Image from "next/future/image"; +import { useContext } from "react"; import { Disclosure } from "@headlessui/react"; import Status from "./status"; import Widget from "./widget"; import Docker from "./widgets/service/docker"; +import { SettingsContext } from "utils/settings-context"; + function resolveIcon(icon) { if (icon.startsWith("http")) { return `/api/proxy?url=${encodeURIComponent(icon)}`; @@ -21,8 +24,9 @@ function resolveIcon(icon) { return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`; } -export default function Item({ service, target = "_blank" }) { +export default function Item({ service }) { const hasLink = service.href && service.href !== "#"; + const { settings } = useContext(SettingsContext); return (
  • @@ -37,7 +41,7 @@ export default function Item({ service, target = "_blank" }) { (hasLink ? ( @@ -52,7 +56,7 @@ export default function Item({ service, target = "_blank" }) { {hasLink ? ( diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx index 9093ba0a0..80b45592a 100644 --- a/src/components/services/list.jsx +++ b/src/components/services/list.jsx @@ -14,7 +14,7 @@ const columnMap = [ "grid-cols-1 md:grid-cols-2 lg:grid-cols-8", ]; -export default function List({ services, target, layout }) { +export default function List({ services, layout }) { return (
      {services.map((service) => ( - + ))}
    ); diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 32c9c23ff..cb9dd1a69 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -8,6 +8,7 @@ import "styles/theme.css"; import "utils/i18n"; import { ColorProvider } from "utils/color-context"; import { ThemeProvider } from "utils/theme-context"; +import { SettingsProvider } from "utils/settings-context"; function MyApp({ Component, pageProps }) { return ( @@ -18,7 +19,9 @@ function MyApp({ Component, pageProps }) { > - + + + diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 7f170a6f3..207b2e6ac 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -13,6 +13,7 @@ import Revalidate from "components/revalidate"; import { getSettings } from "utils/config"; import { ColorContext } from "utils/color-context"; import { ThemeContext } from "utils/theme-context"; +import { SettingsContext } from "utils/settings-context"; const ThemeToggle = dynamic(() => import("components/theme-toggle"), { ssr: false, @@ -26,22 +27,23 @@ const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search" export function getStaticProps() { try { - const settings = getSettings(); + const { providers, ...settings } = getSettings(); + return { props: { - settings, + initialSettings: settings, }, }; } catch (e) { return { props: { - settings: {}, + initialSettings: {}, }, }; } } -export default function Index({ settings }) { +export default function Index({ initialSettings }) { const { data: errorsData } = useSWR("/api/validate"); if (errorsData && errorsData.length > 0) { @@ -68,20 +70,25 @@ export default function Index({ settings }) { ); } - return ; + return ; } -function Home({ settings }) { +function Home({ initialSettings }) { const { i18n } = useTranslation(); const { theme, setTheme } = useContext(ThemeContext); const { color, setColor } = useContext(ColorContext); + const { settings, setSettings } = useContext(SettingsContext); + + if (initialSettings) { + setSettings(initialSettings); + } const { data: services } = useSWR("/api/services"); const { data: bookmarks } = useSWR("/api/bookmarks"); const { data: widgets } = useSWR("/api/widgets"); const wrappedStyle = {}; - if (settings.background) { + if (settings && settings.background) { wrappedStyle.backgroundImage = `url(${settings.background})`; wrappedStyle.backgroundSize = "cover"; wrappedStyle.opacity = settings.backgroundOpacity ?? 1; @@ -133,12 +140,7 @@ function Home({ settings }) { {services && (
    {services.map((group) => ( - + ))}
    )} @@ -146,7 +148,7 @@ function Home({ settings }) { {bookmarks && (
    {bookmarks.map((group) => ( - + ))}
    )} diff --git a/src/utils/settings-context.jsx b/src/utils/settings-context.jsx new file mode 100644 index 000000000..d6993b14b --- /dev/null +++ b/src/utils/settings-context.jsx @@ -0,0 +1,15 @@ +import { createContext, useState, useMemo } from "react"; + +export const SettingsContext = createContext(); + +export function SettingsProvider({ initialSettings, children }) { + const [settings, setSettings] = useState({}); + + if (initialSettings) { + setSettings(initialSettings); + } + + const value = useMemo(() => ({ settings, setSettings }), [settings]); + + return {children}; +}