moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'public-layout-tsx' into 'develop' 

TSX conversions

See merge request soapbox-pub/soapbox-fe!1364
This commit is contained in:
Justin 2022-05-12 19:17:52 +00:00
parent df3ca0026f 3dce8ee95a
commit 79dcb923d9
3 changed files with 60 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/soapbox/components/ui/icon/svg-icon.tsx
View File

@ -13,7 +13,7 @@ interface ISvgIcon {
}
/** Renders an inline SVG with an empty frame loading state */
const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.Element => {
const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className, ...filteredProps }): JSX.Element => {
const loader = (
<svg
className={className}
@ -33,6 +33,7 @@ const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.El
height={size}
loader={loader}
data-testid='svg-icon'
{...filteredProps}
>
{/* If the fetch fails, fall back to displaying the loader */}
{loader}

69
app/soapbox/features/public_layout/index.js
View File

@ -1,69 +0,0 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { Switch, Route, Redirect } from 'react-router-dom';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
NotificationsContainer,
ModalContainer,
} from 'soapbox/features/ui/util/async-components';
import { isStandalone } from 'soapbox/utils/state';
import AboutPage from '../about';
import LandingPage from '../landing_page';
import MobilePage from '../mobile';
import Footer from './components/footer';
import Header from './components/header';
const mapStateToProps = (state, props) => ({
soapbox: getSoapboxConfig(state),
standalone: isStandalone(state),
});
class PublicLayout extends ImmutablePureComponent {
render() {
const { standalone } = this.props;
if (standalone) {
return <Redirect to='/login/external' />;
}
return (
<div className='h-full'>
<LandingGradient />
<div className='flex flex-col h-screen'>
<div className='flex-shrink-0'>
<Header />
<div className='relative'>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/about/:slug?' component={AboutPage} />
<Route exact path='/mobile/:slug?' component={MobilePage} />
</Switch>
</div>
</div>
<Footer />
<BundleContainer fetchComponent={NotificationsContainer}>
{(Component) => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={ModalContainer}>
{(Component) => <Component />}
</BundleContainer>
</div>
</div>
);
}
}
export default connect(mapStateToProps)(PublicLayout);

58
app/soapbox/features/public_layout/index.tsx Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import LandingGradient from 'soapbox/components/landing-gradient';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
NotificationsContainer,
ModalContainer,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector } from 'soapbox/hooks';
import { isStandalone } from 'soapbox/utils/state';
import AboutPage from '../about';
import LandingPage from '../landing_page';
import MobilePage from '../mobile';
import Footer from './components/footer';
import Header from './components/header';
const PublicLayout = () => {
const standalone = useAppSelector((state) => isStandalone(state));
if (standalone) {
return <Redirect to='/login/external' />;
}
return (
<div className='h-full'>
<LandingGradient />
<div className='flex flex-col h-screen'>
<div className='flex-shrink-0'>
<Header />
<div className='relative'>
<Switch>
<Route exact path='/' component={LandingPage} />
<Route exact path='/about/:slug?' component={AboutPage} />
<Route exact path='/mobile/:slug?' component={MobilePage} />
</Switch>
</div>
</div>
<Footer />
<BundleContainer fetchComponent={NotificationsContainer}>
{(Component) => <Component />}
</BundleContainer>
<BundleContainer fetchComponent={ModalContainer}>
{(Component) => <Component />}
</BundleContainer>
</div>
</div>
);
};
export default PublicLayout;