Add NewEventPanel to events list page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/events/index.tsx

@@ -36,7 +36,7 @@ const Events = () => {
       <HStack className='mb-4' space={2} justifyContent='between'>
         <CardTitle title={<FormattedMessage id='events.recent_events' defaultMessage='Recent events' />} />
         <Button
-          className='ml-auto'
+          className='ml-auto xl:hidden'
           theme='primary'
           size='sm'
           onClick={onComposeEvent}

app/soapbox/features/ui/components/panels/new-event-panel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { Button, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const NewEventPanel = () => {
+  const dispatch = useAppDispatch();
+
+  const createEvent = () => {
+    dispatch(openModal('COMPOSE_EVENT'));
+  };
+
+  return (
+    <Stack space={2}>
+      <Stack>
+        <Text size='lg' weight='bold'>
+          <FormattedMessage id='new_event_panel.title' defaultMessage='Create New Event' />
+        </Text>
+
+        <Text theme='muted' size='sm'>
+          <FormattedMessage id='new_event_panel.subtitle' defaultMessage="Can't find what you're looking for? Schedule your own event." />
+        </Text>
+      </Stack>
+
+      <Button
+        icon={require('@tabler/icons/calendar-event.svg')}
+        onClick={createEvent}
+        theme='secondary'
+        block
+      >
+        <FormattedMessage id='new_event_panel.action' defaultMessage='Create event' />
+      </Button>
+    </Stack>
+  );
+};
+
+export default NewEventPanel;

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<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/search' page={DefaultPage} component={Search} content={children} />
       {features.suggestions && <WrappedRoute path='/suggestions' publicRoute page={DefaultPage} component={FollowRecommendations} content={children} />}
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
-      {features.events && <WrappedRoute path='/events' page={DefaultPage} component={Events} content={children} />}
+      {features.events && <WrappedRoute path='/events' page={EventsPage} component={Events} content={children} />}
 
       {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
       {features.chats && <WrappedRoute path='/chats/new' page={ChatsPage} component={ChatIndex} content={children} />}

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');
+}

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<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;

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<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;