Safari only has to disgard warning once per session

This commit is contained in:
DrMint 2022-09-05 17:29:44 +02:00
parent 9abd9f03f2
commit 296dd194a4
4 changed files with 23 additions and 9 deletions

View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import { useEffect, useMemo, useState } from "react";
import { useSwipeable } from "react-swipeable";
import UAParser from "ua-parser-js";
import { useBoolean, useIsClient } from "usehooks-ts";
import { useIsClient } from "usehooks-ts";
import Script from "next/script";
import { layout } from "../../design.config";
import { Ico, Icon } from "./Ico";
@ -69,6 +69,8 @@ export const AppLayout = ({
preferredLanguages,
selectedThemeMode,
subPanelOpen,
hasDisgardedSafariWarning,
setHasDisgardedSafariWarning,
setConfigPanelOpen,
setCurrency,
setDarkMode,
@ -144,7 +146,7 @@ export const AppLayout = ({
}, [currencyOptions, currencySelect, setCurrency]);
const isClient = useIsClient();
const { value: hasDisgardSafariWarning, setTrue: disgardSafariWarning } = useBoolean(false);
const isSafari = useMemo<boolean>(() => {
if (isClient) {
const parser = new UAParser();
@ -309,7 +311,7 @@ export const AppLayout = ({
)}
</div>
<Popup state={isSafari && !hasDisgardSafariWarning} onClose={() => null}>
<Popup state={isSafari && !hasDisgardedSafariWarning} onClose={() => null}>
<h1 className="text-2xl">Hi, you are using Safari!</h1>
<p className="max-w-lg text-center">
In most cases this wouldn&rsquo;t be a problem but our website isfor some obscure
@ -324,7 +326,7 @@ export const AppLayout = ({
text="Let me in regardless"
className="mt-8"
onClick={() => {
disgardSafariWarning();
setHasDisgardedSafariWarning(true);
sendAnalytics("Safari", "Disgard warning");
}}
/>

View File

@ -1,6 +1,6 @@
import React, { ReactNode, useContext, useEffect, useLayoutEffect, useState } from "react";
import { useRouter } from "next/router";
import { useLocalStorage } from "usehooks-ts";
import { useLocalStorage, useSessionStorage } from "usehooks-ts";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
import { LibraryItemUserStatus, RequiredNonNullable } from "types/types";
import { useDarkMode } from "hooks/useDarkMode";
@ -72,6 +72,11 @@ interface AppLayoutState {
langui: Langui;
languages: Languages;
currencies: Currencies;
hasDisgardedSafariWarning: boolean;
setHasDisgardedSafariWarning: React.Dispatch<
React.SetStateAction<AppLayoutState["hasDisgardedSafariWarning"]>
>;
}
const initialState: RequiredNonNullable<AppLayoutState> = {
@ -134,6 +139,9 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
currencies: [],
languages: [],
langui: {},
hasDisgardedSafariWarning: false,
setHasDisgardedSafariWarning: () => null,
};
const AppContext = React.createContext<AppLayoutState>(initialState);
@ -192,6 +200,11 @@ export const AppContextProvider = (props: Props): JSX.Element => {
initialState.libraryItemUserStatus
);
const [hasDisgardedSafariWarning, setHasDisgardedSafariWarning] = useSessionStorage(
"hasDisgardedSafariWarning",
initialState.hasDisgardedSafariWarning
);
const toggleSubPanelOpen = () => {
setSubPanelOpen((current) => (isDefined(current) ? !current : current));
};
@ -294,6 +307,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
screenWidth,
contentPanelWidth,
subPanelWidth,
hasDisgardedSafariWarning,
setSubPanelOpen,
setConfigPanelOpen,
setMainPanelReduced,
@ -318,6 +332,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
setScreenWidth,
setContentPanelWidth,
setSubPanelWidth,
setHasDisgardedSafariWarning,
languages,
langui,
currencies,

View File

@ -13,6 +13,3 @@ export const prettyTerminalBoxedTitle = (string: string | null | undefined): str
${string}
${"─".repeat(string.length + 2)}`
: "";
export const prettyTerminalTitle = (title: string | null | undefined): string =>
`\n\n-= ${title?.toUpperCase()} =-`;