I have a user story that I am trying to fulfill, but the only part I am not certain is that they want the user to be notified when their inspection is past due, and a reminder when the inspection is due.
I found notifications on react native, but I am not using native. Any ideas or pointers on how to task this? It would be my first time doing it and I am still reactively new to React.
Related
I'm very new to all of this and I've been stuck on these two problems for over a week, reaching out to the community to better understand the issue.
Here is the project have Frankensteined together: https://codesandbox.io/live/ec9a16d7ef6
I have a button in the navbar to login in with Metamask. I have another button on the 'nft collections' page to mint an NFT that shows up after you are logged in. My issue is that button only shows up after a refresh or switching between pages and I want it to update automatically. I'm assuming that the state (currentAccount) isn't being passed through components properly but I'm having difficulty understanding useState.
My second problem I'm trying to work through is creating a conditional render on the navbar that will include another page that can be accessed when a user has a specific NFT collection in their wallet. Again, I'm brand new to all of this so even just some examples to look at or helpful tutorials would be awesome. Thanks.
I am working on a React application and use react-redux and redux-thunk for integration with redux for state management.
I want to display a modal whenever I add a new entity. The ideal solution from my point of view seems to be:
In the action creator where I add the entity, the redux state should be updated with the notification message if the operation was succesfull
The main component of the app (The App component) should somehow listen to the redux state, and whenever a notifications message appears it should render the modal with the message.
I do not have an idea on how to implement the second point (how to subscribe the main component to state change and react accordingly).
On another note, there might be a better alternative to implement the notification component so I will gladly listen to alternative solutions as my exposure to front end development and React is quite limited.
First thing is that you probably want to display a "Snackbar" component (Example from Material-ui), and not a dialog as you probably might have several entities created one after the other, and you don't want to flicker the dialogs to the user...
Regarding the redux store, I think you should have a specific part in your store to hold all the notifications (Array of notifications), And every time a message with new entity comes you add a notification to the array. And after some time (Say 5sec) you remove the notification from the array.
In the ui, your component should listen to this part of the store, and just display the Snackbars one after the other.
Can you guys help me find a solution for this problem:
Think Facebook, when another use gives me a "like" a get a notification immediately without the need for me to refresh the page.
How do I implement this using React Redux, how do I update the store based on data coming from my API, how can I detected changes coming from my API?
I am currently working on a MERN stack application with a React Redux front end. It is an job management system with a calendar showing booked in jobs/events.
I have a question regarding best practices around making API calls and loading data into my app. The database is small scale at the moment so a small amount of data is loaded into my Redux store.
When is best to make GET requests to load my data into my app and handle changes made by other clients? Do I load all data on each page load? Is there a cleaner/more efficient way to do this?
Any help/guidance is much appreciated, thank you
From my personal experience, I believe that if your application will be accessed by different users simultaneously, you could GET the calendar data when a user first accesses his calendar and whenever the user is going to add a new job/event. This way he has access to the latest data before creating a new event. Also when creating an event, if the API returns an error because there is a collision between events you can update the data on the FE. This would be a lazy approach and it wouldn't keep the calendar constantly updated.
If you need data to be fresh you could also set a timer and execute GETs periodically.
I've taken the program at Udacity for react and react native, and it taught me well id say.
Now that I am equipped with the skills and have a good knowledge of the environment and redux etc. Im trying to build my first test app that handles data living remotely.
In the React tutorials we would use local mock data, and try to fetch it and even simulating the delay with a setTimeout call. But the problem is the tutorials worked excellent only for the types of apps they were building. I'll get to this in a bit...
My app description:
At the moment i'm making a test app and so far I can : retrieve a collection of food items ( remote data), render the data, and press "LIKE" on anyone. After pressing Like that food item URL gets saved into another remote file under the authedUser's account under a "favorites" property.
The food data at the moment is in a json file hosted on a github repository.
and so is the users account data.
The thing I noticed in the react course was, Data would be received into the redux store.
from there anytime you dispatched an action which involved data changes like "Favoriting" something, the app would first dispatch an action to server. Once that resolves it would dispatch to the redux store and affect it there.
Now from what I understand... this is a way to keep the data in sync? Is this how other applications do it? or is it when data is changed, you only dispatch the change to the server, and request/fetch the new data into redux once the action resolves? The tutorials would receive the initial data, and like this it would be set and stone and then rely on the dispatches to keep it in sync. would it be better to simply use local state, fetch the data we want. vs using the store?
Im not exactly sure whats best, but to me the idea of receiving the entire data file into the app seems not scalable? like when you use instagram for example, your phone doesn't download the entire instagram database. Im thinking it downloads only your profile? and url's to your friends? etc?
so for this test app that I am trying to make ( described in italic font above ^ )
I'm not sure how to go about it. I definitely don't think its appropriate to receive the entire data file. I know that I want the user to receive food items onto the screen, but only a handful at a time, maybe through a search it modifies the results on screen. then the user can like a food item.
This is the first time i'm working on an application of this sort, and I do think i'm missing something.
It would be a good idea to not integrate Redux at first. Just build the application in plain React.
Now talking about your app. As you said, is a bad idea to download the entire database. When you have to fetch a lot of data a common pattern is to use pagination. It works like this: your app asks for 10 food items. The server returns those 10 and tells you that there is more data and you should make another request if you want to fetch more. It doesn't make sense to fetch 1000 products if the user can see only 10 at a time, right ?
Let's say you like a food item. After you press "like" it is not enough to update your app state, you also need to make the change on the server. How you do this ? Usually you have a food item id(let's say 123) and you maybe you make a POST to https://server.com/like/123. Now that request may fail for various reasons and the server will not register your like. This is way you update the local state only after you successfully updated in the database. In addition you may want to update the number of the likes(maybe other users liked that food item since you fetch) so the server will return the updated number of likes.
Where does Redux fit here ? In React every component has its own state. They can share data between them using props. But this doesn't scale and you will usually end up in a situation called Prop Drilling. Redux store is some kind of global state. For instance:
<FoodItems>
<FoodItem key=1/>
<FoodItem key=2/>
</FoodItems>
Let's say somehow you update the description for the first FoodItem. How do you tell that to other components ? In Redux you dispatch an action and modify the store. Now other components can connect to the store and get the value from there.