Refactor plugin to make it fast refreshable
Summary: Refactored Navigation plugin to make it fast-refreshable: moved the main component into a separate file and exported all components as named functions. Without these changes every change of UI triggered full reload. Reviewed By: timur-valiev Differential Revision: D29814077 fbshipit-source-id: 5285bdc5f14a5163f9501c0d45a3affefb08fc8e
This commit is contained in:
Anton Nikolaev
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
a78b6124d7
commit
d782f19001
@@ -8,248 +8,5 @@
|
||||
* @flow strict-local
|
||||
*/
|
||||
|
||||
import {bufferToBlob} from 'flipper';
|
||||
import {
|
||||
BookmarksSidebar,
|
||||
SaveBookmarkDialog,
|
||||
SearchBar,
|
||||
Timeline,
|
||||
RequiredParametersDialog,
|
||||
} from './components';
|
||||
import {
|
||||
removeBookmarkFromDB,
|
||||
readBookmarksFromDB,
|
||||
writeBookmarkToDB,
|
||||
} from './util/indexedDB';
|
||||
import {
|
||||
appMatchPatternsToAutoCompleteProvider,
|
||||
bookmarksToAutoCompleteProvider,
|
||||
} from './util/autoCompleteProvider';
|
||||
import {getAppMatchPatterns} from './util/appMatchPatterns';
|
||||
import {getRequiredParameters, filterOptionalParameters} from './util/uri';
|
||||
import {
|
||||
Bookmark,
|
||||
NavigationEvent,
|
||||
AppMatchPattern,
|
||||
URI,
|
||||
RawNavigationEvent,
|
||||
} from './types';
|
||||
import React, {useMemo} from 'react';
|
||||
import {
|
||||
PluginClient,
|
||||
createState,
|
||||
useValue,
|
||||
usePlugin,
|
||||
Layout,
|
||||
renderReactRoot,
|
||||
} from 'flipper-plugin';
|
||||
|
||||
export type State = {
|
||||
shouldShowSaveBookmarkDialog: boolean;
|
||||
shouldShowURIErrorDialog: boolean;
|
||||
saveBookmarkURI: URI | null;
|
||||
requiredParameters: Array<string>;
|
||||
};
|
||||
|
||||
type Events = {
|
||||
nav_event: RawNavigationEvent;
|
||||
};
|
||||
|
||||
type Methods = {
|
||||
navigate_to(params: {url: string}): Promise<void>;
|
||||
};
|
||||
|
||||
export type NavigationPlugin = ReturnType<typeof plugin>;
|
||||
|
||||
export function plugin(client: PluginClient<Events, Methods>) {
|
||||
const bookmarks = createState(new Map<URI, Bookmark>(), {
|
||||
persist: 'bookmarks',
|
||||
});
|
||||
const navigationEvents = createState<NavigationEvent[]>([], {
|
||||
persist: 'navigationEvents',
|
||||
});
|
||||
const appMatchPatterns = createState<AppMatchPattern[]>([], {
|
||||
persist: 'appMatchPatterns',
|
||||
});
|
||||
const currentURI = createState('');
|
||||
const shouldShowSaveBookmarkDialog = createState(false);
|
||||
const saveBookmarkURI = createState<null | string>(null);
|
||||
|
||||
client.onMessage('nav_event', async (payload) => {
|
||||
const navigationEvent: NavigationEvent = {
|
||||
uri: payload.uri === undefined ? null : decodeURIComponent(payload.uri),
|
||||
date: payload.date ? new Date(payload.date) : new Date(),
|
||||
className: payload.class === undefined ? null : payload.class,
|
||||
screenshot: null,
|
||||
};
|
||||
|
||||
if (navigationEvent.uri) currentURI.set(navigationEvent.uri);
|
||||
|
||||
navigationEvents.update((draft) => {
|
||||
draft.unshift(navigationEvent);
|
||||
});
|
||||
|
||||
const screenshot: Buffer = await client.device.realDevice.screenshot();
|
||||
const blobURL = URL.createObjectURL(bufferToBlob(screenshot));
|
||||
// this process is async, make sure we update the correct one..
|
||||
const navigationEventIndex = navigationEvents
|
||||
.get()
|
||||
.indexOf(navigationEvent);
|
||||
if (navigationEventIndex !== -1) {
|
||||
navigationEvents.update((draft) => {
|
||||
draft[navigationEventIndex].screenshot = blobURL;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
getAppMatchPatterns(client.appId, client.device.realDevice)
|
||||
.then((patterns) => {
|
||||
appMatchPatterns.set(patterns);
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('[Navigation] Failed to find appMatchPatterns', e);
|
||||
});
|
||||
|
||||
readBookmarksFromDB().then((bookmarksData) => {
|
||||
bookmarks.set(bookmarksData);
|
||||
});
|
||||
|
||||
function navigateTo(query: string) {
|
||||
const filteredQuery = filterOptionalParameters(query);
|
||||
currentURI.set(filteredQuery);
|
||||
const params = getRequiredParameters(filteredQuery);
|
||||
if (params.length === 0) {
|
||||
if (client.appName === 'Facebook' && client.device.os === 'iOS') {
|
||||
// use custom navigate_to event for Wilde
|
||||
client.send('navigate_to', {
|
||||
url: filterOptionalParameters(filteredQuery),
|
||||
});
|
||||
} else {
|
||||
client.device.realDevice.navigateToLocation(
|
||||
filterOptionalParameters(filteredQuery),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
renderReactRoot((unmount) => (
|
||||
<RequiredParametersDialog
|
||||
onHide={unmount}
|
||||
uri={filteredQuery}
|
||||
requiredParameters={params}
|
||||
onSubmit={navigateTo}
|
||||
/>
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
function onFavorite(uri: string) {
|
||||
shouldShowSaveBookmarkDialog.set(true);
|
||||
saveBookmarkURI.set(uri);
|
||||
}
|
||||
|
||||
function addBookmark(bookmark: Bookmark) {
|
||||
const newBookmark = {
|
||||
uri: bookmark.uri,
|
||||
commonName: bookmark.commonName,
|
||||
};
|
||||
|
||||
bookmarks.update((draft) => {
|
||||
draft.set(newBookmark.uri, newBookmark);
|
||||
});
|
||||
writeBookmarkToDB(newBookmark);
|
||||
}
|
||||
|
||||
function removeBookmark(uri: string) {
|
||||
bookmarks.update((draft) => {
|
||||
draft.delete(uri);
|
||||
});
|
||||
removeBookmarkFromDB(uri);
|
||||
}
|
||||
|
||||
return {
|
||||
navigateTo,
|
||||
onFavorite,
|
||||
addBookmark,
|
||||
removeBookmark,
|
||||
bookmarks,
|
||||
saveBookmarkURI,
|
||||
shouldShowSaveBookmarkDialog,
|
||||
appMatchPatterns,
|
||||
navigationEvents,
|
||||
currentURI,
|
||||
getAutoCompleteAppMatchPatterns(
|
||||
query: string,
|
||||
bookmarks: Map<string, Bookmark>,
|
||||
appMatchPatterns: AppMatchPattern[],
|
||||
limit: number,
|
||||
): AppMatchPattern[] {
|
||||
const q = query.toLowerCase();
|
||||
const results: AppMatchPattern[] = [];
|
||||
for (const item of appMatchPatterns) {
|
||||
if (
|
||||
!bookmarks.has(item.pattern) &&
|
||||
(item.className.toLowerCase().includes(q) ||
|
||||
item.pattern.toLowerCase().includes(q))
|
||||
) {
|
||||
results.push(item);
|
||||
if (--limit < 1) break;
|
||||
}
|
||||
}
|
||||
return results;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function Component() {
|
||||
const instance = usePlugin(plugin);
|
||||
const bookmarks = useValue(instance.bookmarks);
|
||||
const appMatchPatterns = useValue(instance.appMatchPatterns);
|
||||
const saveBookmarkURI = useValue(instance.saveBookmarkURI);
|
||||
const shouldShowSaveBookmarkDialog = useValue(
|
||||
instance.shouldShowSaveBookmarkDialog,
|
||||
);
|
||||
const currentURI = useValue(instance.currentURI);
|
||||
const navigationEvents = useValue(instance.navigationEvents);
|
||||
|
||||
const autoCompleteProviders = useMemo(
|
||||
() => [
|
||||
bookmarksToAutoCompleteProvider(bookmarks),
|
||||
appMatchPatternsToAutoCompleteProvider(appMatchPatterns),
|
||||
],
|
||||
[bookmarks, appMatchPatterns],
|
||||
);
|
||||
return (
|
||||
<Layout.Container>
|
||||
<SearchBar
|
||||
providers={autoCompleteProviders}
|
||||
bookmarks={bookmarks}
|
||||
onNavigate={instance.navigateTo}
|
||||
onFavorite={instance.onFavorite}
|
||||
uriFromAbove={currentURI}
|
||||
/>
|
||||
<Timeline
|
||||
bookmarks={bookmarks}
|
||||
events={navigationEvents}
|
||||
onNavigate={instance.navigateTo}
|
||||
onFavorite={instance.onFavorite}
|
||||
/>
|
||||
<BookmarksSidebar
|
||||
bookmarks={bookmarks}
|
||||
onRemove={instance.removeBookmark}
|
||||
onNavigate={instance.navigateTo}
|
||||
/>
|
||||
<SaveBookmarkDialog
|
||||
shouldShow={shouldShowSaveBookmarkDialog}
|
||||
uri={saveBookmarkURI}
|
||||
onHide={() => {
|
||||
instance.shouldShowSaveBookmarkDialog.set(false);
|
||||
}}
|
||||
edit={saveBookmarkURI != null ? bookmarks.has(saveBookmarkURI) : false}
|
||||
onSubmit={instance.addBookmark}
|
||||
onRemove={instance.removeBookmark}
|
||||
/>
|
||||
</Layout.Container>
|
||||
);
|
||||
}
|
||||
|
||||
/* @scarf-info: do not remove, more info: https://fburl.com/scarf */
|
||||
/* @scarf-generated: flipper-plugin index.js.template 0bfa32e5-fb15-4705-81f8-86260a1f3f8e */
|
||||
export {plugin, NavigationPlugin} from './plugin';
|
||||
export {Component} from './Component';
|
||||
|
||||
Reference in New Issue
Block a user