Fixed a bug where user status is not displayed on first load of a product

actions/user_actions.jsx

@@ -424,10 +424,12 @@ export function autocompleteUsers(username) {
 
 export function autoResetStatus() {
     return async (doDispatch, doGetState) => {
+        console.log('autoResetStatus called');
         const {currentUserId} = getState().entities.users;
-        const {data: userStatus} = await UserActions.getStatus(currentUserId)(doDispatch, doGetState);
-
-        if (userStatus.status === UserStatuses.OUT_OF_OFFICE || !userStatus.manual) {
+        const userStatus = Selectors.getCurrentUserStatus(doGetState());
+        console.log('userStatus');
+        console.log(userStatus);
+        if (userStatus.status === UserStatuses.OUT_OF_OFFICE || !userStatus.manual || userStatus.status === '') {
             return userStatus;
         }
 

actions/websocket_actions.jsx

@@ -61,7 +61,7 @@ import * as TeamActions from 'mattermost-redux/actions/teams';
 import {
     checkForModifiedUsers,
     getMe,
-    getMissingProfilesByIds,
+    getMissingProfilesByIds, getStatus,
     getStatusesByIds,
     getUser as loadUser,
 } from 'mattermost-redux/actions/users';
@@ -270,13 +270,15 @@ export function unregisterAllPluginWebSocketEvents(pluginId) {
 }
 
 function handleFirstConnect() {
+    console.log('handleFirstConnect');
     dispatch(batchActions([
         {
             type: GeneralTypes.WEBSOCKET_SUCCESS,
             timestamp: Date.now(),
         },
         clearErrors(),
     ]));
+    dispatch(getStatus(getCurrentUserId(getState())))
 }
 
 function handleClose(failCount) {

client/websocket_client.tsx

@@ -5,6 +5,9 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
 import store from 'stores/redux_store.jsx';
 import {SocketEvents} from 'utils/constants';
+import {dispatch} from 'jest-circus/build/state';
+import {getStatus} from 'mattermost-redux/actions/users';
+import {getCurrentUserId, getCurrentUserStatus} from 'mattermost-redux/selectors/entities/users';
 
 const MAX_WEBSOCKET_FAILS = 7;
 const MIN_WEBSOCKET_RETRY_TIME = 3000; // 3 sec
@@ -75,6 +78,7 @@ export default class WebSocketClient {
         const reliableWebSockets = config.EnableReliableWebSockets === 'true';
 
         this.conn.onopen = () => {
+            console.log('this.conn.onopen called');
             // No need to reset sequence number here.
             if (!reliableWebSockets) {
                 this.serverSequence = 0;
@@ -84,12 +88,14 @@ export default class WebSocketClient {
                 this.sendMessage('authentication_challenge', {token});
             }
 
+            console.log(`this.connectFailCount: ${this.connectFailCount}`);
             if (this.connectFailCount > 0) {
                 console.log('websocket re-established connection'); //eslint-disable-line no-console
                 if (this.reconnectCallback) {
                     this.reconnectCallback();
                 }
             } else if (this.firstConnectCallback) {
+                console.log('calling firstConnectCallback');
                 this.firstConnectCallback();
             }
 

components/logged_in/logged_in.tsx

@@ -18,6 +18,7 @@ import WebSocketClient from 'client/web_websocket_client.jsx';
 import BrowserStore from 'stores/browser_store';
 import {UserProfile} from 'mattermost-redux/types/users';
 import {Channel} from 'mattermost-redux/types/channels';
+import {getStatus} from 'mattermost-redux/actions/users';
 
 const dispatch = store.dispatch;
 const getState = store.getState;

components/reset_status_modal/index.ts

@@ -16,7 +16,7 @@ import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {setStatus} from 'mattermost-redux/actions/users';
 import {Preferences} from 'mattermost-redux/constants';
 import {get} from 'mattermost-redux/selectors/entities/preferences';
-import {getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUserStatus, getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
 
 import {autoResetStatus} from 'actions/user_actions.jsx';
 
@@ -26,7 +26,8 @@ function mapStateToProps(state: GlobalState) {
     const {currentUserId} = state.entities.users;
     return {
         autoResetPref: get(state, Preferences.CATEGORY_AUTO_RESET_MANUAL_STATUS, currentUserId, ''),
-        currentUserStatus: getStatusForUserId(state, currentUserId),
+        // currentUserStatus: getStatusForUserId(state, currentUserId),
+        currentUserStatus: getCurrentUserStatus(state).status,
     };
 }
 
@@ -37,12 +38,17 @@ type Actions = {
 };
 
 function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
+    const actions = bindActionCreators<ActionCreatorsMapObject<ActionFunc>, Actions>({
+        setStatus,
+        savePreferences,
+    }, dispatch);
+
+    const autoResetStatusAction = bindActionCreators<ActionCreatorsMapObject<UserStatus>, any>({
+        autoResetStatus,
+    }, dispatch);
+
     return {
-        actions: bindActionCreators<ActionCreatorsMapObject<ActionFunc>, Actions>({
-            autoResetStatus,
-            setStatus,
-            savePreferences,
-        }, dispatch),
+        actions: {...actions, ...autoResetStatusAction},
     };
 }
 

components/reset_status_modal/reset_status_modal.tsx

@@ -12,6 +12,7 @@ import {UserStatuses} from 'utils/constants';
 import {t} from 'utils/i18n';
 import {UserStatus} from 'mattermost-redux/types/users';
 import {PreferenceType} from 'mattermost-redux/types/preferences';
+import {dispatch} from 'jest-circus/build/state';
 
 t('modal.manual_status.auto_responder.message_');
 t('modal.manual_status.auto_responder.message_away');
@@ -103,17 +104,37 @@ export default class ResetStatusModal extends React.PureComponent<Props, State>
     }
 
     public componentDidMount(): void {
-        this.props.actions.autoResetStatus().then(
-            (status: UserStatus) => {
-                const statusIsManual = status.manual;
-                const autoResetPrefNotSet = this.props.autoResetPref === '';
-
-                this.setState({
-                    currentUserStatus: status, // Set in state until status refactor where we store 'manual' field in redux
-                    show: Boolean(status.status === UserStatuses.OUT_OF_OFFICE || (statusIsManual && autoResetPrefNotSet)),
-                });
-            },
-        );
+        console.log(`currentUserStatus: ${this.props.currentUserStatus}`);
+        // this.props.actions.autoResetStatus().then(
+        //     (status: UserStatus) => {
+        //         const statusIsManual = status.manual;
+        //         const autoResetPrefNotSet = this.props.autoResetPref === '';
+        //
+        //         this.setState({
+        //             currentUserStatus: status, // Set in state until status refactor where we store 'manual' field in redux
+        //             show: Boolean(status.status === UserStatuses.OUT_OF_OFFICE || (statusIsManual && autoResetPrefNotSet)),
+        //         });
+        //     },
+        // );
+    }
+
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) {
+        console.log(`prev ${prevProps.currentUserStatus}, now: ${this.props.currentUserStatus}`);
+
+
+        if (prevProps.currentUserStatus === '' && this.props.currentUserStatus != '') {
+            this.props.actions.autoResetStatus().then(
+                (status: UserStatus) => {
+                    const statusIsManual = status.manual;
+                    const autoResetPrefNotSet = this.props.autoResetPref === '';
+
+                    this.setState({
+                        currentUserStatus: status, // Set in state until status refactor where we store 'manual' field in redux
+                        show: Boolean(status.status === UserStatuses.OUT_OF_OFFICE || (statusIsManual && autoResetPrefNotSet)),
+                    });
+                },
+            );
+        }
     }
 
     private hideModal = (): void => this.setState({show: false});

components/status_dropdown/index.ts

@@ -27,7 +27,6 @@ function makeMapStateToProps() {
 
     return function mapStateToProps(state: GlobalState) {
         const currentUser = getCurrentUser(state);
-
         const userId = currentUser?.id;
         const customStatus = getCustomStatus(state, userId);
         const isMilitaryTime = getBool(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false);

components/status_dropdown/status_dropdown.test.tsx

@@ -26,6 +26,7 @@ describe('components/StatusDropdown', () => {
         setStatus: jest.fn(),
         unsetCustomStatus: jest.fn(),
         setStatusDropdown: jest.fn(),
+        setUserStatus: jest.fn(),
     };
 
     const baseProps = {

packages/mattermost-redux/src/actions/errors.ts

@@ -68,6 +68,7 @@ export function logError(error: ServerError, displayable = false): ActionFunc {
 }
 
 export function clearErrors(): ActionFunc {
+    console.log('B');
     return async (dispatch: DispatchFunc) => {
         dispatch({type: ErrorTypes.CLEAR_ERRORS, data: null});
 

packages/mattermost-redux/src/actions/users.ts

@@ -249,6 +249,7 @@ export function loadMe(): ActionFunc {
         const user = getState().entities.users.profiles[currentUserId];
         if (currentUserId) {
             Client4.setUserId(currentUserId);
+            // window.setTimeout(() => dispatch(getStatus(currentUserId)), 15000)
         }
 
         if (user) {

packages/mattermost-redux/src/client/client4.ts

@@ -968,6 +968,7 @@ export default class Client4 {
     };
 
     getStatus = (userId: string) => {
+        console.log('Fetching user status');
         return this.doFetch<UserStatus>(
             `${this.getUserRoute(userId)}/status`,
             {method: 'get'},

packages/mattermost-redux/src/reducers/entities/users.ts

@@ -419,6 +419,17 @@ function profilesInGroup(state: RelationOneToMany<Group, UserProfile> = {}, acti
     }
 }
 
+function currentUserStatus(state: RelationOneToOne<UserProfile, string> = {}, action: GenericAction) {
+    switch (action.type) {
+    case UserTypes.RECEIVED_STATUS: {
+        return action.data;
+    }
+    default: {
+        return state;
+    }
+    }
+}
+
 function statuses(state: RelationOneToOne<UserProfile, string> = {}, action: GenericAction) {
     switch (action.type) {
     case UserTypes.RECEIVED_STATUS: {
@@ -635,4 +646,7 @@ export default combineReducers({
 
     // Total user stats after filters have been applied
     filteredStats,
+
+    // Current user's status object, including details about manual status.
+    currentUserStatus,
 });

packages/mattermost-redux/src/selectors/entities/users.ts

@@ -33,7 +33,7 @@ import {Reaction} from 'mattermost-redux/types/reactions';
 import {GlobalState} from 'mattermost-redux/types/store';
 import {Team, TeamMembership} from 'mattermost-redux/types/teams';
 import {Group} from 'mattermost-redux/types/groups';
-import {UserProfile} from 'mattermost-redux/types/users';
+import {UserProfile, UserStatus} from 'mattermost-redux/types/users';
 import {
     $Email,
     $ID,
@@ -381,6 +381,10 @@ export const getProfilesWithoutTeam: (state: GlobalState, filters: Filters) => U
     },
 );
 
+export function getCurrentUserStatus(state: GlobalState): UserStatus {
+    return state.entities.users.currentUserStatus;
+}
+
 export function getStatusForUserId(state: GlobalState, userId: $ID<UserProfile>): string {
     return getUserStatuses(state)[userId];
 }

packages/mattermost-redux/src/store/initial_state.ts

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import {GlobalState} from 'mattermost-redux/types/store';
+import {General} from '../constants';
 
 const state: GlobalState = {
     entities: {
@@ -18,6 +19,7 @@ const state: GlobalState = {
         },
         users: {
             currentUserId: '',
+            currentUserStatus: {user_id: '', status: ''},
             isManualStatus: {},
             mySessions: [],
             myAudits: [],

packages/mattermost-redux/src/types/users.ts

@@ -64,6 +64,7 @@ export type UserProfileWithLastViewAt = UserProfile & {
 
 export type UsersState = {
     currentUserId: string;
+    currentUserStatus: UserStatus;
     isManualStatus: RelationOneToOne<UserProfile, boolean>;
     mySessions: Session[];
     myAudits: Audit[];