Chore: Evaluate CreateDiscussionView - TypeScript (#4133)

app/actions/createDiscussion.ts

@@ -2,8 +2,16 @@ import { Action } from 'redux';
 
 import { CREATE_DISCUSSION } from './actionsTypes';
 
+export interface ICreateDiscussionRequestData {
+	prid: string;
+	pmid?: string;
+	t_name?: string;
+	reply?: string;
+	users: string[];
+	encrypted?: boolean;
+}
 interface ICreateDiscussionRequest extends Action {
-	data: any;
+	data: ICreateDiscussionRequestData;
 }
 
 interface ICreateDiscussionSuccess extends Action {

app/definitions/ISearch.ts

@@ -6,7 +6,7 @@ export interface ISearchLocal {
 	name: string;
 	t: string;
 	fname: string;
-	encrypted: boolean | null;
+	encrypted: boolean;
 	lastMessage?: ILastMessage;
 }
 

app/views/CreateDiscussionView/SelectChannel.tsx

@@ -20,7 +20,7 @@ const SelectChannel = ({
 	blockUnauthenticatedAccess,
 	serverVersion,
 	theme
-}: ICreateDiscussionViewSelectChannel): JSX.Element => {
+}: ICreateDiscussionViewSelectChannel): React.ReactElement => {
 	const [channels, setChannels] = useState<ISearchLocal[]>([]);
 
 	const getChannels = debounce(async (keyword = '') => {
@@ -32,7 +32,7 @@ const SelectChannel = ({
 		}
 	}, 300);
 
-	const getAvatar = (item: any) =>
+	const getAvatar = (item: ISearchLocal) =>
 		avatarURL({
 			text: getRoomAvatar(item),
 			type: item.t,

app/views/CreateDiscussionView/SelectUsers.tsx

@@ -9,14 +9,9 @@ import { MultiSelect } from '../../containers/UIKit/MultiSelect';
 import { themes } from '../../lib/constants';
 import styles from './styles';
 import { ICreateDiscussionViewSelectUsers } from './interfaces';
-import { SubscriptionType } from '../../definitions/ISubscription';
+import { SubscriptionType, IUser } from '../../definitions';
 import { getRoomAvatar, getRoomTitle, search } from '../../lib/methods';
 
-interface IUser {
-	name: string;
-	username: string;
-}
-
 const SelectUsers = ({
 	server,
 	token,
@@ -26,7 +21,7 @@ const SelectUsers = ({
 	blockUnauthenticatedAccess,
 	serverVersion,
 	theme
-}: ICreateDiscussionViewSelectUsers): JSX.Element => {
+}: ICreateDiscussionViewSelectUsers): React.ReactElement => {
 	const [users, setUsers] = useState<any[]>([]);
 
 	const getUsers = debounce(async (keyword = '') => {
@@ -41,7 +36,7 @@ const SelectUsers = ({
 		}
 	}, 300);
 
-	const getAvatar = (item: any) =>
+	const getAvatar = (item: IUser) =>
 		avatarURL({
 			text: getRoomAvatar(item),
 			type: SubscriptionType.DIRECT,

app/views/CreateDiscussionView/index.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import TextInput from '../../containers/TextInput';
 import Navigation from '../../lib/navigation/appNavigation';
-import { createDiscussionRequest } from '../../actions/createDiscussion';
+import { createDiscussionRequest, ICreateDiscussionRequestData } from '../../actions/createDiscussion';
 import { showErrorAlert } from '../../utils/info';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { goRoom } from '../../utils/goRoom';
@@ -21,19 +21,19 @@ import { events, logEvent } from '../../utils/log';
 import styles from './styles';
 import SelectUsers from './SelectUsers';
 import SelectChannel from './SelectChannel';
-import { ICreateChannelViewProps, IResult, IError } from './interfaces';
-import { IApplicationState } from '../../definitions';
+import { ICreateChannelViewProps, IResult, IError, ICreateChannelViewState } from './interfaces';
+import { IApplicationState, ISearchLocal, ISubscription } from '../../definitions';
 import { E2E_ROOM_TYPES, SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
 import { getRoomTitle } from '../../lib/methods';
 
-class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
-	private channel: any;
+class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreateChannelViewState> {
+	private channel: ISubscription;
 
 	constructor(props: ICreateChannelViewProps) {
 		super(props);
 		const { route } = props;
 		this.channel = route.params?.channel;
-		const message: any = route.params?.message ?? {};
+		const message = route.params?.message ?? {};
 		this.state = {
 			channel: this.channel,
 			message,
@@ -45,7 +45,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 		this.setHeader();
 	}
 
-	componentDidUpdate(prevProps: any, prevState: any) {
+	componentDidUpdate(prevProps: ICreateChannelViewProps, prevState: ICreateChannelViewState) {
 		const { channel, name } = this.state;
 		const { loading, failure, error, result, isMasterDetail } = this.props;
 
@@ -96,7 +96,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 	submit = () => {
 		const {
 			name: t_name,
-			channel: { prid, rid },
+			channel,
 			message: { id: pmid },
 			reply,
 			users,
@@ -104,8 +104,8 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 		} = this.state;
 		const { dispatch } = this.props;
 
-		const params: any = {
-			prid: prid || rid,
+		const params: ICreateDiscussionRequestData = {
+			prid: ('prid' in channel && channel.prid) || channel.rid,
 			pmid,
 			t_name,
 			reply,
@@ -121,15 +121,15 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 	valid = () => {
 		const { channel, name } = this.state;
 
-		return channel && channel.rid && channel.rid.trim().length && name.trim().length;
+		return channel && channel.rid && channel.rid.trim().length && name?.trim().length;
 	};
 
-	selectChannel = ({ value }: any) => {
+	selectChannel = ({ value }: { value: ISearchLocal }) => {
 		logEvent(events.CD_SELECT_CHANNEL);
 		this.setState({ channel: value, encrypted: value?.encrypted });
 	};
 
-	selectUsers = ({ value }: any) => {
+	selectUsers = ({ value }: { value: string[] }) => {
 		logEvent(events.CD_SELECT_USERS);
 		this.setState({ users: value });
 	};
@@ -140,7 +140,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, any> {
 		return encryptionEnabled && E2E_ROOM_TYPES[channel?.t];
 	}
 
-	onEncryptedChange = (value: any) => {
+	onEncryptedChange = (value: boolean) => {
 		logEvent(events.CD_TOGGLE_ENCRY);
 		this.setState({ encrypted: value });
 	};

app/views/CreateDiscussionView/interfaces.ts

@@ -1,6 +1,6 @@
 import { NewMessageStackParamList } from '../../stacks/types';
-import { SubscriptionType } from '../../definitions/ISubscription';
-import { IBaseScreen } from '../../definitions';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
+import { IBaseScreen, IMessage, ISearchLocal, IUser } from '../../definitions';
 import { TSupportedThemes } from '../../theme';
 
 export interface IResult {
@@ -14,10 +14,7 @@ export interface IError {
 }
 export interface ICreateChannelViewProps extends IBaseScreen<NewMessageStackParamList, 'CreateDiscussionView'> {
 	server: string;
-	user: {
-		id: string;
-		token: string;
-	};
+	user: IUser;
 	create: Function;
 	loading: boolean;
 	result: IResult;
@@ -29,6 +26,15 @@ export interface ICreateChannelViewProps extends IBaseScreen<NewMessageStackPara
 	encryptionEnabled: boolean;
 }
 
+export interface ICreateChannelViewState {
+	channel: ISubscription | ISearchLocal;
+	message: IMessage;
+	name?: string;
+	users: string[];
+	reply: string;
+	encrypted: boolean;
+}
+
 export interface ICreateDiscussionViewSelectChannel {
 	server: string;
 	token: string;