I am building a page that retrieves some Github repositories and then displays a punchcard chart with the data returned by the API (sorry for the screenshots in advance, but I was having trouble with the in-built code styling). I start with a semi-empty html page and I build stuff as I get the info from the API calls.
Firstly, the user logs in to get all their repos, but I don't store information about it, I just pass their credentials in the header (app.js)
Then, with the response I paint a list of all the repos (app.js).
When clicked in one repo, a new html is load, and has js that calls the Github API to retrieve the punchcard and paint the charts (repo.js).
What I need to accomplish is that, if while being in that second html I click on the goBack button, I go back to the previous page, but having the repo list already painted there. Is there any way I can do it without having to log in (do it all over) again?
The app is deployed here, and all the code can be found here.
Thanks for the help.
Related
For example there is a table like in this link https://leetcode.com/contest/weekly-contest-309/ranking
How to access the database from where it is coming. Like let's say to get whole ranking table at a place
I tried reading HTML file but didn't get it
One extension scrapes the table only
How can we achieve this?
There is no simple answer here - it really depends how is it implemented on the server side. As rv.kvetch pointed you can get part of result from url:
https://leetcode.com/contest/api/ranking/weekly-contest-309/?pagination=1®ion=global
You can notice pagination query parameter here, indeed you can access second page, third page and so on. Sometimes there is some parameter like page_size implemented on server but it doesn't look like that case.
So to access full table you probably need to iterate over that pages and glue the results.
EDIT: How to get such url for some page?
Open your favorive browser, run web inspector (usually right click - inspect) and go to network tab, where you can find all requests sent during page rendering.
I am currently building a personal wiki and I'm having difficulty in creating new article pages without coding them or pasting a blank template.
I've tried DOMImplementation but it's not quite what I'm after, I just want to be able to press a button and a new page is created serverside which I can write in and save, I've looked around on the internet a lot but I keep going in circles.
If anyone can point me in the right direction or show me how that would be awesome.
I also have another problem of including a link to the new file on the index but I could try to sort that out on my own.
Any help is greatly appreciated, thanks.
What you are looking for is probably dynamic pages.The general idea is:
You provide an interface on the frontend for the user to type in the content of the page.
When the content is submitted to the backend, it is saved to a database and it's id is returned for someone to visit the page later on.
On the backend, you create a new endpoint that expects an id, with said id, you query the database and get the contents saved previously.
This fetched content is used to populate a html template and this html is returned as the response to the frontend
I have a list of webpages example.com/object/140, example.com/object/141, example.com/object/142, ...
and each page should have a particular background image example.com/assets/images/object/140.jpg, example.com/assets/images/object/141.jpg, ...
Some images are missing and then I use a default image. In that case, when I check if the image exists, I get a 404 error. I have already seen in several pages there isn't a direct way to avoid this problem.
Then I did the following: I created a service in the backend (C#) that checks if the file exists File.Exists(fileName);. That way I managed to avoid this error in my localhost. So far so good.
Now I published both my frontend and backend in two different services in Azure. The images are in the frontend but the file service is in the backend. My method does not work anymore because I can't access directly the frontend folders from the backend. One solution could be to make an http call from the backend to the frontend, but I think this doesn't make much sense, it's getting too messy.
One option could be to store in the DB a boolean with the (non)existence information, but I think this is prone to inconsistencies (if the boolean is not updated immediately when a new image is loaded or deleted, for example), even if I run a daily job to clean it.
Still another option could be to store the images directly in the DB and retrieve them together with the DTOs of the objects I'm loading in each particular page, but I guess that images that are shown only in the frondend should be stored in the frontend... shouldn't they?
Therefore:
a) Is any of these ideas acceptable? Is there a better way to avoid this error?
b) Another possibility: is there a way to access the frontend folders from the backend? I get a bit lost with the publishing and artifacts in Azure and I don't know if I could do it somehow.
I'm not sure how you've built the frontend, but I'm assuming that the background images are set using CSS. It is possible to set multiple background images in the same rule, and the browser will load them all and display them one below the other - if the first one loads successfully, and isn't transparent, then that is the only thing the user will see. But if the first image fails to load - for example because it doesn't exist, the second image will be shown.
See this other answer for more details: https://stackoverflow.com/a/22287702/53538
Overview:
I got this route in my react application
example.com/routeName/:id
This is the entrypoint for my users, they click on the link and see a screen with informations provided by this hash in a right sidebar component.
example.com/routeName/94a31bb9-e6ae-4e9a-8749-0807f9efd0001
Below I attached a kind of wireframe, trying to be more clear about the sidebar:
Wireframe to understand how my app components are shown at the end, and why the hash is important in a visual way
This works fine, I can get the hash and make the request inside my dumb component to display data.
The problem:
I'm doing the fetch to the api in my Layout component, and passing down the data via props to my sidebar that is fixed in my layout, because it is displayed through all the user experience
When my user sign in, my route change, from:
example.com/routeName/94a31bb9-e6ae-4e9a-8749-0807f9efd0001
to:
example.com/nextRouteNameHere
I still see the component with the information I need, but if I refresh the page at the second route, the app crashes, because my sidebar cant find the hash to fetch my api and get the necessary data.
What I've been trying to do:
Persist this route with the hash and make the route change internally - but that doesn't makes sense to me at all, and I could not find any resources even close to this strategy.
Persist this hash in localstorage and get the hash with hooks inside the sidebar. This way if I can't find my hash at the url it'll be in the localstorage and I can fetch my api to get the data. I did it, but doesn't work because the components presents the some behavior, trying to render with no data.
As I'm using redux to manage the global state I've already taken the hash and the fetch response to the localstorage, this way I can take this data through all the aplication, but the hash is what makes my hooks update when I tried to wrote this strategy, and when the user updates the page I got the same behavior, because the hook could not find the :id on the url.
Final question
How can I persist the sidebar with the fetched data I did when I load the page?
NOTE
I did not post the code because at this moment I got too much code trying to solve this and I'm stuck in this problem for almost one month. I'll update this post later on.
I'm developing a Angular App using Restangular with Web Services REST, but when I change between sessions several user the information have a delay to display information. for example a view CustomerDetail with Information of User1 but when I change a User2 then it show me information of User1 and later in n seconds show information correctly the user User2.
My question is, how to reload information correctly in view?
first of all, try reducing server calls by getting as much data at once and then create client side reload. regarding your case, when you click on some button to change users, first change a variable to "onLoad" to true and perform ng-show="onLoad" for some loading div and ng-show="!onLoad" for some other div contains users info. then when you get back your data flip "onLoad" value...