bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

StatusPage: convert to TSX

Browse source
This commit is contained in:
Alex Gleason 2022-08-12 10:15:21 -05:00
parent f338a761ef
commit e402660bc1
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 57 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
app/soapbox/pages/status_page.js
View file

@ -1,69 +0,0 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
import { getFeatures } from 'soapbox/utils/features';
import { Layout } from '../components/ui';
import BundleContainer from '../features/ui/containers/bundle_container';
const mapStateToProps = state => {
const me = state.get('me');
const features = getFeatures(state.get('instance'));
return {
me,
showTrendsPanel: features.trends,
showWhoToFollowPanel: features.suggestions,
};
};
export default @connect(mapStateToProps)
class StatusPage extends ImmutablePureComponent {
render() {
const { me, children, showTrendsPanel, showWhoToFollowPanel } = this.props;
return (
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>
{!me && (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component limit={3} key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
}
}

57
app/soapbox/pages/status_page.tsx Normal file
View file

@ -0,0 +1,57 @@
import React from 'react';
import LinkFooter from 'soapbox/features/ui/components/link_footer';
import {
WhoToFollowPanel,
TrendsPanel,
SignUpPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector, useFeatures } from 'soapbox/hooks';
import { Layout } from '../components/ui';
import BundleContainer from '../features/ui/containers/bundle_container';
interface IStatusPage {
children: React.ReactNode,
}
const StatusPage: React.FC<IStatusPage> = ({ children }) => {
const me = useAppSelector(state => state.me);
const features = useFeatures();
return (
<>
<Layout.Main>
{children}
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>
{!me && (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{features.trends && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component limit={3} key='trends-panel' />}
</BundleContainer>
)}
{features.suggestions && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
};
export default StatusPage;