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

Finish converting the remaining contexts into Jotai

This commit is contained in:
DrMint 2022-11-02 22:15:25 +01:00
parent e61414b5a4
commit 61898ea945
33 changed files with 409 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AppLayout.tsx
View File

@ -9,7 +9,6 @@ import { isDefined, isUndefined } from "helpers/others";
import { cIf, cJoin } from "helpers/className";
import { OpenGraph, TITLE_PREFIX, TITLE_SEPARATOR } from "helpers/openGraph";
import { Ids } from "types/ids";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter, useAtomPair } from "helpers/atoms";
@ -52,7 +51,8 @@ export const AppLayout = ({
const langui = useAtomGetter(atoms.localData.langui);
const { is1ColumnLayout, isScreenAtLeastXs } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const isScreenAtLeastXs = useAtomGetter(atoms.containerQueries.isScreenAtLeastXs);
const handlers = useSwipeable({
onSwipedLeft: (SwipeEventData) => {

5
src/components/Containers/ContentPanel.tsx
View File

@ -1,4 +1,5 @@
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { cIf, cJoin } from "helpers/className";
/*
@ -25,7 +26,7 @@ export const ContentPanel = ({
children,
className,
}: Props): JSX.Element => {
const { isContentPanelAtLeast3xl } = useContainerQueries();
const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
return (
<div className="grid h-full">
<main

5
src/components/Containers/SubPanel.tsx
View File

@ -1,4 +1,5 @@
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { cIf, cJoin } from "helpers/className";
/*
@ -13,7 +14,7 @@ interface Props {
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
export const SubPanel = ({ children }: Props): JSX.Element => {
const { isSubPanelAtLeastXs } = useContainerQueries();
const isSubPanelAtLeastXs = useAtomGetter(atoms.containerQueries.isSubPanelAtLeastXs);
return (
<div
className={cJoin(

5
src/components/LightBox.tsx
View File

@ -10,7 +10,8 @@ import { Ids } from "types/ids";
import { UploadImageFragment } from "graphql/generated";
import { ImageQuality } from "helpers/img";
import { isDefined } from "helpers/others";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { useAtomGetter } from "helpers/atoms";
import { atoms } from "contexts/atoms";
interface Props {
onCloseRequest: () => void;
@ -138,7 +139,7 @@ const ControlButtons = ({
onCloseRequest,
toggleFullscreen,
}: ControlButtonsProps): JSX.Element => {
const { is1ColumnLayout } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const PreviousButton = () => (
<Button

3
src/components/Markdown/Markdawn.tsx
View File

@ -13,7 +13,6 @@ import { AnchorShare } from "components/AnchorShare";
import { useIntersectionList } from "hooks/useIntersectionList";
import { Ico, Icon } from "components/Ico";
import { useDeviceSupportsHover } from "hooks/useMediaQuery";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
@ -32,7 +31,7 @@ interface MarkdawnProps {
export const Markdawn = ({ className, text: rawText }: MarkdawnProps): JSX.Element => {
const playerName = useAtomGetter(atoms.settings.playerName);
const router = useRouter();
const { isContentPanelAtLeastLg } = useContainerQueries();
const isContentPanelAtLeastLg = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastLg);
const { showLightBox } = useAtomGetter(atoms.lightBox);
/* eslint-disable no-irregular-whitespace */

3
src/components/PanelComponents/ReturnButton.tsx
View File

@ -4,7 +4,6 @@ import { Button } from "components/Inputs/Button";
import { TranslatedProps } from "types/TranslatedProps";
import { useSmartLanguage } from "hooks/useSmartLanguage";
import { isDefined } from "helpers/others";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
@ -25,7 +24,7 @@ interface Props {
export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const { is3ColumnsLayout } = useContainerQueries();
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
return (
<>

3
src/components/Panels/MainPanel.tsx
View File

@ -9,7 +9,6 @@ import { isDefinedAndNotEmpty } from "helpers/others";
import { Link } from "components/Inputs/Link";
import { sendAnalytics } from "helpers/analytics";
import { ColoredSvg } from "components/ColoredSvg";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
@ -19,7 +18,7 @@ import { useAtomGetter, useAtomPair, useAtomSetter } from "helpers/atoms";
*/
export const MainPanel = (): JSX.Element => {
const { is3ColumnsLayout } = useContainerQueries();
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
const langui = useAtomGetter(atoms.localData.langui);
const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced);
const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);

5
src/components/Panels/SettingsPopup.tsx
View File

@ -11,10 +11,9 @@ import { sendAnalytics } from "helpers/analytics";
import { cJoin, cIf } from "helpers/className";
import { prettyLanguage } from "helpers/formatters";
import { filterHasAttributes, isDefined } from "helpers/others";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter, useAtomPair } from "helpers/atoms";
import { ThemeMode } from "contexts/UserSettingsProvider";
import { ThemeMode } from "contexts/SettingsProvider";
export const SettingsPopup = (): JSX.Element => {
const [preferredLanguages, setPreferredLanguages] = useAtomPair(
@ -31,7 +30,7 @@ export const SettingsPopup = (): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const currencies = useAtomGetter(atoms.localData.currencies);
const { is1ColumnLayout } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const router = useRouter();

3
src/components/SmartList.tsx
View File

@ -8,7 +8,6 @@ import { cJoin } from "helpers/className";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
import { Ids } from "types/ids";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
@ -229,7 +228,7 @@ export const SmartList = <T,>({
*/
const DefaultRenderWhenEmpty = () => {
const { is3ColumnsLayout } = useContainerQueries();
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
const langui = useAtomGetter(atoms.localData.langui);
return (
<div className="grid h-full place-content-center">

3
src/components/Wiki/DefinitionCard.tsx
View File

@ -5,7 +5,6 @@ import { getStatusDescription } from "helpers/others";
import { useSmartLanguage } from "hooks/useSmartLanguage";
import { Button } from "components/Inputs/Button";
import { cIf, cJoin } from "helpers/className";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
@ -31,7 +30,7 @@ interface Props {
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
const DefinitionCard = ({ source, translations = [], index, categories }: Props): JSX.Element => {
const { isContentPanelAtLeastMd } = useContainerQueries();
const isContentPanelAtLeastMd = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastMd);
const langui = useAtomGetter(atoms.localData.langui);
const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
items: translations,

23
src/contexts/AppLayoutProvider.tsx
View File

@ -1,27 +1,8 @@
import { useRouter } from "next/router";
import { useEffect } from "react";
import { atomWithStorage } from "jotai/utils";
import { atom } from "jotai";
import { atoms } from "contexts/atoms";
import { settings } from "contexts/UserSettingsProvider";
import { atomPairing, useAtomSetter } from "helpers/atoms";
import { useScrollIntoView } from "hooks/useScrollIntoView";
const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
export const layout = {
mainPanelReduced,
settingsOpened,
subPanelOpened,
mainPanelOpened,
menuGesturesEnabled,
terminalMode,
};
import { useAtomSetter } from "helpers/atoms";
import { atoms } from "contexts/atoms";
export const AppLayoutProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
const router = useRouter();

316
src/contexts/ContainerQueriesContext.tsx
View File

@ -1,316 +0,0 @@
import React, { createContext, ReactNode, useContext, useMemo, useState } from "react";
import { atoms } from "./atoms";
import { useOnResize } from "hooks/useOnResize";
import { Ids } from "types/ids";
import { RequiredNonNullable } from "types/types";
import { useAtomGetter } from "helpers/atoms";
type Size =
| "2xl"
| "2xs"
| "3xl"
| "4xl"
| "5xl"
| "6xl"
| "7xl"
| "lg"
| "md"
| "sm"
| "xl"
| "xs";
const sizes: Record<Size, number> = {
"2xl": 42,
"3xl": 48,
"4xl": 56,
"5xl": 64,
"6xl": 72,
"7xl": 80,
lg: 32,
md: 28,
sm: 24,
xl: 36,
xs: 19,
"2xs": 16,
};
type ContainerQueriesContainers = "contentPanel" | "screen" | "subPanel";
type ContainerQueriesKeys =
| "is1ColumnLayout"
| "is3ColumnsLayout"
| `is${Capitalize<ContainerQueriesContainers>}AtLeast${Capitalize<Size>}`;
type ContainerQueriesState = Record<ContainerQueriesKeys, boolean>;
const initialState: RequiredNonNullable<ContainerQueriesState> = {
is1ColumnLayout: false,
is3ColumnsLayout: false,
isContentPanelAtLeast2xl: false,
isContentPanelAtLeast2xs: false,
isContentPanelAtLeast3xl: false,
isContentPanelAtLeast4xl: false,
isContentPanelAtLeast5xl: false,
isContentPanelAtLeast6xl: false,
isContentPanelAtLeast7xl: false,
isContentPanelAtLeastLg: false,
isContentPanelAtLeastMd: false,
isContentPanelAtLeastSm: false,
isContentPanelAtLeastXl: false,
isContentPanelAtLeastXs: false,
isScreenAtLeast2xl: false,
isScreenAtLeast2xs: false,
isScreenAtLeast3xl: false,
isScreenAtLeast4xl: false,
isScreenAtLeast5xl: false,
isScreenAtLeast6xl: false,
isScreenAtLeast7xl: false,
isScreenAtLeastLg: false,
isScreenAtLeastMd: false,
isScreenAtLeastSm: false,
isScreenAtLeastXl: false,
isScreenAtLeastXs: false,
isSubPanelAtLeast2xl: false,
isSubPanelAtLeast2xs: false,
isSubPanelAtLeast3xl: false,
isSubPanelAtLeast4xl: false,
isSubPanelAtLeast5xl: false,
isSubPanelAtLeast6xl: false,
isSubPanelAtLeast7xl: false,
isSubPanelAtLeastLg: false,
isSubPanelAtLeastMd: false,
isSubPanelAtLeastSm: false,
isSubPanelAtLeastXl: false,
isSubPanelAtLeastXs: false,
};
const ContainerQueriesContext = createContext<ContainerQueriesState>(initialState);
export const useContainerQueries = (): ContainerQueriesState => useContext(ContainerQueriesContext);
interface Props {
children: ReactNode;
}
export const ContainerQueriesContextProvider = ({ children }: Props): JSX.Element => {
const [screenWidth, setScreenWidth] = useState(0);
const [contentPanelWidth, setContentPanelWidth] = useState(0);
const [subPanelWidth, setSubPanelWidth] = useState(0);
useOnResize(Ids.Body, (width) => setScreenWidth(width));
useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
const fontSize = useAtomGetter(atoms.settings.fontSize);
const screenAtLeasts = useMemo(
() => ({
isScreenAtLeast2xs: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("2xs")
),
isScreenAtLeastXs: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xs")),
isScreenAtLeastSm: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("sm")),
isScreenAtLeastMd: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("md")),
isScreenAtLeastLg: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("lg")),
isScreenAtLeastXl: applyContainerQuery(fontSize, screenWidth, createAtLeastMediaQuery("xl")),
isScreenAtLeast2xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("2xl")
),
isScreenAtLeast3xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("3xl")
),
isScreenAtLeast4xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("4xl")
),
isScreenAtLeast5xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("5xl")
),
isScreenAtLeast6xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("6xl")
),
isScreenAtLeast7xl: applyContainerQuery(
fontSize,
screenWidth,
createAtLeastMediaQuery("7xl")
),
}),
[screenWidth, fontSize]
);
const columnLayouts = useMemo(
() => ({
is1ColumnLayout: !screenAtLeasts.isScreenAtLeast5xl,
is3ColumnsLayout: screenAtLeasts.isScreenAtLeast5xl,
}),
[screenAtLeasts.isScreenAtLeast5xl]
);
const subPanelAtLeasts = useMemo(
() => ({
isSubPanelAtLeast2xs: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("2xs")
),
isSubPanelAtLeastXs: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("xs")
),
isSubPanelAtLeastSm: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("sm")
),
isSubPanelAtLeastMd: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("md")
),
isSubPanelAtLeastLg: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("lg")
),
isSubPanelAtLeastXl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("xl")
),
isSubPanelAtLeast2xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("2xl")
),
isSubPanelAtLeast3xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("3xl")
),
isSubPanelAtLeast4xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("4xl")
),
isSubPanelAtLeast5xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("5xl")
),
isSubPanelAtLeast6xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("6xl")
),
isSubPanelAtLeast7xl: applyContainerQuery(
fontSize,
subPanelWidth,
createAtLeastMediaQuery("7xl")
),
}),
[subPanelWidth, fontSize]
);
const contentPanelAtLeasts = useMemo(
() => ({
isContentPanelAtLeast2xs: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("2xs")
),
isContentPanelAtLeastXs: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("xs")
),
isContentPanelAtLeastSm: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("sm")
),
isContentPanelAtLeastMd: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("md")
),
isContentPanelAtLeastLg: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("lg")
),
isContentPanelAtLeastXl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("xl")
),
isContentPanelAtLeast2xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("2xl")
),
isContentPanelAtLeast3xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("3xl")
),
isContentPanelAtLeast4xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("4xl")
),
isContentPanelAtLeast5xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("5xl")
),
isContentPanelAtLeast6xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("6xl")
),
isContentPanelAtLeast7xl: applyContainerQuery(
fontSize,
contentPanelWidth,
createAtLeastMediaQuery("7xl")
),
}),
[contentPanelWidth, fontSize]
);
return (
<ContainerQueriesContext.Provider
value={{
...screenAtLeasts,
...contentPanelAtLeasts,
...subPanelAtLeasts,
...columnLayouts,
}}>
{children}
</ContainerQueriesContext.Provider>
);
};
type MediaQuery = { value: number; unit: "px" | "rem"; rule: "max" | "min" };
const createAtLeastMediaQuery = (size: Size): MediaQuery => ({
value: sizes[size],
unit: "rem",
rule: "min",
});
const applyContainerQuery = (fontSize: number, width: number, query: MediaQuery): boolean => {
const breakpoint = query.value * (query.unit === "rem" ? 16 : 1) * fontSize;
return query.rule === "min" ? width >= breakpoint : width < breakpoint;
};

