List books

package.json

@@ -57,6 +57,8 @@
         "next-pwa": "^5.6.0",
         "node-forge": "^1.3.1",
         "normalize.css": "^8.0.1",
+        "p-memoize": "^7.1.1",
+        "p-throttle": "^7.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-intl": "^6.6.8",

src/components/HOCs/withIntl.tsx

@@ -3,7 +3,7 @@ import { IntlProvider, ResolvedIntlConfig } from 'react-intl';
 
 import getIntlMessages from '~lib/getIntlMessages';
 import handleIntlError from '~lib/handleIntlError';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 type Messages = ResolvedIntlConfig['messages'];
 

src/components/molecules/buttonAddToPlaylist.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import { BaseColors } from '~src/lib/constants';
 import { getSessionToken } from '~src/lib/cookies';
-import useLanguageRoute from '~src/lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 import NewPlaylist from '~src/pages/[language]/library/playlists/new';
 
 import AddToPlaylistIcon from '../../../public/img/icons/in-queue.svg';

src/components/molecules/buttonDownloadBlank.tsx

@@ -6,9 +6,9 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import Button from '~components/molecules/button';
 import Modal from '~components/organisms/modal';
 import root, { isRedirectRouteAllowed } from '~lib/routes';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import IconDownload from '~public/img/icons/icon-download.svg';
 import { BaseColors } from '~src/lib/constants';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import styles from './buttonDownloadBlank.module.scss';
 import { isBackgroundColorDark } from './buttonPlay';

src/components/molecules/buttonGuest.tsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import Button from '~components/molecules/button';
 import Modal from '~components/organisms/modal';
 import root, { isRedirectRouteAllowed } from '~lib/routes';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import styles from './buttonGuest.module.scss';
 

src/components/molecules/buttonNudge.tsx

@@ -4,11 +4,11 @@ import { useIntl } from 'react-intl';
 
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
-import usePlaybackSession from '~lib/usePlaybackSession';
 import IconJumpBack from '~public/img/icons/icon-jump-back.svg';
 import IconJumpBackMedium from '~public/img/icons/icon-jump-back-medium.svg';
 import IconJumpForward from '~public/img/icons/icon-jump-forward.svg';
 import IconJumpForwardMedium from '~public/img/icons/icon-jump-forward-medium.svg';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import styles from './buttonNudge.module.scss';
 import { isBackgroundColorDark } from './buttonPlay';

src/components/molecules/buttonPlay.tsx

@@ -4,11 +4,11 @@ import { useIntl } from 'react-intl';
 
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
-import usePlaybackSession from '~lib/usePlaybackSession';
 import IconPauseLarge from '~public/img/icons/icon-pause-large.svg';
 import IconPause from '~public/img/icons/icon-pause-medium.svg';
 import IconPlayLarge from '~public/img/icons/icon-play-large.svg';
 import IconPlay from '~public/img/icons/icon-play-medium.svg';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import styles from './buttonPlay.module.scss';
 import IconButton from './iconButton';

src/components/molecules/buttonPlayCircle.tsx

@@ -2,9 +2,11 @@ import React, { useContext } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import { BaseColors } from '~lib/constants';
-import usePlaybackSession, { PlaySource } from '~lib/usePlaybackSession';
 import SuccessIcon from '~public/img/icons/icon-success-light.svg';
 import IconPlay from '~public/img/icons/play-circle.svg';
+import usePlaybackSession, {
+	PlaySource,
+} from '~src/lib/hooks/usePlaybackSession';
 import { useFormattedDuration } from '~src/lib/time';
 
 import Heading6 from '../atoms/heading6';

src/components/molecules/buttonSpeed.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
-import usePlaybackSession from '~lib/usePlaybackSession';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import { isBackgroundColorDark } from './buttonPlay';
 import styles from './buttonSpeed.module.scss';

src/components/molecules/card/bibleBook.tsx

@@ -6,7 +6,7 @@ import Heading2 from '~components/atoms/heading2';
 import Heading6 from '~components/atoms/heading6';
 import Link from '~components/atoms/linkWithoutPrefetch';
 import root from '~lib/routes';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 import { IBibleBook } from '~src/services/fcbh/types';
 
 import BibleVersionTypeLockup from '../bibleVersionTypeLockup';

src/components/molecules/card/bibleVersion.tsx

@@ -6,8 +6,8 @@ import Heading2 from '~components/atoms/heading2';
 import Heading6 from '~components/atoms/heading6';
 import Link from '~components/atoms/linkWithoutPrefetch';
 import root from '~lib/routes';
