We Keep Coding

Save a DOM item to a list?

I have to design a CRUD but the next thing is to create a figure of grids and that when you click on a grid it is painted and give it a name and save it
And after that list them, that as they are added to put the last and so on
I should do this using React and if possible implement it with redux.
What makes me stupid is that I don't know how to save an html element locally as a photo or something like that, I'm new to React and I don't know how to implement it

angular page data sort itself when click anywhere on page

Mouse Click anywhere on the page, even blank spot, the data array on the page just resort itself.
I know that click might trigger view change if impure pipe is set but I didn't use any.
So I am really baffled because my development testing is OK. Only the production build has this weird behavior.
I use angular 8. The data on the page is array down from rest endpoint. I simply for loop it like all other pages does. This page is just having a big object as the response and containing 3 big arrays. And I make 3 different list on the page. Each list is also a input for a sub component. Display after sorting.
I know JS sort does not copy. But why only on production build?

I fixed it by removing the pipe which is used to filter the lists. That's it.
But I couldn't explain the cause of it.
The pipe is doing a filter. It filters the list based on some ids which belongs to the data.
A checkbox will trigger the filtering which is *ngIf on the tables row in the template.

Progressive fetch or all at once Master Detail

I am making a master-detail-detail application in React and GraphQL. Let me explain, there is a sidebar which shows products, and then when you click one of the list of products, ANOTHER list is shown in the main window (Master Detail). Here is the kicker, if you click one of the products in the Main window ANOTHER section on the right sidebar is populated with details. So like this:
Master List --> Details List --> Properties of Detail
I have React Router set up nicely and wondering what is the proper way to fetch? There are many ideas about this. For instance, should I structure the call and data for GraphQL to just fetch EVERYTHING onLoad? i.e. Parents (products), Children (product list), and details (details of children. Just fetch everything and setState?
OR, is the proper way to do things using GraphQL, to load ONLY the product list when the application loads, and when a user clicks on a product THEN FETCH the list of children, and when they click a child product, THEN fetch the details.
Just wondering about methodology.... of course when the lists get big, you would have a spinner show in the main pane, and then a spinner show in the details pane I suppose.
GraphQL solves the overFetching situation.... but, should I divide the fetch up when a user clicks and progressively fetch...or fetch everything at once and just click -> map() over the results.
I am curious to hear everyone's take on this.

The answer here is to not fetch the entire JSON tree at once. That would be a huge overfetch. We can create separate collections in MongoDB for the parent items and the child items in a one-to-many relationship, then use GraphQL to fetch exactly what we need in each window onClick/onChange. This seems the most efficient and expedient way since I am dealing with upwards of 10 panes of data and around 50 components. This is a very complex application I am working on.

Using Ionic Framework, how do you refresh from localstorage?

I have a problem with refreshing from localStorage.
I have list of items. I can display them. I add one item to array and display.
Everything works fine. I can display. I can see that another object was
added to items array.
When I close and reopen app. The alert shows object exists and has correct number of items. Only problem is I dont see the items now in the view.
Is this $scope problem or async problem. The array exists..
Edit:
I have array with three items. I push to localstorage, first.
then use data from localstorage to bring into '$scope.items'.
In the view, the data is shown from '$scope.items'. Everything
works as expected. I turn off app turn back on, And the array
loads properly from localstorage. This is not a problem.
Now, the view has ability to add to array. I can add to array,
Again loading from localstorage. There is an alert, which shows
that the array has one more object. I can add another item and .....
All of them show up in the view. All updates come from localstorage.
I turn app on and off, there is nothing in the view. This is done
on a phone so I cant check localstorage.

You did not post any code so I will just do my best to help. are you fetching items from local storage and setting to to a $scope variable? also fetching the item from local storage on app load and put it in a service or do it before the view that needs the data enters the view.
like this:
$scope.$on('$ionicView.beforeEnter', function () {
$scope.items = localStorage.getItem('youritem');
});

This solved the problem. It was a ng-repeat issue.
<div ng-repeat="row in [1,1,1] track by $index">

About Angular list

I want to create a list using Angular, where the data (say like over 1000 items) is retrieved from the server using JSON call. In my plan, the list will only show x amount of items in the list, and will load x more items into it when the user pull up the list.
So my question here is, how to write the expression for the ng-repeat so that
It will only show x amount of items when first loading the list
It will only load x amount of items when user pulled up the list
I think i read somewhere about ngRepeat being able to do this kind of feature, to limit and control the amount of items shown or loaded onto the list, but i forgot where i read it.
But someone told me that better way of doing this is by limiting the amount of data retrieved when using JSON call rather than letting Angular do it.
So i'm kind of confuse in here.

Take a look at ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/.
Last fall, i want to use a similar solution and ended up there.