152
src/contexts/ContainerQueriesProvider.tsx Normal file
View File

@ -0,0 +1,152 @@
import { atom, Getter } from "jotai";
import { atomPairing, useAtomSetter } from "helpers/atoms";
import { useOnResize } from "hooks/useOnResize";
import { Ids } from "types/ids";
import { settings } from "contexts/atoms";
type Size =
| "2xl"
| "2xs"
| "3xl"
| "4xl"
| "5xl"
| "6xl"
| "7xl"
| "lg"
| "md"
| "sm"
| "xl"
| "xs";
const sizes: Record<Size, number> = {
"2xl": 42,
"3xl": 48,
"4xl": 56,
"5xl": 64,
"6xl": 72,
"7xl": 80,
lg: 32,
md: 28,
sm: 24,
xl: 36,
xs: 19,
"2xs": 16,
};
const isAtLeastContainerQuery = (width: number, size: Size, fontSize: number): boolean =>
width >= sizes[size] * 16 * fontSize;
const screenWidth = atomPairing(atom(0));
const contentPanelWidth = atomPairing(atom(0));
const subPanelWidth = atomPairing(atom(0));
const screenGetter = (get: Getter, size: Size) =>
isAtLeastContainerQuery(get(screenWidth[0]), size, get(settings.fontSize[0]));
const isScreenAtLeast2xs = atom((get) => screenGetter(get, "2xs"));
const isScreenAtLeastXs = atom((get) => screenGetter(get, "xs"));
const isScreenAtLeastSm = atom((get) => screenGetter(get, "sm"));
const isScreenAtLeastMd = atom((get) => screenGetter(get, "md"));
const isScreenAtLeastLg = atom((get) => screenGetter(get, "lg"));
const isScreenAtLeastXl = atom((get) => screenGetter(get, "xl"));
const isScreenAtLeast2xl = atom((get) => screenGetter(get, "2xl"));
const isScreenAtLeast3xl = atom((get) => screenGetter(get, "3xl"));
const isScreenAtLeast4xl = atom((get) => screenGetter(get, "4xl"));
const isScreenAtLeast5xl = atom((get) => screenGetter(get, "5xl"));
const isScreenAtLeast6xl = atom((get) => screenGetter(get, "6xl"));
const isScreenAtLeast7xl = atom((get) => screenGetter(get, "7xl"));
const is1ColumnLayout = atom((get) => !get(isScreenAtLeast5xl));
const is3ColumnsLayout = atom((get) => get(isScreenAtLeast5xl));
const contentPanelGetter = (get: Getter, size: Size) =>
isAtLeastContainerQuery(get(contentPanelWidth[0]), size, get(settings.fontSize[0]));
const isContentPanelAtLeast2xs = atom((get) => contentPanelGetter(get, "2xs"));
const isContentPanelAtLeastXs = atom((get) => contentPanelGetter(get, "xs"));
const isContentPanelAtLeastSm = atom((get) => contentPanelGetter(get, "sm"));
const isContentPanelAtLeastMd = atom((get) => contentPanelGetter(get, "md"));
const isContentPanelAtLeastLg = atom((get) => contentPanelGetter(get, "lg"));
const isContentPanelAtLeastXl = atom((get) => contentPanelGetter(get, "xl"));
const isContentPanelAtLeast2xl = atom((get) => contentPanelGetter(get, "2xl"));
const isContentPanelAtLeast3xl = atom((get) => contentPanelGetter(get, "3xl"));
const isContentPanelAtLeast4xl = atom((get) => contentPanelGetter(get, "4xl"));
const isContentPanelAtLeast5xl = atom((get) => contentPanelGetter(get, "5xl"));
const isContentPanelAtLeast6xl = atom((get) => contentPanelGetter(get, "6xl"));
const isContentPanelAtLeast7xl = atom((get) => contentPanelGetter(get, "7xl"));
const subPanelGetter = (get: Getter, size: Size) =>
isAtLeastContainerQuery(get(subPanelWidth[0]), size, get(settings.fontSize[0]));
const isSubPanelAtLeast2xs = atom((get) => subPanelGetter(get, "2xs"));
const isSubPanelAtLeastXs = atom((get) => subPanelGetter(get, "xs"));
const isSubPanelAtLeastSm = atom((get) => subPanelGetter(get, "sm"));
const isSubPanelAtLeastMd = atom((get) => subPanelGetter(get, "md"));
const isSubPanelAtLeastLg = atom((get) => subPanelGetter(get, "lg"));
const isSubPanelAtLeastXl = atom((get) => subPanelGetter(get, "xl"));
const isSubPanelAtLeast2xl = atom((get) => subPanelGetter(get, "2xl"));
const isSubPanelAtLeast3xl = atom((get) => subPanelGetter(get, "3xl"));
const isSubPanelAtLeast4xl = atom((get) => subPanelGetter(get, "4xl"));
const isSubPanelAtLeast5xl = atom((get) => subPanelGetter(get, "5xl"));
const isSubPanelAtLeast6xl = atom((get) => subPanelGetter(get, "6xl"));
const isSubPanelAtLeast7xl = atom((get) => subPanelGetter(get, "7xl"));
export const containerQueries = {
is1ColumnLayout,
is3ColumnsLayout,
isScreenAtLeast2xs,
isScreenAtLeastXs,
isScreenAtLeastSm,
isScreenAtLeastMd,
isScreenAtLeastLg,
isScreenAtLeastXl,
isScreenAtLeast2xl,
isScreenAtLeast3xl,
isScreenAtLeast4xl,
isScreenAtLeast5xl,
isScreenAtLeast6xl,
isScreenAtLeast7xl,
isContentPanelAtLeast2xs,
isContentPanelAtLeastXs,
isContentPanelAtLeastSm,
isContentPanelAtLeastMd,
isContentPanelAtLeastLg,
isContentPanelAtLeastXl,
isContentPanelAtLeast2xl,
isContentPanelAtLeast3xl,
isContentPanelAtLeast4xl,
isContentPanelAtLeast5xl,
isContentPanelAtLeast6xl,
isContentPanelAtLeast7xl,
isSubPanelAtLeast2xs,
isSubPanelAtLeastXs,
isSubPanelAtLeastSm,
isSubPanelAtLeastMd,
isSubPanelAtLeastLg,
isSubPanelAtLeastXl,
isSubPanelAtLeast2xl,
isSubPanelAtLeast3xl,
isSubPanelAtLeast4xl,
isSubPanelAtLeast5xl,
isSubPanelAtLeast6xl,
isSubPanelAtLeast7xl,
};
export const ContainerQueriesContextProvider = ({
children,
}: {
children: React.ReactNode;
}): JSX.Element => {
const setScreenWidth = useAtomSetter(screenWidth);
const setContentPanelWidth = useAtomSetter(contentPanelWidth);
const setSubPanelWidth = useAtomSetter(subPanelWidth);
useOnResize(Ids.Body, (width) => setScreenWidth(width));
useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width));
useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width));
return <>{children}</>;
};

