Accords-Library-Archive
/
v3.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support for urls with searchparams when using server actions

This commit is contained in:
DrMint 2024-07-11 23:00:56 +02:00
parent a0e7d97967
commit e7eb324cb1
4 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/AppLayout/components/Topbar/components/CurrencySelector.astro
View File

@ -16,6 +16,13 @@ interface Props {
const { withTitle, ...otherProps } = Astro.props;
const { t } = await getI18n(Astro.locals.currentLocale);
const getActionCurrency = (value: string) => {
const requestSearchParams = new URL(Astro.request.url).searchParams;
const newSearchParams = new URLSearchParams(requestSearchParams);
newSearchParams.set("action-currency", value);
return `?${newSearchParams}`;
};
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
@ -29,7 +36,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
"pressable-link",
prepareClassForSelectedCurrencyPostProcessing({ currency: id }),
]}
href={`?action-currency=${id}`}>
href={getActionCurrency(id)}>
{`${id} (${formatCurrency(id)})`}
</a>
))

9
src/components/AppLayout/components/Topbar/components/LanguageSelector.astro
View File

@ -14,6 +14,13 @@ const { withTitle, ...otherProps } = Astro.props;
const { currentLocale } = Astro.locals;
const { t } = await getI18n(currentLocale);
const getActionLanguage = (value: string) => {
const requestSearchParams = new URL(Astro.request.url).searchParams;
const newSearchParams = new URLSearchParams(requestSearchParams);
newSearchParams.set("action-lang", value);
return `?${newSearchParams}`;
};
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
@ -24,7 +31,7 @@ const { t } = await getI18n(currentLocale);
contextCache.locales.map((locale) => (
<a
class:list={{ current: currentLocale === locale, "pressable-link": true }}
href={`?action-lang=${locale}`}>
href={getActionLanguage(locale)}>
{formatLocale(locale)}
</a>
))

13
src/components/AppLayout/components/Topbar/components/ThemeSelector.astro
View File

@ -5,19 +5,26 @@ import { getI18n } from "src/i18n/i18n";
const { currentLocale } = Astro.locals;
const { t } = await getI18n(currentLocale);
const getActionThemeUrl = (value: "dark" | "light" | "auto") => {
const requestSearchParams = new URL(Astro.request.url).searchParams;
const newSearchParams = new URLSearchParams(requestSearchParams);
newSearchParams.set("action-theme", value);
return `?${newSearchParams}`;
};
---
{/* ------------------------------------------- HTML ------------------------------------------- */}
<Tooltip trigger="click">
<div id="content" slot="tooltip-content">
<a class="pressable-link underline-when-dark" href="?action-theme=dark">
<a class="pressable-link underline-when-dark" href={getActionThemeUrl("dark")}>
{t("global.theme.dark")}
</a>
<a class="pressable-link underline-when-auto" href="?action-theme=auto">
<a class="pressable-link underline-when-auto" href={getActionThemeUrl("auto")}>
{t("global.theme.auto")}
</a>
<a class="pressable-link underline-when-light" href="?action-theme=light">
<a class="pressable-link underline-when-light" href={getActionThemeUrl("light")}>
{t("global.theme.light")}
</a>
</div>

85
src/middleware/actionsHandling.ts
View File

@ -12,46 +12,47 @@ import { trackEvent } from "src/shared/analytics/analytics";
const ninetyDaysInSeconds = 60 * 60 * 24 * 90;
export const actionsHandlingMiddleware = defineMiddleware(
async ({ url: { pathname, searchParams }, cookies }, next) => {
const language = searchParams.get("action-lang");
if (isValidLocale(language)) {
const currentLocale = getCurrentLocale(pathname);
const pathnameWithoutLocale = currentLocale
? pathname.substring(currentLocale.length + 1)
: pathname;
const redirectURL = getAbsoluteLocaleUrl(language, pathnameWithoutLocale);
trackEvent("action-lang");
cookies.set(CookieKeys.Language, language, {
maxAge: ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
return redirect(redirectURL);
}
const currency = searchParams.get("action-currency");
if (isValidCurrency(currency)) {
trackEvent("action-currency");
cookies.set(CookieKeys.Currency, currency, {
maxAge: ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
return redirect(pathname);
}
const theme = searchParams.get("action-theme");
if (isValidTheme(theme)) {
trackEvent("action-theme");
cookies.set(CookieKeys.Theme, theme, {
maxAge: theme === "auto" ? 0 : ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
return redirect(pathname);
}
return next();
export const actionsHandlingMiddleware = defineMiddleware(async ({ url, cookies }, next) => {
const language = url.searchParams.get("action-lang");
if (isValidLocale(language)) {
const currentLocale = getCurrentLocale(url.pathname);
const pathnameWithoutLocale = currentLocale
? url.pathname.substring(currentLocale.length + 1)
: url.pathname;
url.pathname = getAbsoluteLocaleUrl(language, pathnameWithoutLocale);
url.searchParams.delete("action-lang");
trackEvent("action-lang");
cookies.set(CookieKeys.Language, language, {
maxAge: ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
return redirect(url.toString());
}
);
const currency = url.searchParams.get("action-currency");
if (isValidCurrency(currency)) {
trackEvent("action-currency");
cookies.set(CookieKeys.Currency, currency, {
maxAge: ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
url.searchParams.delete("action-currency");
return redirect(url.toString());
}
const theme = url.searchParams.get("action-theme");
if (isValidTheme(theme)) {
trackEvent("action-theme");
cookies.set(CookieKeys.Theme, theme, {
maxAge: theme === "auto" ? 0 : ninetyDaysInSeconds,
path: "/",
sameSite: "strict",
});
url.searchParams.delete("action-theme");
return redirect(url.toString());
}
return next();
});