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

desktop/plugins/public/navigation/components/AutoCompleteSheet.tsx

@@ -50,7 +50,7 @@ const SheetItemIcon = styled.span({
   padding: 8,
 });
 
-export default (props: Props) => {
+export function AutoCompleteSheet(props: Props) {
   const {providers, onHighlighted, onNavigate, query} = props;
   const lineItems = filterProvidersToLineItems(providers, query, MAX_ITEMS);
   lineItems.unshift({uri: query, matchPattern: query, icon: 'send'});
@@ -70,4 +70,4 @@ export default (props: Props) => {
       ))}
     </AutoCompleteSheetContainer>
   );
-};
+}

desktop/plugins/public/navigation/components/BookmarksSidebar.tsx

@@ -78,7 +78,7 @@ const alphabetizeBookmarkCompare = (b1: Bookmark, b2: Bookmark) => {
   return b1.uri < b2.uri ? -1 : b1.uri > b2.uri ? 1 : 0;
 };
 
-export default (props: Props) => {
+export function BookmarksSidebar(props: Props) {
   const {bookmarks, onNavigate, onRemove} = props;
   return (
     <DetailSidebar>
@@ -119,4 +119,4 @@ export default (props: Props) => {
       </Panel>
     </DetailSidebar>
   );
-};
+}

desktop/plugins/public/navigation/components/FavoriteButton.tsx

@@ -27,7 +27,7 @@ const FavoriteButtonContainer = styled.div({
   },
 });
 
-export default (props: Props) => {
+export function FavoriteButton(props: Props) {
   const {highlighted, onClick, ...iconButtonProps} = props;
   return (
     <FavoriteButtonContainer>
@@ -42,4 +42,4 @@ export default (props: Props) => {
       <IconButton outline icon="star" onClick={onClick} {...iconButtonProps} />
     </FavoriteButtonContainer>
   );
-};
+}

desktop/plugins/public/navigation/components/IconButton.tsx

@@ -43,23 +43,23 @@ const RippleEffect = styled.div({
   },
 });
 
-const IconButton = styled.div({
+const IconButtonContainer = styled.div({
   ':active': {
     animation: `${shrinkAnimation} .25s ease forwards`,
   },
 });
 
-export default function (props: Props) {
+export function IconButton(props: Props) {
   return (
     <RippleEffect>
-      <IconButton className="icon-button" onClick={props.onClick}>
+      <IconButtonContainer className="icon-button" onClick={props.onClick}>
         <Glyph
           name={props.icon}
           size={props.size}
           color={props.color}
           variant={props.outline ? 'outline' : 'filled'}
         />
-      </IconButton>
+      </IconButtonContainer>
     </RippleEffect>
   );
 }

desktop/plugins/public/navigation/components/NavigationInfoBox.tsx

@@ -160,7 +160,7 @@ const buildParameterTable = (parameters: Map<string, string>) => {
   );
 };
 
-export default (props: Props) => {
+export function NavigationInfoBox(props: Props) {
   const {
     uri,
     isBookmarked,
@@ -238,4 +238,4 @@ export default (props: Props) => {
       </NavigationInfoBoxContainer>
     );
   }
-};
+}

desktop/plugins/public/navigation/components/RequiredParametersDialog.tsx

@@ -28,7 +28,7 @@ type Props = {
   onSubmit: (uri: URI) => void;
 };
 
-export default (props: Props) => {
+export function RequiredParametersDialog(props: Props) {
   const {onHide, onSubmit, uri, requiredParameters} = props;
   const {isValid, values, setValuesArray} =
     useRequiredParameterFormValidator(requiredParameters);
@@ -95,4 +95,4 @@ export default (props: Props) => {
       </Layout.Container>
     </Modal>
   );
-};
+}

desktop/plugins/public/navigation/components/SaveBookmarkDialog.tsx

@@ -48,7 +48,7 @@ const NameInput = styled(Input)({
   height: 30,
 });
 
-export default (props: Props) => {
+export function SaveBookmarkDialog(props: Props) {
   const {edit, shouldShow, onHide, onRemove, onSubmit, uri} = props;
   const [commonName, setCommonName] = useState('');
   if (uri == null || !shouldShow) {
@@ -114,4 +114,4 @@ export default (props: Props) => {
       </Sheet>
     );
   }
-};
+}

desktop/plugins/public/navigation/components/SearchBar.tsx

@@ -57,7 +57,7 @@ const SearchInputContainer = styled.div({
   position: 'relative',
 });
 
-class SearchBar extends Component<Props, State> {
+export class SearchBar extends Component<Props, State> {
   state = {
     inputFocused: false,
     autoCompleteSheetOpen: false,
@@ -158,5 +158,3 @@ class SearchBar extends Component<Props, State> {
     );
   }
 }
-
-export default SearchBar;

desktop/plugins/public/navigation/components/Timeline.tsx

@@ -58,7 +58,7 @@ const NoData = styled(FlexCenter)({
   color: theme.textColorSecondary,
 });
 
-export default (props: Props) => {
+export function Timeline(props: Props) {
   const {bookmarks, events, onNavigate, onFavorite} = props;
   const timelineRef = useRef<HTMLDivElement>(null);
   return events.length === 0 ? (
@@ -92,4 +92,4 @@ export default (props: Props) => {
       </div>
     </TimelineContainer>
   );
-};
+}

desktop/plugins/public/navigation/components/index.tsx

@@ -7,12 +7,12 @@
  * @format
  */
 
-export {default as AutoCompleteSheet} from './AutoCompleteSheet';
-export {default as BookmarksSidebar} from './BookmarksSidebar';
-export {default as FavoriteButton} from './FavoriteButton';
-export {default as IconButton} from './IconButton';
-export {default as NavigationInfoBox} from './NavigationInfoBox';
-export {default as RequiredParametersDialog} from './RequiredParametersDialog';
-export {default as SaveBookmarkDialog} from './SaveBookmarkDialog';
-export {default as SearchBar} from './SearchBar';
-export {default as Timeline} from './Timeline';
+export {AutoCompleteSheet} from './AutoCompleteSheet';
+export {BookmarksSidebar} from './BookmarksSidebar';
+export {FavoriteButton} from './FavoriteButton';
+export {IconButton} from './IconButton';
+export {NavigationInfoBox} from './NavigationInfoBox';
+export {RequiredParametersDialog} from './RequiredParametersDialog';
+export {SaveBookmarkDialog} from './SaveBookmarkDialog';
+export {SearchBar} from './SearchBar';
+export {Timeline} from './Timeline';