I have a contacts collection (contacts of all employees) in my angular app. It is similar to any contacts or address app where there are contacts and you can search for a name. When the search is done for a name like 'John', the app should show only names having 'John'.
The contacts are saved already in the MSSQL DB.
My question is about how should I manage the state with #ngrx store?
Should I read all the contacts from the MSSQL DB when the app starts and then do the name search in the #ngrx store with a reselect selector to get the search results?
Should I do the search in the MSSQL DB and then clear and load the #ngrx store with the search results every time when the search is done?
2nd option, of course.
there is no point in downloading all the data.
you should have searchResults part of the store, update it on every search and do store.select(reducer.getSearchResults) to show it in your components.
if you would follow the same logic throughout the whole app with loading every piece of data you could ever need in your app lifetime you would end up with useless app very quickly ;)
Related
I am developing a React Firebase web app, and I want to implement a "custom" sort on top of sorting by name and date. How should I go about storing this "sort" information?
Do developers append a "key" property to the components themselves? How will reordering work then (do i shift every component's key values by 1? That seems inefficient). Or should I do a separate file or database entry that just stores the order as an array of component id keys?
Should all of this be resorted on page load or should I reorganize the data in a way where as soon as I request them they're already sorted?
I've tried adding the order key prop to every item but it seems overly complicated for a simple feature. I haven't had much luck searching this online.
Firestore allows you to orderBy and limit queries.
You can also specify a cursor to paginate more data on request.
See This Example in the docs for more info.
So basically, I have a simple React app connected to Firebase that lists different types of food from firestore collections.
Example:
I have a few categories. The default one is "All" that displays top 8 popular dishes from all other available categories and this part is easy but I want an user to be able to click on other category and update my query.
Category is actually a NavLink that updates location on click so: if user click on "Pizza" category the url looks like this localhost:3000/Pizza if he clicks on Salad it is localhost:3000/Salad etc.
I have a "Wall" component that is a section and it displays those items from firestore.
My query ref in this wall component look like this: const foodRef = db.collection("food").doc("all").collection("items");
But I want to set .doc dynamically and make query on every update so I changed the query to something like that:
const location = useLocation();
const foodRef = db.collection("food").doc('${location.pathname}').collection("items");
And when user click on different Card (NavLink) url updates but query does not.
I know it is a bad solution but I actually have no idea how to do that.
I have read about Recursive Paths in react router but I do not know if it is what I am looking for.
If you know how to approach that please let me know.
Thanks for your time.
Firestore does not support wildcards or replacements in queries and Query objects are fully immutable (they can't be changed). You have to know the names of the documents and collections ahead of time to build a query. If you want to change some part of a query, you have to rebuild a whole new query object every time, and run the query again to get a new set results.
I'm trying to learn how to use Firebase by creating a simple social media application.
https://i.stack.imgur.com/wfeyw.png (Here is how my database is laid out)
I was able to add data to the database but I'm having trouble understanding how to retrieve data. I want to be able to retrieve all the posts from a certain user and then display each one as an item in a list.
let Posts = firebase.database().ref('Posts').child(userId);
So far thats my query and here is the code I'm using to add the posts to the database. Could someone also tell me what is the term for the Id that is being generated for each post?
firebase.database().ref('/Posts').child(userId).push({
Text: post,
Score: 0
});
React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
var record = store.findRecord('InterviewerID', id);
This line searches for the record visible on the grid.
If the record is present in the next page(Pagination) then it does not search.
Could you please provide a way to search the whole store?
The findBy approach still would not work.
Your store will only contain a single page of data returned from the server. To search across pages you would need to search server side and determine which page of data it exists on. Once you know which page of data the searched term exists on, you could load that page of data into your store.