Zoom Button now actually works! :D

src/FileView/FileView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import manageJss, { ComponentStyles } from "@microsoft/fast-jss-manager-react";
 import { FileViewClassNameContract, FileViewProps } from "./FileView.props";
 import {
@@ -81,12 +81,6 @@ const FileView: React.FC<FileViewProps> = ({
 }: FileViewProps) => {
   const { extension, has_gif } = fileData;
 
-  /**
-   * Helper function as ref to prevent it from updating after
-   * each re-render
-   */
-  const onMagnify = useRef<React.MouseEventHandler>(() => {});
-
   /**
    * Used to decide whether to show ImageViewer or VideoViewer
    */
@@ -103,9 +97,6 @@ const FileView: React.FC<FileViewProps> = ({
     };
   }, []);
 
-  // Callback used after mounting ImageViewer
-  const setZoomRef = (ref: React.MouseEventHandler) => (onMagnify.current = ref);
-
   return (
     <FVSidebarProvider fileData={fileData}>
       <RouteInterceptionManager>
@@ -123,13 +114,7 @@ const FileView: React.FC<FileViewProps> = ({
               position="absolute"
               jssStyleSheet={headerStyles}
               centerContent={<HeaderCenterContent />}
-              rightSideContent={
-                <HeaderRightContent
-                  onMagnify={onMagnify.current}
-                  isVideo={isVideo}
-                  hasGif={has_gif}
-                />
-              }
+              rightSideContent={<HeaderRightContent isVideo={isVideo} hasGif={has_gif} />}
             />
             <FVSidebarToggleButton />
           </motion.div>
@@ -137,7 +122,7 @@ const FileView: React.FC<FileViewProps> = ({
             {isVideo ? (
               <VideoViewer fileData={fileData} />
             ) : (
-              <ImageViewer fileData={fileData} zoomRef={setZoomRef} />
+              <ImageViewer fileData={fileData} />
             )}
           </ThumbnailViewer>
           <FVSidebar fileData={fileData} />

src/FileView/views/FVSidebar/FVSidebarContext.tsx

@@ -3,6 +3,7 @@ import { useMotionValue } from "framer-motion";
 import { ISidebarData } from "./FVSidebarContext.props";
 import { useWindowBreakpoint } from "../../../_DesignSystem";
 import { debounce } from "lodash-es";
+import EventEmitter from "onfire.js";
 
 /**
  * The width of the sidebar by default
@@ -20,6 +21,12 @@ const mobileBreakpoint = 850;
  */
 export const SidebarData = React.createContext<ISidebarData>(null);
 
+/**
+ * Alternative method of communicating across components.
+ * This does not re-render every component on each message it recieves.
+ */
+export const SidebarEventEmitter: EventEmitter = new EventEmitter();
+
 const FVSidebarProvider: React.ComponentType<{ fileData: Window["fileData"] }> = ({
   children,
   fileData,

src/FileView/views/HeaderContent/HeaderRightContent.props.ts

@@ -10,7 +10,6 @@ export interface HeaderRightContentClassNameContract {}
  */
 export interface HeaderRightContentProps
   extends ManagedClasses<HeaderRightContentClassNameContract> {
-  onMagnify?: React.MouseEventHandler;
   onShare?: React.MouseEventHandler;
   isVideo?: boolean;
   hasGif?: boolean;

src/FileView/views/HeaderContent/HeaderRightContent.tsx

@@ -2,7 +2,7 @@ import { ButtonAppearance } from "@microsoft/fast-components-react-msft";
 import { DesignSystem, baseLayerLuminance } from "@microsoft/fast-components-styles-msft";
 import { ComponentStyles } from "@microsoft/fast-jss-manager-react";
 import React, { useContext } from "react";
-import { FaAdjust, FaSearchPlus, FaShareAlt, FaVideo, FaImage } from "react-icons/fa";
+import { FaAdjust, FaSearchPlus, FaVideo, FaImage } from "react-icons/fa";
 import {
   Button,
   DesignToolkit,
@@ -13,7 +13,7 @@ import { ButtonClassNameContract } from "../../../_DesignSystem/Button/Button.pr
 import { HeaderRightContentProps } from "./HeaderRightContent.props";
 import { defaultButtonPos } from "../FVSidebar/FVSidebarToggleButton";
 import { motion } from "framer-motion";
-import { SidebarData } from "../FVSidebar/FVSidebarContext";
+import { SidebarData, SidebarEventEmitter } from "../FVSidebar/FVSidebarContext";
 import { Orientation } from "@microsoft/fast-web-utilities";
 import { TabItem } from "../../../_DesignSystem/Tabs/TabBar/TabBar.props";
 
@@ -26,6 +26,7 @@ const customThemeSwitcherStyle: ComponentStyles<ButtonClassNameContract, DesignS
       const luminance: number = baseLayerLuminance(des);
       return `rotate(${luminance > 0.5 ? 180 : 0}deg)`;
     },
+    marginRight: "60px",
     transition: "transform .3s",
     "&:active": {
       transition: "transform .3s, background .1s",
@@ -34,13 +35,13 @@ const customThemeSwitcherStyle: ComponentStyles<ButtonClassNameContract, DesignS
 };
 
 /**
- * We need to make space for the sidebar button.
- */
+ * // We need to make space for the sidebar button.
 const marginLeftStyleSheet: ComponentStyles<ButtonClassNameContract, DesignSystem> = {
   button: {
     marginRight: "60px",
   },
 };
+ */
 
 const tabBarItems: TabItem[] = [
   { icon: FaVideo, id: "video", title: "Video" },
@@ -48,7 +49,7 @@ const tabBarItems: TabItem[] = [
 ];
 
 export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> = React.memo(
-  ({ onMagnify, onShare, isVideo, hasGif }) => {
+  ({ onShare, isVideo, hasGif }) => {
     const themeCtx = useContext(DesignToolkit);
     const { sidebarPos, isSidebarFloating } = useContext(SidebarData);
 
@@ -64,6 +65,8 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
       [sidebarPos, isSidebarFloating]
     );
 
+    const toggleZoom = () => SidebarEventEmitter.emit("toggle-zoom");
+
     return (
       <motion.div style={{ x: headerRightPosX }}>
         {isVideo && hasGif && (
@@ -80,7 +83,7 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
           <Button
             appearance={ButtonAppearance.lightweight}
             icon={FaSearchPlus}
-            onClick={onMagnify}
+            onClick={toggleZoom}
           />
         )}
         <Button
@@ -89,12 +92,14 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
           onClick={themeCtx.toggleTheme}
           jssStyleSheet={customThemeSwitcherStyle}
         />
+        {/*
         <Button
           appearance={ButtonAppearance.lightweight}
           icon={FaShareAlt}
           onClick={onShare}
           jssStyleSheet={marginLeftStyleSheet}
         />
+        */}
       </motion.div>
     );
   }

src/FileView/views/ImageViewer/ImageViewer.tsx

@@ -21,7 +21,7 @@ import { headerHeight, useRouteInterception } from "../../../_DesignSystem";
 import { classNames } from "@microsoft/fast-web-utilities";
 import ImageViewerSlider from "./ImageViewerSlider";
 import { TweenProps, spring } from "popmotion";
-import { SidebarData } from "../FVSidebar/FVSidebarContext";
+import { SidebarData, SidebarEventEmitter } from "../FVSidebar/FVSidebarContext";
 import { ThumbnailContext, ssrContainer } from "../ThumbnailViewer/ThumbnailViewer";
 
 const applyCenteredAbsolute: CSSRules<DesignSystem> = {
@@ -252,10 +252,11 @@ const ImageViewer: React.ComponentType<ImageViewerProps> = ({
    * Calling ref function prop to pass on the handleToggle
    * function as a way to externally toggle the transform mode
    */
-  useLayoutEffect(() => {
-    zoomRef(() => setTransformState(!inTransformMode));
-    return () => zoomRef(() => {});
-  }, [inTransformMode, zoomRef]);
+  useEffect(() => {
+    const toggleZoom = () => setTransformState(!inTransformMode);
+    SidebarEventEmitter.on("toggle-zoom", toggleZoom);
+    return () => SidebarEventEmitter.off("toggle-zoom", toggleZoom);
+  }, [inTransformMode]);
 
   /**
    * To keep the image centered if it is bigger than the viewport