💄 feat(components/pages/talks): flag workshops

Author: ythecombinator

src/components/pages/talks/all-talks-section.tsx

@@ -18,6 +18,7 @@ export type AllTalksSectionProps = {
   items: Array<{
     talkSlug: string;
     talkTitle: string;
+    talkCategory: string;
     _description: string;
     _events: string;
     _tags: string;
@@ -61,13 +62,14 @@ const AllTalksSection: FunctionComponent<
           />
         )}
         {items.map((item, index) => {
-          const { talkTitle, talkSlug } = item;
+          const { talkTitle, talkSlug, talkCategory } = item;
           return (
             <OrderedListItem
               key={talkSlug}
               label={talkTitle}
               index={reversedIndexOf(items.length, index)}
               href={`/${Routes.talks}/${talkSlug}`}
+              prefix={talkCategory === 'workshop' ? 'workshop' : null}
             />
           );
         })}

src/components/shared/ordered-list-item.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, PropsWithChildren } from 'react';
 
 import { Routes } from 'config/constants';
 
+import Chip from 'components/shared/chip';
 import Link from 'components/shared/link';
 
 /*~
@@ -12,6 +13,7 @@ export type OrderedListItemProps = {
   href: string;
   label: string;
   index: number;
+  prefix?: string | null;
 };
 
 /*~
@@ -21,7 +23,7 @@ export type OrderedListItemProps = {
 const OrderedListItem: FunctionComponent<
   PropsWithChildren<OrderedListItemProps>
 > = (props) => {
-  const { label, href, index } = props;
+  const { label, href, index, prefix } = props;
 
   return (
     <Link href={href} className="w-full" aria-label={label}>
@@ -31,6 +33,7 @@ const OrderedListItem: FunctionComponent<
             <div className="mr-6 text-left text-gray-300 dark:text-gray-400">
               {index}
             </div>
+            {prefix && <Chip>{prefix}</Chip>}
             <h3 className="w-full text-base font-medium text-gray-800 dark:text-gray-100 sm:text-lg">
               {label}
             </h3>

src/graphql/GetAllTalks.graphql

@@ -2,6 +2,7 @@ query GetAllTalks($limit: Int) {
   talkCollection(order: lastRelevant_DESC, limit: $limit) {
     items {
       title
+      category
       abstract {
         json
       }

src/graphql/schema.ts

@@ -2123,7 +2123,7 @@ export type GetAllTalksQueryVariables = Exact<{
 }>;
 
 
-export type GetAllTalksQuery = { __typename?: 'Query', talkCollection?: { __typename?: 'TalkCollection', items: Array<{ __typename?: 'Talk', title?: string | null, slug?: string | null, abstract?: { __typename?: 'TalkAbstract', json: any } | null, sessionsCollection?: { __typename?: 'TalkSessionsCollection', items: Array<{ __typename?: 'Session', event?: { __typename?: 'Event', name?: string | null, city?: { __typename?: 'City', name?: string | null, country?: { __typename?: 'Country', name?: string | null } | null } | null } | null } | null> } | null, contentfulMetadata: { __typename?: 'ContentfulMetadata', tags: Array<{ __typename?: 'ContentfulTag', id?: string | null, name?: string | null } | null> } } | null> } | null };
+export type GetAllTalksQuery = { __typename?: 'Query', talkCollection?: { __typename?: 'TalkCollection', items: Array<{ __typename?: 'Talk', title?: string | null, category?: string | null, slug?: string | null, abstract?: { __typename?: 'TalkAbstract', json: any } | null, sessionsCollection?: { __typename?: 'TalkSessionsCollection', items: Array<{ __typename?: 'Session', event?: { __typename?: 'Event', name?: string | null, city?: { __typename?: 'City', name?: string | null, country?: { __typename?: 'Country', name?: string | null } | null } | null } | null } | null> } | null, contentfulMetadata: { __typename?: 'ContentfulMetadata', tags: Array<{ __typename?: 'ContentfulTag', id?: string | null, name?: string | null } | null> } } | null> } | null };
 
 export type GetFeaturedTalksQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -2241,6 +2241,7 @@ export const GetAllTalksDocument = gql`
   talkCollection(order: lastRelevant_DESC, limit: $limit) {
     items {
       title
+      category
       abstract {
         json
       }

src/services/talks-content-service.ts

@@ -116,12 +116,19 @@ const allTransformer = (result: GetAllTalksQuery) => {
     .items;
 
   return items.map((item) => {
-    const { title, abstract, slug, sessionsCollection, contentfulMetadata } =
-      item;
+    const {
+      title,
+      category,
+      abstract,
+      slug,
+      sessionsCollection,
+      contentfulMetadata,
+    } = item;
 
     return {
       talkTitle: title,
       talkSlug: slug,
+      talkCategory: category,
       // Indexable search metadata
       _description: JSON.stringify(abstract.json),
       _events: toIndexableCollection(