App screen 2 (UI + Backend integration)

After the login and signup pages, I have to integrate my second and third pages. My first priority was to get logged in corner of my site. It feels nice and says that user is properly logged in.

To figure out that first I needed to know the API request that gives me information about logged in user. In hasura API it is your_auth_url/user/account/info . You can easily find it here. The response was already in the JSON object. So, I did not need to parse again.

Note: – You can face error You need to be user to access this endpointI was getting this error when I was login through file:// or through localhost by node server.js and my endpoints were like <expose>.hasura.me. When I open it through deployed app on hasura, it was working fine. For local use, use only c100.hasura.me endpoints. They work in above all cases.

$(window).bind("load", function() {
    $.ajax({
	method: 'GET',
        //auth_url is hasura authentication url
	url: auth_url + '/user/account/info',
	xhrFields: {
            withCredentials: true
        },
        headers: {
            'Content-Type': 'application/json'
        }
    }).done(function (data) {
	console.log(data);
	document.getElementById("username").textContent= data.username;
	document.getElementById("username1").textContent= data.username;
	document.getElementById("email").textContent= data.email;
    }).fail(function(error){
	console.log(error);
    });
});

This is a code snippet that does the job. Still, I have to do more things. One is making search query to the database and then showing the result in the table.

So, after some searches, I found a bootstrap table library here. If you want to work with this, you can go to its getting started page located here. With the help of this, we can easily update the content of a table in any scenarios.

Next part was making a query to the server to get the result. There were two fellow members at slack channel who helped me to finish my job. I knew the SQL query and I knew that I have to iterate for each keyword in the search bar. Whatever I was doing that was not giving a valid JSON request. So, they told me how to fix that.

Now, my second page is fully functional, thanks to slack members. So, I can work on my final page of the project. Till then 🙂

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s