chore(ZNTA-1922): fix frontend routing with simplistic fix

This does a quick-fix using locationBeforeTransitions, which may just be the same as the old state.routing.location but with a more meaningful name, but that is not clear and this may need further work. The react-router-redux middleware may be a good fit.
zanata · Jun 14, 2017 · 1708d73 · 1708d73
1 parent ad62696
commit 1708d73
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 47 deletions.
diff --git a/server/zanata-frontend/src/frontend/app/actions/explore-actions.js b/server/zanata-frontend/src/frontend/app/actions/explore-actions.js
@@ -168,15 +168,15 @@ const queryPageType = {
 
 export const searchTextChanged = (searchText) => {
   return (dispatch, getState) => {
-    if (getState().routing.location !== searchText) {
-      replaceRouteQuery(getState().routing.location, {
+    if (getState().routing.locationBeforeTransitions !== searchText) {
+      replaceRouteQuery(getState().routing.locationBeforeTransitions, {
         q: searchText,
         projectPage: null,
         groupPage: null,
         personPage: null,
         languageTeamPage: null
       })
-      const query = getState().routing.location.query
+      const query = getState().routing.locationBeforeTransitions.query
       const projectPage = query.projectPage
       const groupPage = query.groupPage
       const personPage = query.personPage
@@ -197,8 +197,8 @@ export const updateSearchPage = (type, currentPage, totalPage, next) => {
   return (dispatch, getState) => {
     let queryObj = {}
     queryObj[pageType] = newPage
-    replaceRouteQuery(getState().routing.location, queryObj)
-    const query = getState().routing.location.query
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, queryObj)
+    const query = getState().routing.locationBeforeTransitions.query
 
     const searchText = query.q
     const { projectPage, groupPage, personPage, languageTeamPage } = query
@@ -229,7 +229,7 @@ export const updateSearchPage = (type, currentPage, totalPage, next) => {
 
 export const searchPageInitialLoad = () => {
   return (dispatch, getState) => {
-    const query = getState().routing.location.query
+    const query = getState().routing.locationBeforeTransitions.query
     const searchText = query.q
     const { projectPage, groupPage, personPage, languageTeamPage } = query
     search(dispatch, searchText, {projectPage,

diff --git a/server/zanata-frontend/src/frontend/app/actions/glossary-actions.js b/server/zanata-frontend/src/frontend/app/actions/glossary-actions.js
@@ -105,7 +105,7 @@ const getGlossaryTerms = (state) => {
     sort = '',
     qualifiedName
   } = state.glossary
-  const query = state.routing.location.query
+  const query = state.routing.locationBeforeTransitions.query
 
   let page = query.page ? parseInt(query.page) : 1
   page = page <= 1 ? 1 : page
@@ -418,7 +418,7 @@ export const glossaryInitStateFromUrl =
 
 export const glossaryInitialLoad = (projectSlug) => {
   return (dispatch, getState) => {
-    const query = getState().routing.location.query
+    const query = getState().routing.locationBeforeTransitions.query
     dispatch(glossaryInitStateFromUrl({ query, projectSlug })).then(
     dispatch(getQualifiedName(dispatch, projectSlug)))
     if (projectSlug) {
@@ -429,7 +429,7 @@ export const glossaryInitialLoad = (projectSlug) => {
 
 export const glossaryChangeLocale = (locale) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       locale: locale
     })
     dispatch(glossaryUpdateLocale(locale))
@@ -440,7 +440,7 @@ export const glossaryChangeLocale = (locale) => {
 export const glossaryFilterTextChanged = (newFilter) => {
   return (dispatch, getState) => {
     if (!getState().glossary.termsLoading) {
-      replaceRouteQuery(getState().routing.location, {
+      replaceRouteQuery(getState().routing.locationBeforeTransitions, {
         filter: newFilter,
         page: 1
       })
@@ -508,7 +508,7 @@ export const glossarySortColumn = (col) => {
     sort[col] = getState().glossary.sort[col]
       ? !getState().glossary.sort[col] : true
 
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       sort: GlossaryHelper.convertSortToParam(sort)
     })
     dispatch(glossaryUpdateSort(sort)).then(
@@ -523,7 +523,7 @@ const delayGetGlossaryTerm = debounce((dispatch, state) =>
 export const glossaryGoFirstPage = (currentPage, totalPage) => {
   return (dispatch, getState) => {
     if (currentPage !== 1) {
-      replaceRouteQuery(getState().routing.location, {page: 1})
+      replaceRouteQuery(getState().routing.locationBeforeTransitions, {page: 1})
       dispatch(getGlossaryTerms(getState()))
     }
   }
@@ -533,7 +533,8 @@ export const glossaryGoPreviousPage = (currentPage, totalPage) => {
   return (dispatch, getState) => {
     const newPage = currentPage - 1
     if (newPage >= 1) {
-      replaceRouteQuery(getState().routing.location, {page: newPage})
+      replaceRouteQuery(getState().routing.locationBeforeTransitions,
+        {page: newPage})
       delayGetGlossaryTerm(dispatch, getState())
     }
   }
@@ -543,7 +544,8 @@ export const glossaryGoNextPage = (currentPage, totalPage) => {
   return (dispatch, getState) => {
     const newPage = currentPage + 1
     if (newPage <= totalPage) {
-      replaceRouteQuery(getState().routing.location, {page: newPage})
+      replaceRouteQuery(getState().routing.locationBeforeTransitions,
+        {page: newPage})
       delayGetGlossaryTerm(dispatch, getState())
     }
   }
@@ -552,15 +554,17 @@ export const glossaryGoNextPage = (currentPage, totalPage) => {
 export const glossaryGoLastPage = (currentPage, totalPage) => {
   return (dispatch, getState) => {
     if (currentPage !== totalPage) {
-      replaceRouteQuery(getState().routing.location, {page: totalPage})
+      replaceRouteQuery(getState().routing.locationBeforeTransitions,
+        {page: totalPage})
       dispatch(getGlossaryTerms(getState()))
     }
   }
 }
 
 export const glossaryUpdatePageSize = (size) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {page: 1, size: size})
+    replaceRouteQuery(getState().routing.locationBeforeTransitions,
+      {page: 1, size: size})
     dispatch(getGlossaryTerms(getState()))
   }
 }
diff --git a/server/zanata-frontend/src/frontend/app/actions/languages-actions.js b/server/zanata-frontend/src/frontend/app/actions/languages-actions.js
@@ -43,7 +43,7 @@ export const sortOption = [
 ]
 
 const getLocalesList = (state) => {
-  const query = state.routing.location.query
+  const query = state.routing.locationBeforeTransitions.query
   let queries = []
   if (query.search) {
     queries.push('filter=' + encodeURIComponent(query.search))
@@ -217,17 +217,19 @@ const createNewLanguage = (details, dispatch) => {
 export const initialLoad = () => {
   return (dispatch, getState) => {
     // validate page number from query
-    const page = parseInt(getState().routing.location.query.page)
+    const page = parseInt(
+      getState().routing.locationBeforeTransitions.query.page)
     if (page && page <= 1) {
-      replaceRouteQuery(getState().routing.location, {
+      replaceRouteQuery(getState().routing.locationBeforeTransitions, {
         page: 1
       })
     }
 
     // validate page size from query
-    const pageSize = parseInt(getState().routing.location.query.size)
+    const pageSize = parseInt(
+      getState().routing.locationBeforeTransitions.query.size)
     if (pageSize && !includes(pageSizeOption, pageSize)) {
-      replaceRouteQuery(getState().routing.location, {
+      replaceRouteQuery(getState().routing.locationBeforeTransitions, {
         size: pageSizeOption[0]
       })
     }
@@ -241,7 +243,7 @@ export const initialLoad = () => {
 
 export const handleUpdatePageSize = (pageSize) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       size: pageSize
     })
     dispatch(getLocalesList(getState()))
@@ -250,7 +252,7 @@ export const handleUpdatePageSize = (pageSize) => {
 
 export const handleUpdateSort = (sort) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       sort: sort
     })
     dispatch(getLocalesList(getState()))
@@ -259,7 +261,7 @@ export const handleUpdateSort = (sort) => {
 
 export const handleUpdateSearch = (search) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       search: search,
       page: 1
     })
@@ -275,7 +277,7 @@ export const handleDelete = (localeId) => {
 
 export const handlePageUpdate = (page) => {
   return (dispatch, getState) => {
-    replaceRouteQuery(getState().routing.location, {
+    replaceRouteQuery(getState().routing.locationBeforeTransitions, {
       page: page
     })
     dispatch(getLocalesList(getState()))

diff --git a/server/zanata-frontend/src/frontend/app/containers/App.js b/server/zanata-frontend/src/frontend/app/containers/App.js
@@ -47,12 +47,14 @@ class App extends Component {
   }
 }
 
-function mapStateToProps (state) {
+// FIXME checking if ownProps will work here, as react-router-redux should pass
+//       location info in to routed components that way.
+function mapStateToProps (state, { location }) {
   const exploreLoading = state.explore.loading
   const isExploreLoading = exploreLoading.Project ||
     exploreLoading.LanguageTeam || exploreLoading.Person || exploreLoading.Group
   return {
-    activePath: state.routing.location.pathname,
+    activePath: location.pathname,
     loading: state.common.loading || state.profile.loading ||
       isExploreLoading || state.glossary.statsLoading
   }

diff --git a/server/zanata-frontend/src/frontend/app/containers/Explore/index.js b/server/zanata-frontend/src/frontend/app/containers/Explore/index.js
@@ -171,14 +171,16 @@ class Explore extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, { location }) => {
+  const {
+    groupPage, languageTeamPage, personPage, projectPage, q } = location.query
   return {
-    location: state.routing.location,
-    searchText: state.routing.location.query.q,
-    projectPage: parseInt(state.routing.location.query.projectPage),
-    groupPage: parseInt(state.routing.location.query.groupPage),
-    personPage: parseInt(state.routing.location.query.personPage),
-    languageTeamPage: parseInt(state.routing.location.query.languageTeamPage),
+    location,
+    searchText: q,
+    projectPage: parseInt(projectPage),
+    groupPage: parseInt(groupPage),
+    personPage: parseInt(personPage),
+    languageTeamPage: parseInt(languageTeamPage),
     searchResults: state.explore.results,
     searchError: state.explore.error,
     searchLoading: state.explore.loading

diff --git a/server/zanata-frontend/src/frontend/app/containers/Glossary/ViewHeader.js b/server/zanata-frontend/src/frontend/app/containers/Glossary/ViewHeader.js
@@ -292,7 +292,8 @@ const mapStateToProps = (state) => {
     deleteAll,
     project
   } = state.glossary
-  const query = state.routing.location.query
+  // FIXME probably out of date, needs the one that was passed as props
+  const query = state.routing.locationBeforeTransitions.query
   return {
     termCount,
     statsLoading,

diff --git a/server/zanata-frontend/src/frontend/app/containers/Glossary/index.js b/server/zanata-frontend/src/frontend/app/containers/Glossary/index.js
@@ -270,7 +270,7 @@ class Glossary extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, { location }) => {
   const {
     selectedTerm,
     stats,
@@ -285,7 +285,7 @@ const mapStateToProps = (state) => {
     notification,
     project
   } = state.glossary
-  const query = state.routing.location.query
+  const query = location.query
   return {
     terms,
     termIds,

diff --git a/server/zanata-frontend/src/frontend/app/containers/Languages/index.js b/server/zanata-frontend/src/frontend/app/containers/Languages/index.js
@@ -217,8 +217,8 @@ class Languages extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
-  let urlSort = state.routing.location.query.sort
+const mapStateToProps = (state, { location }) => {
+  let urlSort = location.query.sort
   if (urlSort) {
     urlSort = find(sortOption, function (sort) {
       return sort.value === urlSort
@@ -239,9 +239,9 @@ const mapStateToProps = (state) => {
     deleting
   } = state.languages
   return {
-    searchText: state.routing.location.query.search || '',
-    page: parseInt(state.routing.location.query.page) || 1,
-    size: parseInt(state.routing.location.query.size) || pageSizeOption[0],
+    searchText: location.query.search || '',
+    page: parseInt(location.query.page) || 1,
+    size: parseInt(location.query.size) || pageSizeOption[0],
     sort: urlSort,
     results: locales.results,
     totalCount: locales.totalCount,

diff --git a/server/zanata-frontend/src/frontend/app/index.js b/server/zanata-frontend/src/frontend/app/index.js
@@ -6,7 +6,7 @@ import { createStore, applyMiddleware, compose } from 'redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
 import { history } from './history'
-import { syncHistory } from 'react-router-redux'
+import { syncHistoryWithStore } from 'react-router-redux'
 import WebFont from 'webfontloader'
 import { apiMiddleware } from 'redux-api-middleware'
 import rootReducer from './reducers'
@@ -24,7 +24,7 @@ WebFont.load({
   timeout: 2000
 })
 
-const routerMiddleware = syncHistory(history)
+// const routerMiddleware = syncHistory(history)
 
 const logger = createLogger({
   predicate: (getState, action) =>
@@ -35,7 +35,7 @@ const finalCreateStore = compose(
   applyMiddleware(
     thunk,
     apiMiddleware,
-    routerMiddleware,
+    // routerMiddleware,
     logger
   )
 )(createStore)
@@ -53,7 +53,9 @@ const store = ((initialState) => {
   return store
 })()
 
+const enhancedHistory = syncHistoryWithStore(history, store)
+
 render(
-  <Root store={store} history={history} />,
+  <Root store={store} history={enhancedHistory} />,
   document.getElementById('root')
 )
diff --git a/server/zanata-frontend/src/frontend/app/reducers/index.js b/server/zanata-frontend/src/frontend/app/reducers/index.js
@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux'
-import { routeReducer as routing } from 'react-router-redux'
+import { routerReducer as routing } from 'react-router-redux'
 import glossary from './glossary-reducer'
 import explore from './explore-reducer'
 import profile from './profile-reducer'