Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
MM 20545 migrate components/user settings/display to type script (#5988)
Browse files Browse the repository at this point in the history 
* migration from index.js to index.ts

* migration of files from jsx to tsx

* Es lint errors rectified in index file

* rectify type errors in user_settings_display.tsx

* eslint error correction

* type errors rectified in this file

* type errors resolve

* Types correction for user settings display component

* linting error

* type errors resolving

* type errors in user_setting_display component

* resolve type errors in user_settings_display test file

* tests snapshot update

* resolved comments for the PR

* small fix

* quick fix

* type change

* type errors resolve

* type refinement
  • Loading branch information
@sridhar02
sridhar02 committed Aug 18, 2020
1 parent c00ca47 commit f4c21aa
Show file tree
Hide file tree
Showing 6 changed files with 159 additions and 101 deletions.
12 changes: 1 addition & 11 deletions ...ots__/user_settings_display.test.jsx.snap → ...ots__/user_settings_display.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -484,7 +483,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -731,7 +729,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -1080,7 +1077,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -1327,7 +1323,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -1594,7 +1589,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -1775,7 +1769,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -1956,7 +1949,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -2137,7 +2129,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -2205,6 +2196,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
<div>
<Connect(ThemeSetting)
allowCustomThemes={true}
selected={true}
setEnforceFocus={[MockFunction]}
setRequireConfirm={[MockFunction]}
Expand Down Expand Up @@ -2329,7 +2321,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down Expand Up @@ -2510,7 +2501,6 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
/>
}
updateSection={[Function]}
width="medium"
/>
<div
className="divider-dark"
Expand Down
18 changes: 10 additions & 8 deletions components/user_settings/display/index.js → components/user_settings/display/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
// See LICENSE.txt for license information.

import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {GenericAction} from 'mattermost-redux/types/actions';
import {bindActionCreators, Dispatch} from 'redux';

import {savePreferences} from 'mattermost-redux/actions/preferences';
import {getSupportedTimezones} from 'mattermost-redux/actions/general';
Expand All @@ -15,23 +16,24 @@ import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';

import {Preferences} from 'utils/constants';

import UserSettingsDisplay from './user_settings_display.jsx';
import {GlobalState} from 'types/store';

function mapStateToProps(state) {
import UserSettingsDisplay from './user_settings_display';

function mapStateToProps(state: GlobalState) {
const config = getConfig(state);
const timezones = getTimezones(state);
const currentUserId = getCurrentUserId(state);
const userTimezone = getUserTimezone(state, currentUserId);
const automaticTimezoneNotSet = userTimezone && userTimezone.useAutomaticTimezone && !userTimezone.automaticTimezone;
const shouldAutoUpdateTimezone = !userTimezone || automaticTimezoneNotSet;

const allowCustomThemes = config.AllowCustomThemes === 'true';
const enableLinkPreviews = config.EnableLinkPreviews === 'true';
const defaultClientLocale = config.DefaultClientLocale;
const defaultClientLocale = config.DefaultClientLocale as string;
const enableThemeSelection = config.EnableThemeSelection === 'true';
const enableTimezone = config.ExperimentalTimezone === 'true';
const lockTeammateNameDisplay = getLicense(state).LockTeammateNameDisplay === 'true' && config.LockTeammateNameDisplay === 'true';
const configTeammateNameDisplay = config.TeammateNameDisplay;
const configTeammateNameDisplay = config.TeammateNameDisplay as string;

return {
lockTeammateNameDisplay,
Expand All @@ -44,7 +46,7 @@ function mapStateToProps(state) {
timezones,
userTimezone,
shouldAutoUpdateTimezone,
currentUserTimezone: getUserCurrentTimezone(userTimezone),
currentUserTimezone: getUserCurrentTimezone(userTimezone) as string,
militaryTime: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, Preferences.USE_MILITARY_TIME_DEFAULT),
teammateNameDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.NAME_NAME_FORMAT, configTeammateNameDisplay),
channelDisplayMode: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT),
Expand All @@ -54,7 +56,7 @@ function mapStateToProps(state) {
};
}

