From c34c1fb16f08cf5a5bb0608c93ba9b88ceaa4d66 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Wed, 4 Jan 2023 11:37:07 -0600
Subject: [PATCH] Use "pickProps" function for prop drilling in profile panel.

---
 frontend/vue/components/Stations/Profile.vue  | 24 ++++++++-----------
 .../Stations/Profile/BackendPanel.vue         |  6 -----
 .../Stations/Profile/FrontendPanel.vue        |  6 -----
 .../Stations/Profile/HeaderPanel.vue          |  6 -----
 .../Stations/Profile/NowPlayingPanel.vue      |  6 -----
 .../Stations/Profile/PublicPagesPanel.vue     |  6 -----
 .../Stations/Profile/RequestsPanel.vue        |  6 -----
 .../Stations/Profile/StreamersPanel.vue       |  6 -----
 frontend/vue/functions/pickProps.js           |  9 +++++++
 9 files changed, 19 insertions(+), 56 deletions(-)
 create mode 100644 frontend/vue/functions/pickProps.js

diff --git a/frontend/vue/components/Stations/Profile.vue b/frontend/vue/components/Stations/Profile.vue
index 389409ec4..fa25fe590 100644
--- a/frontend/vue/components/Stations/Profile.vue
+++ b/frontend/vue/components/Stations/Profile.vue
@@ -1,6 +1,6 @@
 <template>
     <profile-header
-        v-bind="$props"
+        v-bind="pickProps(props, headerPanelProps)"
         :np="np"
     />
 
@@ -10,7 +10,7 @@
     >
         <div class="col-lg-7">
             <profile-now-playing
-                v-bind="$props"
+                v-bind="pickProps(props, nowPlayingPanelProps)"
                 :np="np"
             />
 
@@ -20,34 +20,35 @@
             />
 
             <profile-streams
-                v-bind="$props"
                 :np="np"
             />
 
-            <profile-public-pages v-bind="$props" />
+            <profile-public-pages
+                v-bind="pickProps(props, {...publicPagesPanelProps,...embedModalProps})"
+            />
         </div>
 
         <div class="col-lg-5">
             <profile-requests
                 v-if="stationSupportsRequests"
-                v-bind="$props"
+                v-bind="pickProps(props, requestsPanelProps)"
             />
 
             <profile-streamers
                 v-if="stationSupportsStreamers"
-                v-bind="$props"
+                v-bind="pickProps(props, streamersPanelProps)"
             />
 
             <template v-if="hasActiveFrontend">
                 <profile-frontend
-                    v-bind="$props"
+                    v-bind="pickProps(props, frontendPanelProps)"
                     :np="np"
                 />
             </template>
 
             <template v-if="hasActiveBackend">
                 <profile-backend
-                    v-bind="$props"
+                    v-bind="pickProps(props, backendPanelProps)"
                     :np="np"
                 />
             </template>
@@ -58,12 +59,6 @@
     </div>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import ProfileStreams from './Profile/StreamsPanel';
 import ProfileHeader from './Profile/HeaderPanel';
@@ -87,6 +82,7 @@ import nowPlayingPanelProps from "./Profile/nowPlayingPanelProps";
 import publicPagesPanelProps from "./Profile/publicPagesPanelProps";
 import requestsPanelProps from "./Profile/requestsPanelProps";
 import streamersPanelProps from "./Profile/streamersPanelProps";
+import {pickProps} from "~/functions/pickProps";
 
 const props = defineProps({
     ...backendPanelProps,
diff --git a/frontend/vue/components/Stations/Profile/BackendPanel.vue b/frontend/vue/components/Stations/Profile/BackendPanel.vue
index 4f1649c63..e49ec7bfa 100644
--- a/frontend/vue/components/Stations/Profile/BackendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/BackendPanel.vue
@@ -62,12 +62,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false,
-}
-</script>
-
 <script setup>
 import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
diff --git a/frontend/vue/components/Stations/Profile/FrontendPanel.vue b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
index 7a2d41e16..00653685b 100644
--- a/frontend/vue/components/Stations/Profile/FrontendPanel.vue
+++ b/frontend/vue/components/Stations/Profile/FrontendPanel.vue
@@ -123,12 +123,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters';
 import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';
diff --git a/frontend/vue/components/Stations/Profile/HeaderPanel.vue b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
index 30a579db8..589d78d3f 100644
--- a/frontend/vue/components/Stations/Profile/HeaderPanel.vue
+++ b/frontend/vue/components/Stations/Profile/HeaderPanel.vue
@@ -37,12 +37,6 @@
     </div>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton.vue";
diff --git a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
index 20041bf23..ddcfdff91 100644
--- a/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
+++ b/frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
@@ -195,12 +195,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
diff --git a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
index f408124f4..36c122d48 100644
--- a/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
+++ b/frontend/vue/components/Stations/Profile/PublicPagesPanel.vue
@@ -103,12 +103,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import Icon from '~/components/Common/Icon';
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
diff --git a/frontend/vue/components/Stations/Profile/RequestsPanel.vue b/frontend/vue/components/Stations/Profile/RequestsPanel.vue
index cec0c6764..a5a91ef38 100644
--- a/frontend/vue/components/Stations/Profile/RequestsPanel.vue
+++ b/frontend/vue/components/Stations/Profile/RequestsPanel.vue
@@ -57,12 +57,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import Icon from '~/components/Common/Icon';
 import requestsPanelProps from "~/components/Stations/Profile/requestsPanelProps";
diff --git a/frontend/vue/components/Stations/Profile/StreamersPanel.vue b/frontend/vue/components/Stations/Profile/StreamersPanel.vue
index 3e61b4401..97378b538 100644
--- a/frontend/vue/components/Stations/Profile/StreamersPanel.vue
+++ b/frontend/vue/components/Stations/Profile/StreamersPanel.vue
@@ -57,12 +57,6 @@
     </section>
 </template>
 
-<script>
-export default {
-    inheritAttrs: false
-};
-</script>
-
 <script setup>
 import Icon from "~/components/Common/Icon.vue";
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
diff --git a/frontend/vue/functions/pickProps.js b/frontend/vue/functions/pickProps.js
new file mode 100644
index 000000000..0f5e1f4da
--- /dev/null
+++ b/frontend/vue/functions/pickProps.js
@@ -0,0 +1,9 @@
+import {reactivePick} from "@vueuse/core";
+import {keys} from "lodash";
+
+export function pickProps(props, subset) {
+    return reactivePick(
+        props,
+        ...keys(subset)
+    )
+}