Scroll sidebar when moving a column as well

brunolemos · brunolemos · commit a4bc0362b3c7 · 2019-04-13T21:20:33.000-03:00
diff --git a/packages/components/src/components/cards/EventCards.tsx b/packages/components/src/components/cards/EventCards.tsx
@@ -75,7 +75,7 @@ export const EventCards = React.memo((props: EventCardsProps) => {
     getVisibleItemIndex,
     items: events,
   })
-  const focusedColumnId = useFocusedColumn()
+  const { focusedColumnId } = useFocusedColumn()
   const _hasSelectedItem = !!selectedItemId && column.id === focusedColumnId
   const selectedItem =
     _hasSelectedItem && events.find(event => event.id === selectedItemId)
diff --git a/packages/components/src/components/cards/IssueOrPullRequestCards.tsx b/packages/components/src/components/cards/IssueOrPullRequestCards.tsx
@@ -84,7 +84,7 @@ export const IssueOrPullRequestCards = React.memo(
       getVisibleItemIndex,
       items,
     })
-    const focusedColumnId = useFocusedColumn()
+    const { focusedColumnId } = useFocusedColumn()
     const _hasSelectedItem = !!selectedItemId && column.id === focusedColumnId
     const selectedItem =
       _hasSelectedItem && items.find(item => item.id === selectedItemId)
diff --git a/packages/components/src/components/cards/NotificationCards.tsx b/packages/components/src/components/cards/NotificationCards.tsx
@@ -75,7 +75,7 @@ export const NotificationCards = React.memo((props: NotificationCardsProps) => {
     getVisibleItemIndex,
     items: notifications,
   })
-  const focusedColumnId = useFocusedColumn()
+  const { focusedColumnId } = useFocusedColumn()
   const _hasSelectedItem = !!selectedItemId && column.id === focusedColumnId
   const selectedItem =
     _hasSelectedItem &&
diff --git a/packages/components/src/components/columns/ColumnOptions.tsx b/packages/components/src/components/columns/ColumnOptions.tsx
@@ -711,8 +711,11 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => {
           }
           onPress={() =>
             moveColumn({
+              animated: appViewMode === 'multi-column',
               columnId: column.id,
               columnIndex: columnIndex - 1,
+              highlight: appViewMode === 'multi-column',
+              scrollTo: true,
             })
           }
         />
@@ -730,8 +733,11 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => {
           }
           onPress={() =>
             moveColumn({
+              animated: appViewMode === 'multi-column',
               columnId: column.id,
               columnIndex: columnIndex + 1,
+              highlight: appViewMode === 'multi-column',
+              scrollTo: true,
             })
           }
         />