16
src/contexts/LightBoxProvider.tsx
View File

@ -1,27 +1,17 @@
import React, { useCallback, useState } from "react";
import { atom } from "jotai";
import { useEffectOnce } from "usehooks-ts";
import { UploadImageFragment } from "graphql/generated";
import { LightBox } from "components/LightBox";
import { filterDefined } from "helpers/others";
import { atomPairing, useAtomSetter } from "helpers/atoms";
const lightboxAtom = atomPairing(
atom<{
showLightBox: (
images: (UploadImageFragment | string | null | undefined)[],
index?: number
) => void;
}>({ showLightBox: () => null })
);
export const lightBox = lightboxAtom[0];
import { useAtomSetter } from "helpers/atoms";
import { lightBox } from "contexts/atoms";
export const LightBoxProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
const [isLightBoxVisible, setLightBoxVisibility] = useState(false);
const [lightBoxImages, setLightBoxImages] = useState<(UploadImageFragment | string)[]>([]);
const [lightBoxIndex, setLightBoxIndex] = useState(0);
const setShowLightBox = useAtomSetter(lightboxAtom);
const setShowLightBox = useAtomSetter(lightBox);
useEffectOnce(() =>
setShowLightBox({

92
src/contexts/SettingsProvider.tsx Normal file
View File

@ -0,0 +1,92 @@
import { useRouter } from "next/router";
import { useLayoutEffect, useEffect } from "react";
import { useAtomGetter, useAtomPair } from "helpers/atoms";
import { getDefaultPreferredLanguages } from "helpers/locales";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
import { usePrefersDarkMode } from "hooks/useMediaQuery";
import { SettingsPopup } from "components/Panels/SettingsPopup";
import { settings } from "contexts/atoms";
export enum ThemeMode {
Dark = "dark",
Auto = "auto",
Light = "light",
}
export const SettingsProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
const router = useRouter();
const [preferredLanguages, setPreferredLanguages] = useAtomPair(settings.preferredLanguages);
const fontSize = useAtomGetter(settings.fontSize);
const isDyslexic = useAtomGetter(settings.dyslexic);
const [isDarkMode, setDarkMode] = useAtomPair(settings.darkMode);
const themeMode = useAtomGetter(settings.themeMode);
useLayoutEffect(() => {
const html = document.getElementsByTagName("html")[0];
if (isDefined(html)) {
html.style.fontSize = `${fontSize * 100}%`;
}
}, [fontSize]);
useLayoutEffect(() => {
const next = document.getElementById("__next");
if (isDefined(next)) {
if (isDyslexic) {
next.classList.add("set-theme-font-dyslexic");
next.classList.remove("set-theme-font-standard");
} else {
next.classList.add("set-theme-font-standard");
next.classList.remove("set-theme-font-dyslexic");
}
}
}, [isDyslexic]);
/* DARK MODE */
const prefersDarkMode = usePrefersDarkMode();
useEffect(() => {
setDarkMode(themeMode === ThemeMode.Auto ? prefersDarkMode : themeMode === ThemeMode.Dark);
}, [prefersDarkMode, setDarkMode, themeMode]);
useLayoutEffect(() => {
const next = document.getElementById("__next");
if (isDefined(next)) {
if (isDarkMode) {
next.classList.add("set-theme-dark");
next.classList.remove("set-theme-light");
} else {
next.classList.add("set-theme-light");
next.classList.remove("set-theme-dark");
}
}
}, [isDarkMode]);
/* PREFERRED LANGUAGES */
useEffect(() => {
if (preferredLanguages.length === 0) {
if (isDefinedAndNotEmpty(router.locale) && router.locales) {
setPreferredLanguages(getDefaultPreferredLanguages(router.locale, router.locales));
}
} else if (router.locale !== preferredLanguages[0]) {
/*
* Using a timeout to the code getting stuck into a loop when reaching the website with a
* different preferredLanguages[0] from router.locale
*/
setTimeout(
async () =>
router.replace(router.asPath, router.asPath, {
locale: preferredLanguages[0],
}),
250
);
}
}, [preferredLanguages, router, setPreferredLanguages]);
return (
<>
<SettingsPopup />
{children}
</>
);
};

10
src/contexts/TerminalProvider.tsx
View File

@ -1,10 +0,0 @@
import { atom } from "jotai";
import { atomPairing } from "helpers/atoms";
const previousLines = atomPairing(atom<string[]>([]));
const previousCommands = atomPairing(atom<string[]>([]));
export const terminal = {
previousLines,
previousCommands,
};

13
src/contexts/UserSettingsProvider.tsx
View File

@ -2,7 +2,6 @@ import { atomWithStorage } from "jotai/utils";
import { atom } from "jotai";
import { useRouter } from "next/router";
import { useLayoutEffect, useEffect } from "react";
import { atoms } from "./atoms";
import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
import { getDefaultPreferredLanguages } from "helpers/locales";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
@ -35,13 +34,11 @@ export const settings = {
export const UserSettingsProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
const router = useRouter();
const [preferredLanguages, setPreferredLanguages] = useAtomPair(
atoms.settings.preferredLanguages
);
const fontSize = useAtomGetter(atoms.settings.fontSize);
const isDyslexic = useAtomGetter(atoms.settings.dyslexic);
const [isDarkMode, setDarkMode] = useAtomPair(atoms.settings.darkMode);
const themeMode = useAtomGetter(atoms.settings.themeMode);
const [preferredLanguages, setPreferredLanguages] = useAtomPair(settings.preferredLanguages);
const fontSize = useAtomGetter(settings.fontSize);
const isDyslexic = useAtomGetter(settings.dyslexic);
const [isDarkMode, setDarkMode] = useAtomPair(settings.darkMode);
const themeMode = useAtomGetter(settings.themeMode);
useLayoutEffect(() => {
const html = document.getElementsByTagName("html")[0];

74
src/contexts/atoms.ts
View File

@ -1,13 +1,75 @@
import { layout } from "contexts/AppLayoutProvider";
import { terminal } from "contexts/TerminalProvider";
import { atomWithStorage } from "jotai/utils";
import { atom } from "jotai";
import { localData } from "contexts/LocalDataProvider";
import { settings } from "contexts/UserSettingsProvider";
import { lightBox } from "contexts/LightBoxProvider";
import { containerQueries } from "contexts/ContainerQueriesProvider";
import { atomPairing } from "helpers/atoms";
import { UploadImageFragment } from "graphql/generated";
import { ThemeMode } from "contexts/SettingsProvider";
/* [ LAYOUT ATOMS ] */
const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
const layout = {
mainPanelReduced,
settingsOpened,
subPanelOpened,
mainPanelOpened,
menuGesturesEnabled,
terminalMode,
};
/* [ SETTINGS ATOMS ] */
const preferredLanguagesAtom = atomPairing(atomWithStorage<string[]>("preferredLanguages", []));
const themeModeAtom = atomPairing(atomWithStorage<ThemeMode>("themeMode", ThemeMode.Auto));
const darkModeAtom = atomPairing(atom(false));
const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1));
const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false));
const currencyAtom = atomPairing(atomWithStorage("currency", "USD"));
const playerNameAtom = atomPairing(atomWithStorage("playerName", ""));
export const settings = {
preferredLanguages: preferredLanguagesAtom,
themeMode: themeModeAtom,
darkMode: darkModeAtom,
fontSize: fontSizeAtom,
dyslexic: dyslexicAtom,
currency: currencyAtom,
playerName: playerNameAtom,
};
/* [ LIGHTBOX ATOMS ] */
export const lightBox = atomPairing(
atom<{
showLightBox: (
images: (UploadImageFragment | string | null | undefined)[],
index?: number
) => void;
}>({ showLightBox: () => null })
);
/* [ TERMINAL ATOMS ] */
const previousLines = atomPairing(atom<string[]>([]));
const previousCommands = atomPairing(atom<string[]>([]));
export const terminal = {
previousLines,
previousCommands,
};
export const atoms = {
layout,
terminal,
settings,
localData,
lightBox,
lightBox: lightBox[0],
containerQueries,
settings,
};

33
src/contexts/settings.tsx Normal file
View File

@ -0,0 +1,33 @@
import { atomWithStorage } from "jotai/utils";
import { atom } from "jotai";
import { useRouter } from "next/router";
import { useLayoutEffect, useEffect } from "react";
import { atomPairing, useAtomGetter, useAtomPair } from "helpers/atoms";
import { getDefaultPreferredLanguages } from "helpers/locales";
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
import { usePrefersDarkMode } from "hooks/useMediaQuery";
import { SettingsPopup } from "components/Panels/SettingsPopup";
export enum ThemeMode {
Dark = "dark",
Auto = "auto",
Light = "light",
}
const preferredLanguagesAtom = atomPairing(atomWithStorage<string[]>("preferredLanguages", []));
const themeModeAtom = atomPairing(atomWithStorage<ThemeMode>("themeMode", ThemeMode.Auto));
const darkModeAtom = atomPairing(atom(false));
const fontSizeAtom = atomPairing(atomWithStorage("fontSize", 1));
const dyslexicAtom = atomPairing(atomWithStorage("isDyslexic", false));
const currencyAtom = atomPairing(atomWithStorage("currency", "USD"));
const playerNameAtom = atomPairing(atomWithStorage("playerName", ""));
export const settings = {
preferredLanguages: preferredLanguagesAtom,
themeMode: themeModeAtom,
darkMode: darkModeAtom,
fontSize: fontSizeAtom,
dyslexic: dyslexicAtom,
currency: currencyAtom,
playerName: playerNameAtom,
};

32
src/pages/_app.tsx
View File

@ -16,31 +16,29 @@ import "styles/others.css";
import "styles/rc-slider.css";
import "styles/tippy.css";
import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesContext";
import { LocalDataProvider } from "contexts/LocalDataProvider";
import { UserSettingsProvider } from "contexts/UserSettingsProvider";
import { LightBoxProvider } from "contexts/LightBoxProvider";
import { AppLayoutProvider } from "contexts/AppLayoutProvider";
import { SettingsProvider } from "contexts/SettingsProvider";
import { ContainerQueriesContextProvider } from "contexts/ContainerQueriesProvider";
const AccordsLibraryApp = (props: AppProps): JSX.Element => (
<LocalDataProvider>
<UserSettingsProvider>
<SettingsProvider>
<AppLayoutProvider>
<UserSettingsProvider>
<ContainerQueriesContextProvider>
<LightBoxProvider>
<Script
async
defer
data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
/>
<props.Component {...props.pageProps} />
</LightBoxProvider>
</ContainerQueriesContextProvider>
</UserSettingsProvider>
<ContainerQueriesContextProvider>
<LightBoxProvider>
<Script
async
defer
data-website-id={process.env.NEXT_PUBLIC_UMAMI_ID}
src={`${process.env.NEXT_PUBLIC_UMAMI_URL}/umami.js`}
/>
<props.Component {...props.pageProps} />
</LightBoxProvider>
</ContainerQueriesContextProvider>
</AppLayoutProvider>
</UserSettingsProvider>
</SettingsProvider>
</LocalDataProvider>
);
export default AccordsLibraryApp;

3
src/pages/about-us/contact.tsx
View File

@ -9,7 +9,6 @@ import { RequestMailProps, ResponseMailProps } from "pages/api/mail";
import { sendAnalytics } from "helpers/analytics";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭────────╮
@ -19,7 +18,7 @@ import { useContainerQueries } from "contexts/ContainerQueriesContext";
const AboutUs = (props: PostStaticProps): JSX.Element => {
const router = useRouter();
const langui = useAtomGetter(atoms.localData.langui);
const { is1ColumnLayout } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const [formResponse, setFormResponse] = useState("");
const [formState, setFormState] = useState<"completed" | "ongoing" | "stale">("stale");

4
src/pages/archives/videos/c/[uid].tsx
View File

@ -24,7 +24,6 @@ import { TextInput } from "components/Inputs/TextInput";
import { getLangui } from "graphql/fetchLocalData";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -48,7 +47,8 @@ const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
const langui = useAtomGetter(atoms.localData.langui);
const hoverable = useDeviceSupportsHover();
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

3
src/pages/archives/videos/index.tsx
View File

@ -24,7 +24,6 @@ import { cIf } from "helpers/className";
import { getLangui } from "graphql/fetchLocalData";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -47,7 +46,7 @@ interface Props extends AppLayoutRequired {
const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const hoverable = useDeviceSupportsHover();
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);

3
src/pages/archives/videos/v/[uid].tsx
View File

@ -19,7 +19,6 @@ import { getOpenGraph } from "helpers/openGraph";
import { getLangui } from "graphql/fetchLocalData";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭────────╮
@ -31,7 +30,7 @@ interface Props extends AppLayoutRequired {
}
const Video = ({ video, ...otherProps }: Props): JSX.Element => {
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const langui = useAtomGetter(atoms.localData.langui);
const router = useRouter();

5
src/pages/contents/[slug].tsx
View File

@ -34,7 +34,6 @@ import { getLangui } from "graphql/fetchLocalData";
import { Ids } from "types/ids";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭────────╮
@ -46,7 +45,9 @@ interface Props extends AppLayoutRequired {
}
const Content = ({ content, ...otherProps }: Props): JSX.Element => {
const { isContentPanelAtLeast2xl, is1ColumnLayout } = useContainerQueries();
const isContentPanelAtLeast2xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast2xl);
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const langui = useAtomGetter(atoms.localData.langui);
const languages = useAtomGetter(atoms.localData.languages);

4
src/pages/contents/all.tsx
View File

@ -27,7 +27,6 @@ import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -52,7 +51,8 @@ interface Props extends AppLayoutRequired {
const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
const hoverable = useDeviceSupportsHover();
const langui = useAtomGetter(atoms.localData.langui);
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const [groupingMethod, setGroupingMethod] = useState<number>(
DEFAULT_FILTERS_STATE.groupingMethod

4
src/pages/contents/folder/[slug].tsx
View File

@ -20,7 +20,6 @@ import { cJoin, cIf } from "helpers/className";
import { getLangui } from "graphql/fetchLocalData";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { TranslatedPreviewFolder } from "components/Contents/PreviewFolder";
/*
@ -36,7 +35,8 @@ interface Props extends AppLayoutRequired {
const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const subPanel = useMemo(
() => (

5
src/pages/library/[slug]/index.tsx
View File

@ -53,7 +53,6 @@ import { getLangui } from "graphql/fetchLocalData";
import { Ids } from "types/ids";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -77,7 +76,9 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => {
const langui = useAtomGetter(atoms.localData.langui);
const currencies = useAtomGetter(atoms.localData.currencies);
const { isContentPanelAtLeast3xl, isContentPanelAtLeastSm } = useContainerQueries();
const isContentPanelAtLeast3xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast3xl);
const isContentPanelAtLeastSm = useAtomGetter(atoms.containerQueries.isContentPanelAtLeastSm);
const hoverable = useDeviceSupportsHover();
const router = useRouter();
const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(false);

5
src/pages/library/[slug]/reader.tsx
View File

@ -44,7 +44,6 @@ import { useFullscreen } from "hooks/useFullscreen";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
const CUSTOM_DARK_DROPSHADOW = `
drop-shadow(0 0 0.5em rgb(var(--theme-color-shade) / 30%))
@ -90,7 +89,7 @@ const LibrarySlug = ({
item,
...otherProps
}: Props): JSX.Element => {
const { is1ColumnLayout } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const langui = useAtomGetter(atoms.localData.langui);
const isDarkMode = useAtomGetter(atoms.settings.darkMode);
const {
@ -889,7 +888,7 @@ interface ScanSetProps {
}
const ScanSet = ({ onClickOnImage, scanSet, id, title, content }: ScanSetProps): JSX.Element => {
const { is1ColumnLayout } = useContainerQueries();
const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
const langui = useAtomGetter(atoms.localData.langui);
const [selectedScan, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
items: scanSet,

3
src/pages/library/index.tsx
View File

@ -34,7 +34,6 @@ import { sendAnalytics } from "helpers/analytics";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -67,7 +66,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
const currencies = useAtomGetter(atoms.localData.currencies);
const { libraryItemUserStatus } = useLibraryItemUserStatus();
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

3
src/pages/news/index.tsx
View File

@ -26,7 +26,6 @@ import { sendAnalytics } from "helpers/analytics";
import { Terminal } from "components/Cli/Terminal";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭─────────────╮
@ -48,7 +47,7 @@ interface Props extends AppLayoutRequired {
}
const News = ({ posts, ...otherProps }: Props): JSX.Element => {
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const langui = useAtomGetter(atoms.localData.langui);
const hoverable = useDeviceSupportsHover();
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);

3
src/pages/wiki/[slug]/index.tsx
View File

@ -24,7 +24,6 @@ import { Terminal } from "components/Cli/Terminal";
import { prettyTerminalBoxedTitle, prettyTerminalUnderlinedTitle } from "helpers/terminal";
import { atoms } from "contexts/atoms";
import { useAtomGetter } from "helpers/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
/*
* ╭────────╮
@ -48,7 +47,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
[]
),
});
const { is3ColumnsLayout } = useContainerQueries();
const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
const subPanel = useMemo(
() => (

3
src/pages/wiki/index.tsx
View File

@ -27,7 +27,6 @@ import { getLangui } from "graphql/fetchLocalData";
import { sendAnalytics } from "helpers/analytics";
import { Terminal } from "components/Cli/Terminal";
import { atoms } from "contexts/atoms";
import { useContainerQueries } from "contexts/ContainerQueriesContext";
import { useAtomGetter } from "helpers/atoms";
/*
@ -53,7 +52,7 @@ interface Props extends AppLayoutRequired {
const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
const hoverable = useDeviceSupportsHover();
const langui = useAtomGetter(atoms.localData.langui);
const { isContentPanelAtLeast4xl } = useContainerQueries();
const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);