feat: 🎸 (wip) validity on editableData & put email call

src/components/editableData/EditableData.tsx

@@ -6,24 +6,39 @@ import clsx from 'clsx';
 import { ReactComponent as CrossMarkIcon } from '../../resources/img/icons/x.svg';
 import { ReactComponent as PenIcon } from '../../resources/img/icons/pen.svg';
 import { useEffect, useState } from 'react';
+import { InputFieldLabelState } from '../inputField/InputField';
 
 export interface EditableDataProps {
 	label: string;
 	initialValue?: string;
 	isDisabled?: boolean;
 	isSingleEdit?: boolean;
 	onSingleEditActive?: Function;
+	validateCurrentValue?: Function;
+	validity?: InputFieldLabelState;
 }
 
 export const EditableData = (props: EditableDataProps) => {
 	const inputFieldRef = React.useRef<HTMLInputElement>(null);
+	const getInitialValue = props.initialValue
+		? props.initialValue
+		: translate('profile.noContent');
 	const [inputValue, setInputValue] = useState<string>();
-	const [isValid, setIsValid] = useState<boolean>(true);
+	const [isValid, setIsValid] = useState<InputFieldLabelState>(
+		props.validity ? props.validity : 'valid'
+	);
 
 	useEffect(() => {
-		inputFieldRef.current.focus();
-		inputFieldRef.current.select();
-	}, [props.isDisabled]);
+		if (!props.isDisabled) {
+			inputFieldRef.current.focus();
+			inputFieldRef.current.select();
+			inputFieldRef.current.value = !props.initialValue
+				? ''
+				: getInitialValue;
+		} else if (props.isDisabled) {
+			inputFieldRef.current.value = getInitialValue;
+		}
+	}, [props.isDisabled]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	const handleFocus = (event) => {
 		event.target.select();
@@ -32,20 +47,21 @@ export const EditableData = (props: EditableDataProps) => {
 	const handleInputValueChange = (event) => {
 		const value = event.target.value;
 		setInputValue(value);
-		setIsValid(value.length > 0 ? true : false);
+		if (props.validateCurrentValue) {
+			props.validateCurrentValue(value);
+		} else {
+			setIsValid(value.length > 0 ? 'valid' : 'invalid');
+		}
 	};
 
 	const handleRemoveButtonClick = () => {
 		setInputValue('');
-		setIsValid(false);
+		setIsValid('invalid');
 		inputFieldRef.current.focus();
 	};
 
 	const handleSingleEditButton = () => {
 		props.onSingleEditActive();
-		if (!props.initialValue) {
-			setInputValue('');
-		}
 	};
 
 	return (
@@ -61,18 +77,16 @@ export const EditableData = (props: EditableDataProps) => {
 			<input
 				className={clsx('editableData__input', {
 					'editableData__input--empty':
-						!props.initialValue && !inputValue
+						!props.initialValue && props.isDisabled,
+					'inputField__input--valid': props.validity === 'valid',
+					'inputField__input--invalid': props.validity === 'invalid'
+					//TODO: only validity on label?
 				})}
 				ref={inputFieldRef}
 				type="text"
 				onFocus={handleFocus}
 				id={props.label}
 				name={props.label}
-				defaultValue={
-					props.initialValue
-						? props.initialValue
-						: translate('profile.noContent')
-				}
 				value={inputValue}
 				onChange={handleInputValueChange}
 				disabled={props.isDisabled}

src/components/profile/AskerAboutMeData.tsx

@@ -1,28 +1,77 @@
 import * as React from 'react';
 import { useContext, useState } from 'react';
+import { apiPutEmail, FETCH_ERRORS, validateEmail } from '../../api';
 import { UserDataContext } from '../../globalState';
 import { translate } from '../../resources/scripts/i18n/translate';
 import { Button, ButtonItem, BUTTON_TYPES } from '../button/Button';
 import { EditableData } from '../editableData/EditableData';
+import { InputFieldLabelState } from '../inputField/InputField';
 import { Text } from '../text/Text';
 
 const cancelEditButton: ButtonItem = {
-	label: 'abbrechen!!?!=',
-	type: BUTTON_TYPES.LINK
-};
-
-const saveEditButton: ButtonItem = {
-	label: 'speichern!!?!=',
+	label: 'abbrechen',
 	type: BUTTON_TYPES.LINK
 };
 
 export const AskerAboutMeData = () => {
-	const { userData } = useContext(UserDataContext);
-	const [isEditActive, setIsEditActive] = useState<boolean>(false);
+	const { userData, setUserData } = useContext(UserDataContext);
+	const [isEmailDisabled, setIsEmailDisabled] = useState<boolean>(true);
+	const [email, setEmail] = useState<string>();
+	const [emailLabel, setEmailLabel] = useState<string>(
+		translate('profile.data.email')
+	);
+	const [emailLabelState, setEmailLabelState] = useState<
+		InputFieldLabelState
+	>();
+	const [isRequestInProgress, setIsRequestInProgress] = useState<boolean>(
+		false
+	);
+
+	const handleEmailValidation = (email) => {
+		const validity = validateEmail(email);
+		setEmailLabelState(validity.valid);
+		setEmailLabel(validity.label);
+		setEmail(email);
+	};
 
 	const handleCancelEditButton = () => {
-		setIsEditActive(false);
-		// TODO: set disable true
+		setIsEmailDisabled(true);
+		setEmailLabel(translate('profile.data.email'));
+		setEmailLabelState('valid');
+	};
+
+	const saveEditButton: ButtonItem = {
+		disabled: !(email && emailLabelState === 'valid'),
+		label: 'speichern',
+		type: BUTTON_TYPES.LINK
+	};
+
+	const handleSaveEditButton = () => {
+		if (!isRequestInProgress) {
+			setIsRequestInProgress(true);
+			//TODO: finish cleanups after call
+			apiPutEmail(email)
+				.then((response) => {
+					setIsRequestInProgress(false);
+					let updatedUserData = userData;
+					updatedUserData.email = email;
+					setUserData(updatedUserData);
+					setIsEmailDisabled(true);
+				})
+				.catch((error: Response) => {
+					const reason = error.headers.get(FETCH_ERRORS.X_REASON);
+					if (reason === 'EMAIL_NOT_AVAILABLE') {
+						setEmailLabel(
+							translate(
+								'furtherSteps.email.overlay.input.unavailable'
+							)
+						);
+						setEmailLabelState('invalid');
+						setIsRequestInProgress(false);
+					}
+					//TODO: handle other errors?
+				});
+		}
 	};
 
 	return (
@@ -35,19 +84,24 @@ export const AskerAboutMeData = () => {
 				<p className="profile__data__content">{userData.userName}</p>
 			</div>
 			<EditableData
-				label={translate('profile.data.email')}
+				label={emailLabel}
 				initialValue={userData.email}
-				isDisabled={true}
+				isDisabled={isEmailDisabled}
 				isSingleEdit
-				onSingleEditActive={() => setIsEditActive(true)} //TODO: set disable false
+				onSingleEditActive={() => setIsEmailDisabled(false)}
+				validateCurrentValue={(value) => handleEmailValidation(value)}
+				validity={emailLabelState}
 			/>
-			{isEditActive && (
+			{!isEmailDisabled && (
 				<>
 					<Button
 						item={cancelEditButton}
 						buttonHandle={handleCancelEditButton}
 					/>
-					<Button item={saveEditButton} buttonHandle={() => {}} />
+					<Button
+						item={saveEditButton}
+						buttonHandle={handleSaveEditButton}
+					/>
 				</>
 			)}
 		</div>