fix: generate new keys modal

Author: lakhansamani

dashboard/src/components/GenerateKeysModal.tsx

@@ -14,6 +14,7 @@ import {
 	Text,
 	useToast,
 	Input,
+	Spinner,
 } from '@chakra-ui/react';
 import { useClient } from 'urql';
 import { FaSave } from 'react-icons/fa';
@@ -53,37 +54,49 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
 	const [stateVariables, setStateVariables] = React.useState<stateVarTypes>({
 		...initState,
 	});
+	const [isLoading, setIsLoading] = React.useState(false);
+
 	React.useEffect(() => {
 		if (isOpen) {
 			setStateVariables({ ...initState, JWT_TYPE: jwtType });
 		}
 	}, [isOpen]);
+
 	const fetchKeys = async () => {
-		const res = await client
-			.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
-			.toPromise();
-		if (res?.error) {
-			toast({
-				title: 'Error occurred generating jwt keys',
-				isClosable: true,
-				status: 'error',
-				position: 'bottom-right',
-			});
-			closeHandler();
-		} else {
-			setStateVariables({
-				...stateVariables,
-				JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '',
-				JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_key || '',
-				JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '',
-			});
+		setIsLoading(true);
+		try {
+			const res = await client
+				.mutation(GenerateKeys, { params: { type: stateVariables.JWT_TYPE } })
+				.toPromise();
+			if (res?.error) {
+				toast({
+					title: 'Error occurred generating jwt keys',
+					isClosable: true,
+					status: 'error',
+					position: 'bottom-right',
+				});
+				closeHandler();
+			} else {
+				setStateVariables({
+					...stateVariables,
+					JWT_SECRET: res?.data?._generate_jwt_keys?.secret || '',
+					JWT_PRIVATE_KEY: res?.data?._generate_jwt_keys?.private_key || '',
+					JWT_PUBLIC_KEY: res?.data?._generate_jwt_keys?.public_key || '',
+				});
+			}
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setIsLoading(false);
 		}
 	};
+
 	React.useEffect(() => {
 		if (isOpen && stateVariables.JWT_TYPE) {
 			fetchKeys();
 		}
 	}, [stateVariables.JWT_TYPE]);
+
 	const saveHandler = async () => {
 		const res = await client
 			.mutation(UpdateEnvVariables, { params: { ...stateVariables } })
@@ -110,9 +123,10 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
 
 	const closeHandler = () => {
 		setStateVariables({ ...initState });
-		onClose();
 		getData();
+		onClose();
 	};
+
 	return (
 		<>
 			<Button
@@ -124,7 +138,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
 			>
 				Generate new keys
 			</Button>
-			<Modal isOpen={isOpen} onClose={onClose}>
+			<Modal isOpen={isOpen} onClose={closeHandler}>
 				<ModalOverlay />
 				<ModalContent>
 					<ModalHeader>New JWT keys</ModalHeader>
@@ -146,56 +160,67 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
 								}}
 							/>
 						</Flex>
-						{Object.values(HMACEncryptionType).includes(
-							stateVariables.JWT_TYPE
-						) ? (
-							<Flex marginTop="8">
-								<Flex w="23%" justifyContent="start" alignItems="center">
-									<Text fontSize="sm">JWT Secret</Text>
-								</Flex>
-								<Center w="77%">
-									<Input
-										size="sm"
-										value={stateVariables.JWT_SECRET}
-										onChange={(event: any) =>
-											setStateVariables({
-												...stateVariables,
-												JWT_SECRET: event.target.value,
-											})
-										}
-									/>
-								</Center>
-							</Flex>
+						{isLoading ? (
+							<Center minH="25vh">
+								<Spinner />
+							</Center>
 						) : (
 							<>
-								<Flex marginTop="8">
-									<Flex w="23%" justifyContent="start" alignItems="center">
-										<Text fontSize="sm">Public Key</Text>
-									</Flex>
-									<Center w="77%">
-										<InputField
-											variables={stateVariables}
-											setVariables={setStateVariables}
-											inputType={TextAreaInputType.JWT_PUBLIC_KEY}
-											placeholder="Add public key here"
-											minH="25vh"
-										/>
-									</Center>
-								</Flex>
-								<Flex marginTop="8">
-									<Flex w="23%" justifyContent="start" alignItems="center">
-										<Text fontSize="sm">Private Key</Text>
+								{Object.values(HMACEncryptionType).includes(
+									stateVariables.JWT_TYPE
+								) ? (
+									<Flex marginTop="8">
+										<Flex w="23%" justifyContent="start" alignItems="center">
+											<Text fontSize="sm">JWT Secret</Text>
+										</Flex>
+										<Center w="77%">
+											<Input
+												size="sm"
+												value={stateVariables.JWT_SECRET}
+												onChange={(event: any) =>
+													setStateVariables({
+														...stateVariables,
+														JWT_SECRET: event.target.value,
+													})
+												}
+												readOnly
+											/>
+										</Center>
 									</Flex>
-									<Center w="77%">
-										<InputField
-											variables={stateVariables}
-											setVariables={setStateVariables}
-											inputType={TextAreaInputType.JWT_PRIVATE_KEY}
-											placeholder="Add private key here"
-											minH="25vh"
-										/>
-									</Center>
-								</Flex>
+								) : (
+									<>
+										<Flex marginTop="8">
+											<Flex w="23%" justifyContent="start" alignItems="center">
+												<Text fontSize="sm">Public Key</Text>
+											</Flex>
+											<Center w="77%">
+												<InputField
+													variables={stateVariables}
+													setVariables={setStateVariables}
+													inputType={TextAreaInputType.JWT_PUBLIC_KEY}
+													placeholder="Add public key here"
+													minH="25vh"
+													readOnly
+												/>
+											</Center>
+										</Flex>
+										<Flex marginTop="8">
+											<Flex w="23%" justifyContent="start" alignItems="center">
+												<Text fontSize="sm">Private Key</Text>
+											</Flex>
+											<Center w="77%">
+												<InputField
+													variables={stateVariables}
+													setVariables={setStateVariables}
+													inputType={TextAreaInputType.JWT_PRIVATE_KEY}
+													placeholder="Add private key here"
+													minH="25vh"
+													readOnly
+												/>
+											</Center>
+										</Flex>
+									</>
+								)}
 							</>
 						)}
 					</ModalBody>
@@ -206,7 +231,7 @@ const GenerateKeysModal = ({ jwtType, getData }: propTypes) => {
 							colorScheme="blue"
 							variant="solid"
 							onClick={saveHandler}
-							isDisabled={false}
+							isDisabled={isLoading}
 						>
 							<Center h="100%" pt="5%">
 								Apply