Deconstruct props and make them reactive

learningequality · Oct 4, 2024 · f88e6b6 · f88e6b6
1 parent f3da47e
commit f88e6b6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/lib/cards/useGridLayout.js b/lib/cards/useGridLayout.js
@@ -1,5 +1,5 @@
 import cloneDeep from 'lodash/cloneDeep';
-import { watch, ref } from '@vue/composition-api';
+import { watch, ref, toRefs } from '@vue/composition-api';
 
 import useKResponsiveWindow from '../composables/useKResponsiveWindow';
 
@@ -11,8 +11,8 @@ import { getBreakpointConfig } from './utils';
  * configuration object for the current breakpoint.
  */
 export default function useGridLayout(props) {
+  const { layout, layoutOverride } = toRefs(props);
   const currentBreakpointConfig = ref({});
-
   const { windowBreakpoint } = useKResponsiveWindow();
 
   /**
@@ -32,7 +32,7 @@ export default function useGridLayout(props) {
       return getLayoutConfigForBreakpoint(props, 0);
     }
     // Obtain the base layout configuration for the breakpoint
-    const baseLayoutConfig = LAYOUT_CONFIGS[props.layout];
+    const baseLayoutConfig = LAYOUT_CONFIGS[layout.value];
     const baseBreakpointConfig = getBreakpointConfig(baseLayoutConfig, breakpoint);
 
     // Deep clone to protect mutating LAYOUT_CONFIGS
@@ -43,7 +43,7 @@ export default function useGridLayout(props) {
 
     // Override if `layoutOverride` contains
     // settings for the breakpoint
-    const breakpointOverride = getBreakpointConfig(props.layoutOverride, breakpoint);
+    const breakpointOverride = getBreakpointConfig(layoutOverride.value, breakpoint);
     if (breakpointOverride) {
       for (const key of ['cardsPerRow', 'columnGap', 'rowGap']) {
         if (breakpointOverride[key]) {
@@ -55,9 +55,8 @@ export default function useGridLayout(props) {
     return finalBreakpointConfig;
   }
 
-  // Watch props too to make `layout` and `layoutOverride` reactive
   watch(
-    [windowBreakpoint, props],
+    [windowBreakpoint, layout, layoutOverride],
     ([newBreakpoint]) => {
       currentBreakpointConfig.value = getLayoutConfigForBreakpoint(props, newBreakpoint);
     },

diff --git a/lib/cards/useGridLoading.js b/lib/cards/useGridLoading.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { ref, watch, onMounted } from '@vue/composition-api';
+import { ref, watch, onMounted, toRefs } from '@vue/composition-api';
 
 import useKResponsiveWindow from '../composables/useKResponsiveWindow';
 import { getBreakpointConfig } from './utils';
@@ -27,6 +27,7 @@ const DEFAULT_SKELETON = {
  * Manages `KCardGrid`'s loading state
  */
 export default function useGridLoading(props) {
+  const { loading, skeletonsConfig } = toRefs(props);
   const { windowBreakpoint } = useKResponsiveWindow();
 
   const skeletonCount = ref(DEFAULT_SKELETON.count);
@@ -61,7 +62,7 @@ export default function useGridLoading(props) {
   const isLoading = ref(false);
 
   watch(
-    () => props.loading,
+    loading,
     (newLoading, oldLoading) => {
       if (newLoading === oldLoading) {
         return;
@@ -93,12 +94,12 @@ export default function useGridLoading(props) {
     { immediate: true }
   );
 
-  // Observes window screen size and updates the loading
-  // skeleton configuration for the current breakpoint
+  // Updates the loading skeleton configuration
+  //for the current breakpoint
   watch(
-    windowBreakpoint,
-    newBreakpoint => {
-      const breakpointSkeletonconfig = getBreakpointConfig(props.skeletonsConfig, newBreakpoint);
+    [windowBreakpoint, skeletonsConfig],
+    ([newBreakpoint]) => {
+      const breakpointSkeletonconfig = getBreakpointConfig(skeletonsConfig.value, newBreakpoint);
       if (breakpointSkeletonconfig) {
         if (breakpointSkeletonconfig.count) {
           skeletonCount.value = breakpointSkeletonconfig.count;
@@ -117,7 +118,7 @@ export default function useGridLoading(props) {
         }
       }
     },
-    { immediate: true }
+    { immediate: true, deep: true }
   );
 
   return {