From e9261af4b08648e665d8abec91add9d304f15c39 Mon Sep 17 00:00:00 2001
From: julia foresti <juliaforesti@julias-MacBook-Pro.local>
Date: Fri, 20 May 2022 17:24:24 -0300
Subject: [PATCH] Convert Create Channel to ts

---
 .../{CreateChannel.js => CreateChannel.tsx}   | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)
 rename apps/meteor/client/sidebar/header/{CreateChannel.js => CreateChannel.tsx} (85%)

diff --git a/apps/meteor/client/sidebar/header/CreateChannel.js b/apps/meteor/client/sidebar/header/CreateChannel.tsx
similarity index 85%
rename from apps/meteor/client/sidebar/header/CreateChannel.js
rename to apps/meteor/client/sidebar/header/CreateChannel.tsx
index f5a2f25dec49..7f18bf7978f9 100644
--- a/apps/meteor/client/sidebar/header/CreateChannel.js
+++ b/apps/meteor/client/sidebar/header/CreateChannel.tsx
@@ -1,10 +1,34 @@
 import { Box, Modal, ButtonGroup, Button, TextInput, Icon, Field, ToggleSwitch, FieldGroup } from '@rocket.chat/fuselage';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import { useSetting, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
 
 import UserAutoCompleteMultiple from '../../components/UserAutoCompleteMultiple';
 
+type CreateChannelProps = {
+	values: {
+		name: string;
+		type?: boolean;
+		readOnly?: boolean;
+		encrypted?: boolean;
+		broadcast?: boolean;
+		users?: string[];
+	};
+	handlers: {
+		handleName?: () => void;
+		handleDescription?: () => void;
+		handleEncrypted?: () => void;
+		handleReadOnly?: () => void;
+	};
+	hasUnsavedChanges: boolean;
+	onChangeUsers: () => void;
+	onChangeType: () => void;
+	onChangeBroadcast: () => void;
+	canOnlyCreateOneType?: boolean;
+	e2eEnabledForPrivateByDefault?: boolean;
+	onCreate: () => void;
+	onClose: () => void;
+};
 const CreateChannel = ({
 	values,
 	handlers,
@@ -16,7 +40,7 @@ const CreateChannel = ({
 	e2eEnabledForPrivateByDefault,
 	onCreate,
 	onClose,
-}) => {
+}: CreateChannelProps): ReactElement => {
 	const t = useTranslation();
 	const e2eEnabled = useSetting('E2E_Enable');
 	const namesValidation = useSetting('UTF8_Channel_Names_Validation');
@@ -25,11 +49,11 @@ const CreateChannel = ({
 
 	const channelNameRegex = useMemo(() => new RegExp(`^${namesValidation}$`), [namesValidation]);
 
-	const [nameError, setNameError] = useState();
+	const [nameError, setNameError] = useState<string>();
 
 	const checkName = useDebouncedCallback(
-		async (name) => {
-			setNameError(false);
+		async (name: string) => {
+			setNameError(undefined);
 			if (hasUnsavedChanges) {
 				return;
 			}
@@ -98,7 +122,7 @@ const CreateChannel = ({
 									{values.type ? t('Only_invited_users_can_acess_this_channel') : t('Everyone_can_access_this_channel')}
 								</Field.Description>
 							</Box>
-							<ToggleSwitch checked={values.type} disabled={!!canOnlyCreateOneType} onChange={onChangeType} />
+							<ToggleSwitch checked={!!values.type} disabled={!!canOnlyCreateOneType} onChange={onChangeType} />
 						</Box>
 					</Field>
 					<Field>