♻️ refactor(services/content/talks): better talk slug generation

ythecombinator · Nov 26, 2023 · 3460b11 · 3460b11
1 parent f374af0
commit 3460b11
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 21 deletions.
diff --git a/src/components/pages/talks/active-talks-section-item.tsx b/src/components/pages/talks/active-talks-section-item.tsx
@@ -21,30 +21,19 @@ export type ActiveTalksSectionItemProps = {
  * COMPONENT
  */
 
-const ActiveTalksSectionItem: FunctionComponent<
-  PropsWithChildren<ActiveTalksSectionItemProps>
-> = (props) => {
+const ActiveTalksSectionItem: FunctionComponent<PropsWithChildren<ActiveTalksSectionItemProps>> = (props) => {
   const { talkTitle, talkSlug, sessions } = props;
 
   return (
-    <Link href={`/${Routes.talks}/${talkSlug}`}>
+    <Link href={talkSlug}>
       <CardOutlined heading={talkTitle}>
         <div className="flex items-center text-gray-800 dark:text-gray-200">
           <div className="mr-1 flex h-11 items-center justify-center bg-transparent text-lg">
-            <FaMapMarkedAlt
-              size={20}
-              role="img"
-              aria-label="Presented in these countries"
-            />
+            <FaMapMarkedAlt size={20} role="img" aria-label="Presented in these countries" />
           </div>
           {sessions.map((event) => (
             <Tooltip key={event.eventName} content={event.eventName}>
-              <span
-                key={event.eventName}
-                className="ml-1"
-                role="img"
-                aria-label={event.eventName}
-              >
+              <span key={event.eventName} className="ml-1" role="img" aria-label={event.eventName}>
                 {event.eventFlag}
               </span>
             </Tooltip>

diff --git a/src/components/pages/talks/all-talks-section.tsx b/src/components/pages/talks/all-talks-section.tsx
@@ -69,7 +69,7 @@ const AllTalksSection: FunctionComponent<PropsWithChildren<AllTalksSectionProps>
               key={talkSlug}
               label={talkTitle}
               index={reversedIndexOf(items.length, index)}
-              href={`/${Routes.talks}/${talkSlug}`}
+              href={talkSlug}
               prefix={talkCategory === 'workshop' ? 'workshop' : null}
             />
           );

diff --git a/src/components/pages/talks/photo-highlights-section-item.tsx b/src/components/pages/talks/photo-highlights-section-item.tsx
@@ -26,7 +26,7 @@ const PhotoHighlightsSectionItem: FunctionComponent<PropsWithChildren<PhotoHighl
   return (
     <Link
       key={talkSlug}
-      href={`/${Routes.talks}/${talkSlug}`}
+      href={talkSlug}
       shallow
       className="group relative mb-5 block w-full cursor-zoom-in after:pointer-events-none after:absolute after:inset-0 after:rounded-lg"
     >

diff --git a/src/services/content/talks.ts b/src/services/content/talks.ts
@@ -21,6 +21,8 @@ import {
 } from 'graphql/schema';
 import { DeepNonNullable, ValuesType } from 'utility-types';
 
+import { Routes } from 'config/constants';
+
 import ContentfulService from 'services/providers/contentful';
 import YoutubeService, { YoutubeResponse } from 'services/providers/youtube';
 
@@ -165,7 +167,7 @@ const allTransformer = (result: GetAllTalksQuery) => {
 
     return {
       talkTitle: title,
-      talkSlug: slug,
+      talkSlug: `/${Routes.talks}/${item.slug}`,
       talkCategory: category,
       // Indexable search metadata
       _description: JSON.stringify(abstract.json),
@@ -194,7 +196,7 @@ const featuredTransformer = (result: GetFeaturedTalksQuery) => {
     eventName: item.event.name,
     photoURL: item.photo.url,
     talkTitle: item.talk.title,
-    talkSlug: item.talk.slug,
+    talkSlug: `/${Routes.talks}/${item.talk.slug}`,
   }));
 };
 
@@ -203,7 +205,7 @@ const talksPerTagTransformer = (result: GetTalksForTagQuery) => {
 
   return items.map((item) => ({
     talkTitle: item.title,
-    talkSlug: item.slug,
+    talkSlug: `/${Routes.talks}/${item.slug}`,
     sessionsCount: item.sessionsCollection.total,
   }));
 };
@@ -213,7 +215,7 @@ const activeTransformer = (result: GetActiveTalksQuery) => {
 
   return items.map((item) => ({
     talkTitle: item.title,
-    talkSlug: item.slug,
+    talkSlug: `/${Routes.talks}/${item.slug}`,
     sessions: item.sessionsCollection.items.map((session) => ({
       eventName: session.event.name,
       eventPage: session.event.website,