From c77708ef3c4b622fa5fcc80a30b60ca266fc6ed9 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 17 Jun 2019 11:01:40 -0600 Subject: [PATCH 1/4] autoDismiss off for error messages --- .../containers/Profile/profile.container.js | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/generators/app/templates/src/containers/Profile/profile.container.js b/generators/app/templates/src/containers/Profile/profile.container.js index 0da1f23a..5b5463c3 100644 --- a/generators/app/templates/src/containers/Profile/profile.container.js +++ b/generators/app/templates/src/containers/Profile/profile.container.js @@ -28,9 +28,12 @@ const Profile = ({ toastManager }) => { const { t, i18n } = useTranslation(); const successCallback = () => { - toastManager.add([t('profile.successTitle'), t('profile.successCallback')], { - appearance: 'success', - }); + toastManager.add( + [t('profile.successTitle'), t('profile.successCallback')], + { + appearance: 'success', + } + ); }; const errorCallback = e => { @@ -41,6 +44,7 @@ const Profile = ({ toastManager }) => { if (code && code !== 200) toastManager.add(['Error', t(messageError)], { appearance: 'error', + autoDismiss: false, }); }; @@ -101,17 +105,25 @@ const Profile = ({ toastManager }) => { dropdownDefaultText: t( 'profile.dropdownDefaultText' ), - warningResolution: t('profile.warningResolution'), + warningResolution: t( + 'profile.warningResolution' + ), formValidate: { - minMxNumberInclusive: t('profile.minMxNumberInclusive'), - minMxNumberExclusive: t('profile.minMxNumberExclusive'), - minMaxString: t('profile.minMaxString'), - default: t('profile.defaultError') - } + minMxNumberInclusive: t( + 'profile.minMxNumberInclusive' + ), + minMxNumberExclusive: t( + 'profile.minMxNumberExclusive' + ), + minMaxString: t( + 'profile.minMaxString' + ), + default: t('profile.defaultError'), + }, }, successCallback, errorCallback, - autoSaveMode : true + autoSaveMode: true, }} /> From 68d3576c2755f18a8381575f4670bb2e20447b3f Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 17 Jun 2019 11:04:08 -0600 Subject: [PATCH 2/4] dismiss on --- .../app/templates/src/containers/Profile/profile.container.js | 1 - 1 file changed, 1 deletion(-) diff --git a/generators/app/templates/src/containers/Profile/profile.container.js b/generators/app/templates/src/containers/Profile/profile.container.js index 5b5463c3..8784f9d1 100644 --- a/generators/app/templates/src/containers/Profile/profile.container.js +++ b/generators/app/templates/src/containers/Profile/profile.container.js @@ -44,7 +44,6 @@ const Profile = ({ toastManager }) => { if (code && code !== 200) toastManager.add(['Error', t(messageError)], { appearance: 'error', - autoDismiss: false, }); }; From 9a9ae6764d4ca2b064bef91b25c55ecc722df907 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 17 Jun 2019 11:05:04 -0600 Subject: [PATCH 3/4] autoDismiss of for error toast messages --- .../app/templates/src/containers/Profile/profile.container.js | 1 + 1 file changed, 1 insertion(+) diff --git a/generators/app/templates/src/containers/Profile/profile.container.js b/generators/app/templates/src/containers/Profile/profile.container.js index 8784f9d1..5b5463c3 100644 --- a/generators/app/templates/src/containers/Profile/profile.container.js +++ b/generators/app/templates/src/containers/Profile/profile.container.js @@ -44,6 +44,7 @@ const Profile = ({ toastManager }) => { if (code && code !== 200) toastManager.add(['Error', t(messageError)], { appearance: 'error', + autoDismiss: false, }); }; From fdd78f47251754df3210af10082b243688921d18 Mon Sep 17 00:00:00 2001 From: Pablo Rodriguez Date: Mon, 17 Jun 2019 11:23:44 -0600 Subject: [PATCH 4/4] all error message are not auto dismissed --- .../components/Image/image.component.js | 4 +- .../containers/Welcome/welcome.container.js | 173 +++++++++--------- 2 files changed, 90 insertions(+), 87 deletions(-) diff --git a/generators/app/templates/src/containers/Profile/components/Image/image.component.js b/generators/app/templates/src/containers/Profile/components/Image/image.component.js index 660faf0d..903e6750 100644 --- a/generators/app/templates/src/containers/Profile/components/Image/image.component.js +++ b/generators/app/templates/src/containers/Profile/components/Image/image.component.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import data from '@solid/query-ldflex'; import { Uploader, useLiveUpdate } from '@inrupt/solid-react-components'; import { useTranslation } from 'react-i18next'; -import { namedNode } from "@rdfjs/data-model"; +import { namedNode } from '@rdfjs/data-model'; import { ImageProfile } from '@components'; type Props = { @@ -42,6 +42,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => { } catch (error) { toastManager.add(['Error', error.message], { appearance: 'error', + autoDismiss: false, }); } }; @@ -63,6 +64,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => { } catch (error) { toastManager.add(['Error', error.message], { appearance: 'error', + autoDismiss: false, }); } }; diff --git a/generators/app/templates/src/containers/Welcome/welcome.container.js b/generators/app/templates/src/containers/Welcome/welcome.container.js index 11d9eb81..b48c545f 100644 --- a/generators/app/templates/src/containers/Welcome/welcome.container.js +++ b/generators/app/templates/src/containers/Welcome/welcome.container.js @@ -3,112 +3,113 @@ import WelcomePageContent from './welcome.component'; import { withWebId } from '@inrupt/solid-react-components'; import data from '@solid/query-ldflex'; import { withToastManager } from 'react-toast-notifications'; -import { namedNode } from "@rdfjs/data-model"; +import { namedNode } from '@rdfjs/data-model'; const defaultProfilePhoto = '/img/icon/empty-profile.svg'; /** * Container component for the Welcome Page, containing example of how to fetch data from a POD */ class WelcomeComponent extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props); - this.state = { - name: '', - image: defaultProfilePhoto, - isLoading: false, - hasImage: false - }; - } - componentDidMount() { - if (this.props.webId) { - this.getProfileData(); + this.state = { + name: '', + image: defaultProfilePhoto, + isLoading: false, + hasImage: false, + }; } - } - - componentDidUpdate(prevProps, prevState) { - if (this.props.webId && this.props.webId !== prevProps.webId) { - this.getProfileData(); + componentDidMount() { + if (this.props.webId) { + this.getProfileData(); + } } - } - /** - * This function retrieves a user's card data and tries to grab both the user's name and profile photo if they exist. - * - * This is an example of how to use the LDFlex library to fetch different linked data fields. - */ - getProfileData = async () => { - this.setState({ isLoading: true }); - let hasImage; + componentDidUpdate(prevProps, prevState) { + if (this.props.webId && this.props.webId !== prevProps.webId) { + this.getProfileData(); + } + } - /* - * This is an example of how to use LDFlex. Here, we're loading the webID link into a user variable. This user object - * will contain all of the data stored in the webID link, such as profile information. Then, we're grabbing the user.name property - * from the returned user object. + /** + * This function retrieves a user's card data and tries to grab both the user's name and profile photo if they exist. + * + * This is an example of how to use the LDFlex library to fetch different linked data fields. */ - const user = data[this.props.webId]; - const nameLd = await user.name; + getProfileData = async () => { + this.setState({ isLoading: true }); + let hasImage; - const name = nameLd ? nameLd.value : ''; + /* + * This is an example of how to use LDFlex. Here, we're loading the webID link into a user variable. This user object + * will contain all of the data stored in the webID link, such as profile information. Then, we're grabbing the user.name property + * from the returned user object. + */ + const user = data[this.props.webId]; + const nameLd = await user.name; - let imageLd = await user.vcard_hasPhoto; + const name = nameLd ? nameLd.value : ''; + + let imageLd = await user.vcard_hasPhoto; + + let image; + if (imageLd && imageLd.value) { + image = imageLd.value; + hasImage = true; + } else { + hasImage = false; + image = defaultProfilePhoto; + } + /** + * This is where we set the state with the name and image values. The user[hasPhotoContext] line of code is an example of + * what to do when LDFlex doesn't have the full context. LDFlex has many data contexts already in place, but in case + * it's missing, you can manually add it like we're doing here. + * + * The hasPhotoContext variable stores a link to the definition of the vcard ontology and, specifically, the #hasPhoto + * property that we're using to store and link the profile image. + * + * For more information please go to: https://github.com/solid/query-ldflex + */ + this.setState({ name, image, isLoading: false, hasImage }); + }; - let image; - if (imageLd && imageLd.value) { - image = imageLd.value; - hasImage = true; - } else { - hasImage = false; - image = defaultProfilePhoto; - } /** - * This is where we set the state with the name and image values. The user[hasPhotoContext] line of code is an example of - * what to do when LDFlex doesn't have the full context. LDFlex has many data contexts already in place, but in case - * it's missing, you can manually add it like we're doing here. - * - * The hasPhotoContext variable stores a link to the definition of the vcard ontology and, specifically, the #hasPhoto - * property that we're using to store and link the profile image. - * - * For more information please go to: https://github.com/solid/query-ldflex + * updatedPhoto will update the photo url on vcard file + * this function will check if user has image or hasPhoto node if not + * will just update it, the idea is use image instead of hasPhoto + * @params{String} uri photo url */ - this.setState({ name, image, isLoading: false, hasImage }); - }; + updatePhoto = async (uri: String, message) => { + try { + const { user } = data; + this.state.hasImage + ? await user.vcard_hasPhoto.set(namedNode(uri)) + : await user.vcard_hasPhoto.add(namedNode(uri)); - /** - * updatedPhoto will update the photo url on vcard file - * this function will check if user has image or hasPhoto node if not - * will just update it, the idea is use image instead of hasPhoto - * @params{String} uri photo url - */ - updatePhoto = async (uri: String, message) => { - try { - const { user } = data; - this.state.hasImage - ? await user.vcard_hasPhoto.set(namedNode(uri)) - : await user.vcard_hasPhoto.add(namedNode(uri)); + this.props.toastManager.add(['', message], { + appearance: 'success', + }); + } catch (error) { + this.props.toastManager.add(['Error', error.message], { + appearance: 'error', + autoDismiss: false, + }); + } + }; - this.props.toastManager.add(['', message], { - appearance: 'success' - }); - } catch (error) { - this.props.toastManager.add(['Error', error.message], { - appearance: 'error' - }); + render() { + const { name, image, isLoading } = this.state; + return ( + + ); } - }; - - render() { - const { name, image, isLoading } = this.state; - return ( - - ); - } } export default withWebId(withToastManager(WelcomeComponent));