diff --git a/app/soapbox/features/events/index.tsx b/app/soapbox/features/events/index.tsx index 8af41449e..ced05af05 100644 --- a/app/soapbox/features/events/index.tsx +++ b/app/soapbox/features/events/index.tsx @@ -36,7 +36,7 @@ const Events = () => { } /> + + ); +}; + +export default NewEventPanel; diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx index 5fb66a302..38c659379 100644 --- a/app/soapbox/features/ui/index.tsx +++ b/app/soapbox/features/ui/index.tsx @@ -29,6 +29,7 @@ import AdminPage from 'soapbox/pages/admin-page'; import ChatsPage from 'soapbox/pages/chats-page'; import DefaultPage from 'soapbox/pages/default-page'; import EventPage from 'soapbox/pages/event-page'; +import EventsPage from 'soapbox/pages/events-page'; import GroupPage from 'soapbox/pages/group-page'; import GroupsPage from 'soapbox/pages/groups-page'; import HomePage from 'soapbox/pages/home-page'; @@ -254,7 +255,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {features.suggestions && } {features.profileDirectory && } - {features.events && } + {features.events && } {features.chats && } {features.chats && } diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts index ad89df982..37885b116 100644 --- a/app/soapbox/features/ui/util/async-components.ts +++ b/app/soapbox/features/ui/util/async-components.ts @@ -577,3 +577,7 @@ export function NewGroupPanel() { export function GroupMediaPanel() { return import(/* webpackChunkName: "features/groups" */'../components/group-media-panel'); } + +export function NewEventPanel() { + return import(/* webpackChunkName: "features/events" */'../components/panels/new-event-panel'); +} diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index aaa43be90..6c0227976 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -960,6 +960,9 @@ "navigation_bar.preferences": "Preferences", "navigation_bar.profile_directory": "Profile directory", "navigation_bar.soapbox_config": "Soapbox config", + "new_event_panel.action": "Create event", + "new_event_panel.subtitle": "Can't find what you're looking for? Schedule your own event.", + "new_event_panel.title": "Create New Event", "new_group_panel.action": "Create group", "new_group_panel.subtitle": "Can't find what you're looking for? Start your own private or public group.", "new_group_panel.title": "Create New Group", diff --git a/app/soapbox/pages/events-page.tsx b/app/soapbox/pages/events-page.tsx new file mode 100644 index 000000000..add895824 --- /dev/null +++ b/app/soapbox/pages/events-page.tsx @@ -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 = ({ children }) => { + const features = useFeatures(); + + return ( + <> + + {children} + + + + + {Component => } + + {features.trends && ( + + {Component => } + + )} + {features.suggestions && ( + + {Component => } + + )} + + + + ); +}; + +export default EventsPage; diff --git a/app/soapbox/pages/groups-page.tsx b/app/soapbox/pages/groups-page.tsx index 136570b39..c4209f572 100644 --- a/app/soapbox/pages/groups-page.tsx +++ b/app/soapbox/pages/groups-page.tsx @@ -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 = ({ children }) => { - const me = useAppSelector(state => state.me); - // const match = useRouteMatch(); +const GroupsPage: React.FC = ({ children }) => ( + <> + + +
+ {children} +
+
+
- return ( - <> - - -
- {children} -
-
- - {!me && ( - - {Component => } - - )} -
- - - - {Component => } - - - - - ); -}; + + + {Component => } + + + + +); export default GroupsPage;