diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 1a2c61ab1..dfb27836f 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,3 @@ -import { get } from 'lodash-es' import { storeToRefs } from 'pinia' import { computed, @@ -20,8 +19,6 @@ import ThreadTree from 'src/components/thread_tree/thread_tree.vue' import { useInterfaceStore } from 'src/stores/interface.js' import { useMergedConfigStore } from 'src/stores/merged_config.js' -import { useStatusesStore } from 'src/stores/statuses.js' -import { useStreamingStore } from 'src/stores/streaming.js' import { useConversation } from 'src/composables/useConversation.js' import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js' @@ -29,8 +26,6 @@ import { useScrollPosition } from 'src/composables/useScrollPosition.js' import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js' import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js' -import { WSConnectionStatus } from 'src/api/websocket.js' - import { library } from '@fortawesome/fontawesome-svg-core' import { faAngleDoubleDown, @@ -72,17 +67,6 @@ export default { }, emits: ['heightChange', 'suspendableStateChange'], setup(props, { emit }) { - // # Helpers - const getStatusObject = (id) => useStatusesStore().allStatuses.get(id) - const getConversationId = (statusId) => { - const status = getStatusObject(statusId) - return get( - status, - 'retweeted_status.statusnet_conversation_id', - get(status, 'statusnet_conversation_id'), - ) - } - const scroller = useScrollPosition() const tryScrollTo = async (id) => { if (!id) { @@ -100,15 +84,30 @@ export default { const router = useRouter() + const onReset = () => { + resetThreadDisplay() + } + + // # Main things + const { + currentStatus, + mainStatus, + fullConversation, + replies, + getReplies, + fetchConversation, + loadError, + focusedId, + setFocused, + reset, + } = useConversation({ + statusId, + onReset, + }) + // # Main Configuration / global state const { mergedConfig } = storeToRefs(useMergedConfigStore()) - const { mastoUserSocketStatus } = storeToRefs(useStreamingStore()) const displayStyle = computed(() => mergedConfig.value.conversationDisplay) - const streamingEnabled = computed( - () => - mergedConfig.value.useStreamingApi && - mastoUserSocketStatus === WSConnectionStatus.JOINED, - ) const { layoutType } = storeToRefs(useInterfaceStore()) const mobileLayout = computed(() => layoutType.value === 'mobile') @@ -123,32 +122,11 @@ export default { provide('isPage', isPage) provide('expandable', true) - // # Focus - const focusedId = ref(statusId.value) const focused = computed(() => (isExpanded.value ? focusedId.value : null)) - const setFocused = (id) => { - if (!id) return - focusedId.value = id - - if (!streamingEnabled.value) { - useStatusesStore().fetchStatus(id) - } - - useStatusesStore().fetchFavsAndRepeats(id) - useStatusesStore().fetchEmojiReactions(id) - } provide('focused', focused) - - // # Main things - const { - currentStatus, - mainStatus, - conversation, - replies, - getReplies, - fetchConversation, - loadError, - } = useConversation(focusedId, isExpanded) + const conversation = computed(() => + !expanded.value ? [currentStatus.value] : fullConversation.value, + ) watch( expanded, @@ -156,32 +134,13 @@ export default { if (value) { await fetchConversation() } else { - resetDisplayState() + reset() } if (isPage.value) return }, { flush: 'post' }, ) - const resetDisplayState = () => { - setFocused(statusId.value) - resetThreadDisplay() - } - watch(statusId, (newVal, oldVal) => { - const newConversationId = getConversationId(newVal) - const oldConversationId = getConversationId(oldVal) - if ( - newConversationId && - oldConversationId && - newConversationId === oldConversationId - ) { - setFocused(newVal) - } else { - resetDisplayState() - fetchConversation() - } - }) - // Component created if (isPage.value) { fetchConversation() diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js index 9bec1e160..f6ba3a4e3 100644 --- a/src/composables/useConversation.js +++ b/src/composables/useConversation.js @@ -1,15 +1,26 @@ import { get } from 'lodash-es' -import { computed, provide, ref } from 'vue' +import { storeToRefs } from 'pinia' +import { computed, provide, ref, watch } from 'vue' +import { useMergedConfigStore } from 'src/stores/merged_config.js' import { useOAuthStore } from 'src/stores/oauth.js' import { useStatusesStore } from 'src/stores/statuses.js' +import { useStreamingStore } from 'src/stores/streaming.js' import { fetchConversation as apiFetchConversation, fetchStatus as apiFetchStatus, } from 'src/api/public.js' -export function useConversation(statusId, expanded) { +export function useConversation({ statusId, onReset }) { + const { mastoUserSocketStatus } = storeToRefs(useStreamingStore()) + const { mergedConfig } = storeToRefs(useMergedConfigStore()) + const streamingEnabled = computed( + () => + mergedConfig.value.useStreamingApi && + mastoUserSocketStatus === WSConnectionStatus.JOINED, + ) + const getStatusObject = (id) => useStatusesStore().allStatuses.get(id) const getConversationId = (statusId) => { const status = getStatusObject(statusId) @@ -19,6 +30,37 @@ export function useConversation(statusId, expanded) { get(status, 'statusnet_conversation_id'), ) } + // # Focus + const focusedId = ref(statusId.value) + const setFocused = (id) => { + if (!id) return + focusedId.value = id + + if (!streamingEnabled.value) { + useStatusesStore().fetchStatus(id) + } + + useStatusesStore().fetchFavsAndRepeats(id) + useStatusesStore().fetchEmojiReactions(id) + } + const reset = () => { + onReset?.() + setFocused(statusId.value) + } + watch(statusId, (newVal, oldVal) => { + const newConversationId = getConversationId(newVal) + const oldConversationId = getConversationId(oldVal) + if ( + newConversationId && + oldConversationId && + newConversationId === oldConversationId + ) { + setFocused(newVal) + } else { + resetDisplayState() + fetchConversation() + } + }) const loadError = ref(null) const currentStatus = computed(() => getStatusObject(statusId.value)) @@ -49,10 +91,6 @@ export function useConversation(statusId, expanded) { return [] } - if (!expanded.value) { - return [currentStatus.value] - } - const conversation = useStatusesStore().conversations.get( conversationId.value, ) @@ -119,10 +157,13 @@ export function useConversation(statusId, expanded) { return { currentStatus, mainStatus, - conversation, + fullConversation: conversation, + focusedId, + setFocused, replies, getReplies, fetchConversation, + reset, loadError, } }