Merge pull request #731 from alexstotsky/improve-sync

(improvements) Initial sync flow

public/locales/en/translations.json

@@ -621,6 +621,7 @@
     "title": "Summary",
     "leo_level": "LEO level",
     "avg_amount": "Avg.Amount",
+    "no_data": "No related data for this period is available or data should be synced.",
     "fees": {
       "title": "Account Fees",
       "sub_title": "Based on your trading volume",
@@ -644,8 +645,7 @@
       "balance_change": "Balance Change",
       "profits": "Profits",
       "volume": "Volume",
-      "total": "Total",
-      "no_data": "No related data for this period." 
+      "total": "Total"
     }
   },
   "symbols": {

src/components/AppSummary/AppSummary.byAsset.js

@@ -13,6 +13,7 @@ import {
   getSummaryByAssetTotal,
   getSummaryByAssetEntries,
 } from 'state/summaryByAsset/selectors'
+import { getIsSyncRequired } from 'state/sync/selectors'
 
 import { getAssetColumns } from './AppSummary.columns'
 import { prepareSummaryByAssetData } from './AppSummary.helpers'
@@ -24,10 +25,13 @@ const AppSummaryByAsset = () => {
   const dataReceived = useSelector(getDataReceived)
   const total = useSelector(getSummaryByAssetTotal)
   const entries = useSelector(getSummaryByAssetEntries)
+  const isSyncRequired = useSelector(getIsSyncRequired)
 
   useEffect(() => {
-    if (!dataReceived && !pageLoading) dispatch(fetchData())
-  }, [dataReceived, pageLoading])
+    if (!dataReceived && !pageLoading && !isSyncRequired) {
+      dispatch(fetchData())
+    }
+  }, [dataReceived, pageLoading, isSyncRequired])
 
   const preparedData = useMemo(
     () => prepareSummaryByAssetData(entries, total, t),
@@ -43,7 +47,7 @@ const AppSummaryByAsset = () => {
   if (!dataReceived && pageLoading) {
     showContent = <Loading />
   } else if (isEmpty(entries)) {
-    showContent = <NoData title='summary.by_asset.no_data' />
+    showContent = <NoData title='summary.no_data' />
   } else {
     showContent = (
       <DataTable

src/components/AppSummary/AppSummary.container.js

@@ -22,6 +22,7 @@ import {
   getIsUnrealizedProfitExcluded,
 } from 'state/accountBalance/selectors'
 import { getIsTurkishSite } from 'state/base/selectors'
+import { getIsSyncRequired } from 'state/sync/selectors'
 
 import AppSummary from './AppSummary'
 
@@ -31,6 +32,7 @@ const mapStateToProps = state => ({
   dataReceived: getDataReceived(state),
   currentTimeFrame: getTimeframe(state),
   isTurkishSite: getIsTurkishSite(state),
+  isSyncRequired: getIsSyncRequired(state),
   isUnrealizedProfitExcluded: getIsUnrealizedProfitExcluded(state),
 })
 

src/components/AppSummary/AppSummary.fees.js

@@ -38,7 +38,7 @@ const AppSummaryFees = ({
   if (!dataReceived && pageLoading) {
     showContent = <Loading />
   } else if (isEmpty(data)) {
-    showContent = <NoData />
+    showContent = <NoData title='summary.no_data' />
   } else {
     showContent = (
       <CollapsedTable

src/components/AppSummary/AppSummary.js

@@ -28,14 +28,17 @@ const AppSummary = ({
   pageLoading,
   dataReceived,
   isTurkishSite,
+  isSyncRequired,
   refreshBalance,
   currentTimeFrame,
   refreshSummaryByAsset,
   isUnrealizedProfitExcluded,
 }) => {
   useEffect(() => {
-    if (!dataReceived && !pageLoading) fetchData()
-  }, [])
+    if (!dataReceived && !pageLoading && !isSyncRequired) {
+      fetchData()
+    }
+  }, [dataReceived, pageLoading, isSyncRequired])
 
   const handleTimeFrameChange = (timeframe) => {
     setParams({ timeframe })
@@ -134,6 +137,7 @@ AppSummary.propTypes = {
   refreshBalance: PropTypes.func.isRequired,
   setParams: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  isSyncRequired: PropTypes.bool.isRequired,
   currentTimeFrame: PropTypes.string.isRequired,
   isUnrealizedProfitExcluded: PropTypes.bool.isRequired,
   refreshSummaryByAsset: PropTypes.func.isRequired,

src/components/AppSummary/AppSummary.value.js

@@ -19,6 +19,7 @@ import {
   getCurrentTimeFrame,
 } from 'state/accountBalance/selectors'
 import { getTimeRange } from 'state/timeRange/selectors'
+import { getIsSyncRequired } from 'state/sync/selectors'
 import { fetchBalance } from 'state/accountBalance/actions'
 
 const AccountSummaryValue = () => {
@@ -28,11 +29,14 @@ const AccountSummaryValue = () => {
   const timeRange = useSelector(getTimeRange)
   const pageLoading = useSelector(getPageLoading)
   const dataReceived = useSelector(getDataReceived)
+  const isSyncRequired = useSelector(getIsSyncRequired)
   const currTimeFrame = useSelector(getCurrentTimeFrame)
 
   useEffect(() => {
-    if (!dataReceived && !pageLoading) dispatch(fetchBalance())
-  }, [timeRange])
+    if (!dataReceived && !pageLoading && !isSyncRequired) {
+      dispatch(fetchBalance())
+    }
+  }, [timeRange, dataReceived, pageLoading, isSyncRequired])
 
   const { chartData, presentCurrencies } = useMemo(
     () => parseChartData({
@@ -55,7 +59,7 @@ const AccountSummaryValue = () => {
   if (!dataReceived && pageLoading) {
     showContent = <Loading />
   } else if (isEmpty(entries)) {
-    showContent = <NoData />
+    showContent = <NoData title='summary.no_data' />
   } else {
     showContent = (
       <div className='chart-wrapper'>

src/state/accountBalance/saga.js

@@ -9,6 +9,7 @@ import { makeFetchCall } from 'state/utils'
 import { toggleErrorDialog } from 'state/ui/actions'
 import { updateErrorStatus } from 'state/status/actions'
 import { getTimeFrame } from 'state/timeRange/selectors'
+import { getIsSyncRequired } from 'state/sync/selectors'
 
 import types from './constants'
 import actions from './actions'
@@ -44,7 +45,10 @@ export function* fetchAccountBalance() {
 }
 
 function* refreshAccountBalance() {
-  yield put(actions.fetchBalance())
+  const isSyncRequired = yield select(getIsSyncRequired)
+  if (!isSyncRequired) {
+    yield put(actions.fetchBalance())
+  }
 }
 
 function* fetchAccountBalanceFail({ payload }) {

src/state/auth/saga.js

@@ -29,6 +29,7 @@ import tokenRefreshSaga from 'state/auth/tokenRefresh/saga'
 import { togglePreferencesDialog } from 'state/ui/actions'
 import { updateErrorStatus, updateSuccessStatus, updateWarningStatus } from 'state/status/actions'
 import { fetchSymbols } from 'state/symbols/actions'
+import { setIsSyncRequired } from 'state/sync/actions'
 import { refreshToken, tokenRefreshStart, tokenRefreshStop } from 'state/auth/tokenRefresh/actions'
 import config from 'config'
 
@@ -121,7 +122,6 @@ function* signUp({ payload }) {
       }
       yield put(actions.addUser(newUser))
       yield put(actions.showOtpLogin(false))
-      if (showFrameworkMode) yield put(actions.fetchUsers())
       return
     }
 
@@ -483,6 +483,10 @@ function* deleteAccount({ payload }) {
 
 function* logout() {
   yield put(tokenRefreshStop())
+  if (showFrameworkMode) {
+    yield put(actions.fetchUsers())
+    yield put(setIsSyncRequired(true))
+  }
 }
 
 function* handleSyncAfterUpdate({ payload }) {

src/state/summaryByAsset/saga.js

@@ -1,11 +1,13 @@
 import {
   call,
   put,
+  select,
   takeLatest,
 } from 'redux-saga/effects'
 
 import { makeFetchCall } from 'state/utils'
 import { updateErrorStatus } from 'state/status/actions'
+import { getIsSyncRequired } from 'state/sync/selectors'
 
 import types from './constants'
 import actions from './actions'
@@ -34,7 +36,10 @@ export function* fetchSummaryByAsset() {
 }
 
 function* refreshSummaryByAsset() {
-  yield put(actions.fetchData())
+  const isSyncRequired = yield select(getIsSyncRequired)
+  if (!isSyncRequired) {
+    yield put(actions.fetchData())
+  }
 }
 
 function* fetchSummaryByAssetFail({ payload }) {

src/state/sync/actions.js

@@ -192,6 +192,13 @@ export function editSyncConf(config) {
   }
 }
 
+export function setIsSyncRequired(payload) {
+  return {
+    type: types.SET_IS_SYNC_REQUIRED,
+    payload,
+  }
+}
+
 export default {
   editPublicTradesPref,
   editPublicTradesSymbolPref,
@@ -210,4 +217,5 @@ export default {
   stopSyncing,
   startSyncNow,
   stopSyncNow,
+  setIsSyncRequired,
 }

src/state/sync/constants.js

@@ -13,6 +13,7 @@ export default {
   SET_PROGRESS: 'BITFINEX/SYNC/PROGRESS/SET',
   SET_PREF: 'BITFINEX/SYNC/PREF/SET',
   SET_ESTIMATED_TIME: 'BITFINEX/SYNC/ESTIMATED_TIME/SET',
+  SET_IS_SYNC_REQUIRED: 'BITFINEX/SYNC/IS_SYNC_REQUIRED/SET',
 
   EDIT_PUBLIC_TRADES_PREF: 'BITFINEX/SYNC/PREF/EDIT/PUBLIC_TRADES',
   EDIT_PUBLIC_FUNDING_PREF: 'BITFINEX/SYNC/PREF/EDIT/PUBLIC_FUNDING',

src/state/sync/reducer.js

@@ -20,6 +20,7 @@ const initialState = {
   isSyncing: false,
   progress: 0,
   estimatedSyncTime: {},
+  isSyncRequired: true,
 }
 
 export function syncReducer(state = initialState, action) {
@@ -121,6 +122,12 @@ export function syncReducer(state = initialState, action) {
         estimatedSyncTime: payload,
       }
     }
+    case types.SET_IS_SYNC_REQUIRED: {
+      return {
+        ...state,
+        isSyncRequired: payload,
+      }
+    }
     default: {
       return state
     }

src/state/sync/saga.js

@@ -43,6 +43,7 @@ function* startSyncing() {
     return
   }
   const { result: isNotSyncRequired } = yield call(haveCollsBeenSyncedAtLeastOnce)
+  yield put(actions.setIsSyncRequired(!isNotSyncRequired))
   const { result, error } = yield call(enableSyncMode, { isNotSyncRequired })
 
   if (result && !isNotSyncRequired) {
@@ -77,6 +78,7 @@ function* stopSyncNow() {
   if (result) {
     yield put(actions.setIsSyncing(false))
     yield put(actions.setEstimatedTime({}))
+    yield put(actions.setIsSyncRequired(true))
     yield put(updateStatus({ id: 'sync.logout' }))
   }
   if (error) {
@@ -131,6 +133,7 @@ function* forceQueryFromDb() {
     yield put(updateStatus({ id: 'sync.sync-done' }))
   }
   yield put(actions.setIsSyncing(false))
+  yield put(actions.setIsSyncRequired(false))
 }
 
 function* syncLogout() {
@@ -218,6 +221,7 @@ function* requestsRedirectUpdate({ payload }) {
       yield put(actions.setIsSyncing(true))
     } else {
       yield put(actions.setIsSyncing(false))
+      yield put(actions.setIsSyncRequired(false))
       yield put(updateStatus({ id: 'sync.sync-done' }))
     }
   } else {
@@ -238,6 +242,7 @@ function* updateSyncStatus() {
       }
       if (progress === 100) {
         yield put(actions.setIsSyncing(false))
+        yield put(actions.setIsSyncRequired(false))
         yield put(updateStatus({ id: 'sync.sync-done' }))
       }
       break

src/state/sync/selectors.js

@@ -20,6 +20,7 @@ export const getTickersHistoryPairs = state => getTickersHistoryConf(state).pair
 
 export const getCandlesConf = state => getSyncConf(state).candlesConf || []
 export const getStatusMessagesConf = state => getSyncConf(state).statusMessagesConf || []
+export const getIsSyncRequired = state => getSync(state)?.isSyncRequired ?? false
 
 export default {
   getSyncMode,
@@ -37,4 +38,5 @@ export default {
   getTickersHistoryPairs,
   getCandlesConf,
   getStatusMessagesConf,
+  getIsSyncRequired,
 }