[devtools] port devtools-indicator position to dispatcher

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

@@ -15,8 +15,8 @@ import {
   ACTION_ERROR_OVERLAY_CLOSE,
   STORAGE_KEY_POSITION,
   ACTION_DEVTOOLS_PANEL_CLOSE,
+  ACTION_DEVTOOLS_INDICATOR_POSITION,
 } from '../../shared'
-import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
 
 export const INDICATOR_PADDING = 20
@@ -35,9 +35,8 @@ export function DevToolsIndicator({
   scale: DevToolsScale
 }) {
   const [open, setOpen] = useState(false)
-  const [position, setPosition] = useState(getInitialPosition())
 
-  const [vertical, horizontal] = position.split('-', 2)
+  const [vertical, horizontal] = state.indicatorPosition.split('-', 2)
 
   const toggleErrorOverlay = () => {
     dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
@@ -67,10 +66,13 @@ export function DevToolsIndicator({
       <Draggable
         padding={INDICATOR_PADDING}
         onDragStart={() => setOpen(false)}
-        position={position}
+        position={state.indicatorPosition}
         setPosition={(p) => {
+          dispatch({
+            type: ACTION_DEVTOOLS_INDICATOR_POSITION,
+            indicatorPosition: p,
+          })
           localStorage.setItem(STORAGE_KEY_POSITION, p)
-          setPosition(p)
         }}
       >
         {/* Trigger */}

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -32,6 +32,7 @@ export interface OverlayState {
   routerType: 'pages' | 'app'
   isErrorOverlayOpen: boolean
   isDevToolsPanelOpen: boolean
+  indicatorPosition: Corners
 }
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
 
@@ -59,6 +60,8 @@ export const ACTION_DEVTOOLS_PANEL_OPEN = 'devtools-panel-open'
 export const ACTION_DEVTOOLS_PANEL_CLOSE = 'devtools-panel-close'
 export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'devtools-panel-toggle'
 
+export const ACTION_DEVTOOLS_INDICATOR_POSITION = 'dev-tools-indicator-position'
+
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
 export const STORAGE_KEY_DEVTOOLS_PANEL_POSITION =
@@ -142,6 +145,11 @@ export interface DevToolsPanelToggleAction {
   type: typeof ACTION_DEVTOOLS_PANEL_TOGGLE
 }
 
+export interface DevToolsIndicatorPositionAction {
+  type: typeof ACTION_DEVTOOLS_INDICATOR_POSITION
+  indicatorPosition: Corners
+}
+
 export type DispatcherEvent =
   | BuildOkAction
   | BuildErrorAction
@@ -163,6 +171,7 @@ export type DispatcherEvent =
   | DevToolsPanelOpenAction
   | DevToolsPanelCloseAction
   | DevToolsPanelToggleAction
+  | DevToolsIndicatorPositionAction
 
 const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX =
   // 1st group: v8
@@ -202,6 +211,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
   isDevToolsPanelOpen: false,
+  indicatorPosition: 'bottom-left',
 }
 
 function getInitialState(
@@ -373,6 +383,9 @@ export function useErrorOverlayReducer(
         case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }
+        case ACTION_DEVTOOLS_INDICATOR_POSITION: {
+          return { ...state, indicatorPosition: action.indicatorPosition }
+        }
         default: {
           return state
         }