matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add NewEventPanel to events list page

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2023-02-05 23:14:21 +01:00
parent 8bd175e0e4
commit b529ec8a07
6 changed files with 111 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/soapbox/pages/events-page.tsx Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import { Layout } from 'soapbox/components/ui';
import LinkFooter from 'soapbox/features/ui/components/link-footer';
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
import {
WhoToFollowPanel,
TrendsPanel,
NewEventPanel,
} from 'soapbox/features/ui/util/async-components';
import { useFeatures } from 'soapbox/hooks';
interface IEventsPage {
children: React.ReactNode
}
/** Page to display events list. */
const EventsPage: React.FC<IEventsPage> = ({ children }) => {
const features = useFeatures();
return (
<>
<Layout.Main>
{children}
</Layout.Main>
<Layout.Aside>
<BundleContainer fetchComponent={NewEventPanel}>
{Component => <Component key='new-event-panel' />}
</BundleContainer>
{features.trends && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component limit={5} key='trends-panel' />}
</BundleContainer>
)}
{features.suggestions && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={3} key='wtf-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
};
export default EventsPage;

51
app/soapbox/pages/groups-page.tsx
View File

@ -3,45 +3,30 @@ import React from 'react';
import { Column, Layout } from 'soapbox/components/ui';
import LinkFooter from 'soapbox/features/ui/components/link-footer';
import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
import {
NewGroupPanel,
CtaBanner,
} from 'soapbox/features/ui/util/async-components';
import { useAppSelector } from 'soapbox/hooks';
import { NewGroupPanel } from 'soapbox/features/ui/util/async-components';
interface IGroupsPage {
children: React.ReactNode
}
/** Page to display groups. */
const GroupsPage: React.FC<IGroupsPage> = ({ children }) => {
const me = useAppSelector(state => state.me);
// const match = useRouteMatch();
const GroupsPage: React.FC<IGroupsPage> = ({ children }) => (
<>
<Layout.Main>
<Column withHeader={false}>
<div className='space-y-4'>
{children}
</div>
</Column>
</Layout.Main>
return (
<>
<Layout.Main>
<Column withHeader={false}>
<div className='space-y-4'>
{children}
</div>
</Column>
{!me && (
<BundleContainer fetchComponent={CtaBanner}>
{Component => <Component key='cta-banner' />}
</BundleContainer>
)}
</Layout.Main>
<Layout.Aside>
<BundleContainer fetchComponent={NewGroupPanel}>
{Component => <Component key='new-group-panel' />}
</BundleContainer>
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
};
<Layout.Aside>
<BundleContainer fetchComponent={NewGroupPanel}>
{Component => <Component key='new-group-panel' />}
</BundleContainer>
<LinkFooter key='link-footer' />
</Layout.Aside>
</>
);
export default GroupsPage;