Replace connect with hooks in 3 components

replayio · Aug 15, 2022 · ffdbebe · ffdbebe
1 parent 048e1b2
commit ffdbebe
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 73 deletions.
diff --git a/src/ui/components/Timeline/EventMarker.tsx b/src/ui/components/Timeline/EventMarker.tsx
@@ -1,17 +1,13 @@
 import React from "react";
-import { connect, ConnectedProps } from "react-redux";
 import { selectors } from "ui/reducers";
-import { UIState } from "ui/state";
 import { ReplayEvent } from "ui/state/app";
+import { useAppSelector } from "ui/setup/hooks";
 import Marker from "./Marker";
 
-function EventMarker({
-  event,
-  currentTime,
-  isPrimaryHighlighted,
-  zoomRegion,
-  overlayWidth,
-}: EventMarkerProps) {
+export default function EventMarker({ event, isPrimaryHighlighted }: EventMarkerProps) {
+  const zoomRegion = useAppSelector(selectors.getZoomRegion);
+  const currentTime = useAppSelector(selectors.getCurrentTime);
+  const overlayWidth = useAppSelector(selectors.getTimelineDimensions).width;
   return (
     <Marker
       point={event.point}
@@ -26,16 +22,7 @@ function EventMarker({
   );
 }
 
-const connector = connect((state: UIState) => ({
-  zoomRegion: selectors.getZoomRegion(state),
-  currentTime: selectors.getCurrentTime(state),
-  overlayWidth: selectors.getTimelineDimensions(state).width,
-}));
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-type EventMarkerProps = PropsFromRedux & {
+type EventMarkerProps = {
   event: ReplayEvent;
   isPrimaryHighlighted: boolean;
 };
-
-export default connector(EventMarker);
diff --git a/src/ui/components/Timeline/MessageMarker.tsx b/src/ui/components/Timeline/MessageMarker.tsx
@@ -1,20 +1,19 @@
 import React from "react";
-import { connect, ConnectedProps } from "react-redux";
-import { actions } from "ui/actions";
+import { useAppSelector } from "ui/setup/hooks";
 import { selectors } from "ui/reducers";
-import { UIState } from "ui/state";
 import Marker from "./Marker";
 
-function MessageMarker({
+export default function MessageMarker({
   message,
-  currentTime,
   isPrimaryHighlighted,
   isSecondaryHighlighted,
-  zoomRegion,
-  overlayWidth,
 }: MessageMarkerProps) {
   const { executionPoint, executionPointTime, frame, pauseId, executionPointHasFrames } = message;
 
+  const zoomRegion = useAppSelector(selectors.getZoomRegion);
+  const currentTime = useAppSelector(selectors.getCurrentTime);
+  const overlayWidth = useAppSelector(selectors.getTimelineDimensions).width;
+
   return (
     <Marker
       point={executionPoint}
@@ -31,17 +30,8 @@ function MessageMarker({
   );
 }
 
-const connector = connect((state: UIState) => ({
-  zoomRegion: selectors.getZoomRegion(state),
-  currentTime: selectors.getCurrentTime(state),
-  overlayWidth: selectors.getTimelineDimensions(state).width,
-}));
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-type MessageMarkerProps = PropsFromRedux & {
+type MessageMarkerProps = {
   message: any;
   isPrimaryHighlighted: boolean;
   isSecondaryHighlighted: boolean;
 };
-
-export default connector(MessageMarker);
diff --git a/src/ui/components/shared/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx b/src/ui/components/shared/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx
@@ -1,9 +1,8 @@
-import React, { ChangeEvent, useEffect, useState } from "react";
-import { connect, ConnectedProps } from "react-redux";
+import React, { ChangeEvent, useState } from "react";
 import * as actions from "ui/actions/app";
 import hooks from "ui/hooks";
+import { useAppSelector, useAppDispatch } from "ui/setup/hooks";
 import * as selectors from "ui/reducers/app";
-import { UIState } from "ui/state";
 import { WorkspaceUser } from "ui/types";
 import { validateEmail } from "ui/utils/helpers";
 import { TextInput } from "../Forms";
@@ -130,7 +129,6 @@ const settings: Settings<
     settings?: any;
     isAdmin: boolean;
     workspaceId: string;
-    hideModal: PropsFromRedux["hideModal"];
   }
 > = [
   {
@@ -146,13 +144,13 @@ const settings: Settings<
   {
     title: "Team Members",
     icon: "group",
-    component: function TeamMembers({ isAdmin, workspaceId, settings, ...rest }) {
+    component: function TeamMembers({ isAdmin, workspaceId }) {
       const { members } = hooks.useGetWorkspaceMembers(workspaceId);
 
       return (
-        <div className="flex flex-col flex-grow space-y-3">
+        <div className="flex flex-grow flex-col space-y-3">
           <div>{`Manage members here so that everyone who belongs to this team can see each other's replays.`}</div>
-          <WorkspaceForm {...rest} members={members} />
+          <WorkspaceForm members={members} />
           <div className="text-xs font-semibold uppercase">{`Members`}</div>
           <div className="flex-grow overflow-y-auto">
             <div className="workspace-members-container flex flex-col space-y-1.5">
@@ -180,7 +178,8 @@ const settings: Settings<
   {
     title: "Delete Team",
     icon: "cancel",
-    component: function DeleteTeam({ hideModal, workspaceId }) {
+    component: function DeleteTeam({ workspaceId }) {
+      const dispatch = useAppDispatch();
       const redirectToTeam = useRedirectToTeam(true);
       const updateDefaultWorkspace = hooks.useUpdateDefaultWorkspace();
       const deleteWorkspace = hooks.useDeleteWorkspace();
@@ -196,7 +195,7 @@ const settings: Settings<
             deleteWorkspace({
               variables: { workspaceId: workspaceId, shouldDeleteRecordings: true },
             });
-            hideModal();
+            dispatch(actions.hideModal());
             updateDefaultWorkspace({ variables: { workspaceId: null } });
             redirectToTeam("me");
           }
@@ -221,24 +220,24 @@ const settings: Settings<
   },
 ];
 
-function WorkspaceSettingsModal({ view, ...rest }: PropsFromRedux) {
+export default function WorkspaceSettingsModal() {
+  const selectedTab = useAppSelector(state => {
+    const opts = selectors.getModalOptions(state);
+    const view = opts && "view" in opts ? opts.view : null;
+    return (
+      view &&
+      {
+        billing: "Billing",
+        members: "Team Members",
+        api: "API Keys",
+      }[view]
+    );
+  });
   const workspaceId = useGetTeamIdFromRoute();
-  const [selectedTab, setTab] = useState<string>();
   const { members } = hooks.useGetWorkspaceMembers(workspaceId);
   const { workspace } = hooks.useGetWorkspace(workspaceId);
   const { userId: localUserId } = hooks.useGetUserId();
 
-  useEffect(() => {
-    if (view) {
-      const views: Record<string, string> = {
-        billing: "Billing",
-        members: "Team Members",
-        api: "API Keys",
-      };
-      setTab(views[view]);
-    }
-  }, [view]);
-
   if (!(workspaceId && workspace)) {
     return null;
   }
@@ -263,7 +262,7 @@ function WorkspaceSettingsModal({ view, ...rest }: PropsFromRedux) {
     <SettingsModal
       hiddenTabs={hiddenTabs}
       tab={tab}
-      panelProps={{ isAdmin, workspaceId, ...rest }}
+      panelProps={{ isAdmin, workspaceId }}
       settings={settings}
       size="lg"
       title={
@@ -276,17 +275,3 @@ function WorkspaceSettingsModal({ view, ...rest }: PropsFromRedux) {
     />
   );
 }
-
-const connector = connect(
-  (state: UIState) => {
-    const opts = selectors.getModalOptions(state);
-    const view = opts && "view" in opts ? opts.view : null;
-    return { view };
-  },
-  {
-    hideModal: actions.hideModal,
-  }
-);
-export type PropsFromRedux = ConnectedProps<typeof connector>;
-
-export default connector(WorkspaceSettingsModal);