[IMPROVE] - migrating the Status container

app/constants/colors.ts

@@ -1,4 +1,4 @@
-export const STATUS_COLORS = {
+export const STATUS_COLORS: any = {
 	online: '#2de0a5',
 	busy: '#f5455c',
 	away: '#ffd21f',

app/containers/Status/Status.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { CustomIcon } from '../../lib/Icons';
 import { STATUS_COLORS } from '../../constants/colors';
 
-const Status = React.memo(({
+interface IStatus {
-	status, size, style, ...props
+	status: string;
-}) => {
+	size: number;
+	style: any;
+}
+
+const Status = React.memo(({ status, size, style, ...props }: IStatus) => {
 	const name = `status-${ status }`;
 	const isNameValid = CustomIcon.hasIcon(name);
 	const iconName = isNameValid ? name : 'status-offline';
@@ -24,14 +27,4 @@ const Status = React.memo(({
 	);
 });
 
-Status.propTypes = {
-	status: PropTypes.string,
-	size: PropTypes.number,
-	style: PropTypes.any
-};
-Status.defaultProps = {
-	status: 'offline',
-	size: 32
-};
-
 export default Status;

app/containers/Status/index.js

@@ -1,19 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import Status from './Status';
-
-const StatusContainer = memo(({ style, size = 32, status }) => <Status size={size} style={style} status={status} />);
-
-StatusContainer.propTypes = {
-	style: PropTypes.any,
-	size: PropTypes.number,
-	status: PropTypes.string
-};
-
-const mapStateToProps = (state, ownProps) => ({
-	status: state.meteor.connected ? (state.activeUsers[ownProps.id] && state.activeUsers[ownProps.id].status) : 'loading'
-});
-
-export default connect(mapStateToProps)(StatusContainer);

app/containers/Status/index.tsx

@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { connect } from 'react-redux';
+
+import Status from './Status';
+
+interface IStatusContainer {
+	style: any;
+	size: number;
+	status: string;
+}
+
+const StatusContainer = memo(({ style, size = 32, status }: IStatusContainer) => <Status size={size} style={style} status={status} />);
+
+const mapStateToProps = (state: any, ownProps: any) => ({
+	status: state.meteor.connected ? (state.activeUsers[ownProps.id] && state.activeUsers[ownProps.id].status) : 'loading'
+});
+
+export default connect(mapStateToProps)(StatusContainer);