Skip to content
This repository was archived by the owner on May 25, 2021. It is now read-only.

Feature/autodismiss off error #186

Merged
james-martin-jd merged 4 commits into from
Jun 17, 2019
Merged

Feature/autodismiss off error #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c77708e
autoDismiss off for error messages
pablo-rodriguez-jd Jun 17, 2019
68d3576
dismiss on
pablo-rodriguez-jd Jun 17, 2019
9a9ae67
autoDismiss of for error toast messages
pablo-rodriguez-jd Jun 17, 2019
fdd78f4
all error message are not auto dismissed
pablo-rodriguez-jd Jun 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion generators/app/templates/src/containers/Profile/components/Image/image.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -42,6 +42,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => {
} catch (error) {
toastManager.add(['Error', error.message], {
appearance: 'error',
autoDismiss: false,
});
}
};
Expand All @@ -63,6 +64,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => {
} catch (error) {
toastManager.add(['Error', error.message], {
appearance: 'error',
autoDismiss: false,
});
}
};
Expand Down
32 changes: 22 additions & 10 deletions generators/app/templates/src/containers/Profile/profile.container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -41,6 +44,7 @@ const Profile = ({ toastManager }) => {
if (code && code !== 200)
toastManager.add(['Error', t(messageError)], {
appearance: 'error',
autoDismiss: false,
});
};

Expand Down Expand Up @@ -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,
}}
/>
</ShexForm>
Expand Down
173 changes: 87 additions & 86 deletions generators/app/templates/src/containers/Welcome/welcome.container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<Props> {
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 (
<WelcomePageContent
name={name}
image={image}
isLoading={isLoading}
webId={this.props.webId}
updatePhoto={this.updatePhoto}
/>
);
}
};

render() {
const { name, image, isLoading } = this.state;
return (
<WelcomePageContent
name={name}
image={image}
isLoading={isLoading}
webId={this.props.webId}
updatePhoto={this.updatePhoto}
/>
);
}
}

export default withWebId(withToastManager(WelcomeComponent));