Skip to content

F
frontend
Commit ecdc5c90 authored by tom goriunov's avatar tom goriunov Committed by GitHub
Browse files
Options

title for marketplace app page (#990) 

Fixes #983
parent f566ff9e
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 34 deletions
pages/apps/[id].tsx
View file @ ecdc5c90
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import MarketplaceApp from 'ui/pages/MarketplaceApp';
import Page from 'ui/shared/Page/Page'; import Page from 'ui/shared/Page/Page';
const MarketplaceApp = dynamic(() => import('ui/pages/MarketplaceApp'), { ssr: false });
const MarketplaceAppPage: NextPage = () => { const MarketplaceAppPage: NextPage = () => {
return ( return (
<Page wrapChildren={ false }> <>
<Head><title>Blockscout | Marketplace</title></Head> <Head><title>Blockscout | Marketplace</title></Head>
<MarketplaceApp/> <Page wrapChildren={ false }>
</Page> <MarketplaceApp/>
</Page>
</>
); );
}; };
......
pages/apps/index.tsx
View file @ ecdc5c90
...@@ -10,12 +10,13 @@ const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false } ...@@ -10,12 +10,13 @@ const Marketplace = dynamic(() => import('ui/pages/Marketplace'), { ssr: false }
const MarketplacePage: NextPage = () => { const MarketplacePage: NextPage = () => {
return ( return (
<Page> <>
<PageTitle title="Marketplace"/>
<Head><title>Blockscout | Marketplace</title></Head> <Head><title>Blockscout | Marketplace</title></Head>
<Page>
<Marketplace/> <PageTitle title="Marketplace"/>
</Page> <Marketplace/>
</Page>
</>
); );
}; };
......
ui/pages/MarketplaceApp.tsx
View file @ ecdc5c90
...@@ -8,9 +8,11 @@ import type { MarketplaceAppOverview } from 'types/client/marketplace'; ...@@ -8,9 +8,11 @@ import type { MarketplaceAppOverview } from 'types/client/marketplace';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
import { useAppContext } from 'lib/contexts/app';
import useApiFetch from 'lib/hooks/useFetch'; import useApiFetch from 'lib/hooks/useFetch';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import ContentLoader from 'ui/shared/ContentLoader'; import ContentLoader from 'ui/shared/ContentLoader';
import PageTitle from 'ui/shared/Page/PageTitle';
const IFRAME_SANDBOX_ATTRIBUTE = 'allow-forms allow-orientation-lock ' + const IFRAME_SANDBOX_ATTRIBUTE = 'allow-forms allow-orientation-lock ' +
'allow-pointer-lock allow-popups-to-escape-sandbox ' + 'allow-pointer-lock allow-popups-to-escape-sandbox ' +
...@@ -23,6 +25,7 @@ const MarketplaceApp = () => { ...@@ -23,6 +25,7 @@ const MarketplaceApp = () => {
const ref = useRef<HTMLIFrameElement>(null); const ref = useRef<HTMLIFrameElement>(null);
const apiFetch = useApiFetch(); const apiFetch = useApiFetch();
const appProps = useAppContext();
const router = useRouter(); const router = useRouter();
const id = getQueryParamString(router.query.id); const id = getQueryParamString(router.query.id);
...@@ -71,32 +74,46 @@ const MarketplaceApp = () => { ...@@ -71,32 +74,46 @@ const MarketplaceApp = () => {
throw new Error('Unable to load app', { cause: error }); throw new Error('Unable to load app', { cause: error });
} }
const backLink = React.useMemo(() => {
const hasGoBackLink = appProps.referrer.includes('/apps');
if (!hasGoBackLink) {
return;
}
return {
label: 'Back to marketplace',
url: appProps.referrer,
};
}, [ appProps.referrer ]);
return ( return (
<Center <>
as="main" { !isLoading && <PageTitle title={ data.title } px={{ base: 4, lg: 12 }} pt={{ base: '138px', lg: 0 }} backLink={ backLink }/> }
h="100vh" <Center
pt={{ base: '138px', lg: 0 }} as="main"
pb={{ base: 0, lg: 10 }} h="100vh"
> >
{ (isFrameLoading) && ( { (isFrameLoading) && (
<ContentLoader/> <ContentLoader/>
) } ) }
{ data && ( { data && (
<Box <Box
allow={ IFRAME_ALLOW_ATTRIBUTE } allow={ IFRAME_ALLOW_ATTRIBUTE }
ref={ ref } ref={ ref }
sandbox={ IFRAME_SANDBOX_ATTRIBUTE } sandbox={ IFRAME_SANDBOX_ATTRIBUTE }
as="iframe" as="iframe"
h="100%" h="100%"
w="100%" w="100%"
display={ isFrameLoading ? 'none' : 'block' } display={ isFrameLoading ? 'none' : 'block' }
src={ data.url } src={ data.url }
title={ data.title } title={ data.title }
onLoad={ handleIframeLoad } onLoad={ handleIframeLoad }
/> />
) } ) }
</Center> </Center>
</>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment