Skip to content

Commit

Permalink
fix: move watchers to onmounted and remove immediate:true for some wa…
Browse files Browse the repository at this point in the history
…tchers we don't need to run it immediately (#624)

* fix: move watchers to onmounted and remove immediate:true for some watcthers we dont need to run it imemediately

* fix: revert iconwithlink changes
  • Loading branch information
pghorpade authored Sep 28, 2024
1 parent 9996110 commit e1ec758
Show file tree
Hide file tree
Showing 5 changed files with 110 additions and 77 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,4 @@
"peerDependencies": {
"vue": "^3.4.29"
}
}
}
63 changes: 42 additions & 21 deletions src/lib-components/HeaderMain.vue
Original file line number Diff line number Diff line change
@@ -1,45 +1,66 @@
<script lang="ts" setup>
import { computed } from 'vue'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import type { PropType } from 'vue'
import NavPrimary from '@/lib-components/NavPrimary.vue'
import NavSecondary from '@/lib-components/NavSecondary.vue'
// types
import type { NavPrimaryItemType, NavSecondaryItemType } from '@/types/types'
const { primaryNav, secondaryNav, title } = defineProps(
{
primaryNav: {
// This is an array of objects, with each object shaped like {name, url, items:[{text, to, target}]}
type: Array as PropType<NavPrimaryItemType[]>,
default: () => [],
},
secondaryNav: {
type: Array as PropType<NavSecondaryItemType[]>,
default: () => [],
},
title: {
type: String,
default: '',
},
// Define props and destructure them
const props = defineProps({
primaryNav: {
type: Array as PropType<NavPrimaryItemType[]>,
default: () => [],
},
)
secondaryNav: {
type: Array as PropType<NavSecondaryItemType[]>,
default: () => [],
},
title: {
type: String,
default: '',
},
})
// Use `toRefs` to make each prop reactive individually
const { primaryNav, secondaryNav, title } = toRefs(props)
// Set up reactive refs for each prop
const primaryNavRef = ref(primaryNav.value)
const secondaryNavRef = ref(secondaryNav.value)
const titleRef = ref(title.value)
// Move the watcher inside onMounted hook
onMounted(() => {
watch(
[primaryNav, secondaryNav, title],
([newPrimaryNav, newSecondaryNav, newTitle]) => {
// console.log("HeaderMain: new values", newPrimaryNav, newSecondaryNav, newTitle)
primaryNavRef.value = newPrimaryNav
secondaryNavRef.value = newSecondaryNav
titleRef.value = newTitle
},
{ deep: true }
)
})
// Computed property to parse the title
const parseTitle = computed(() => {
return !!title
return !!titleRef.value
})
</script>

<template>
<header class="header-main">
<NavSecondary
:items="secondaryNav"
:items="secondaryNavRef"
:is-microsite="parseTitle"
/>
<NavPrimary
class="primary"
:items="primaryNav"
:title="title"
:items="primaryNavRef"
:title="titleRef"
/>
</header>
</template>
Expand Down
6 changes: 3 additions & 3 deletions src/lib-components/HeaderSmart.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const isMobile = ref(false)
onMounted(() => {
const { width } = useWindowSize()
watch(width, (newWidth) => {
console.log('newWidth', newWidth)
// console.log('newWidth', newWidth)
isMobile.value = newWidth <= 1200
currentHeader.value = markRaw(isMobile.value ? HeaderMainResponsive : HeaderMain)
},
Expand All @@ -39,11 +39,11 @@ onMounted(() => {
watch(
header,
(newVal, oldVal) => {
console.log('Header updated from parent page', newVal, oldVal)
// console.log('Header updated from parent page', newVal, oldVal)
primaryMenuItems.value = newVal.primary
secondaryMenuItems.value = newVal.secondary
},
{ deep: true, immediate: true }
{ deep: true }
)
})
</script>
Expand Down
62 changes: 35 additions & 27 deletions src/lib-components/NavPrimary.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import IconSearch from 'ucla-library-design-tokens/assets/svgs/icon-ftva-search.
import IconMenu from 'ucla-library-design-tokens/assets/svgs/icon-menu.svg'
import IconMenuClose from 'ucla-library-design-tokens/assets/svgs/icon-ftva-circle-x.svg'
import SvgIconCaretDown from 'ucla-library-design-tokens/assets/svgs/icon-caret-down.svg'
import { computed, onMounted, ref, watch } from 'vue'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { PropType } from 'vue'
Expand All @@ -16,7 +16,7 @@ import { useTheme } from '@/composables/useTheme'
import type { NavPrimaryItemType } from '@/types/types'
const { items, currentPath, title, acronym } = defineProps({
const props = defineProps({
items: {
type: Array as PropType<NavPrimaryItemType[]>,
default: () => [],
Expand All @@ -35,16 +35,12 @@ const { items, currentPath, title, acronym } = defineProps({
},
})
const primaryItems = ref(items || [])
const { items, currentPath, title, acronym } = toRefs(props)
watch(
items,
(newVal, oldVal) => {
console.log('NavPrimary data updated from nuxt layout or app.vue when working with craft draft previews', newVal, oldVal)
primaryItems.value = newVal
},
{ deep: true, immediate: true }
)
const primaryItems = ref(items.value || [])
const currentPathRef = ref(currentPath.value)
const titleRef = ref(title.value)
const acronymRef = ref(acronym.value)
const route = useRoute()
// Refs to track menu states
Expand All @@ -59,8 +55,8 @@ const classes = computed(() => [
{ 'is-opened': isOpened.value || slotIsOpened.value },
{ 'slot-is-opened': slotIsOpened.value }, // sometimes we need to style different depending on which menu is open
{ 'not-hovered': activeMenuIndex.value === -1 },
{ 'has-title': title },
{ 'has-acronym': acronym },
{ 'has-title': titleRef.value },
{ 'has-acronym': acronymRef.value },
{ 'is-opened-mobile': mobileMenuIsOpened.value },
theme?.value || ''
])
Expand All @@ -81,9 +77,9 @@ const themeSettings = computed(() => {
}
}
})
const shouldRenderSmartLink = computed(() => title || acronym)
const shouldRenderSmartLink = computed(() => titleRef.value || acronymRef.value)
const noChildren = computed(() => {
if (!title)
if (!titleRef.value)
return []
return primaryItems.value.filter(item => !item.children || !item.children.length)
})
Expand All @@ -93,7 +89,7 @@ const supportLinks = computed(() => {
})
const currentPathActiveIndex = computed(() => {
const currentPathNew = currentPath || route?.path
const currentPathNew = currentPathRef.value || route?.path
return primaryItems.value.findIndex(item => item.url && currentPathNew.includes(item.url))
})
Expand Down Expand Up @@ -185,6 +181,18 @@ function searchClick() {
// Mounted
onMounted(() => {
// Moved watch inside onMounted hook
watch(
[items, currentPath, title, acronym],
([newItems, newCurrentPath, newTitle, newAcronym]) => {
console.log('NavPrimary data updated from nuxt layout or app.vue when working with craft draft previews', newItems, newCurrentPath, newTitle, newAcronym)
primaryItems.value = newItems || []
currentPathRef.value = newCurrentPath
titleRef.value = newTitle
acronymRef.value = newAcronym
},
{ deep: true }
)
activeMenuIndex.value = currentPathActiveIndex.value
})
</script>
Expand All @@ -202,17 +210,17 @@ onMounted(() => {
<SmartLink
v-if="shouldRenderSmartLink"
to="/"
:aria-label="title ? '' : `UCLA Library home page`"
:aria-label="titleRef ? '' : `UCLA Library home page`"
>
<div
v-if="title"
v-if="titleRef"
class="title"
>
<span class="full-title"> {{ title }} </span>
<span class="full-title"> {{ titleRef }} </span>
<span
v-if="acronym"
v-if="acronymRef"
class="acronym"
> {{ acronym }} </span>
> {{ acronymRef }} </span>
</div>
<SvgLogoUclaLibrary
v-else
Expand All @@ -223,17 +231,17 @@ onMounted(() => {
<a
v-else
href="/"
:aria-label="title ? '' : `UCLA Library home page`"
:aria-label="titleRef ? '' : `UCLA Library home page`"
>
<div
v-if="title"
v-if="titleRef"
class="title"
>
<span class="full-title"> {{ title }} </span>
<span class="full-title"> {{ titleRef }} </span>
<span
v-if="acronym"
v-if="acronymRef"
class="acronym"
> {{ acronym }} </span>
> {{ acronymRef }} </span>
</div>
<SvgLogoUclaLibrary
v-else
Expand Down Expand Up @@ -335,7 +343,7 @@ onMounted(() => {
</ul>

<div
v-if="!title"
v-if="!titleRef"
class="support-links"
>
<div
Expand Down
54 changes: 29 additions & 25 deletions src/lib-components/NavSecondary.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
<script lang="ts" setup>
// components
import SvgLogoUclaLibrary from 'ucla-library-design-tokens/assets/svgs/logo-library.svg'
import { computed, ref, shallowRef, watch } from 'vue'
import { computed, onMounted, ref, toRefs, watch } from 'vue'
import type { PropType } from 'vue'
import SmartLink from '@/lib-components/SmartLink.vue'
import ButtonLink from '@/lib-components/ButtonLink.vue'
// vue
// types
import type { NavSecondaryItemType } from '@/types/types'
const { items, isMicrosite } = defineProps({
const props = defineProps({
items: {
type: Array as PropType<NavSecondaryItemType[]>,
default: () => [],
Expand All @@ -22,31 +20,36 @@ const { items, isMicrosite } = defineProps({
},
})
// Convert `items` to a shallow reactive reference
const itemsRef = shallowRef(items) // Or you can use `toRef(props, 'items')`
const secondaryItems = ref(itemsRef.value || [])
console.log(items, secondaryItems.value)
watch(
itemsRef, // This is now a reactive source
(newVal, oldVal) => {
console.log('NavSecondary updated from nuxt layout or nuxt app.vue', newVal, oldVal)
secondaryItems.value = newVal || []
},
{ deep: true, immediate: true }
)
const { items, isMicrosite } = toRefs(props)
const secondaryItems = ref(items.value || [])
const isMicrositeRef = ref(isMicrosite.value)
// console.log("initial prop values in NavSecondary", items, secondaryItems.value)
onMounted(() => {
// Moved watch inside onMounted hook
watch(
[items, isMicrosite],
([newItems, newIsMicrosite]) => {
console.log('NavSecondary updated from nuxt layout or nuxt app.vue', newItems, newIsMicrosite)
secondaryItems.value = newItems || []
isMicrositeRef.value = newIsMicrosite
},
{ deep: true }
)
})
const classes = computed(() => {
return [
'flex-container',
{ 'flex-container-not-microsite': !isMicrosite },
{ 'flex-container-microsite': isMicrosite },
{ 'flex-container-not-microsite': !isMicrositeRef.value },
{ 'flex-container-microsite': isMicrositeRef.value },
]
})
const parsedLinks = computed(() => {
return (secondaryItems.value || []).map((obj) => {
console.log('nav-secondary:', JSON.stringify(obj))
// console.log('nav-secondary:', JSON.stringify(obj))
let support = 'list-item'
if (obj?.classes)
support = `${support} ${obj?.classes}`
Expand All @@ -60,6 +63,7 @@ const parsedLinks = computed(() => {
const parsedItemsMinusAccount = computed(() => {
return parsedLinks?.value?.slice(0, -1)
})
const accountLink = computed(() => {
return parsedLinks.value && parsedLinks.value.length > 0 ? parsedLinks?.value[parsedLinks?.value?.length - 1] : null
})
Expand All @@ -72,7 +76,7 @@ const accountLink = computed(() => {
>
<div :class="classes">
<a
v-if="isMicrosite"
v-if="isMicrositeRef"
href="https://www.library.ucla.edu"
target="_blank"
aria-label="UCLA Library home page"
Expand All @@ -85,7 +89,7 @@ const accountLink = computed(() => {

<div class="navigation-list">
<ul
v-if="!isMicrosite"
v-if="!isMicrositeRef"
class="list"
>
<li
Expand All @@ -104,7 +108,7 @@ const accountLink = computed(() => {
</ul>

<ButtonLink
v-if="!isMicrosite && accountLink"
v-if="!isMicrositeRef && accountLink"
:label="accountLink?.name"
class="account-button"
:link-target="accountLink?.target"
Expand All @@ -113,7 +117,7 @@ const accountLink = computed(() => {
/>

<ul
v-if="isMicrosite"
v-if="isMicrositeRef"
class="link-list"
>
<li
Expand Down

1 comment on commit e1ec758

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.