-import useHover from '~lib/useHover';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useHover from '~src/lib/hooks/useHover';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 import { IBibleVersion } from '~src/services/fcbh/types';
 
 import BibleVersionTypeLockup from '../bibleVersionTypeLockup';

src/components/molecules/card/collection.tsx

@@ -13,10 +13,10 @@ import { useIsCollectionFavorited } from '~lib/api/useIsCollectionFavorited';
 import { BaseColors } from '~lib/constants';
 import { formatDateRange } from '~lib/date';
 import { useFormattedDuration } from '~lib/time';
-import useHover from '~lib/useHover';
 import SuccessIcon from '~public/img/icons/icon-success-light.svg';
 import { CollectionContentType } from '~src/__generated__/graphql';
 import { analytics } from '~src/lib/analytics';
+import useHover from '~src/lib/hooks/useHover';
 
 import ButtonFavorite from '../buttonFavorite';
 import CollectionTypeLockup from '../collectionTypeLockup';

src/components/molecules/card/playlist.tsx

@@ -5,7 +5,7 @@ import Heading2 from '~components/atoms/heading2';
 import Heading6 from '~components/atoms/heading6';
 import Link from '~components/atoms/linkWithoutPrefetch';
 import root from '~lib/routes';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import PlaylistTypeLockup from '../playlistTypeLockup';
 import { CardPlaylistFragment } from './__generated__/playlist';

src/components/molecules/card/sequence.tsx

@@ -11,7 +11,6 @@ import { useIsSequenceFavorited } from '~lib/api/useIsSequenceFavorited';
 import { BaseColors } from '~lib/constants';
 import { getRecordingTypeTheme } from '~lib/getRecordingTheme';
 import { useFormattedDuration } from '~lib/time';
-import useHover from '~lib/useHover';
 import BookIcon from '~public/img/icons/fa-book-light.svg';
 import FeatherIcon from '~public/img/icons/fa-feather-light.svg';
 import ListIcon from '~public/img/icons/fa-list-alt.svg';
@@ -23,6 +22,7 @@ import SuccessIcon from '~public/img/icons/icon-success-light.svg';
 import { SequenceContentType } from '~src/__generated__/graphql';
 import NameMatcher from '~src/components/atoms/nameMatcher';
 import { analytics } from '~src/lib/analytics';
+import useHover from '~src/lib/hooks/useHover';
 
 import ButtonFavorite from '../buttonFavorite';
 import PersonLockup from '../personLockup';

src/components/molecules/card/songBook.tsx

@@ -7,9 +7,9 @@ import Heading2 from '~components/atoms/heading2';
 import Heading6 from '~components/atoms/heading6';
 import Link from '~components/atoms/linkWithoutPrefetch';
 import root from '~lib/routes';
-import useHover from '~lib/useHover';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import { SequenceContentType } from '~src/__generated__/graphql';
+import useHover from '~src/lib/hooks/useHover';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import SequenceTypeLockup from '../sequenceTypeLockup';
 import TeaseRecordingStack from '../teaseRecordingStack';

src/components/molecules/helpWidget.tsx

@@ -4,8 +4,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Button from '~components/molecules/button';
-import useHelpScoutLabels from '~lib/useHelpScoutLabels';
 import IconQuestionCircle from '~public/img/icons/icon-question-circle.svg';
+import useHelpScoutLabels from '~src/lib/hooks/useHelpScoutLabels';
 
 import { Beacon } from '../../types/window';
 import { useGetHelpWidgetDataQuery } from './__generated__/helpWidget';

src/components/molecules/languageAlternativesAlert.tsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import InfoBox from '~components/atoms/infoBox';
 import { getLanguageId, setLanguageId } from '~lib/cookies';
 import isServerSide from '~lib/isServerSide';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import styles from './languageAlternativesAlert.module.scss';
 import LanguageButton from './languageButton';

src/components/molecules/languageButton.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 import { LANGUAGES } from '~lib/constants';
 import { getLanguageIdByRoute } from '~lib/getLanguageIdByRoute';
 import getLanguageIds from '~lib/getLanguageIds';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
 import IconLanguage from '~public/img/icons/icon-language-light.svg';
 import { Language } from '~src/__generated__/graphql';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import Button, { IButtonType } from './button';
 import Dropdown from './dropdown';

