New hook: useColumnData

cocoroise · May 25, 2019 · 1dc4217 · 1dc4217
1 parent dab16af
commit 1dc4217
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 142 deletions.
diff --git a/packages/components/src/components/columns/ColumnRenderer.tsx b/packages/components/src/components/columns/ColumnRenderer.tsx
@@ -1,5 +1,5 @@
 import { getLuminance } from 'polished'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { Dimensions, View } from 'react-native'
 
 import {
@@ -19,13 +19,12 @@ import {
   ThemeColors,
 } from '@devhub/core'
 import { useAppViewMode } from '../../hooks/use-app-view-mode'
+import { useColumnData } from '../../hooks/use-column-data'
 import { useEmitter } from '../../hooks/use-emitter'
 import { useReduxAction } from '../../hooks/use-redux-action'
-import { useReduxState } from '../../hooks/use-redux-state'
 import { useRepoTableColumnWidth } from '../../hooks/use-repo-table-column-width'
 import { emitter } from '../../libs/emitter'
 import * as actions from '../../redux/actions'
-import * as selectors from '../../redux/selectors'
 import { sharedStyles } from '../../styles/shared'
 import {
   columnHeaderHeight,
@@ -152,10 +151,6 @@ export const ColumnRenderer = React.memo((props: ColumnRendererProps) => {
   const columnWidth = useColumnWidth()
   const repoTableColumnWidth = useRepoTableColumnWidth()
 
-  const filteredSubscriptionsDataSelectorRef = useRef(
-    selectors.createFilteredSubscriptionsDataSelector(false),
-  )
-
   const columnRef = useRef<View>(null)
   useTheme(theme => {
     if (!columnRef.current) return
@@ -168,12 +163,6 @@ export const ColumnRenderer = React.memo((props: ColumnRendererProps) => {
     })
   })
 
-  useEffect(() => {
-    filteredSubscriptionsDataSelectorRef.current = selectors.createFilteredSubscriptionsDataSelector(
-      false,
-    )
-  }, column.subscriptionIds)
-
   useEmitter(
     'TOGGLE_COLUMN_FILTERS',
     payload => {
@@ -184,18 +173,7 @@ export const ColumnRenderer = React.memo((props: ColumnRendererProps) => {
     [column.id, enableSharedFiltersView],
   )
 
-  const filteredItems = useReduxState(
-    useCallback(
-      state => {
-        return filteredSubscriptionsDataSelectorRef.current(
-          state,
-          column.subscriptionIds,
-          column.filters,
-        )
-      },
-      [column.subscriptionIds, column.filters],
-    ),
-  )
+  const { filteredItems } = useColumnData(column.id, false)
 
   const clearableItems = (filteredItems as any[]).filter(
     (

diff --git a/packages/components/src/containers/EventCardsContainer.tsx b/packages/components/src/containers/EventCardsContainer.tsx
@@ -13,6 +13,7 @@ import { EventCards, EventCardsProps } from '../components/cards/EventCards'
 import { GenericMessageWithButtonView } from '../components/cards/GenericMessageWithButtonView'
 import { NoTokenView } from '../components/cards/NoTokenView'
 import { ButtonLink } from '../components/common/ButtonLink'
+import { useColumnData } from '../hooks/use-column-data'
 import { useGitHubAPI } from '../hooks/use-github-api'
 import { useReduxAction } from '../hooks/use-redux-action'
 import { useReduxState } from '../hooks/use-redux-state'
@@ -87,43 +88,14 @@ export const EventCardsContainer = React.memo(
       selectors.createSubscriptionsDataSelector(),
     )
 
-    const filteredSubscriptionsDataSelectorRef = useRef(
-      selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      ),
-    )
-
     useEffect(() => {
       subscriptionsDataSelectorRef.current = selectors.createSubscriptionsDataSelector()
-      filteredSubscriptionsDataSelectorRef.current = selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      )
     }, [cardViewMode, ...column.subscriptionIds])
 
-    const allItems = useReduxState(
-      useCallback(
-        state => {
-          return subscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-          )
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    ) as EnhancedGitHubEvent[]
-
-    const filteredItems = useReduxState(
-      useCallback(
-        state => {
-          return filteredSubscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-            column.filters,
-          )
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    ) as EnhancedGitHubEvent[]
+    const { allItems, filteredItems } = useColumnData<EnhancedGitHubEvent>(
+      column.id,
+      cardViewMode !== 'compact',
+    )
 
     const clearedAt = column.filters && column.filters.clearedAt
     const olderDate = getOlderEventDate(allItems)

diff --git a/packages/components/src/containers/IssueOrPullRequestCardsContainer.tsx b/packages/components/src/containers/IssueOrPullRequestCardsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback } from 'react'
 
 import {
   EnhancedGitHubIssueOrPullRequest,
@@ -17,6 +17,7 @@ import {
 } from '../components/cards/IssueOrPullRequestCards'
 import { NoTokenView } from '../components/cards/NoTokenView'
 import { ButtonLink } from '../components/common/ButtonLink'
+import { useColumnData } from '../hooks/use-column-data'
 import { useGitHubAPI } from '../hooks/use-github-api'
 import { useReduxAction } from '../hooks/use-redux-action'
 import { useReduxState } from '../hooks/use-redux-state'
@@ -87,47 +88,9 @@ export const IssueOrPullRequestCardsContainer = React.memo(
       actions.fetchColumnSubscriptionRequest,
     )
 
-    const subscriptionsDataSelectorRef = useRef(
-      selectors.createSubscriptionsDataSelector(),
-    )
-
-    const filteredSubscriptionsDataSelectorRef = useRef(
-      selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      ),
-    )
-
-    useEffect(() => {
-      subscriptionsDataSelectorRef.current = selectors.createSubscriptionsDataSelector()
-      filteredSubscriptionsDataSelectorRef.current = selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      )
-    }, [cardViewMode, ...column.subscriptionIds])
-
-    const allItems = useReduxState(
-      useCallback(
-        state => {
-          return (subscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-          ) as any) as EnhancedGitHubIssueOrPullRequest[]
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    )
-
-    const filteredItems = useReduxState(
-      useCallback(
-        state => {
-          return (filteredSubscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-            column.filters,
-          ) as any) as EnhancedGitHubIssueOrPullRequest[]
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    )
+    const { allItems, filteredItems } = useColumnData<
+      EnhancedGitHubIssueOrPullRequest
+    >(column.id, cardViewMode !== 'compact')
 
     const clearedAt = column.filters && column.filters.clearedAt
     const olderDate = getOlderIssueOrPullRequestDate(allItems)

diff --git a/packages/components/src/containers/NotificationCardsContainer.tsx b/packages/components/src/containers/NotificationCardsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback } from 'react'
 
 import {
   EnhancedGitHubNotification,
@@ -12,6 +12,7 @@ import {
   NotificationCardsProps,
 } from '../components/cards/NotificationCards'
 import { NoTokenView } from '../components/cards/NoTokenView'
+import { useColumnData } from '../hooks/use-column-data'
 import { useReduxAction } from '../hooks/use-redux-action'
 import { useReduxState } from '../hooks/use-redux-state'
 import * as actions from '../redux/actions'
@@ -53,47 +54,9 @@ export const NotificationCardsContainer = React.memo(
       actions.fetchColumnSubscriptionRequest,
     )
 
-    const subscriptionsDataSelectorRef = useRef(
-      selectors.createSubscriptionsDataSelector(),
-    )
-
-    const filteredSubscriptionsDataSelectorRef = useRef(
-      selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      ),
-    )
-
-    useEffect(() => {
-      subscriptionsDataSelectorRef.current = selectors.createSubscriptionsDataSelector()
-      filteredSubscriptionsDataSelectorRef.current = selectors.createFilteredSubscriptionsDataSelector(
-        cardViewMode !== 'compact',
-      )
-    }, [cardViewMode, ...column.subscriptionIds])
-
-    const allItems = useReduxState(
-      useCallback(
-        state => {
-          return subscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-          )
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    ) as EnhancedGitHubNotification[]
-
-    const filteredItems = useReduxState(
-      useCallback(
-        state => {
-          return filteredSubscriptionsDataSelectorRef.current(
-            state,
-            column.subscriptionIds,
-            column.filters,
-          )
-        },
-        [column.subscriptionIds, column.filters],
-      ),
-    ) as EnhancedGitHubNotification[]
+    const { allItems, filteredItems } = useColumnData<
+      EnhancedGitHubNotification
+    >(column.id, cardViewMode !== 'compact')
 
     const clearedAt = column.filters && column.filters.clearedAt
     const olderDate = getOlderNotificationDate(allItems)

diff --git a/packages/components/src/hooks/use-column-data.ts b/packages/components/src/hooks/use-column-data.ts
@@ -0,0 +1,68 @@
+import _ from 'lodash'
+import { useCallback, useEffect, useRef } from 'react'
+
+import { EnhancedItem } from '@devhub/core'
+import * as selectors from '../redux/selectors'
+import { useReduxState } from './use-redux-state'
+
+export function useColumnData<ItemT extends EnhancedItem>(
+  columnId: string,
+  mergeSimilar: boolean,
+) {
+  const subscriptionsDataSelectorRef = useRef(
+    selectors.createSubscriptionsDataSelector(),
+  )
+
+  const filteredSubscriptionsDataSelectorRef = useRef(
+    selectors.createFilteredSubscriptionsDataSelector(mergeSimilar),
+  )
+
+  const column = useReduxState(
+    useCallback(state => selectors.columnSelector(state, columnId), [columnId]),
+  )
+
+  useEffect(() => {
+    subscriptionsDataSelectorRef.current = selectors.createSubscriptionsDataSelector()
+    filteredSubscriptionsDataSelectorRef.current = selectors.createFilteredSubscriptionsDataSelector(
+      mergeSimilar,
+    )
+  }, [column && column.subscriptionIds && column.subscriptionIds.join(',')])
+
+  const allItems = useReduxState(
+    useCallback(
+      state => {
+        if (!column) return []
+
+        return subscriptionsDataSelectorRef.current(
+          state,
+          column.subscriptionIds,
+        )
+      },
+      [
+        column && column.subscriptionIds && column.subscriptionIds.join(','),
+        column && column.filters,
+      ],
+    ),
+  ) as ItemT[]
+
+  const filteredItems = useReduxState(
+    useCallback(
+      state => {
+        if (!column) return []
+
+        return filteredSubscriptionsDataSelectorRef.current(
+          state,
+          column.subscriptionIds,
+          column.filters,
+        )
+      },
+      [column && column.subscriptionIds, column && column.filters],
+    ),
+  ) as ItemT[]
+
+  return {
+    allItems,
+    column,
+    filteredItems,
+  }
+}