[menu-bar] Refetch pinned apps on menu bar focus (#83)

* [menu-bar] Refetch pinned apps on  menu bar focus

* Add changelog entry

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))

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,
   };

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]);
+}

apps/menu-bar/src/hooks/useSafeDisplayDimensions.ts

@@ -1,22 +1,20 @@
-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;
 
 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

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<UserPreferences>(getUserPreferences());
 
-  const { apps } = useGetPinnedApps();
+  const { apps, refetch: refetchApps } = useGetPinnedApps();
+  usePopoverFocusEffect(refetchApps);
+
   const showProjectsSection = Boolean(apps?.length);
 
   const [status, setStatus] = useState(Status.LISTENING);

apps/menu-bar/src/popover/ProjectsSection.tsx

@@ -23,7 +23,10 @@ export const ProjectsSection = ({ apps }: Props) => {
         <SectionHeader
           label="Projects"
           accessoryRight={
-            <TouchableOpacity onPress={() => {}}>
+            <TouchableOpacity
+              onPress={() =>
+                Linking.openURL('https://expo.dev/accounts/[account]/projects/[project]')
+              }>
               <Text size="tiny" color="default">
                 See all
               </Text>