From 4d305799a5f597b16fdfeb8cdcbe61299481e08e Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Wed, 18 Oct 2023 11:35:31 -0700 Subject: [PATCH] [menu-bar] Refetch pinned apps on menu bar focus (#83) * [menu-bar] Refetch pinned apps on menu bar focus * Add changelog entry --- CHANGELOG.md | 2 +- apps/menu-bar/src/hooks/useGetPinnedApps.ts | 3 ++- apps/menu-bar/src/hooks/usePopoverFocus.ts | 12 ++++++++++++ .../src/hooks/useSafeDisplayDimensions.ts | 18 ++++++++---------- apps/menu-bar/src/popover/Core.tsx | 5 ++++- apps/menu-bar/src/popover/ProjectsSection.tsx | 5 ++++- 6 files changed, 31 insertions(+), 14 deletions(-) create mode 100644 apps/menu-bar/src/hooks/usePopoverFocus.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index f97c0a72..a5516bd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ - Added drag and drop support for installing apps. ([#57](https://github.com/expo/orbit/pull/57) by [@gabrieldonadel](https://github.com/gabrieldonadel)) - Added support for installing apps directly from Finder. ([#56](https://github.com/expo/orbit/pull/56) by [@gabrieldonadel](https://github.com/gabrieldonadel)) - Added local HTTP server to circumvent deep-link limitations. ([#52](https://github.com/expo/orbit/pull/52), [#53](https://github.com/expo/orbit/pull/53), [#54](https://github.com/expo/orbit/pull/54), [#55](https://github.com/expo/orbit/pull/55) by [@gabrieldonadel](https://github.com/gabrieldonadel)) -- Added Projects section to the menu bar. ([#46](https://github.com/expo/orbit/pull/46), [#59](https://github.com/expo/orbit/pull/59) by [@gabrieldonadel](https://github.com/gabrieldonadel)) +- Added Projects section to the menu bar. ([#46](https://github.com/expo/orbit/pull/46), [#59](https://github.com/expo/orbit/pull/59), [#83](https://github.com/expo/orbit/pull/83) by [@gabrieldonadel](https://github.com/gabrieldonadel)) - Added support for login to Expo. ([#41](https://github.com/expo/orbit/pull/41), [#43](https://github.com/expo/orbit/pull/43), [#44](https://github.com/expo/orbit/pull/44), [#45](https://github.com/expo/orbit/pull/45), [#62](https://github.com/expo/orbit/pull/62), [#67](https://github.com/expo/orbit/pull/67) by [@gabrieldonadel](https://github.com/gabrieldonadel)) - Focus simulator/emulator window when launching an app. ([#75](https://github.com/expo/orbit/pull/75) by [@gabrieldonadel](https://github.com/gabrieldonadel)) - Add support for running iOS internal distribution apps on real devices. ([#79](https://github.com/expo/orbit/pull/79) by [@gabrieldonadel](https://github.com/gabrieldonadel)) diff --git a/apps/menu-bar/src/hooks/useGetPinnedApps.ts b/apps/menu-bar/src/hooks/useGetPinnedApps.ts index 2be14a6a..30956b88 100644 --- a/apps/menu-bar/src/hooks/useGetPinnedApps.ts +++ b/apps/menu-bar/src/hooks/useGetPinnedApps.ts @@ -9,7 +9,7 @@ export type PinnedApp = AppForPinnedListFragment & { }; export const useGetPinnedApps = () => { - const { data, loading } = useGetAppsForPinnedListQuery({ + const { data, loading, refetch } = useGetAppsForPinnedListQuery({ fetchPolicy: 'cache-and-network', }); @@ -49,6 +49,7 @@ export const useGetPinnedApps = () => { }, [accounts, pinnedApps]); return { + refetch, loading, apps, }; diff --git a/apps/menu-bar/src/hooks/usePopoverFocus.ts b/apps/menu-bar/src/hooks/usePopoverFocus.ts new file mode 100644 index 00000000..127af22f --- /dev/null +++ b/apps/menu-bar/src/hooks/usePopoverFocus.ts @@ -0,0 +1,12 @@ +import { useEffect } from 'react'; +import { DeviceEventEmitter } from 'react-native'; + +export function usePopoverFocusEffect(callback: () => void) { + useEffect(() => { + const listener = DeviceEventEmitter.addListener('popoverFocused', callback); + + return () => { + listener.remove(); + }; + }, [callback]); +} diff --git a/apps/menu-bar/src/hooks/useSafeDisplayDimensions.ts b/apps/menu-bar/src/hooks/useSafeDisplayDimensions.ts index fb3a423e..ed0ca89a 100644 --- a/apps/menu-bar/src/hooks/useSafeDisplayDimensions.ts +++ b/apps/menu-bar/src/hooks/useSafeDisplayDimensions.ts @@ -1,5 +1,7 @@ -import { useEffect, useRef, useState } from 'react'; -import { DeviceEventEmitter, Dimensions } from 'react-native'; +import { useCallback, useRef, useState } from 'react'; +import { Dimensions } from 'react-native'; + +import { usePopoverFocusEffect } from './usePopoverFocus'; export const SAFE_AREA_FACTOR = 0.85; @@ -7,16 +9,12 @@ export const useSafeDisplayDimensions = () => { const [dimensions, setDimensions] = useState(Dimensions.get('screen')); const attemptsToGetDimensions = useRef(0); - useEffect(() => { - const listener = DeviceEventEmitter.addListener('popoverFocused', () => { + usePopoverFocusEffect( + useCallback(() => { attemptsToGetDimensions.current = 0; setDimensions(Dimensions.get('screen')); - }); - - return () => { - listener.remove(); - }; - }, []); + }, []) + ); /** * Sometimes Dimensions.get('screen') returns height 0 after the computer goes to sleep diff --git a/apps/menu-bar/src/popover/Core.tsx b/apps/menu-bar/src/popover/Core.tsx index 49dbd29f..96e704ba 100644 --- a/apps/menu-bar/src/popover/Core.tsx +++ b/apps/menu-bar/src/popover/Core.tsx @@ -23,6 +23,7 @@ import { useDeepLinking } from '../hooks/useDeepLinking'; import { useDeviceAudioPreferences } from '../hooks/useDeviceAudioPreferences'; import { useGetPinnedApps } from '../hooks/useGetPinnedApps'; import { useListDevices } from '../hooks/useListDevices'; +import { usePopoverFocusEffect } from '../hooks/usePopoverFocus'; import { useSafeDisplayDimensions } from '../hooks/useSafeDisplayDimensions'; import { useFileHandler } from '../modules/FileHandlerModule'; import FilePicker from '../modules/FilePickerModule'; @@ -59,7 +60,9 @@ function Core(props: Props) { ); const [userPreferences, setUserPreferences] = useState(getUserPreferences()); - const { apps } = useGetPinnedApps(); + const { apps, refetch: refetchApps } = useGetPinnedApps(); + usePopoverFocusEffect(refetchApps); + const showProjectsSection = Boolean(apps?.length); const [status, setStatus] = useState(Status.LISTENING); diff --git a/apps/menu-bar/src/popover/ProjectsSection.tsx b/apps/menu-bar/src/popover/ProjectsSection.tsx index 630efd31..dd8b57aa 100644 --- a/apps/menu-bar/src/popover/ProjectsSection.tsx +++ b/apps/menu-bar/src/popover/ProjectsSection.tsx @@ -23,7 +23,10 @@ export const ProjectsSection = ({ apps }: Props) => { {}}> + + Linking.openURL('https://expo.dev/accounts/[account]/projects/[project]') + }> See all