From 3f684f7312e7d6832080bcb4e3a76b4156a367d1 Mon Sep 17 00:00:00 2001 From: Anton Shalimov Date: Tue, 26 Dec 2023 14:42:40 +0300 Subject: [PATCH] refactor: faq props passing --- features/ipfs/home-page-ipfs.tsx | 62 ++++++------------- features/stake/stake-faq/stake-faq.tsx | 23 +++---- features/stake/stake-page.tsx | 10 ++- features/stake/stake.tsx | 2 - features/withdrawals/claim/claim.tsx | 15 ++--- features/withdrawals/request/request.tsx | 12 ++-- .../withdrawals/withdrawals-faq/claim-faq.tsx | 20 ++---- .../withdrawals-faq/request-faq.tsx | 20 ++---- features/withdrawals/withdrawals-tabs.tsx | 29 +++------ features/wsteth/shared/wrap-faq/wrap-faq.tsx | 26 +++----- features/wsteth/wrap-unwrap-tabs.tsx | 15 +++-- pages/index.tsx | 16 ++--- pages/withdrawals/[mode].tsx | 41 ++++++------ pages/wrap/[[...mode]].tsx | 22 ++----- shared/hooks/use-faq-on-client.ts | 28 ++++----- utils/faq.ts | 17 ++++- utilsApi/faq.ts | 13 ++-- 17 files changed, 147 insertions(+), 224 deletions(-) diff --git a/features/ipfs/home-page-ipfs.tsx b/features/ipfs/home-page-ipfs.tsx index dc856ecfd..e313cfbdb 100644 --- a/features/ipfs/home-page-ipfs.tsx +++ b/features/ipfs/home-page-ipfs.tsx @@ -1,8 +1,6 @@ import { FC, useMemo, useEffect } from 'react'; import { useRouter } from 'next/router'; -import { PageFAQ } from '@lidofinance/ui-faq'; - import { getPathWithoutFirstSlash, HOME_PATH, @@ -15,13 +13,13 @@ import { } from 'config/urls'; import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { usePrefixedReplace } from 'shared/hooks/use-prefixed-history'; - import { StakePage } from 'features/stake'; import WrapPage from 'pages/wrap/[[...mode]]'; import WithdrawalsPage from 'pages/withdrawals/[mode]'; import ReferralPage from 'pages/referral'; import RewardsPage from 'pages/rewards'; import SettingsPage from 'pages/settings'; +import { FaqWithMeta } from 'utils/faq'; /** * We are using single index.html endpoint @@ -40,29 +38,17 @@ const IPFS_ROUTABLE_PAGES = [ ]; export type HomePageIpfsProps = { - stakePage?: { - faq: PageFAQ | null; - eTag?: string | null; - }; - wrapPage?: { - faq: PageFAQ | null; - eTag?: string | null; - }; - withdrawalsPageRequest?: { - faq: PageFAQ | null; - eTag?: string | null; - }; - withdrawalsPageClaim?: { - faq: PageFAQ | null; - eTag?: string | null; - }; + faqWithMetaStakePage: FaqWithMeta | null; + faqWithMetaWrapPage: FaqWithMeta | null; + faqWithMetaWithdrawalsPageRequest: FaqWithMeta | null; + faqWithMetaWithdrawalsPageClaim: FaqWithMeta | null; }; const HomePageIpfs: FC = ({ - stakePage, - wrapPage, - withdrawalsPageRequest, - withdrawalsPageClaim, + faqWithMetaStakePage, + faqWithMetaWrapPage, + faqWithMetaWithdrawalsPageRequest, + faqWithMetaWithdrawalsPageClaim, }) => { const router = useRouter(); const { asPath } = router; @@ -102,20 +88,10 @@ const HomePageIpfs: FC = ({ case getPathWithoutFirstSlash(WRAP_PATH): { if (parsedPath[1] === 'unwrap') { spaPage = ( - + ); } else { - spaPage = ( - - ); + spaPage = ; } break; } @@ -125,16 +101,20 @@ const HomePageIpfs: FC = ({ spaPage = ( ); } else { spaPage = ( ); } @@ -157,9 +137,7 @@ const HomePageIpfs: FC = ({ } default: { - spaPage = ( - - ); + spaPage = ; } } diff --git a/features/stake/stake-faq/stake-faq.tsx b/features/stake/stake-faq/stake-faq.tsx index 388d88555..d1a564e0b 100644 --- a/features/stake/stake-faq/stake-faq.tsx +++ b/features/stake/stake-faq/stake-faq.tsx @@ -1,35 +1,28 @@ import React, { FC } from 'react'; -import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq'; +import { FaqAccordion } from '@lidofinance/ui-faq'; -import { FAQ_STAKE_PAGE_PATH } from 'config'; import { Section } from 'shared/components'; import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client'; import { faqAccordionOnLinkClick } from 'utils/faq-matomo'; +import { FaqWithMeta } from 'utils/faq'; type StakeFaqProps = { - pageFAQ?: PageFAQ; - eTag?: string | null; + faqWithMeta: FaqWithMeta; }; -export const StakeFaq: FC = ({ pageFAQ, eTag }) => { - // This hook actual on IPFS only (see: the `eTag` prop drilling)! - const { data: pageFaqIpfsMode } = useUpdatableFaq(FAQ_STAKE_PAGE_PATH, eTag); - - if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) { - return null; - } +export const StakeFaq: FC = ({ faqWithMeta }) => { + const { data: pageFAQ } = useUpdatableFaq(faqWithMeta); + if (!pageFAQ) return null; return ( <>
{ faqAccordionOnLinkClick({ - pageId: - pageFaqIpfsMode?.pageIdentification || - pageFAQ?.pageIdentification, + pageId: pageFAQ.pageIdentification, ...props, }); }} diff --git a/features/stake/stake-page.tsx b/features/stake/stake-page.tsx index 200f079ea..75e4b9414 100644 --- a/features/stake/stake-page.tsx +++ b/features/stake/stake-page.tsx @@ -1,19 +1,17 @@ import { FC } from 'react'; import Head from 'next/head'; -import { PageFAQ } from '@lidofinance/ui-faq'; import { Layout } from 'shared/components'; +import { FaqWithMeta } from 'utils/faq'; import { StakeFaq } from './stake-faq/stake-faq'; import { Stake } from './stake'; export type StakePageProps = { - pageFAQ?: PageFAQ | null; - // IPFS actual only! - faqETag?: string | null; + faqWithMeta: FaqWithMeta | null; }; -export const StakePage: FC = ({ pageFAQ, faqETag }) => { +export const StakePage: FC = ({ faqWithMeta }) => { return ( = ({ pageFAQ, faqETag }) => { Stake with Lido | Lido - + {faqWithMeta && } ); }; diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx index 1fec99d76..7cf46359c 100644 --- a/features/stake/stake.tsx +++ b/features/stake/stake.tsx @@ -1,7 +1,6 @@ import { useWeb3Key } from 'shared/hooks/useWeb3Key'; import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; -import { StakeFaq } from './stake-faq/stake-faq'; import { LidoStats } from './lido-stats/lido-stats'; import { StakeForm } from './stake-form'; import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset'; @@ -15,7 +14,6 @@ export const Stake = () => { - ); }; diff --git a/features/withdrawals/claim/claim.tsx b/features/withdrawals/claim/claim.tsx index e668bf2e9..479a755aa 100644 --- a/features/withdrawals/claim/claim.tsx +++ b/features/withdrawals/claim/claim.tsx @@ -1,27 +1,24 @@ -import { PageFAQ } from '@lidofinance/ui-faq'; - import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context'; -import { ClaimFaq } from 'features/withdrawals/withdrawals-faq/claim-faq'; +import { FaqWithMeta } from 'utils/faq'; import { ClaimForm } from './form'; import { TxClaimModal } from './tx-modal'; import { ClaimWallet } from './wallet'; import { ClaimFormProvider } from './claim-form-context'; +import { ClaimFaq } from '../withdrawals-faq/claim-faq'; + type ClaimProps = { - faq?: { - pageFAQ?: PageFAQ; - eTag?: string | null; - }; + faqWithMeta: FaqWithMeta | null; }; -export const Claim = ({ faq }: ClaimProps) => { +export const Claim = ({ faqWithMeta }: ClaimProps) => { return ( - + {faqWithMeta && } diff --git a/features/withdrawals/request/request.tsx b/features/withdrawals/request/request.tsx index f93869c0b..e0e4ba45b 100644 --- a/features/withdrawals/request/request.tsx +++ b/features/withdrawals/request/request.tsx @@ -1,6 +1,5 @@ -import { PageFAQ } from '@lidofinance/ui-faq'; - import { TransactionModalProvider } from 'shared/transaction-modal'; +import { FaqWithMeta } from 'utils/faq'; import { RequestForm } from './form'; import { RequestFormProvider } from './request-form-context'; @@ -10,19 +9,16 @@ import { RequestWallet } from './wallet'; import { RequestFaq } from '../withdrawals-faq/request-faq'; type RequestProps = { - faq?: { - pageFAQ?: PageFAQ; - eTag?: string | null; - }; + faqWithMeta: FaqWithMeta | null; }; -export const Request = ({ faq }: RequestProps) => { +export const Request = ({ faqWithMeta }: RequestProps) => { return ( - + {faqWithMeta && } diff --git a/features/withdrawals/withdrawals-faq/claim-faq.tsx b/features/withdrawals/withdrawals-faq/claim-faq.tsx index 7a63628c9..09c3bab55 100644 --- a/features/withdrawals/withdrawals-faq/claim-faq.tsx +++ b/features/withdrawals/withdrawals-faq/claim-faq.tsx @@ -1,27 +1,19 @@ import React, { FC } from 'react'; -import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq'; +import { FaqAccordion } from '@lidofinance/ui-faq'; -import { FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH } from 'config'; import { Section } from 'shared/components'; import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client'; import { faqAccordionOnLinkClick } from 'utils/faq-matomo'; +import { FaqWithMeta } from 'utils/faq'; type ClaimFaqProps = { - pageFAQ?: PageFAQ; - eTag?: string | null; + faqWithMeta: FaqWithMeta; }; -export const ClaimFaq: FC = ({ pageFAQ, eTag }) => { - // This hook actual on IPFS only (see: the `eTag` prop drilling)! - const { data: pageFaqIpfsMode } = useUpdatableFaq( - FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH, - eTag, - ); - - if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) { - return null; - } +export const ClaimFaq: FC = ({ faqWithMeta }) => { + const { data: pageFAQ } = useUpdatableFaq(faqWithMeta); + if (!pageFAQ) return null; return ( <> diff --git a/features/withdrawals/withdrawals-faq/request-faq.tsx b/features/withdrawals/withdrawals-faq/request-faq.tsx index 31a3761d6..fbc07c45a 100644 --- a/features/withdrawals/withdrawals-faq/request-faq.tsx +++ b/features/withdrawals/withdrawals-faq/request-faq.tsx @@ -1,11 +1,11 @@ import React, { FC } from 'react'; -import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq'; +import { FaqAccordion } from '@lidofinance/ui-faq'; -import { FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH } from 'config'; import { Section } from 'shared/components'; import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client'; import { faqAccordionOnLinkClick } from 'utils/faq-matomo'; +import { FaqWithMeta } from 'utils/faq'; // import { ButtonLinkWrap } from './styles'; // TODO: Replace this link when it will be finalized @@ -13,20 +13,12 @@ import { faqAccordionOnLinkClick } from 'utils/faq-matomo'; // 'https://hackmd.io/@lido/SyaJQsZoj#Lido-on-Ethereum-Withdrawals-Landscape'; type RequestFaqProps = { - pageFAQ?: PageFAQ; - eTag?: string | null; + faqWithMeta: FaqWithMeta; }; -export const RequestFaq: FC = ({ pageFAQ, eTag }) => { - // This hook actual on IPFS only (see: the `eTag` prop drilling)! - const { data: pageFaqIpfsMode } = useUpdatableFaq( - FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH, - eTag, - ); - - if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) { - return null; - } +export const RequestFaq: FC = ({ faqWithMeta }) => { + const { data: pageFAQ } = useUpdatableFaq(faqWithMeta); + if (!pageFAQ) return null; return ( <> diff --git a/features/withdrawals/withdrawals-tabs.tsx b/features/withdrawals/withdrawals-tabs.tsx index 69d8695fd..3a5fb3232 100644 --- a/features/withdrawals/withdrawals-tabs.tsx +++ b/features/withdrawals/withdrawals-tabs.tsx @@ -1,8 +1,7 @@ -import { PageFAQ } from '@lidofinance/ui-faq'; - import { WITHDRAWALS_CLAIM_PATH, WITHDRAWALS_REQUEST_PATH } from 'config/urls'; import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset'; import { Switch } from 'shared/components'; +import { FaqWithMeta } from 'utils/faq'; import { ClaimDataProvider } from './contexts/claim-data-context'; import { useWithdrawals } from './contexts/withdrawals-context'; @@ -21,33 +20,23 @@ const withdrawalRoutes = [ ]; type WithdrawalsTabsProps = { - faq?: { - pageRequestFAQ?: PageFAQ; - pageClaimFAQ?: PageFAQ; - eTag?: string | null; - }; + faqWithMetaWithdrawalsPageClaim: FaqWithMeta | null; + faqWithMetaWithdrawalsPageRequest: FaqWithMeta | null; }; -export const WithdrawalsTabs = ({ faq }: WithdrawalsTabsProps) => { +export const WithdrawalsTabs = ({ + faqWithMetaWithdrawalsPageClaim, + faqWithMetaWithdrawalsPageRequest, +}: WithdrawalsTabsProps) => { const { isClaimTab } = useWithdrawals(); return ( {isClaimTab ? ( - + ) : ( - + )} ); diff --git a/features/wsteth/shared/wrap-faq/wrap-faq.tsx b/features/wsteth/shared/wrap-faq/wrap-faq.tsx index a9a3b54a2..c6b6bacd3 100644 --- a/features/wsteth/shared/wrap-faq/wrap-faq.tsx +++ b/features/wsteth/shared/wrap-faq/wrap-faq.tsx @@ -1,38 +1,28 @@ import React, { FC } from 'react'; -import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq'; +import { FaqAccordion } from '@lidofinance/ui-faq'; -import { FAQ_WRAP_AND_UNWRAP_PAGE_PATH } from 'config'; import { Section } from 'shared/components'; import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client'; import { faqAccordionOnLinkClick } from 'utils/faq-matomo'; +import { FaqWithMeta } from 'utils/faq'; type WrapFaqProps = { - pageFAQ?: PageFAQ; - eTag?: string | null; + faqWithMeta: FaqWithMeta; }; -export const WrapFaq: FC = ({ pageFAQ, eTag }) => { - // This hook actual on IPFS only (see: the `eTag` prop drilling)! - const { data: pageFaqIpfsMode } = useUpdatableFaq( - FAQ_WRAP_AND_UNWRAP_PAGE_PATH, - eTag, - ); - - if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) { - return null; - } +export const WrapFaq: FC = ({ faqWithMeta }) => { + const { data: pageFAQ } = useUpdatableFaq(faqWithMeta); + if (!pageFAQ) return null; return ( <>
{ faqAccordionOnLinkClick({ - pageId: - pageFaqIpfsMode?.pageIdentification || - pageFAQ?.pageIdentification, + pageId: pageFAQ.pageIdentification, ...props, }); }} diff --git a/features/wsteth/wrap-unwrap-tabs.tsx b/features/wsteth/wrap-unwrap-tabs.tsx index b77366c00..ffd85c1ec 100644 --- a/features/wsteth/wrap-unwrap-tabs.tsx +++ b/features/wsteth/wrap-unwrap-tabs.tsx @@ -1,5 +1,3 @@ -import { PageFAQ } from '@lidofinance/ui-faq'; - import { WRAP_PATH, WRAP_UNWRAP_PATH } from 'config/urls'; import { Wallet } from 'features/wsteth/shared/wallet'; @@ -7,6 +5,7 @@ import { WrapForm } from 'features/wsteth/wrap/wrap-form/wrap-form'; import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset'; import { Switch } from 'shared/components/switch'; import NoSsrWrapper from 'shared/components/no-ssr-wrapper'; +import { FaqWithMeta } from 'utils/faq'; import { WrapFaq } from './shared/wrap-faq/wrap-faq'; import { UnwrapForm } from './unwrap/unwrap-form'; @@ -18,13 +17,13 @@ const NAV_ROUTES = [ type WrapUnwrapLayoutProps = { mode: 'wrap' | 'unwrap'; - faq: { - pageFAQ?: PageFAQ; - eTag?: string | null; - }; + faqWithMeta: FaqWithMeta | null; }; -export const WrapUnwrapTabs = ({ mode, faq }: WrapUnwrapLayoutProps) => { +export const WrapUnwrapTabs = ({ + mode, + faqWithMeta, +}: WrapUnwrapLayoutProps) => { const isUnwrapMode = mode === 'unwrap'; return ( <> @@ -35,7 +34,7 @@ export const WrapUnwrapTabs = ({ mode, faq }: WrapUnwrapLayoutProps) => { {isUnwrapMode ? : } - + {faqWithMeta && } ); }; diff --git a/pages/index.tsx b/pages/index.tsx index f5e0f6da2..c3deb6ec0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -21,12 +21,14 @@ export const getStaticProps: GetStaticProps< if (process.env.IPFS_MODE) { return { props: { - stakePage: (await getFaqSSR(FAQ_STAKE_PAGE_PATH)) ?? null, - wrapPage: (await getFaqSSR(FAQ_WRAP_AND_UNWRAP_PAGE_PATH)) ?? null, - withdrawalsPageRequest: - (await getFaqSSR(FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH)) ?? null, - withdrawalsPageClaim: - (await getFaqSSR(FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH)) ?? null, + faqWithMetaStakePage: await getFaqSSR(FAQ_STAKE_PAGE_PATH), + faqWithMetaWrapPage: await getFaqSSR(FAQ_WRAP_AND_UNWRAP_PAGE_PATH), + faqWithMetaWithdrawalsPageRequest: await getFaqSSR( + FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH, + ), + faqWithMetaWithdrawalsPageClaim: await getFaqSSR( + FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH, + ), }, }; } @@ -34,7 +36,7 @@ export const getStaticProps: GetStaticProps< // FAQ for stake page regular return { props: { - pageFAQ: (await getFaqSSR(FAQ_STAKE_PAGE_PATH))?.faq ?? null, + faqWithMeta: await getFaqSSR(FAQ_STAKE_PAGE_PATH), }, revalidate: FAQ_REVALIDATE_SECS, }; diff --git a/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index b83ceadf9..0f39893fd 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -2,21 +2,23 @@ import { FC } from 'react'; import { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; -import { PageFAQ } from '@lidofinance/ui-faq'; - -import { FAQ_REVALIDATE_SECS } from 'config'; +import { + FAQ_REVALIDATE_SECS, + FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH, + FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH, +} from 'config'; import { WithdrawalsTabs } from 'features/withdrawals'; import { WithdrawalsProvider } from 'features/withdrawals/contexts/withdrawals-context'; import { Layout } from 'shared/components'; import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { useWeb3Key } from 'shared/hooks/useWeb3Key'; import { getFaqSSR } from 'utilsApi/faq'; +import { FaqWithMeta } from 'utils/faq'; const Withdrawals: FC = ({ mode, - pageRequestFAQ, - pageClaimFAQ, - faqETag, + faqWithMetaWithdrawalsPageClaim, + faqWithMetaWithdrawalsPageRequest, }) => { const key = useWeb3Key(); @@ -32,11 +34,10 @@ const Withdrawals: FC = ({ @@ -51,10 +52,8 @@ type WithdrawalsModePageParams = { }; type WithdrawalsModePageProps = WithdrawalsModePageParams & { - pageRequestFAQ?: PageFAQ | null; - pageClaimFAQ?: PageFAQ | null; - // IPFS actual only! - faqETag?: string | null; + faqWithMetaWithdrawalsPageClaim: FaqWithMeta | null; + faqWithMetaWithdrawalsPageRequest: FaqWithMeta | null; }; export const getStaticPaths: GetStaticPaths< @@ -67,15 +66,17 @@ export const getStaticPaths: GetStaticPaths< }; export const getStaticProps: GetStaticProps< - WithdrawalsModePageParams, + WithdrawalsModePageProps, WithdrawalsModePageParams > = async ({ params }) => { // FAQ const faqProps = { - pageRequestFAQ: - (await getFaqSSR('/faq-withdrawals-page-request-tab.md'))?.faq ?? null, - pageClaimFAQ: - (await getFaqSSR('/faq-withdrawals-page-claim-tab.md'))?.faq ?? null, + faqWithMetaWithdrawalsPageRequest: await getFaqSSR( + FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH, + ), + faqWithMetaWithdrawalsPageClaim: await getFaqSSR( + FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH, + ), revalidate: FAQ_REVALIDATE_SECS, }; diff --git a/pages/wrap/[[...mode]].tsx b/pages/wrap/[[...mode]].tsx index 9dedb8c9e..3fa33ecd8 100644 --- a/pages/wrap/[[...mode]].tsx +++ b/pages/wrap/[[...mode]].tsx @@ -2,15 +2,14 @@ import { FC } from 'react'; import { GetStaticPaths, GetStaticProps } from 'next'; import Head from 'next/head'; -import { PageFAQ } from '@lidofinance/ui-faq'; - -import { FAQ_REVALIDATE_SECS } from 'config'; +import { FAQ_REVALIDATE_SECS, FAQ_WRAP_AND_UNWRAP_PAGE_PATH } from 'config'; import { WrapUnwrapTabs } from 'features/wsteth/wrap-unwrap-tabs'; import { Layout } from 'shared/components'; import { useWeb3Key } from 'shared/hooks/useWeb3Key'; import { getFaqSSR } from 'utilsApi/faq'; +import { FaqWithMeta } from 'utils/faq'; -const WrapPage: FC = ({ mode, pageFAQ, faqETag }) => { +const WrapPage: FC = ({ mode, faqWithMeta }) => { const key = useWeb3Key(); return ( @@ -22,14 +21,7 @@ const WrapPage: FC = ({ mode, pageFAQ, faqETag }) => { Wrap | Lido - + ); }; @@ -38,9 +30,7 @@ export default WrapPage; type WrapModePageProps = { mode: 'wrap' | 'unwrap'; - pageFAQ?: PageFAQ | null; - // IPFS actual only! - faqETag?: string | null; + faqWithMeta: FaqWithMeta | null; }; type WrapModePageParams = { @@ -61,7 +51,7 @@ export const getStaticProps: GetStaticProps< > = async ({ params }) => { // FAQ const faqProps = { - pageFAQ: (await getFaqSSR('/faq-wrap-and-unwrap-page.md'))?.faq ?? null, + faqWithMeta: await getFaqSSR(FAQ_WRAP_AND_UNWRAP_PAGE_PATH), revalidate: FAQ_REVALIDATE_SECS, }; diff --git a/shared/hooks/use-faq-on-client.ts b/shared/hooks/use-faq-on-client.ts index fd9c61712..fce54257d 100644 --- a/shared/hooks/use-faq-on-client.ts +++ b/shared/hooks/use-faq-on-client.ts @@ -1,32 +1,26 @@ import { useLidoSWR, SWRResponse } from '@lido-sdk/react'; import { isPageFAQ, PageFAQ } from '@lidofinance/ui-faq'; -import { getFaqOnClient } from 'utils/faq'; +import { getFaqOnClient, FaqWithMeta } from 'utils/faq'; import { STRATEGY_CONSTANT } from 'utils/swrStrategies'; -export const useUpdatableFaq = ( - faqPath: string, - eTag?: string | null, -): SWRResponse => { +export type UseUpdatableFaq = (props: FaqWithMeta) => SWRResponse; + +export const useUpdatableFaq: UseUpdatableFaq = ({ pageFAQ, path, eTag }) => { return useLidoSWR( - ['swr:useUpdatableFaq', faqPath, eTag], + ['swr:useUpdatableFaq', path, eTag], async () => { if (!eTag) { - return undefined; + return pageFAQ; } - const respFaq = await getFaqOnClient(faqPath); - - if ( - !respFaq || - !respFaq.faq || - !isPageFAQ(respFaq.faq) || - eTag === respFaq?.eTag - ) { - return undefined; + const respFaq = await getFaqOnClient(path); + if (!respFaq || !isPageFAQ(respFaq.pageFAQ) || eTag === respFaq?.eTag) { + return pageFAQ; } - return respFaq.faq; + // Updated PageFAQ + return respFaq.pageFAQ; }, STRATEGY_CONSTANT, ); diff --git a/utils/faq.ts b/utils/faq.ts index df846ba22..eb5307a95 100644 --- a/utils/faq.ts +++ b/utils/faq.ts @@ -1,6 +1,7 @@ import { PageFAQ, parseFAQ } from '@lidofinance/ui-faq'; import { dynamics } from 'config'; +import { getPathWithoutFirstSlash } from 'config/urls'; import { fetcherWithServiceResponse } from 'utils/fetcher-with-service-response'; export const fetchFaqOnClient = async ( @@ -11,7 +12,7 @@ export const fetchFaqOnClient = async ( ); const resp = await fetcherWithServiceResponse( - `${dynamics.faqContentBasePath}/${path}`, + `${dynamics.faqContentBasePath}/${getPathWithoutFirstSlash(path)}`, { method: 'GET', headers: { @@ -31,9 +32,15 @@ export const fetchFaqOnClient = async ( return resp; }; +export type FaqWithMeta = { + pageFAQ: PageFAQ; + path: string; + eTag?: string | null; +}; + export const getFaqOnClient = async ( path: string, -): Promise<{ faq?: PageFAQ | null; eTag?: string | null } | null> => { +): Promise => { try { const rawFaqResp = await fetchFaqOnClient(path); @@ -41,8 +48,12 @@ export const getFaqOnClient = async ( // Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value. if (!rawFaqResp || !rawFaqResp.data) return null; + const parsedFaq = await parseFAQ(rawFaqResp.data); + if (!parsedFaq) return null; + return { - faq: await parseFAQ(rawFaqResp.data), + pageFAQ: parsedFaq, + path, eTag: rawFaqResp?.headers?.get('ETag'), }; } catch (err) { diff --git a/utilsApi/faq.ts b/utilsApi/faq.ts index 40b06a950..590cd6500 100644 --- a/utilsApi/faq.ts +++ b/utilsApi/faq.ts @@ -1,7 +1,8 @@ -import { PageFAQ, parseFAQ } from '@lidofinance/ui-faq'; +import { parseFAQ } from '@lidofinance/ui-faq'; import { serverRuntimeConfig } from 'config'; import { fetcherWithServiceResponse } from 'utils/fetcher-with-service-response'; +import { FaqWithMeta } from 'utils/faq'; import { responseTimeExternalMetricWrapper } from './fetchApiWrapper'; @@ -32,9 +33,7 @@ export const fetchFaqSSR = async ( return resp; }; -export const getFaqSSR = async ( - path: string, -): Promise<{ faq?: PageFAQ | null; eTag?: string | null } | null> => { +export const getFaqSSR = async (path: string): Promise => { try { const rawFaqResp = await fetchFaqSSR(path); @@ -42,8 +41,12 @@ export const getFaqSSR = async ( // Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value. if (!rawFaqResp || !rawFaqResp.data) return null; + const parsedFaq = await parseFAQ(rawFaqResp.data); + if (!parsedFaq) return null; + return { - faq: await parseFAQ(rawFaqResp.data), + pageFAQ: parsedFaq, + path, eTag: rawFaqResp?.headers?.get('ETag'), }; } catch (err) {