src/components/molecules/loadingIndicator.spec.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import LoadingIndicator from '~components/molecules/loadingIndicator';
 import renderWithProviders from '~lib/test/renderWithProviders';
-import useRouterLoading from '~lib/useRouterLoading';
+import useRouterLoading from '~src/lib/hooks/useRouterLoading';
 
 jest.mock('~lib/useRouterLoading');
 

src/components/molecules/loadingIndicator.tsx

@@ -2,7 +2,7 @@ import { useIsFetching } from '@tanstack/react-query';
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 
-import useRouterLoading from '~lib/useRouterLoading';
+import useRouterLoading from '~src/lib/hooks/useRouterLoading';
 
 import styles from './loadingIndicator.module.scss';
 

src/components/molecules/login.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import AndOnboarding from '~components/templates/andOnboarding';
 import root from '~lib/routes';
-import useLanguageRoute from '~lib/useLanguageRoute';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import LoginForm from './loginForm';
 import SocialLogin from './socialLogin';

src/components/molecules/loginLanding.tsx

@@ -4,8 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
 import AndOnboarding from '~components/templates/andOnboarding';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 import root from '~src/lib/routes';
-import useLanguageRoute from '~src/lib/useLanguageRoute';
 
 import Button from './buttonSocial';
 import SocialLogin from './socialLogin';

src/components/molecules/mediaFormatSwitcher.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import hasVideo from '~lib/hasVideo';
-import usePlaybackSession from '~lib/usePlaybackSession';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import { PlayerFragment } from './__generated__/player';
 import styles from './mediaFormatSwitcher.module.scss';

src/components/molecules/navItem.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import ActiveLink from '~components/atoms/activeLink';
 // TODO: Split into its own SCSS module
 import styles from '~components/organisms/navigation.module.scss';
-import { INavigationItem } from '~lib/useNavigationItems';
 import IconDisclosure from '~public/img/icons/icon-disclosure-light-small.svg';
+import { INavigationItem } from '~src/lib/hooks/useNavigationItems';
 
 import { analytics } from '../../lib/analytics';
 

src/components/molecules/pagination.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 
 import Link from '~components/atoms/linkWithoutPrefetch';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import IconBack from '~public/img/icons/icon-back-light.svg';
 import IconForward from '~public/img/icons/icon-forward-light.svg';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import Button from './button';
 import styles from './pagination.module.scss';

src/components/molecules/playbackTimes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useFormattedTime } from '~lib/time';
-import usePlaybackSession from '~lib/usePlaybackSession';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import { PlayerFragment } from './__generated__/player';
 import styles from './playbackTimes.module.scss';

src/components/molecules/player.tsx

@@ -15,14 +15,14 @@ import RecordingProgressBar from '~components/molecules/recordingProgressBar';
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
 import { BaseColors } from '~lib/constants';
 import hasVideo from '~lib/hasVideo';
-import useGlobalSpaceDown from '~lib/useGlobalSpaceDown';
-import usePlaybackSession from '~lib/usePlaybackSession';
 import IconAirPlayAudio from '~public/img/icon-airplay-audio.svg';
 import IconChromeCast from '~public/img/icon-chromecast.svg';
 import IconFullscreen from '~public/img/icons/icon-fullscreen.svg';
 import IconPause from '~public/img/icons/icon-pause-large.svg';
 import IconPlay from '~public/img/icons/icon-play-large.svg';
+import useGlobalSpaceDown from '~src/lib/hooks/useGlobalSpaceDown';
 import useIsAuthenticated from '~src/lib/hooks/useIsAuthenticated';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import { PlaybackContext } from '../templates/andPlaybackContext';
 import { PlayerFragment } from './__generated__/player';

src/components/molecules/recordingHasVideoFilter.tsx

@@ -5,8 +5,8 @@ import { FormattedMessage } from 'react-intl';
 import Link from '~components/atoms/linkWithoutPrefetch';
 import Button from '~components/molecules/button';
 import Dropdown from '~components/molecules/dropdown';
-import useLanguageRoute from '~lib/useLanguageRoute';
 import IconFilter from '~public/img/icons/icon-filter-light.svg';
+import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
 
 import styles from './recordingHasVideoFilter.module.scss';
 

src/components/molecules/recordingProgressBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AndMiniplayerFragment } from '~components/templates/__generated__/andMiniplayer';
-import usePlaybackSession from '~lib/usePlaybackSession';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
 
 import ProgressBar from '../atoms/progressBar';