3col layout option + updates on events widget

paritytech · May 24, 2024 · b57e47c · b57e47c
1 parent c51a452
commit b57e47c
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 36 deletions.
diff --git a/src/client/components/Home.tsx b/src/client/components/Home.tsx
@@ -46,23 +46,24 @@ export const Home: React.FC = () => {
  <Tabs currentTab={tab} onChangeTab={(tabId) => setTab(tabId)} />
  </>
  )}
-
  {/* grid */}
  <div
  className={cn(
  'grid',
  layoutView === 'mobile' && 'grid-cols-[minmax(0,_1fr)]',
  layoutView === 'tablet' && 'grid-cols-[minmax(0,_1fr)]',
  layoutView === 'desktop' &&
- 'grid-cols-[minmax(0,_25fr)_minmax(0,_75fr)]',
+ (!config.layout.desktop.sidebarRight?.length
+ ? 'grid-cols-[minmax(0,_25fr)_minmax(0,_75fr)]'
+ : 'grid-cols-[minmax(0,_25fr)_minmax(0,_44fr)_minmax(0,_31fr)]'),
  'gap-x-4'
  )}
  >
  {/* mobile columns */}
  {layoutView === 'mobile' && (
  <div>{config.layout.mobile[tab].map(renderWidget)}</div>
  )}
- {/* desktop first column */}
+ {/* desktop left sidebar */}
  {layoutView === 'desktop' && (
  <div>{config.layout.desktop.sidebar.map(renderWidget)}</div>
  )}
@@ -81,6 +82,10 @@ export const Home: React.FC = () => {
  ))}
  </div>
  )}
+ {/* desktop right sidebar */}
+ {layoutView === 'desktop' && (
+ <div>{config.layout.desktop.sidebarRight?.map(renderWidget)}</div>
+ )}
  </div>
  </>
  )

diff --git a/src/modules/events/client/components/MyEvents.tsx b/src/modules/events/client/components/MyEvents.tsx
@@ -5,6 +5,15 @@ import { useStore } from '@nanostores/react'
 import React from 'react'
 import { EventBadge } from './EventBadge'
 import { useMyEvents } from '../queries'
+import { EventApplicationStatus } from '#shared/types'
+
+const ApplicationBg: Record<EventApplicationStatus, string> = {
+ [EventApplicationStatus.Pending]: 'bg-yellow-50 border-yellow-100',
+ [EventApplicationStatus.Opened]: 'bg-yellow-50 border-yellow-100',
+ [EventApplicationStatus.Confirmed]: 'bg-green-50 border-green-100',
+ [EventApplicationStatus.CancelledAdmin]: 'bg-gray-100',
+ [EventApplicationStatus.CancelledUser]: 'bg-gray-100',
+}
 
 export const MyEvents: React.FC = () => {
  const officeId = useStore(stores.officeId)
@@ -17,7 +26,10 @@ export const MyEvents: React.FC = () => {
  <div key={x.id}>
  <EventBadge
  event={x}
- className={cn('bg-accents-greenTransparent', i !== 0 && 'mt-2')}
+ className={cn(
+ ApplicationBg[x.status as EventApplicationStatus],
+ i !== 0 && 'mt-2'
+ )}
  />
  </div>
  ))}

diff --git a/src/modules/events/client/components/UpcomingEvents.tsx b/src/modules/events/client/components/UpcomingEvents.tsx
@@ -25,36 +25,38 @@ export const UpcomingEvents: React.FC = () => {
 
  return (
  <WidgetWrapper title="Upcoming Events">
- <div className="flex flex-col justify-evenly h-full">
- {!events?.length ? (
- <div className="text-gray-400">No upcoming events at the moment</div>
- ) : (
- <div className="-m-4">
- {eventData.length &&
- eventData?.map((x, i) => (
- <div key={x.id}>
- <EventBadge
- event={x}
- withApplyButton={!x.applicationId && !x.metadata.global}
- />
- {i !== eventData.length - 1 && (
- <div className="px-4">
- <HR key={x.id} />
- </div>
- )}
- </div>
- ))}
- </div>
- )}
+ <div className="flex flex-col items-start justify-between flex-grow">
  <div>
- <FButton
- kind="link"
- className="w-contain mb-6 -ml-2"
- onClick={() => stores.goTo('events')}
- >
- Show more
- </FButton>
+ {!events?.length ? (
+ <div className="text-gray-400">
+ No upcoming events at the moment
+ </div>
+ ) : (
+ <div className="-m-4">
+ {eventData.length &&
+ eventData?.map((x, i) => (
+ <div key={x.id}>
+ <EventBadge
+ event={x}
+ withApplyButton={!x.applicationId && !x.metadata.global}
+ />
+ {i !== eventData.length - 1 && (
+ <div className="px-4">
+ <HR key={x.id} />
+ </div>
+ )}
+ </div>
+ ))}
+ </div>
+ )}
  </div>
+ <FButton
+ kind="link"
+ className="w-contain -ml-2 full-grow"
+ onClick={() => stores.goTo('events')}
+ >
+ Show All
+ </FButton>
  </div>
  </WidgetWrapper>
  )

diff --git a/src/modules/events/client/queries.ts b/src/modules/events/client/queries.ts
@@ -62,12 +62,18 @@ export const useEventsView = (officeId: string | null, sortBy?: string) => {
  )
 }
 
+type EventWithStatusArray = (Event & { status: EventApplicationStatus })[]
+
 export const useMyEvents = (officeId: string | null, sortBy?: string) => {
  const path = '/user-api/events/event/me'
- return useQuery<Event[], AxiosError>(
+ return useQuery<EventWithStatusArray, AxiosError>(
  [path, { office: officeId, sortBy }],
  async ({ queryKey }) =>
- (await api.get<Event[]>(path, { params: queryKey[1] })).data,
+ (
+ await api.get<EventWithStatusArray>(path, {
+ params: queryKey[1],
+ })
+ ).data,
  { enabled: !!officeId }
  )
 }

diff --git a/src/modules/events/server/router.ts b/src/modules/events/server/router.ts
@@ -593,7 +593,10 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
  req.user.id
  )
 
- return eventApplications.map((e) => e.event)
+ return eventApplications.map((e) => ({
+ ...e.event?.dataValues,
+ status: e.status,
+ }))
  }
  )
 

diff --git a/src/modules/news/client/components/LatestNews.tsx b/src/modules/news/client/components/LatestNews.tsx
@@ -45,7 +45,7 @@ export const LatestNews = () => {
  <Placeholder />
  </div>
  ) : (
- <div className="flex flex-col justify-between h-full pb-10">
+ <div className="flex flex-col justify-between pb-10">
  <div>
  {filteredNews.map((x, i) => (
  <div

diff --git a/src/server/app-config/schemas.ts b/src/server/app-config/schemas.ts
@@ -27,6 +27,7 @@ export const layout = z.object({
  z.array(componentRef).length(2),
  ])
  ),
+ sidebarRight: z.array(componentRef).optional(),
  }),
 })