diff --git a/packages/components/src/components/columns/ColumnSwitcher.tsx b/packages/components/src/components/columns/ColumnSwitcher.tsx
@@ -39,11 +39,13 @@ const styles = StyleSheet.create({
 export function ColumnSwitcher() {
   const columnIds = useReduxState(selectors.columnIdsSelector)
   const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
-  const focusedColumnId = useFocusedColumn() || columnIds[0]
+  const { focusedColumnId: _focusedColumnId } = useFocusedColumn()
   const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
   const { appViewMode } = useAppViewMode()
   const { sizename } = useAppLayout()
 
+  const focusedColumnId = _focusedColumnId || columnIds[0]
+
   if (!(appViewMode === 'single-column' && shouldRenderFAB(sizename)))
     return null
   if (currentOpenedModal) return null
diff --git a/packages/components/src/components/columns/ColumnsRenderer.tsx b/packages/components/src/components/columns/ColumnsRenderer.tsx
@@ -18,7 +18,9 @@ export function ColumnsRenderer() {
 
   const { sizename } = useAppLayout()
   const { appViewMode } = useAppViewMode()
-  const focusedColumnId = useFocusedColumn() || columnIds[0]
+  const { focusedColumnId: _focusedColumnId } = useFocusedColumn()
+
+  const focusedColumnId = _focusedColumnId || columnIds[0]
 
   if (appViewMode === 'single-column') {
     const shouldRenderFixedColumnOptions = sizename >= '4-x-large'
diff --git a/packages/components/src/components/context/ColumnFocusContext.tsx b/packages/components/src/components/context/ColumnFocusContext.tsx
@@ -9,20 +9,36 @@ export interface ColumnFocusProviderProps {
   children?: React.ReactNode
 }
 
-export type ColumnFocusProviderState = string | null
+export interface ColumnFocusProviderState {
+  focusedColumnId: string | null
+  focusedColumnIndex: number
+}
 
+const defaultValue: ColumnFocusProviderState = {
+  focusedColumnId: null,
+  focusedColumnIndex: -1,
+}
 export const ColumnFocusContext = React.createContext<ColumnFocusProviderState>(
-  null,
+  defaultValue,
 )
 
 export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
   const store = useReduxStore()
-  const [columnId, setColumnId] = useState<ColumnFocusProviderState>(null)
+  const [value, setValue] = useState<ColumnFocusProviderState>(defaultValue)
 
   useEmitter(
     'FOCUS_ON_COLUMN',
     payload => {
-      setColumnId(payload.columnId || null)
+      const state = store.getState()
+      const columnIds = selectors.columnIdsSelector(state)
+
+      const focusedColumnId = payload.columnId || null
+      const focusedColumnIndex =
+        columnIds && focusedColumnId
+          ? columnIds.findIndex(id => id === focusedColumnId)
+          : -1
+
+      setValue({ focusedColumnId, focusedColumnIndex })
     },
     [],
   )
@@ -33,7 +49,9 @@ export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
       const state = store.getState()
       const columnIds = selectors.columnIdsSelector(state)
       const focusedColumnIndex = columnIds
-        ? columnIds.findIndex(id => id === (columnId || columnIds[0]))
+        ? columnIds.findIndex(
+            id => id === (value.focusedColumnId || columnIds[0]),
+          )
         : -1
 
       const previousColumnIndex = Math.max(
@@ -47,7 +65,7 @@ export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
         columnIndex: previousColumnIndex,
       })
     },
-    [columnId],
+    [value.focusedColumnId],
   )
 
   useEmitter(
@@ -56,7 +74,9 @@ export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
       const state = store.getState()
       const columnIds = selectors.columnIdsSelector(state)
       const focusedColumnIndex = columnIds
-        ? columnIds.findIndex(id => id === (columnId || columnIds[0]))
+        ? columnIds.findIndex(
+            id => id === (value.focusedColumnId || columnIds[0]),
+          )
         : -1
 
       const nextColumnIndex = Math.max(
@@ -70,27 +90,33 @@ export function ColumnFocusProvider(props: ColumnFocusProviderProps) {
         columnIndex: nextColumnIndex,
       })
     },
-    [columnId],
+    [value.focusedColumnId],
   )
 
   useEmitter(
     'SCROLL_DOWN_COLUMN',
     payload => {
-      setColumnId(payload.columnId || null)
+      setValue({
+        focusedColumnId: payload.columnId || null,
+        focusedColumnIndex: payload.columnIndex,
+      })
     },
     [],
   )
 
   useEmitter(
     'SCROLL_UP_COLUMN',
     payload => {
-      setColumnId(payload.columnId || null)
+      setValue({
+        focusedColumnId: payload.columnId || null,
+        focusedColumnIndex: payload.columnIndex,
+      })
     },
     [],
   )
 
   return (
-    <ColumnFocusContext.Provider value={columnId}>
+    <ColumnFocusContext.Provider value={value}>
       {props.children}
     </ColumnFocusContext.Provider>
   )
diff --git a/packages/components/src/components/layout/Sidebar.tsx b/packages/components/src/components/layout/Sidebar.tsx
@@ -72,7 +72,11 @@ export const Sidebar = React.memo((props: SidebarProps) => {
   const closeAllModals = useReduxAction(actions.closeAllModals)
   const replaceModal = useReduxAction(actions.replaceModal)
 
-  const focusedColumnId = useFocusedColumn() || columnIds[0]
+  const {
+    focusedColumnId: _focusedColumnId,
+    focusedColumnIndex,
+  } = useFocusedColumn()
+  const focusedColumnId = _focusedColumnId || columnIds[0]
 
   useEffect(() => {
     if (!(flatListRef.current && focusedColumnId)) return
@@ -82,7 +86,7 @@ export const Sidebar = React.memo((props: SidebarProps) => {
       item: focusedColumnId,
       viewPosition: 0.5,
     })
-  }, [focusedColumnId, flatListRef.current])
+  }, [focusedColumnId, focusedColumnIndex, flatListRef.current])
 
   const small = sizename === '1-small'
   const large = sizename >= '3-large'
diff --git a/packages/components/src/libs/emitter/index.ts b/packages/components/src/libs/emitter/index.ts
@@ -24,8 +24,8 @@ export interface EmitterTypes {
     highlight?: boolean
     scrollTo?: boolean
   }
-  SCROLL_DOWN_COLUMN: { columnId: string }
-  SCROLL_UP_COLUMN: { columnId: string }
+  SCROLL_DOWN_COLUMN: { columnId: string; columnIndex: number }
+  SCROLL_UP_COLUMN: { columnId: string; columnIndex: number }
 }
 
 const _emitter = new EventEmitter()
diff --git a/packages/components/src/redux/actions/columns.ts b/packages/components/src/redux/actions/columns.ts
@@ -9,6 +9,7 @@ import {
   GitHubNotificationSubjectType,
   NotificationColumnFilters,
 } from '@devhub/core'
