From b23fbb32daedf581d50657a2ed515e73f7b416bb Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 17 Dec 2024 14:21:56 +0100
Subject: [PATCH] refactor: refator variables names

---
 .../components/related-prompt.vue             | 18 ++++++-------
 .../components/related-prompts-tag-list.vue   | 26 ++++++++++++-------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
index d8068d7e6..a0d663ede 100644
--- a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
@@ -2,13 +2,13 @@
   <button
     @click="toggleSuggestion(index)"
     class="x-related-prompt__button"
-    :class="[{ 'x-related-prompt-selected__button': isSelected(index) }]"
+    :class="[{ 'x-related-prompt-selected__button': isSelected }]"
   >
     <slot name="related-prompt-button-info">
       <div class="x-related-prompt__button-info">
         <span
           class="x-typewritter-initial"
-          :class="[{ 'x-typewritter-animation': isVisible }]"
+          :class="[{ 'x-typewritter-animation': arePromptsVisible }]"
           :style="{
             animationDelay: `${index * 0.4 + 0.05}s`,
             '--suggestion-text-length': relatedPrompt.suggestionText.length
@@ -17,8 +17,8 @@
           {{ relatedPrompt.suggestionText }}
         </span>
       </div>
-      <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
-      <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
+      <CrossTinyIcon v-if="isSelected" class="x-icon-lg" />
+      <PlusIcon v-else class="x-icon-lg" />
     </slot>
   </button>
 </template>
@@ -49,7 +49,11 @@
         type: Object as PropType<RelatedPrompt>,
         required: true
       },
-      isVisible: {
+      arePromptsVisible: {
+        type: Boolean,
+        default: false
+      },
+      isSelected: {
         type: Boolean,
         default: false
       },
@@ -66,14 +70,10 @@
         x.emit('UserSelectedARelatedPrompt', index);
       };
 
-      const isSelected = (index: number): boolean => selectedPrompt.value === index;
-
       return {
-        isSelected,
         selectedPrompt,
         toggleSuggestion
       };
     }
   });
 </script>
-<style lang="css"></style>
diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
index db41a23e1..2bc9dc5bb 100644
--- a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
@@ -28,14 +28,22 @@
             }"
             class="x-related-prompt x-staggered-initial"
             :class="[
-              { 'x-staggered-animation': isVisible },
-              { 'x-hidden': shouldHideButton(index) },
+              { 'x-staggered-animation': arePromptsVisible },
+              { 'x-hidden': hidePrompt(index) },
               { 'x-related-prompt-selected': isSelected(index) }
             ]"
             data-test="related-prompt-item"
           >
-            <slot name="related-prompt-button" v-bind="{ suggestion, index, isVisible }">
-              <RelatedPrompt :related-prompt="suggestion" :index="index" :is-visible="isVisible" />
+            <slot
+              name="related-prompt-button"
+              v-bind="{ suggestion, index, arePromptsVisible, isSelected }"
+            >
+              <RelatedPrompt
+                :related-prompt="suggestion"
+                :index="index"
+                :are-prompts-visible="arePromptsVisible"
+                :is-selected="isSelected(index)"
+              />
             </slot>
           </div>
         </div>
@@ -68,10 +76,10 @@
       ]);
 
       const slidingPanelContent = ref<Element>();
-      const isVisible = ref(false);
+      const arePromptsVisible = ref(false);
 
       const observer = new IntersectionObserver(([entry]) => {
-        isVisible.value = entry.isIntersecting;
+        arePromptsVisible.value = entry.isIntersecting;
       });
 
       onMounted(() => {
@@ -84,12 +92,12 @@
 
       const isSelected = (index: number): boolean => selectedPrompt.value === index;
 
-      const shouldHideButton = (index: number): boolean =>
+      const hidePrompt = (index: number): boolean =>
         selectedPrompt.value !== -1 && selectedPrompt.value !== index;
 
       return {
-        isVisible,
-        shouldHideButton,
+        arePromptsVisible,
+        hidePrompt,
         isSelected,
         relatedPrompts,
         selectedPrompt,