diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 00a947d..ce0511d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,7 +13,6 @@ import { Select } from "./Inputs/Select"; import { TextInput } from "./Inputs/TextInput"; import { MainPanel } from "./Panels/MainPanel"; import { Popup } from "./Popup"; -import { AnchorIds } from "hooks/useScrollTopOnChange"; import { filterHasAttributes, isDefined, isUndefined } from "helpers/others"; import { prettyLanguage } from "helpers/formatters"; import { cIf, cJoin } from "helpers/className"; @@ -25,6 +24,7 @@ import { useIsScreenAtLeast, } from "hooks/useContainerQuery"; import { useOnResize } from "hooks/useOnResize"; +import { Ids } from "types/ids"; /* * ╭─────────────╮ @@ -95,9 +95,9 @@ export const AppLayout = ({ const is1ColumnLayout = useIs1ColumnLayout(); const isScreenAtLeastXs = useIsScreenAtLeast("xs"); - useOnResize(AnchorIds.Body, (width) => setScreenWidth(width)); - useOnResize(AnchorIds.ContentPanel, (width) => setContentPanelWidth(width)); - useOnResize(AnchorIds.SubPanel, (width) => setSubPanelWidth(width)); + useOnResize(Ids.Body, (width) => setScreenWidth(width)); + useOnResize(Ids.ContentPanel, (width) => setContentPanelWidth(width)); + useOnResize(Ids.SubPanel, (width) => setSubPanelWidth(width)); const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { @@ -168,7 +168,7 @@ export const AppLayout = ({ >
{ name: string; @@ -70,7 +71,7 @@ export const SmartList = ({ }: Props): JSX.Element => { const [page, setPage] = useState(0); const { langui } = useAppLayout(); - useScrollTopOnChange(AnchorIds.ContentPanel, [page], paginationScroolTop); + useScrollTopOnChange(Ids.ContentPanel, [page], paginationScroolTop); useEffect( () => setPage(0), [searchingTerm, groupingFunction, groupSortingFunction, items] diff --git a/src/helpers/others.ts b/src/helpers/others.ts index cd30b36..39ba800 100644 --- a/src/helpers/others.ts +++ b/src/helpers/others.ts @@ -1,4 +1,4 @@ -import { PathDot, SelectiveNonNullable } from "./types/SelectiveNonNullable"; +import { PathDot, SelectiveNonNullable } from "../types/SelectiveNonNullable"; import { Langui } from "./localData"; import { Enum_Componentsetstextset_Status, diff --git a/src/hooks/useIntersectionList.ts b/src/hooks/useIntersectionList.ts index b368210..65ac24c 100644 --- a/src/hooks/useIntersectionList.ts +++ b/src/hooks/useIntersectionList.ts @@ -2,8 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import { throttle } from "throttle-debounce"; import { useIsClient } from "usehooks-ts"; import { useOnScroll } from "./useOnScroll"; -import { AnchorIds } from "./useScrollTopOnChange"; import { isDefined } from "helpers/others"; +import { Ids } from "types/ids"; export const useIntersectionList = (ids: string[]): number => { const [currentIntersection, setCurrentIntersection] = useState(-1); @@ -11,7 +11,7 @@ export const useIntersectionList = (ids: string[]): number => { const isClient = useIsClient(); const contentPanel = useMemo( - () => (isClient ? document.getElementById(AnchorIds.ContentPanel) : null), + () => (isClient ? document.getElementById(Ids.ContentPanel) : null), [isClient] ); @@ -44,7 +44,7 @@ export const useIntersectionList = (ids: string[]): number => { [refreshCurrentIntersection] ); - useOnScroll(AnchorIds.ContentPanel, throttledRefreshCurrentIntersection); + useOnScroll(Ids.ContentPanel, throttledRefreshCurrentIntersection); useEffect(() => refreshCurrentIntersection(0), [refreshCurrentIntersection]); diff --git a/src/hooks/useOnScroll.ts b/src/hooks/useOnScroll.ts index ee72066..7499de1 100644 --- a/src/hooks/useOnScroll.ts +++ b/src/hooks/useOnScroll.ts @@ -1,9 +1,9 @@ import { useMemo, useCallback, useEffect } from "react"; import { useIsClient } from "usehooks-ts"; -import { AnchorIds } from "./useScrollTopOnChange"; +import { Ids } from "types/ids"; export const useOnScroll = ( - id: AnchorIds, + id: Ids, onScroll: (scroll: number) => void ): void => { const isClient = useIsClient(); diff --git a/src/hooks/useScrollTopOnChange.ts b/src/hooks/useScrollTopOnChange.ts index 730e27c..af412f4 100644 --- a/src/hooks/useScrollTopOnChange.ts +++ b/src/hooks/useScrollTopOnChange.ts @@ -1,14 +1,9 @@ import { DependencyList, useEffect } from "react"; - -export enum AnchorIds { - Body = "bodyqs65d4a98d56az48z64d", - ContentPanel = "contentPanel495922447721572", - SubPanel = "subPanelz9e8rs2d3f18zer98ze", -} +import { Ids } from "types/ids"; // Scroll to top of element "id" when "deps" update. export const useScrollTopOnChange = ( - id: AnchorIds, + id: Ids, deps: DependencyList, enabled = true ): void => { diff --git a/src/pages/contents/[slug].tsx b/src/pages/contents/[slug].tsx index 8f30ebf..d8aac15 100644 --- a/src/pages/contents/[slug].tsx +++ b/src/pages/contents/[slug].tsx @@ -26,7 +26,7 @@ import { isDefinedAndNotEmpty, } from "helpers/others"; import { ContentWithTranslations } from "helpers/types"; -import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange"; +import { useScrollTopOnChange } from "hooks/useScrollTopOnChange"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { getOpenGraph } from "helpers/openGraph"; import { @@ -42,6 +42,7 @@ import { import { cIf } from "helpers/className"; import { getLangui } from "graphql/fetchLocalData"; import { useAppLayout } from "contexts/AppLayoutContext"; +import { Ids } from "types/ids"; /* * ╭────────╮ @@ -67,7 +68,7 @@ const Content = ({ content, ...otherProps }: Props): JSX.Element => { ), }); - useScrollTopOnChange(AnchorIds.ContentPanel, [selectedTranslation]); + useScrollTopOnChange(Ids.ContentPanel, [selectedTranslation]); const { previousContent, nextContent } = useMemo( () => ({ diff --git a/src/pages/contents/all.tsx b/src/pages/contents/all.tsx index cb7ff62..277f2e3 100644 --- a/src/pages/contents/all.tsx +++ b/src/pages/contents/all.tsx @@ -25,7 +25,7 @@ import { } from "helpers/others"; import { GetContentsQuery } from "graphql/generated"; import { SmartList } from "components/SmartList"; -import { SelectiveNonNullable } from "helpers/types/SelectiveNonNullable"; +import { SelectiveNonNullable } from "types/SelectiveNonNullable"; import { getOpenGraph } from "helpers/openGraph"; import { HorizontalLine } from "components/HorizontalLine"; import { TranslatedPreviewCard } from "components/PreviewCard"; diff --git a/src/pages/contents/folder/[slug].tsx b/src/pages/contents/folder/[slug].tsx index da91e75..04f2b70 100644 --- a/src/pages/contents/folder/[slug].tsx +++ b/src/pages/contents/folder/[slug].tsx @@ -21,7 +21,7 @@ import { Button, TranslatedButton } from "components/Inputs/Button"; import { Link } from "components/Inputs/Link"; import { PanelHeader } from "components/PanelComponents/PanelHeader"; import { SubPanel } from "components/Panels/SubPanel"; -import { TranslatedProps } from "helpers/types/TranslatedProps"; +import { TranslatedProps } from "types/TranslatedProps"; import { useSmartLanguage } from "hooks/useSmartLanguage"; import { TranslatedPreviewCard } from "components/PreviewCard"; import { HorizontalLine } from "components/HorizontalLine"; diff --git a/src/pages/dev/checkup/contents.tsx b/src/pages/dev/checkup/contents.tsx index bf3384a..f23f8a5 100644 --- a/src/pages/dev/checkup/contents.tsx +++ b/src/pages/dev/checkup/contents.tsx @@ -11,7 +11,7 @@ import { ToolTip } from "components/ToolTip"; import { DevGetContentsQuery } from "graphql/generated"; import { getReadySdk } from "graphql/sdk"; import { filterDefined, filterHasAttributes } from "helpers/others"; -import { Report, Severity } from "helpers/types/Report"; +import { Report, Severity } from "types/Report"; import { getOpenGraph } from "helpers/openGraph"; import { getLangui } from "graphql/fetchLocalData"; diff --git a/src/pages/dev/checkup/libraryitems.tsx b/src/pages/dev/checkup/libraryitems.tsx index ede00b2..abe580a 100644 --- a/src/pages/dev/checkup/libraryitems.tsx +++ b/src/pages/dev/checkup/libraryitems.tsx @@ -13,7 +13,7 @@ import { Enum_Componentcollectionscomponentlibraryimages_Status, } from "graphql/generated"; import { getReadySdk } from "graphql/sdk"; -import { Report, Severity } from "helpers/types/Report"; +import { Report, Severity } from "types/Report"; import { getOpenGraph } from "helpers/openGraph"; import { getLangui } from "graphql/fetchLocalData"; diff --git a/src/pages/library/[slug]/index.tsx b/src/pages/library/[slug]/index.tsx index 94cbe61..26031c8 100644 --- a/src/pages/library/[slug]/index.tsx +++ b/src/pages/library/[slug]/index.tsx @@ -43,7 +43,7 @@ import { sortRangedContent, } from "helpers/others"; import { useLightBox } from "hooks/useLightBox"; -import { AnchorIds, useScrollTopOnChange } from "hooks/useScrollTopOnChange"; +import { useScrollTopOnChange } from "hooks/useScrollTopOnChange"; import { isUntangibleGroupItem } from "helpers/libraryItem"; import { useDeviceSupportsHover } from "hooks/useMediaQuery"; import { WithLabel } from "components/Inputs/WithLabel"; @@ -57,6 +57,7 @@ import { HorizontalLine } from "components/HorizontalLine"; import { useIsContentPanelNoMoreThan } from "hooks/useContainerQuery"; import { useCurrencies } from "hooks/useLocalData"; import { getLangui } from "graphql/fetchLocalData"; +import { Ids } from "types/ids"; /* * ╭─────────────╮ @@ -99,7 +100,7 @@ const LibrarySlug = ({ item, itemId, ...otherProps }: Props): JSX.Element => { const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(false); - useScrollTopOnChange(AnchorIds.ContentPanel, [item]); + useScrollTopOnChange(Ids.ContentPanel, [item]); const currentIntersection = useIntersectionList(intersectionIds); const isVariantSet = useMemo( diff --git a/src/pages/library/[slug]/scans.tsx b/src/pages/library/[slug]/scans.tsx index 0da5a9b..07c1670 100644 --- a/src/pages/library/[slug]/scans.tsx +++ b/src/pages/library/[slug]/scans.tsx @@ -38,7 +38,7 @@ import { ToolTip } from "components/ToolTip"; import { getAssetFilename, getAssetURL, ImageQuality } from "helpers/img"; import { isInteger } from "helpers/numbers"; import { useSmartLanguage } from "hooks/useSmartLanguage"; -import { TranslatedProps } from "helpers/types/TranslatedProps"; +import { TranslatedProps } from "types/TranslatedProps"; import { TranslatedNavOption } from "components/PanelComponents/NavOption"; import { useIntersectionList } from "hooks/useIntersectionList"; import { diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx index 3890027..22114c2 100644 --- a/src/pages/library/index.tsx +++ b/src/pages/library/index.tsx @@ -33,7 +33,7 @@ import { import { useAppLayout } from "contexts/AppLayoutContext"; import { convertPrice } from "helpers/numbers"; import { SmartList } from "components/SmartList"; -import { SelectiveNonNullable } from "helpers/types/SelectiveNonNullable"; +import { SelectiveNonNullable } from "types/SelectiveNonNullable"; import { getOpenGraph } from "helpers/openGraph"; import { compareDate } from "helpers/date"; import { HorizontalLine } from "components/HorizontalLine"; diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index ec72023..e769b3c 100644 --- a/src/pages/wiki/chronology.tsx +++ b/src/pages/wiki/chronology.tsx @@ -26,7 +26,7 @@ import { Chip } from "components/Chip"; import { Ico, Icon } from "components/Ico"; import { AnchorShare } from "components/AnchorShare"; import { datePickerToDate } from "helpers/date"; -import { TranslatedProps } from "helpers/types/TranslatedProps"; +import { TranslatedProps } from "types/TranslatedProps"; import { TranslatedNavOption } from "components/PanelComponents/NavOption"; import { useIntersectionList } from "hooks/useIntersectionList"; import { HorizontalLine } from "components/HorizontalLine"; diff --git a/src/pages/wiki/index.tsx b/src/pages/wiki/index.tsx index 05147fb..ea89bbc 100644 --- a/src/pages/wiki/index.tsx +++ b/src/pages/wiki/index.tsx @@ -25,7 +25,7 @@ import { } from "helpers/others"; import { SmartList } from "components/SmartList"; import { Select } from "components/Inputs/Select"; -import { SelectiveNonNullable } from "helpers/types/SelectiveNonNullable"; +import { SelectiveNonNullable } from "types/SelectiveNonNullable"; import { prettySlug } from "helpers/formatters"; import { getOpenGraph } from "helpers/openGraph"; import { TranslatedPreviewCard } from "components/PreviewCard"; diff --git a/src/helpers/types/Report.ts b/src/types/Report.ts similarity index 100% rename from src/helpers/types/Report.ts rename to src/types/Report.ts diff --git a/src/helpers/types/SelectiveNonNullable.ts b/src/types/SelectiveNonNullable.ts similarity index 100% rename from src/helpers/types/SelectiveNonNullable.ts rename to src/types/SelectiveNonNullable.ts diff --git a/src/helpers/types/TranslatedProps.ts b/src/types/TranslatedProps.ts similarity index 100% rename from src/helpers/types/TranslatedProps.ts rename to src/types/TranslatedProps.ts diff --git a/src/pages/global.d.ts b/src/types/global.d.ts similarity index 100% rename from src/pages/global.d.ts rename to src/types/global.d.ts diff --git a/src/types/ids.ts b/src/types/ids.ts new file mode 100644 index 0000000..2325817 --- /dev/null +++ b/src/types/ids.ts @@ -0,0 +1,5 @@ +export enum Ids { + Body = "bodyqs65d4a98d56az48z64d", + ContentPanel = "contentPanel495922447721572", + SubPanel = "subPanelz9e8rs2d3f18zer98ze", +}