Repository
https://github.com/knacksteem/knacksteem.org
Pull Request
https://github.com/knacksteem/knacksteem.org/pull/70
Issues Solved
https://github.com/knacksteem/knacksteem.org/issues/61
https://github.com/knacksteem/knacksteem.org/issues/62
Update on the project and about PR
Knacksteem project is undergoing a lot of revolution with the recent introduction of KNT token to the platform, in the recent week a refactor was done on the back end which accepts users token through headers, so a new implementation/refactor was needed to be done on the API service on the front end. Before now, they where issues concerning users with empty Json_metadata from the blockchain which causes a query error on the platform when details from the json_metadata was requested to be rendered on the DOM.
Brief peep into the service and the fix for empty json_metadata.
The API service was refactored to accept token through header with the axois module.
export const apiPost = async (url, data, token) => {
try {
return await axios({
method: 'post',
url: `${Config.apiURL}${url}`,
data: data,
headers: { Authorization: "Bearer " + token },
responseType: 'json',
});
} catch (error) {
message.error(error.response.data.message);
return false;
}
};
Each time the method is used, the variables url, token and data to be sent must be passed
Fix for Empty json_metadata
There are some users in the block chain with empty json_metadata, there by getting cover Images and profile Image returns errors for these users.
const {user, location} = this.props;
const { remoteUserObject} = user;
const hasLoadedRemoteUserObject = Object.keys(remoteUserObject).length > 0;
const isUserLoggedIn = (user.username !== '');
if(hasLoadedRemoteUserObject){
if (typeof remoteUserObject === 'object'
&& Object.keys(remoteUserObject).length > 0
)
{
if(remoteUserObject.json_metadata !== '' && Object.keys(JSON.parse(remoteUserObject.json_metadata)) ){
remoteUserObjectMeta = JSON.parse(remoteUserObject.json_metadata).profile
}
name = remoteUserObject.name;
if (remoteUserObjectMeta !== undefined ){
coverImage = remoteUserObjectMeta.cover_image;
styles.userImageContainer.backgroundImage = `url(${coverImage})`;
}
reputation = repLog10(parseFloat(remoteUserObject.reputation));
username = Cookies.get('username');
}
}
We get the user object and location from the store(props), If you take a look at the code, we have a method that dispatches action to loadRemoteUserObject to the component. To disable the issue #62 a check has to be done after the remoteUserObject has loaded.
if(remoteUserObject.json_metadata !== '' && Object.keys(JSON.parse(remoteUserObject.json_metadata)) ){
remoteUserObjectMeta = JSON.parse(remoteUserObject.json_metadata).profile
}
We have to check if remoteUserObject.json_metadata is not an empty string and the JSON parsed object posses a mean which means it is not empty before setting the variables contained in the user's Json_metadata.
Next up
Integrating a voting slider for knacksteem.