mirror of https://gitlab.com/ecentrics/concordia
6 changed files with 515 additions and 135 deletions
@ -0,0 +1,104 @@ |
|||
import React, { useCallback, useEffect, useMemo } from 'react'; |
|||
import { |
|||
Form, Input, |
|||
} from 'semantic-ui-react'; |
|||
import throttle from 'lodash/throttle'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { useSelector } from 'react-redux'; |
|||
import PropTypes from 'prop-types'; |
|||
import { drizzle } from '../redux/store'; |
|||
import { FORUM_CONTRACT } from '../constants/contracts/ContractNames'; |
|||
|
|||
const { contracts: { [FORUM_CONTRACT]: { methods: { isUserNameTaken } } } } = drizzle; |
|||
|
|||
const UsernameSelector = (props) => { |
|||
const { |
|||
initialUsername, username, onChangeCallback, onErrorChangeCallback, |
|||
} = props; |
|||
const isUserNameTakenResults = useSelector((state) => state.contracts[FORUM_CONTRACT].isUserNameTaken); |
|||
const { t } = useTranslation(); |
|||
|
|||
useEffect(() => { |
|||
if (username.length > 0) { |
|||
const checkedUsernames = Object |
|||
.values(isUserNameTakenResults) |
|||
.map((callCompleted) => ({ |
|||
checkedUsername: callCompleted.args[0], |
|||
isTaken: callCompleted.value, |
|||
})); |
|||
|
|||
const checkedUsername = checkedUsernames |
|||
.find((callCompleted) => callCompleted.checkedUsername === username); |
|||
|
|||
if (checkedUsername && checkedUsername.isTaken && username !== initialUsername) { |
|||
onErrorChangeCallback({ |
|||
usernameChecked: true, |
|||
error: true, |
|||
errorMessage: t('username.selector.error.username.taken.message', { username }), |
|||
}); |
|||
} else { |
|||
onErrorChangeCallback({ |
|||
usernameChecked: checkedUsername !== undefined, |
|||
error: false, |
|||
errorMessage: null, |
|||
}); |
|||
} |
|||
|
|||
return; |
|||
} |
|||
|
|||
// Username input is empty |
|||
if (initialUsername && initialUsername !== '') { |
|||
onErrorChangeCallback({ |
|||
usernameChecked: true, |
|||
error: true, |
|||
errorMessage: t('username.selector.error.username.empty.message'), |
|||
}); |
|||
} else { |
|||
onErrorChangeCallback({ |
|||
usernameChecked: true, |
|||
error: false, |
|||
errorMessage: null, |
|||
}); |
|||
} |
|||
}, [initialUsername, isUserNameTakenResults, onErrorChangeCallback, t, username, username.length]); |
|||
|
|||
const checkUsernameTaken = useMemo(() => throttle( |
|||
(usernameToCheck) => { |
|||
isUserNameTaken.cacheCall(usernameToCheck); |
|||
}, 200, |
|||
), []); |
|||
|
|||
const handleInputChange = useCallback((event, { value }) => { |
|||
onChangeCallback(value); |
|||
|
|||
if (value.length > 0) { |
|||
checkUsernameTaken(value); |
|||
} |
|||
}, [checkUsernameTaken, onChangeCallback]); |
|||
|
|||
return ( |
|||
<Form.Field required> |
|||
<label htmlFor="form-field-username-selector"> |
|||
{t('username.selector.username.field.label')} |
|||
</label> |
|||
<Input |
|||
id="form-field-username-selector" |
|||
placeholder={t('username.selector.username.field.placeholder')} |
|||
name="usernameInput" |
|||
className="form-input" |
|||
value={username} |
|||
onChange={handleInputChange} |
|||
/> |
|||
</Form.Field> |
|||
); |
|||
}; |
|||
|
|||
UsernameSelector.propTypes = { |
|||
initialUsername: PropTypes.string, |
|||
username: PropTypes.string.isRequired, |
|||
onChangeCallback: PropTypes.func.isRequired, |
|||
onErrorChangeCallback: PropTypes.func.isRequired, |
|||
}; |
|||
|
|||
export default UsernameSelector; |
|||
@ -0,0 +1,235 @@ |
|||
import React, { |
|||
useCallback, useEffect, useMemo, useState, |
|||
} from 'react'; |
|||
import { |
|||
Button, Form, Icon, Image, Input, Message, Modal, |
|||
} from 'semantic-ui-react'; |
|||
import PropTypes from 'prop-types'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import checkUrlValid from '../../../../utils/urlUtils'; |
|||
import { USER_LOCATION, USER_PROFILE_PICTURE } from '../../../../constants/orbit/UserDatabaseKeys'; |
|||
import { USER_DATABASE } from '../../../../constants/orbit/OrbitDatabases'; |
|||
import { breeze, drizzle } from '../../../../redux/store'; |
|||
import UsernameSelector from '../../../../components/UsernameSelector'; |
|||
import { FORUM_CONTRACT } from '../../../../constants/contracts/ContractNames'; |
|||
|
|||
const { orbit: { stores } } = breeze; |
|||
const { contracts: { [FORUM_CONTRACT]: { methods: { updateUsername } } } } = drizzle; |
|||
|
|||
const EditInformationModal = (props) => { |
|||
const { |
|||
initialUsername, initialAuthorAvatar, initialUserLocation, open, onSubmit, onCancel, |
|||
} = props; |
|||
const [usernameInput, setUsernameInput] = useState(initialUsername); |
|||
const [usernameChecked, setUsernameChecked] = useState(true); |
|||
const [profilePictureInput, setProfilePictureInput] = useState(''); |
|||
const [profilePictureUrlValid, setProfilePictureUrlValid] = useState(true); |
|||
const [locationInput, setLocationInput] = useState(''); |
|||
const [error, setError] = useState(false); |
|||
const [errorMessages, setErrorMessages] = useState([]); |
|||
const [usernameError, setUsernameError] = useState(false); |
|||
const [usernameErrorMessage, setUsernameErrorMessage] = useState(''); |
|||
const { t } = useTranslation(); |
|||
|
|||
useEffect(() => { |
|||
setLocationInput(initialUserLocation || ''); |
|||
}, [initialUserLocation]); |
|||
|
|||
useEffect(() => { |
|||
setProfilePictureInput(initialAuthorAvatar || ''); |
|||
setProfilePictureUrlValid(initialAuthorAvatar ? checkUrlValid(initialAuthorAvatar) : true); |
|||
}, [initialAuthorAvatar]); |
|||
|
|||
useEffect(() => { |
|||
let formHasError = false; |
|||
const formErrors = []; |
|||
|
|||
if (!profilePictureUrlValid) { |
|||
formHasError = true; |
|||
formErrors.push(t('edit.information.modal.form.error.invalid.profile.picture.url.message')); |
|||
} |
|||
|
|||
setError(formHasError); |
|||
setErrorMessages(formErrors); |
|||
}, [profilePictureUrlValid, t]); |
|||
|
|||
const handleUsernameChange = (modifiedUsername) => { |
|||
setUsernameInput(modifiedUsername); |
|||
}; |
|||
|
|||
const handleUsernameErrorChange = useCallback(({ |
|||
usernameChecked: isUsernameChecked, |
|||
error: hasUsernameError, |
|||
errorMessage, |
|||
}) => { |
|||
setUsernameChecked(isUsernameChecked); |
|||
|
|||
if (hasUsernameError) { |
|||
setUsernameError(true); |
|||
setUsernameErrorMessage(errorMessage); |
|||
} else { |
|||
setUsernameError(false); |
|||
} |
|||
}, []); |
|||
|
|||
const handleInputChange = useCallback((event, { name, value }) => { |
|||
if (name === 'profilePictureInput') { |
|||
setProfilePictureInput(value); |
|||
|
|||
if (value.length > 0) { |
|||
setProfilePictureUrlValid(checkUrlValid(value)); |
|||
} else { |
|||
setProfilePictureUrlValid(true); |
|||
} |
|||
} |
|||
|
|||
if (name === 'locationInput') { |
|||
setLocationInput(value); |
|||
} |
|||
}, []); |
|||
|
|||
const profilePicture = useMemo(() => (profilePictureInput.length > 0 && profilePictureUrlValid |
|||
? (<Image size="medium" src={profilePictureInput} wrapped />) |
|||
: (<Icon name="user circle" size="massive" inverted color="black" />) |
|||
), [profilePictureInput, profilePictureUrlValid]); |
|||
|
|||
const handleSubmit = useCallback(() => { |
|||
const keyValuesToStore = []; |
|||
|
|||
keyValuesToStore.push({ |
|||
key: USER_PROFILE_PICTURE, |
|||
value: profilePictureInput, |
|||
}); |
|||
|
|||
keyValuesToStore.push({ |
|||
key: USER_LOCATION, |
|||
value: locationInput, |
|||
}); |
|||
|
|||
const userDb = Object.values(stores).find((store) => store.dbname === USER_DATABASE); |
|||
|
|||
const promiseArray = keyValuesToStore |
|||
.map((keyValueToStore) => { |
|||
if (keyValueToStore.value !== '') { |
|||
return userDb |
|||
.put(keyValueToStore.key, keyValueToStore.value, { pin: true }); |
|||
} |
|||
|
|||
return userDb.del(keyValueToStore.key); |
|||
}); |
|||
|
|||
Promise |
|||
.all(promiseArray) |
|||
.then(() => { |
|||
// TODO: display a message |
|||
}) |
|||
.catch((reason) => { |
|||
console.log(reason); |
|||
}); |
|||
|
|||
if (usernameInput !== initialUsername) { |
|||
updateUsername.cacheSend(usernameInput); |
|||
} |
|||
|
|||
onSubmit(); |
|||
}, [initialUsername, locationInput, onSubmit, profilePictureInput, usernameInput]); |
|||
|
|||
return useMemo(() => ( |
|||
<Modal |
|||
onClose={onCancel} |
|||
open={open} |
|||
> |
|||
<Modal.Header>{t('edit.information.modal.title')}</Modal.Header> |
|||
<Modal.Content image> |
|||
{profilePicture} |
|||
<Modal.Description> |
|||
<Form> |
|||
<UsernameSelector |
|||
initialUsername={initialUsername} |
|||
username={usernameInput} |
|||
onChangeCallback={handleUsernameChange} |
|||
onErrorChangeCallback={handleUsernameErrorChange} |
|||
/> |
|||
<Form.Field> |
|||
<label htmlFor="form-edit-information-field-profile-picture"> |
|||
{t('edit.information.modal.form.profile.picture.field.label')} |
|||
</label> |
|||
<Input |
|||
id="form-edit-information-field-profile-picture" |
|||
placeholder={t('edit.information.modal.form.profile.picture.field.placeholder')} |
|||
name="profilePictureInput" |
|||
className="form-input" |
|||
value={profilePictureInput} |
|||
onChange={handleInputChange} |
|||
/> |
|||
</Form.Field> |
|||
<Form.Field> |
|||
<label htmlFor="form-edit-information-field-location"> |
|||
{t('edit.information.modal.form.location.field.label')} |
|||
</label> |
|||
<Input |
|||
id="form-edit-information-field-location" |
|||
placeholder={t('edit.information.modal.form.location.field.placeholder')} |
|||
name="locationInput" |
|||
className="form-input" |
|||
value={locationInput} |
|||
onChange={handleInputChange} |
|||
/> |
|||
</Form.Field> |
|||
</Form> |
|||
{error === true && ( |
|||
errorMessages |
|||
.map((errorMessage) => ( |
|||
<Message |
|||
error |
|||
header={t('edit.information.modal.form.error.message.header')} |
|||
content={errorMessage} |
|||
/> |
|||
)) |
|||
)} |
|||
{usernameError === true && ( |
|||
<Message |
|||
error |
|||
header={t('edit.information.modal.form.error.message.header')} |
|||
content={usernameErrorMessage} |
|||
/> |
|||
)} |
|||
</Modal.Description> |
|||
</Modal.Content> |
|||
<Modal.Actions> |
|||
<Button color="black" onClick={onCancel}> |
|||
{t('edit.information.modal.form.cancel.button')} |
|||
</Button> |
|||
<Button |
|||
content={t('edit.information.modal.form.submit.button')} |
|||
labelPosition="right" |
|||
icon="checkmark" |
|||
onClick={handleSubmit} |
|||
positive |
|||
loading={!usernameChecked} |
|||
disabled={!usernameChecked || error || usernameError} |
|||
/> |
|||
</Modal.Actions> |
|||
</Modal> |
|||
), [ |
|||
error, errorMessages, handleInputChange, handleSubmit, handleUsernameErrorChange, initialUsername, locationInput, |
|||
onCancel, open, profilePicture, profilePictureInput, t, usernameChecked, usernameError, usernameErrorMessage, |
|||
usernameInput, |
|||
]); |
|||
}; |
|||
|
|||
EditInformationModal.defaultProps = { |
|||
open: false, |
|||
}; |
|||
|
|||
EditInformationModal.propTypes = { |
|||
profileAddress: PropTypes.string.isRequired, |
|||
initialUsername: PropTypes.string.isRequired, |
|||
initialAuthorAvatar: PropTypes.string, |
|||
initialUserLocation: PropTypes.string, |
|||
open: PropTypes.bool, |
|||
onSubmit: PropTypes.func.isRequired, |
|||
onCancel: PropTypes.func.isRequired, |
|||
}; |
|||
|
|||
export default EditInformationModal; |
|||
Loading…
Reference in new issue