1- import React , { memo , useEffect , useState } from 'react' ;
1+ import React , { memo , useEffect , useMemo , useState } from 'react' ;
22import { useDispatch , useSelector } from 'react-redux' ;
33
44import { GlobalState } from 'mattermost-redux/types/store' ;
@@ -21,27 +21,26 @@ import {getSubscribeModalState, getWebsocketEventState} from 'selectors';
2121
2222import usePluginApi from 'hooks/usePluginApi' ;
2323import useApiRequestCompletionState from 'hooks/useApiRequestCompletionState' ;
24-
25- import { getCurrentChannelSubscriptions } from 'utils/filterData' ;
24+ import usePreviousState from 'hooks/usePreviousState' ;
2625
2726const ProjectDetails = memo ( ( projectDetails : ProjectDetails ) => {
2827 const { projectName, organizationName} = projectDetails ;
2928
30- // Hooks
31- const dispatch = useDispatch ( ) ;
32- const { makeApiRequestWithCompletionStatus, makeApiRequest, getApiState, state} = usePluginApi ( ) ;
33-
3429 // State variables
30+ const [ showAllSubscriptions , setShowAllSubscriptions ] = useState ( false ) ;
3531 const [ showProjectConfirmationModal , setShowProjectConfirmationModal ] = useState ( false ) ;
3632 const [ showSubscriptionConfirmationModal , setShowSubscriptionConfirmationModal ] = useState ( false ) ;
3733 const [ subscriptionToBeDeleted , setSubscriptionToBeDeleted ] = useState < SubscriptionPayload > ( ) ;
38- const [ showAllSubscriptions , setShowAllSubscriptions ] = useState ( false ) ;
39- const [ subscriptionList , setSubscriptionList ] = useState < SubscriptionDetails [ ] > ( [ ] ) ;
4034 const { currentChannelId} = useSelector ( ( reduxState : GlobalState ) => reduxState . entities . channels ) ;
35+ const subscriptionListApiParams = useMemo < FetchSubscriptionList > ( ( ) => ( {
36+ project : projectName ,
37+ channel_id : showAllSubscriptions ? '' : currentChannelId ,
38+ } ) , [ projectName , currentChannelId , showAllSubscriptions ] ) ;
4139
42- const project : FetchSubscriptionList = { project : projectName } ;
43- const { data, isLoading} = getApiState ( plugin_constants . pluginApiServiceConfigs . getSubscriptionList . apiServiceName , project ) ;
44- const subscriptionData = data as SubscriptionDetails [ ] ;
40+ // Hooks
41+ const previousState = usePreviousState ( { currentChannelId} ) ;
42+ const dispatch = useDispatch ( ) ;
43+ const { makeApiRequestWithCompletionStatus, makeApiRequest, getApiState, state} = usePluginApi ( ) ;
4544
4645 const handleResetProjectDetails = ( ) => {
4746 dispatch ( resetProjectDetails ( ) ) ;
@@ -86,7 +85,7 @@ const ProjectDetails = memo((projectDetails: ProjectDetails) => {
8685 // Fetch subscription list
8786 const fetchSubscriptionList = ( ) => makeApiRequest (
8887 plugin_constants . pluginApiServiceConfigs . getSubscriptionList . apiServiceName ,
89- project ,
88+ subscriptionListApiParams ,
9089 ) ;
9190
9291 // Handles deletion of a subscription and fetching the modified subscription list
@@ -105,31 +104,27 @@ const ProjectDetails = memo((projectDetails: ProjectDetails) => {
105104
106105 // Reset the state when the component is unmounted
107106 useEffect ( ( ) => {
108- if ( ! getWebsocketEventState ( state ) . isSubscriptionDeleted ) {
109- fetchSubscriptionList ( ) ;
110- }
111-
112107 return ( ) => {
113108 handleResetProjectDetails ( ) ;
114109 } ;
115110 } , [ ] ) ;
116111
117112 useEffect ( ( ) => {
118- if ( subscriptionData ) {
119- if ( showAllSubscriptions ) {
120- setSubscriptionList ( subscriptionData ) ;
121- } else {
122- setSubscriptionList ( getCurrentChannelSubscriptions ( subscriptionData , currentChannelId ) ) ;
123- }
113+ /**
114+ * Prevent calling API to fetch subscription list twice on switching channel
115+ *
116+ * If the current channel is changed and "showAllSubscriptions" was true on the last channel then
117+ * this useEffect runs twice because "subscriptionListApiParams" is modified twice
118+ * once when "currentChannelId" is updated and other time when "showAllSubscriptions" is set to false
119+ */
120+ if ( showAllSubscriptions && previousState ?. currentChannelId !== currentChannelId ) {
121+ return ;
124122 }
125- } , [ subscriptionData , showAllSubscriptions ] ) ;
123+ fetchSubscriptionList ( ) ;
124+ } , [ subscriptionListApiParams ] ) ;
126125
127- // Update subscription list on switching channels
128126 useEffect ( ( ) => {
129- if ( subscriptionData ) {
130- setShowAllSubscriptions ( false ) ;
131- setSubscriptionList ( getCurrentChannelSubscriptions ( subscriptionData , currentChannelId ) ) ;
132- }
127+ setShowAllSubscriptions ( false ) ;
133128 } , [ currentChannelId ] ) ;
134129
135130 // Fetch the subscription list when new subscription is created
@@ -140,6 +135,9 @@ const ProjectDetails = memo((projectDetails: ProjectDetails) => {
140135 }
141136 } , [ getSubscribeModalState ( state ) . isCreated ] ) ;
142137
138+ const { data, isLoading} = getApiState ( plugin_constants . pluginApiServiceConfigs . getSubscriptionList . apiServiceName , subscriptionListApiParams ) ;
139+ const subscriptionList = data as SubscriptionDetails [ ] ;
140+
143141 const { isLoading : isUnlinkProjectLoading } = getApiState ( plugin_constants . pluginApiServiceConfigs . unlinkProject . apiServiceName , projectDetails ) ;
144142 const { isLoading : isDeleteSubscriptionLoading } = getApiState ( plugin_constants . pluginApiServiceConfigs . deleteSubscription . apiServiceName , subscriptionToBeDeleted ) ;
145143
0 commit comments