function mapDispatchToProps(dispatch) {
function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
return {
actions: bindActionCreators({
getSupportedTimezones,
Expand Down
2 changes: 1 addition & 1 deletion components/user_settings/display/manage_timezones/manage_timezones.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ type Actions = {

type Props ={
user: UserProfile;
updateSection: (section: string) => Promise<void>;
updateSection: (section: string) => void;
useAutomaticTimezone: boolean;
automaticTimezone: string;
manualTimezone: string;
Expand Down
57 changes: 36 additions & 21 deletions ...gs/display/user_settings_display.test.jsx → ...gs/display/user_settings_display.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import PropTypes from 'prop-types';
import {shallow} from 'enzyme';
import configureStore from 'redux-mock-store';

import {UserProfile} from 'mattermost-redux/types/users';

import {mountWithIntl} from 'tests/helpers/intl-test-helper';
import UserSettingsDisplay from 'components/user_settings/display/user_settings_display.jsx';
import UserSettingsDisplay from 'components/user_settings/display/user_settings_display';

describe('components/user_settings/display/UserSettingsDisplay', () => {
const user = {
Expand All @@ -22,9 +24,8 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
};

const requiredProps = {
user,
user: user as UserProfile,
updateSection: jest.fn(),
updateTab: jest.fn(),
activeSection: '',
closeModal: jest.fn(),
collapseModal: jest.fn(),
Expand All @@ -49,6 +50,20 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
autoUpdateTimezone: jest.fn(),
savePreferences: jest.fn(),
},

configTeammateNameDisplay: '',
currentUserTimezone: 'America/New_York',
enableTimezone: true,
shouldAutoUpdateTimezone: true,
lockTeammateNameDisplay: false,

allowCustomThemes: true,
militaryTime: '',
teammateNameDisplay: '',
channelDisplayMode: '',
messageDisplay: '',
collapseDisplay: '',
linkPreviewDisplay: '',
};
const mockStore = configureStore();
const state = {
Expand Down Expand Up @@ -158,7 +173,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

await wrapper.instance().handleSubmit();
await (wrapper.instance() as UserSettingsDisplay).handleSubmit();
expect(updateSection).toHaveBeenCalledWith('');
});

Expand All @@ -173,10 +188,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().updateSection('');
(wrapper.instance() as UserSettingsDisplay).updateSection('');
expect(updateSection).toHaveBeenCalledWith('');

wrapper.instance().updateSection('linkpreview');
(wrapper.instance() as UserSettingsDisplay).updateSection('linkpreview');
expect(updateSection).toHaveBeenCalledWith('linkpreview');
});

Expand Down Expand Up @@ -219,10 +234,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleClockRadio('false');
(wrapper.instance() as UserSettingsDisplay).handleClockRadio('false');
expect(wrapper.state('militaryTime')).toBe('false');

wrapper.instance().handleClockRadio('true');
(wrapper.instance() as UserSettingsDisplay).handleClockRadio('true');
expect(wrapper.state('militaryTime')).toBe('true');
});

Expand All @@ -235,13 +250,13 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleTeammateNameDisplayRadio('username');
(wrapper.instance() as UserSettingsDisplay).handleTeammateNameDisplayRadio('username');
expect(wrapper.state('teammateNameDisplay')).toBe('username');

wrapper.instance().handleTeammateNameDisplayRadio('nickname_full_name');
(wrapper.instance() as UserSettingsDisplay).handleTeammateNameDisplayRadio('nickname_full_name');
expect(wrapper.state('teammateNameDisplay')).toBe('nickname_full_name');

wrapper.instance().handleTeammateNameDisplayRadio('full_name');
(wrapper.instance() as UserSettingsDisplay).handleTeammateNameDisplayRadio('full_name');
expect(wrapper.state('teammateNameDisplay')).toBe('full_name');
});

Expand All @@ -254,10 +269,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleChannelDisplayModeRadio('full');
(wrapper.instance() as UserSettingsDisplay).handleChannelDisplayModeRadio('full');
expect(wrapper.state('channelDisplayMode')).toBe('full');

wrapper.instance().handleChannelDisplayModeRadio('centered');
(wrapper.instance() as UserSettingsDisplay).handleChannelDisplayModeRadio('centered');
expect(wrapper.state('channelDisplayMode')).toBe('centered');
});

Expand All @@ -270,10 +285,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handlemessageDisplayRadio('clean');
(wrapper.instance() as UserSettingsDisplay).handlemessageDisplayRadio('clean');
expect(wrapper.state('messageDisplay')).toBe('clean');

wrapper.instance().handlemessageDisplayRadio('compact');
(wrapper.instance() as UserSettingsDisplay).handlemessageDisplayRadio('compact');
expect(wrapper.state('messageDisplay')).toBe('compact');
});

Expand All @@ -286,10 +301,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleCollapseRadio('false');
(wrapper.instance() as UserSettingsDisplay).handleCollapseRadio('false');
expect(wrapper.state('collapseDisplay')).toBe('false');

wrapper.instance().handleCollapseRadio('true');
(wrapper.instance() as UserSettingsDisplay).handleCollapseRadio('true');
expect(wrapper.state('collapseDisplay')).toBe('true');
});

Expand All @@ -302,10 +317,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleLinkPreviewRadio('false');
(wrapper.instance() as UserSettingsDisplay).handleLinkPreviewRadio('false');
expect(wrapper.state('linkPreviewDisplay')).toBe('false');

wrapper.instance().handleLinkPreviewRadio('true');
(wrapper.instance() as UserSettingsDisplay).handleLinkPreviewRadio('true');
expect(wrapper.state('linkPreviewDisplay')).toBe('true');
});

Expand All @@ -318,10 +333,10 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
},
);

wrapper.instance().handleOnChange({display: 'linkPreviewDisplay'});
(wrapper.instance() as UserSettingsDisplay).handleOnChange({display: 'linkPreviewDisplay'});
expect(wrapper.state('display')).toBe('linkPreviewDisplay');

wrapper.instance().handleOnChange({display: 'collapseDisplay'});
(wrapper.instance() as UserSettingsDisplay).handleOnChange({display: 'collapseDisplay'});
expect(wrapper.state('display')).toBe('collapseDisplay');
});
});
Loading

0 comments on commit f4c21aa

Please sign in to comment.