+import { EmitterTypes } from '../../libs/emitter'
 import { createAction } from '../helpers'
 
 export function replaceColumnsAndSubscriptions(
@@ -42,7 +43,12 @@ export function deleteColumn(payload: {
   return createAction('DELETE_COLUMN', payload)
 }
 
-export function moveColumn(payload: { columnId: string; columnIndex: number }) {
+export function moveColumn(
+  payload: {
+    columnId: string
+    columnIndex: number
+  } & EmitterTypes['FOCUS_ON_COLUMN'],
+) {
   return createAction('MOVE_COLUMN', payload)
 }
 
diff --git a/packages/components/src/redux/sagas/columns.ts b/packages/components/src/redux/sagas/columns.ts
@@ -2,6 +2,7 @@ import { all, delay, put, select, takeLatest } from 'redux-saga/effects'
 
 import {
   ActivityColumnSubscription,
+  AppViewMode,
   Column,
   ColumnsAndSubscriptions,
   ColumnSubscription,
@@ -104,6 +105,8 @@ function* onAddColumn(
 function* onMoveColumn(
   action: ExtractActionFromActionCreator<typeof actions.moveColumn>,
 ) {
+  const appViewMode: AppViewMode = yield select(selectors.appViewModeSelector)
+
   const ids: string[] = yield select(selectors.columnIdsSelector)
   if (!(ids && ids.length)) return
 
@@ -113,12 +116,15 @@ function* onMoveColumn(
   )
   if (Number.isNaN(columnIndex)) return
 
+  const columnId = action.payload.columnId
+
   emitter.emit('FOCUS_ON_COLUMN', {
-    animated: true,
-    columnId: action.payload.columnId,
-    columnIndex,
-    highlight: true,
+    animated: appViewMode === 'multi-column',
+    highlight: appViewMode === 'multi-column',
     scrollTo: true,
+    ...action.payload,
+    columnId,
+    columnIndex,
   })
 }
 
diff --git a/packages/components/src/screens/MainScreen.tsx b/packages/components/src/screens/MainScreen.tsx
@@ -49,7 +49,7 @@ export const MainScreen = React.memo(() => {
   const appToken = useReduxState(selectors.appTokenSelector)!
   const columnIds = useReduxState(selectors.columnIdsSelector)
   const currentOpenedModal = useReduxState(selectors.currentOpenedModal)
-  const focusedColumnId = useFocusedColumn()
+  const { focusedColumnId, focusedColumnIndex } = useFocusedColumn()
 
   const closeAllModals = useReduxAction(actions.closeAllModals)
   const moveColumn = useReduxAction(actions.moveColumn)
@@ -61,10 +61,6 @@ export const MainScreen = React.memo(() => {
   const replaceModal = useReduxAction(actions.replaceModal)
   const syncDown = useReduxAction(actions.syncDown)
 
-  const focusedColumnIndex = focusedColumnId
-    ? columnIds.findIndex(id => id === focusedColumnId)
-    : -1
-
   const debounceSyncDown = useMemo(() => {
     return _.debounce(syncDown, 5000, {
       leading: true,
@@ -164,6 +160,7 @@ export const MainScreen = React.memo(() => {
 
     emitter.emit('SCROLL_DOWN_COLUMN', {
       columnId: columnIds[fixedColumnIndex],
+      columnIndex: fixedColumnIndex,
     })
   }, [currentOpenedModal, focusedColumnIndex, columnIds])
 
@@ -180,6 +177,7 @@ export const MainScreen = React.memo(() => {
 
     emitter.emit('SCROLL_UP_COLUMN', {
       columnId: columnIds[fixedColumnIndex],
+      columnIndex: fixedColumnIndex,
     })
   }, [currentOpenedModal, focusedColumnIndex, columnIds])
 

Original file line number	Diff line number	Diff line change
`@@ -711,8 +711,11 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => {`
`711`	`711`	`}`
`712`	`712`	`onPress={() =>`
`713`	`713`	`moveColumn({`
	`714`	`+ animated: appViewMode === 'multi-column',`
`714`	`715`	`columnId: column.id,`
`715`	`716`	`columnIndex: columnIndex - 1,`
	`717`	`+ highlight: appViewMode === 'multi-column',`
	`718`	`+ scrollTo: true,`
`716`	`719`	`})`
`717`	`720`	`}`
`718`	`721`	`/>`
`@@ -730,8 +733,11 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => {`
`730`	`733`	`}`
`731`	`734`	`onPress={() =>`
`732`	`735`	`moveColumn({`
	`736`	`+ animated: appViewMode === 'multi-column',`
`733`	`737`	`columnId: column.id,`
`734`	`738`	`columnIndex: columnIndex + 1,`
	`739`	`+ highlight: appViewMode === 'multi-column',`
	`740`	`+ scrollTo: true,`
`735`	`741`	`})`
`736`	`742`	`}`
`737`	`743`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -24,8 +24,8 @@ export interface EmitterTypes {`
`24`	`24`	`highlight?: boolean`
`25`	`25`	`scrollTo?: boolean`
`26`	`26`	`}`
`27`		`- SCROLL_DOWN_COLUMN: { columnId: string }`
`28`		`- SCROLL_UP_COLUMN: { columnId: string }`
	`27`	`+ SCROLL_DOWN_COLUMN: { columnId: string; columnIndex: number }`
	`28`	`+ SCROLL_UP_COLUMN: { columnId: string; columnIndex: number }`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`const _emitter = new EventEmitter()`