Picker Role Navigator

In the passed week I have completed The PickNavigator screens

I finished The PickNavigator last week. After finishing the log-in, my task was to make 3 more screens. This past week I created three more screens for the PickNavigator, the first of which had a button to access to the rest of the screens. The second screen appears with tables after you click on the button.

The third screen, the order detail view, is about displaying details based on the tables. The most challenging thing I’ve faced on making this screens is using the useRef to focus on a field on the screen and perform the default location. For useRef, Mr. Peter set an example for me and let me deal with the remainder, where I discovered how simple it is.

Setting the default location was a little more difficult comparing with the other difficulties that I have a faced. I wanted to make a useRef to focus on that location, so I started looking for a useRef for TouchableOpacity that would focus on a click on the location once the screen appeared. Since it was my first time utilising useRef, that was my logic until Mr. Peter explained the way, which was not too far from my logic.

In the last week, I’ve learned a lot of useful stuff, such as how to utilise the scanner, which I was completely unfamiliar to me at the start of the week, and how to use the useRef Hook to focus in any textInput field. I also was dealt with a bunch of useEffect hooks and others.

Json Web Token

Following the completion of the design phase, we move on to the development phase.

This new system will be integrated with the old one, which has its own tracking. That the very first task was to handle the log in for two different users: those who will navigate to the Picker and those who will navigate to the Item Navigator. Mr. Peter guided me through the JWT method for solving this problem.

I first learned about JWT when I tried to make a user log into a separate navigation depending on his role. Finally, I created a token that, if the user role is Picker, navigates to the PickerNavigator; otherwise, he navigates to the ItemNavigator. And it was the first time I used the useEffect Hook that I truly grasped its concept.

After logging in, I also construct a screen for the Picker role. After hitting the button on that screen, you will be taken to the following screen. The second screen is about tables and orders data, and when you arrive there, you’ll see a table with all of the clients who have placed orders, along with their data, and the raw of each client is clickable, which will take you to another table.

Create System Prototypes

I finished testing the app the week before and began designing the new system’s prototype.

I was able to continue testing the App after having found a solution to the issues that I had encountered last week.

Except for the ImageItemView, I finished testing all of the navigation components. The testing was not tough for the ItemListView, which was 100% tested, but I couldn’t test the image Picker for the ItemAdjustmentDetailView, which turned out to be difficult to test after I attempted several methods to mock and test the function. However, the attempts were in vain. After many attempts, Peter advised me to ignore it.

My next task after the testing is to add some additional screens to the software that was tested. To begin, I must design the interface for that screen, which I will accomplish using other tools because I am familiar with it and have previously used it, as well as creating a prototype of how the app would work.

React-native Bugs

While the testing was in progress, we discovered that we were testing from the cache, so I cleared the caches, and the errors reappeared.

After clearing the caches and modifying the setup so that the test does not utilise caches, I was unable to render any component, including the LoginView, which was meant to be completed previously.

The navigation issue continued appearing, and I tried several alternative solutions but none of them worked until we messed up the setup. Fortunately, Mr. Peter reminded me to commit, and I was able to erase the modifications I made using GIT, demonstrating how important it is.

After several tries and searches, Mr. Peter and I discovered that the navigation library had a flaw. That suggests we have no control over the situation. Someone on Stackoverflow has either encountered the problem or is aware of the flaw, and has offered a workaround in the form of a comment that must be written before the navigation. The comment makes it so that the navigation does not throw an error.

Finally, we found a solution, and I continued to test the system. The progress was a little faster than the previous unit. After finishing the ItemListView, I moved on to the ItemAdjustmentDetailView. Everything seemed OK until I was testing the update function and discovered a bug in the fireevent when the button was pushed. I’m still looking for a solution to the problem of not being able to locate comparable issue online.

First Unit Test


On the previous week I completed the testing for the LoginView component.

I examined all of the scenarios on the LoginView testing unit, starting with the components’ UI. Then the alert comes when an unknown user tries to l. Lastly, the successful login.

The Axios mock adapter, which performs such magic work with the endpoints callback, was a new mocking technique I learnt that was really handy in mocking the promises and providing false responses to make the fetch work.

Finally, I tested the next unit’s UI, which was the ItemListView, as well as the searching function, using the same approach that I did on the LoginView with different HTTP request methods.