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

Convert PublicLayout to TSX

This commit is contained in:
Justin 2022-05-12 14:53:41 -04:00
parent df3ca0026f
commit 2ecd6d79dd
2 changed files with 58 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;