Implementing user syncing (SIS -> ReCodEx).

krulis-martin · krulis-martin · commit 7dbd79e53b78 · 2025-02-15T00:04:56.000+01:00
diff --git a/src/containers/LayoutContainer/LayoutContainer.js b/src/containers/LayoutContainer/LayoutContainer.js
@@ -7,7 +7,6 @@ import moment from 'moment';
 import { setLang } from '../../redux/modules/app.js';
 import { getLang, anyPendingFetchOperations } from '../../redux/selectors/app.js';
 import { isLoggedIn } from '../../redux/selectors/auth.js';
-import { getLoggedInUserSettings } from '../../redux/selectors/users.js';
 
 import Layout from '../../components/layout/Layout';
 import { messages } from '../../locales';
@@ -69,12 +68,7 @@ class LayoutContainer extends Component {
    * Get messages for the given language or the deafult - English
    */
 
-  getDefaultLang = () => {
-    const { userSettings } = this.props;
-    return userSettings && userSettings.defaultLanguage ? userSettings.defaultLanguage : 'en';
-  };
-
-  getMessages = lang => messages[lang] || messages[this.getDefaultLang()];
+  getMessages = lang => messages[lang] || messages.en;
 
   render() {
     const {
@@ -116,7 +110,6 @@ LayoutContainer.propTypes = {
   sidebarIsCollapsed: PropTypes.bool,
   sidebarIsOpen: PropTypes.bool,
   location: withRouterProps.location,
-  userSettings: PropTypes.object,
 };
 
 export default withRouter(
@@ -125,7 +118,6 @@ export default withRouter(
       lang: getLang(state),
       isLoggedIn: isLoggedIn(state),
       pendingFetchOperations: anyPendingFetchOperations(state),
-      userSettings: getLoggedInUserSettings(state),
     }),
     dispatch => ({
       setLang: lang => {
diff --git a/src/containers/SidebarContainer/SidebarContainer.js b/src/containers/SidebarContainer/SidebarContainer.js
@@ -1,8 +1,7 @@
 import { connect } from 'react-redux';
 import Sidebar from '../../components/layout/Sidebar/Sidebar.js';
-import { loggedInUserSelector, notificationsSelector } from '../../redux/selectors/users.js';
+import { loggedInUserSelector } from '../../redux/selectors/users.js';
 
 export default connect(state => ({
   loggedInUser: loggedInUserSelector(state),
-  notifications: notificationsSelector(state),
 }))(Sidebar);
diff --git a/src/locales/cs.json b/src/locales/cs.json
@@ -116,6 +116,8 @@
   "app.user.sisUserLoadedCallout": "Data ze SISu byla úspěšně načtena.",
   "app.user.syncButton": "Přepsat ReCodEx daty ze SISu",
   "app.user.title": "Osobní údaje",
+  "app.user.userSyncFailedCallout": "Synchronizace uživatele selhala. Prosím, znovu načťete stránku a opakujte akci později.",
+  "app.user.userUpdatedCallout": "Uživatelská data v ReCodExu byla úspěšně aktualizována daty ze SISu.",
   "app.userName.externalIds": "Externí identifikátory",
   "app.userName.externalIdsClickInfo": "klikutím zkopírujete ID do schránky",
   "app.userName.userDeactivated": "Uživatelský účet byl deaktivován. Uživatel se nemůže přihlásit.",
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -116,6 +116,8 @@
   "app.user.sisUserLoadedCallout": "The SIS user data were successfully (re)loaded.",
   "app.user.syncButton": "Overwrite ReCodEx with SIS Data",
   "app.user.title": "Personal Data",
+  "app.user.userSyncFailedCallout": "User sync operation failed. Reload the page and try again later.",
+  "app.user.userUpdatedCallout": "The ReCodEx user data were successfully updated by current SIS data.",
   "app.userName.externalIds": "External identifiers",
   "app.userName.externalIdsClickInfo": "click to copy the ID(s) to clipboard",
   "app.userName.userDeactivated": "The user account was deactivated. The user may not sign in.",
diff --git a/src/pages/User/User.js b/src/pages/User/User.js
@@ -11,9 +11,9 @@ import Box from '../../components/widgets/Box';
 import DateTime from '../../components/widgets/DateTime';
 import Button, { TheButtonGroup } from '../../components/widgets/TheButton';
 import Icon, { LoadingIcon, RefreshIcon, UserProfileIcon, WarningIcon } from '../../components/icons';
-import { fetchUserIfNeeded } from '../../redux/modules/users.js';
+import { fetchUserIfNeeded, syncUser, syncUserReset } from '../../redux/modules/users.js';
 import { fetchSisUser, fetchSisUserIfNeeded } from '../../redux/modules/sisUsers.js';
-import { loggedInUserSelector } from '../../redux/selectors/users.js';
+import { loggedInUserSelector, isUserSyncing, isUserUpdated, isUserSyncFailed } from '../../redux/selectors/users.js';
 import { loggedInSisUserSelector } from '../../redux/selectors/sisUsers.js';
 import { isLoading, hasFailed, getJsData } from '../../redux/helpers/resourceManager';
 
@@ -83,7 +83,16 @@ class User extends Component {
     Promise.all([dispatch(fetchUserIfNeeded(userId)), dispatch(fetchSisUserIfNeeded(userId, 30))]);
 
   render() {
-    const { loggedInUser, loggedInSisUser, fetchSisUser } = this.props;
+    const {
+      loggedInUser,
+      loggedInSisUser,
+      fetchSisUser,
+      syncUser,
+      syncReset,
+      isUserSyncing = false,
+      isUserUpdated = false,
+      isUserSyncFailed = false,
+    } = this.props;
     const sisUserData = getJsData(loggedInSisUser)?.sisUser;
     const sisUserUpdated = Boolean(getJsData(loggedInSisUser)?.updated);
     const sisUserUpdateFailed = Boolean(getJsData(loggedInSisUser)?.failed);
@@ -111,6 +120,23 @@ class User extends Component {
                 </Callout>
               )}
 
+              {isUserUpdated && (
+                <Callout variant="success">
+                  <FormattedMessage
+                    id="app.user.userUpdatedCallout"
+                    defaultMessage="The ReCodEx user data were successfully updated by current SIS data."
+                  />
+                </Callout>
+              )}
+              {isUserSyncFailed && (
+                <Callout variant="danger">
+                  <FormattedMessage
+                    id="app.user.userSyncFailedCallout"
+                    defaultMessage="User sync operation failed. Reload the page and try again later."
+                  />
+                </Callout>
+              )}
+
               <Table bordered>
                 <thead>
                   <tr>
@@ -189,16 +215,22 @@ class User extends Component {
 
               <div className="text-center">
                 <TheButtonGroup>
-                  {Object.values(diffIndex).some(v => v) && (
-                    <Button variant="success">
-                      <Icon icon="left-long" gapRight />
+                  {(isUserSyncing || Object.values(diffIndex).some(v => v)) && (
+                    <Button
+                      variant={isUserSyncFailed ? 'danger' : 'success'}
+                      disabled={isUserSyncing}
+                      onClick={() => syncUser(user.id)}>
+                      {isUserSyncing ? <LoadingIcon gapRight /> : <Icon icon="left-long" gapRight />}
                       <FormattedMessage id="app.user.syncButton" defaultMessage="Overwrite ReCodEx with SIS Data" />
                     </Button>
                   )}
                   <Button
                     variant={sisUserUpdateFailed ? 'danger' : 'primary'}
                     disabled={isLoading(loggedInSisUser)}
-                    onClick={() => fetchSisUser(user.id, 0)}>
+                    onClick={() => {
+                      syncReset(user.id);
+                      return fetchSisUser(user.id, 0);
+                    }}>
                     {isLoading(loggedInSisUser) ? <LoadingIcon gapRight /> : <RefreshIcon gapRight />}
                     <FormattedMessage id="app.user.fetchSisButton" defaultMessage="Refresh SIS Data" />
                   </Button>
@@ -215,19 +247,32 @@ class User extends Component {
 User.propTypes = {
   loggedInUser: ImmutablePropTypes.map,
   loggedInSisUser: ImmutablePropTypes.map,
+  isUserSyncing: PropTypes.bool,
+  isUserUpdated: PropTypes.bool,
+  isUserSyncFailed: PropTypes.bool,
   loadAsync: PropTypes.func.isRequired,
   fetchSisUser: PropTypes.func.isRequired,
   fetchSisUserIfNeeded: PropTypes.func.isRequired,
+  syncUser: PropTypes.func.isRequired,
+  syncReset: PropTypes.func.isRequired,
 };
 
 export default connect(
-  state => ({
-    loggedInUser: loggedInUserSelector(state),
-    loggedInSisUser: loggedInSisUserSelector(state),
-  }),
+  state => {
+    const loggedInUser = loggedInUserSelector(state);
+    return {
+      loggedInUser,
+      loggedInSisUser: loggedInSisUserSelector(state),
+      isUserSyncing: isUserSyncing(state, loggedInUser && loggedInUser.getIn(['data', 'id'], '')),
+      isUserUpdated: isUserUpdated(state, loggedInUser && loggedInUser.getIn(['data', 'id'], '')),
+      isUserSyncFailed: isUserSyncFailed(state, loggedInUser && loggedInUser.getIn(['data', 'id'], '')),
+    };
+  },
   dispatch => ({
     loadAsync: userId => User.loadAsync({ userId }, dispatch),
     fetchSisUser: (userId, expiration = null) => dispatch(fetchSisUser(userId, expiration)),
     fetchSisUserIfNeeded: (userId, expiration = null) => dispatch(fetchSisUserIfNeeded(userId, expiration)),
+    syncUser: userId => dispatch(syncUser(userId)),
+    syncReset: userId => dispatch(syncUserReset(userId)),
   })
 )(User);
diff --git a/src/redux/modules/sisUsers.js b/src/redux/modules/sisUsers.js
@@ -3,20 +3,18 @@ import { handleActions } from 'redux-actions';
 
 import factory, {
   initialState,
-  // createRecord,
-  // resourceStatus,
-  createActionsWithPostfixes,
   getJsData,
   isLoading,
   defaultNeedsRefetching,
+  createRecord,
+  resourceStatus,
 } from '../helpers/resourceManager';
 import { defaultSelectorFactory } from '../helpers/resourceManager/utils.js';
 import { createApiAction } from '../middleware/apiMiddleware.js';
 
-export const additionalActionTypes = {
-  // createActionsWithPostfixes generates all 4 constants for async operations
-  ...createActionsWithPostfixes('FETCH_BY_IDS', 'siscodex/users'),
-};
+import { additionalActionTypes as userActionTypes } from './users.js';
+
+export const additionalActionTypes = {};
 
 const resourceName = 'sisUsers';
 const apiEndpointFactory = id => `/users/${id}/sisuser`;
@@ -60,7 +58,11 @@ export const fetchSisUserIfNeeded =
 
 const reducer = handleActions(
   Object.assign({}, reduceActions, {
-    //
+    [userActionTypes.SYNC_FULFILLED]: (state, { payload: { sisUser }, meta: { id } }) =>
+      state.setIn(
+        ['resources', id],
+        createRecord({ state: resourceStatus.FULFILLED, data: { sisUser, updated: false, failed: false } })
+      ),
   }),
   initialState
 );
diff --git a/src/redux/modules/users.js b/src/redux/modules/users.js
@@ -1,18 +1,18 @@
-import { handleActions } from 'redux-actions';
-import { fromJS } from 'immutable';
+import { createAction, handleActions } from 'redux-actions';
 
 import factory, {
   initialState,
   createRecord,
   resourceStatus,
   createActionsWithPostfixes,
 } from '../helpers/resourceManager';
+import { createApiAction } from '../middleware/apiMiddleware.js';
 
 import { actionTypes as authActionTypes } from './authTypes.js';
 
 export const additionalActionTypes = {
-  // createActionsWithPostfixes generates all 4 constants for async operations
-  ...createActionsWithPostfixes('FETCH_BY_IDS', 'siscodex/users'),
+  ...createActionsWithPostfixes('SYNC', 'siscodex/users'),
+  RESET_SYNC: 'siscodex/users/RESET_SYNC',
 };
 
 const resourceName = 'users';
@@ -29,55 +29,43 @@ export const fetchManyEndpoint = '/users';
 export const fetchUser = actions.fetchResource;
 export const fetchUserIfNeeded = actions.fetchOneIfNeeded;
 
+export const syncUser = id =>
+  createApiAction({
+    type: additionalActionTypes.SYNC,
+    endpoint: `/users/${id}/sync`,
+    method: 'POST',
+    meta: { id },
+  });
+
+export const syncUserReset = createAction(additionalActionTypes.RESET_SYNC, id => ({ id }));
+
 /**
  * Reducer
  */
 const reducer = handleActions(
   Object.assign({}, reduceActions, {
-    [actionTypes.UPDATE_FULFILLED]: (state, { payload, meta: { id } }) =>
-      state.setIn(
-        ['resources', id, 'data'],
-        fromJS(payload.user && typeof payload.user === 'object' ? payload.user : payload)
-      ),
-
-    [additionalActionTypes.FETCH_BY_IDS_PENDING]: (state, { meta: { ids } }) =>
-      state.update('resources', users => {
-        ids.forEach(id => {
-          if (!users.has(id)) {
-            users = users.set(id, createRecord());
-          }
-        });
-        return users;
-      }),
-
-    [additionalActionTypes.FETCH_BY_IDS_FULFILLED]: (state, { payload, meta: { ids } }) =>
-      state.update('resources', users => {
-        payload.forEach(user => {
-          users = users.set(user.id, createRecord({ state: resourceStatus.FULFILLED, data: user }));
-        });
-        // in case some of the users were not returned in payload
-        ids.forEach(id => {
-          if (users.has(id) && users.getIn([id, 'data'], null) === null) {
-            users = users.delete(id);
-          }
-        });
-        return users;
-      }),
-
-    [additionalActionTypes.FETCH_BY_IDS_REJECTED]: (state, { meta: { ids } }) =>
-      state.update('resources', users => {
-        ids.forEach(id => {
-          if (users.has(id) && users.getIn([id, 'data'], null) === null) {
-            users = users.delete(id);
-          }
-        });
-        return users;
-      }),
+    [additionalActionTypes.SYNC_PENDING]: (state, { meta: { id } }) =>
+      state
+        .setIn(['resources', id, 'syncing'], true)
+        .removeIn(['resources', id, 'updated'])
+        .removeIn(['resources', id, 'syncFailed']),
+
+    [additionalActionTypes.SYNC_FULFILLED]: (state, { payload: { user, updated }, meta: { id } }) =>
+      state
+        .setIn(['resources', id], createRecord({ state: resourceStatus.FULFILLED, data: user }))
+        .setIn(['resources', id, 'syncing'], false)
+        .setIn(['resources', id, 'updated'], updated),
+
+    [additionalActionTypes.SYNC_REJECTED]: (state, { meta: { id } }) =>
+      state.setIn(['resources', id, 'syncing'], false).setIn(['resources', id, 'syncFailed'], true),
 
     [authActionTypes.LOGIN_FULFILLED]: (state, { payload: { user } }) =>
       user && user.id
         ? state.setIn(['resources', user.id], createRecord({ state: resourceStatus.FULFILLED, data: user }))
         : state,
+
+    [additionalActionTypes.RESET_SYNC]: (state, { payload: { id } }) =>
+      state.setIn(['resources', id, 'updated'], false).setIn(['resources', id, 'syncFailed'], false),
   }),
   initialState
 );
diff --git a/src/redux/selectors/users.js b/src/redux/selectors/users.js
