From f40499e7819ae146273f2624691ad4d9409081f3 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 20 Apr 2024 12:31:58 +0200
Subject: [PATCH] feat: add conditional links to podcast info card

---
 src/components/podcast-info-card.tsx | 21 ++++++++++++++++++---
 src/components/wrap.tsx              | 21 +++++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/components/wrap.tsx

diff --git a/src/components/podcast-info-card.tsx b/src/components/podcast-info-card.tsx
index 22da262..d3b88c6 100644
--- a/src/components/podcast-info-card.tsx
+++ b/src/components/podcast-info-card.tsx
@@ -1,3 +1,6 @@
+import { Link, useParams } from "react-router-dom";
+import { Wrap } from "./wrap";
+
 type Props = {
   title: string;
   author: string;
@@ -11,11 +14,23 @@ export function PodcastInfoCard({
   description,
   imageURL,
 }: Props) {
+  const { episodeId, podcastId } = useParams<{
+    episodeId?: string;
+    podcastId?: string;
+  }>();
+
+  const href = `/podcast/${podcastId}`;
+  const shouldWrapWithLink = !!episodeId;
+
   return (
     <div>
-      <h1>{title}</h1>
-      <h2>{author}</h2>
-      <img src={imageURL} alt={title} />
+      <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
+        <img src={imageURL} alt={title} />
+      </Wrap>
+      <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
+        <h1>{title}</h1>
+        <h2>{author}</h2>
+      </Wrap>
       <p>{description}</p>
     </div>
   );
diff --git a/src/components/wrap.tsx b/src/components/wrap.tsx
new file mode 100644
index 0000000..9bc6649
--- /dev/null
+++ b/src/components/wrap.tsx
@@ -0,0 +1,21 @@
+import { createElement, ReactNode } from "react";
+
+type Props = {
+  if?: boolean;
+  with: (typeof createElement.arguments)[0];
+  wrapperProps: (typeof createElement.arguments)[1];
+  children: NonNullable<ReactNode>;
+};
+
+export function Wrap({
+  if: condition,
+  with: wrapper,
+  wrapperProps,
+  children,
+}: Props) {
+  return condition ? (
+    createElement(wrapper, wrapperProps, [children])
+  ) : (
+    <>{children}</>
+  );
+}