From b751e384c2ea887028d0613fef943740109db48d Mon Sep 17 00:00:00 2001
From: masif2002 <masif2002@outlook.com>
Date: Mon, 3 Apr 2023 22:16:58 +0530
Subject: [PATCH] Added required props to component

---
 frontend/src/components/VBackToSearchResultsLink.vue        | 6 +++---
 .../components/meta/VBackToSearchResultsLink.stories.mdx    | 2 +-
 frontend/src/pages/audio/_id/index.vue                      | 6 +++++-
 frontend/src/pages/image/_id/index.vue                      | 6 +++++-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/VBackToSearchResultsLink.vue b/frontend/src/components/VBackToSearchResultsLink.vue
index 8314e8a8977..e1b86329e30 100644
--- a/frontend/src/components/VBackToSearchResultsLink.vue
+++ b/frontend/src/components/VBackToSearchResultsLink.vue
@@ -3,7 +3,7 @@
   <VLink
     class="time inline-flex flex-row items-center gap-2 rounded-sm p-2 pe-3 text-xs font-semibold text-dark-charcoal-70 hover:text-dark-charcoal"
     v-bind="$attrs"
-    @click="handleClick()"
+    @click="handleClick"
   >
     <VIcon name="chevron-left" :rtl-flip="true" />
     {{ $t("single-result.back") }}
@@ -28,6 +28,7 @@ export default defineComponent({
     VIcon,
     VLink,
   },
+  inheritAttrs: false,
   props: {
     /**
      * The unique ID of the media
@@ -39,12 +40,11 @@ export default defineComponent({
     /**
      * The media type being searched
      */
-     mediaType: {
+    mediaType: {
       type: String as PropType<SupportedMediaType>,
       required: true,
     },
   },
-  inheritAttrs: false,
   setup(props) {
     const { sendCustomEvent } = useAnalytics()
     const handleClick = () => {
diff --git a/frontend/src/components/meta/VBackToSearchResultsLink.stories.mdx b/frontend/src/components/meta/VBackToSearchResultsLink.stories.mdx
index 3743b54f80b..b9d5a68d129 100644
--- a/frontend/src/components/meta/VBackToSearchResultsLink.stories.mdx
+++ b/frontend/src/components/meta/VBackToSearchResultsLink.stories.mdx
@@ -8,7 +8,7 @@ import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
 />
 
 export const Template = (args) => ({
-  template: `<VBackToSearchResultsLink v-bind="args"/>`,
+  template: `<VBackToSearchResultsLink v-bind="args" :id="id" :media-type="mediaType" />`,
   components: { VBackToSearchResultsLink },
   setup() {
     return { args }
diff --git a/frontend/src/pages/audio/_id/index.vue b/frontend/src/pages/audio/_id/index.vue
index 3adca0d43ae..2da6a2dae93 100644
--- a/frontend/src/pages/audio/_id/index.vue
+++ b/frontend/src/pages/audio/_id/index.vue
@@ -1,7 +1,11 @@
 <template>
   <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full px-2 py-2 md:px-6">
-      <VBackToSearchResultsLink :href="backToSearchPath" />
+      <VBackToSearchResultsLink
+        :id="audio.id"
+        :href="backToSearchPath"
+        :media-type="audio.frontendMediaType"
+      />
     </div>
 
     <VAudioTrack layout="full" :audio="audio" class="main-track" />
diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue
index a22a5d329cf..e704427f21b 100644
--- a/frontend/src/pages/image/_id/index.vue
+++ b/frontend/src/pages/image/_id/index.vue
@@ -1,7 +1,11 @@
 <template>
   <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full px-2 py-2 md:px-6">
-      <VBackToSearchResultsLink :href="backToSearchPath" />
+      <VBackToSearchResultsLink
+        :id="image.id"
+        :href="backToSearchPath"
+        :media-type="image.frontendMediaType"
+      />
     </div>
 
     <figure class="relative mb-4 border-b border-dark-charcoal-20 px-6">