Author: Fadi Abdulrab

Last week, I completed various tasks related to the StockTake Detail view functionality that I had done the week before. Search matches with the highlight, bugs in the edit item section, and other minor issues were effectively resolved.

First, the highlight function must be consistent with the search, such that the item is highlighted anytime the user searches for the thing. If there are many results, the first one must be highlighted. I took the wrong approach to fix it, but Mr. Peter showed me how to solve it by adding a highlight boolean attribute.

Next, I made the search matches, using the up and down arrows to navigate the match result. Even though, after a few attempts, the matcher navigator functions ideally, it still has some issues, particularly when the matches swap list pages. More setStates were required to keep the value of the result and the selected result. And I needed to add a useEffect to change the currentPosts, which is the data presented to the user.

Finally, several minor bugs in the editing part needed to be addressed. The quantity and barcode were both changed at the same time, and if only the quantity changes, the barcode becomes empty. That was solved by adding if statements into the edit handlers. I also fixed the bug of updating the Stock Take List data when an item is updated, by adding an useEffect to set mount true and I also added an useInterval to refresh the data.

Overall, last week’s outcome was good after also revising the data table style to align the components in a better way for the user to be displayed.

This week, I concentrated on the StocktakeLineItems. Functions such as deleting a specific item were also completed successfully, as were the search function and the edit section for each item.

First, I needed to modify the search functionality, as it is designed to take you to the page that contains the item. The search result must also be highlighted, which was a bit difficult to implement, but with Mr. Peter’s assistance and explanation, I was able to complete it. However, I’m still having issues with the highlight because it isn’t resetting.

Next, I added a delete handler function to delete a specific item based on its Id. In addition, I created a Model to adjust an Item’s barcode or quantity. The layout was initially straightforward, with only one text box and two buttons to save the newly inserted data. Following that, I changed the layout to display the item-selected data and moved the delete button into the modal view. That was useful because the model is now similar to the edit section, where you have complete control over editing and deleting an item.

Finally, I wanted to finish the search function with a highlight, but that didn’t go so well. The main issue was that the highlight did not reset, and it occasionally kept highlighting all items and becoming stuck on that. After speaking with my supervisor, he explained another logic to solve the problem, which I will implement the following week.

Following last week, I continue the implementation of the stock take. This week, I implemented functions, struggled with some logic, and modified the list component, among other things.

First, after successfully retrieving the data of the item list in the detail view, various tasks remained. Such as the search and pagination functions in both views. I added pagination and the possibility to search by barcode or item name to the list view. The data size was restricted by the API call, thus this was a fairly straightforward process.

Next, I was tasked with developing a specific search feature for the detail view. This search is not intended to filter the data, but rather to navigate to the page containing the item. This is where I ran into trouble creating the pagination this time because the Flatlist component did not make it easy. Mr. Peter then suggested I replace the Flatlist component used for the data table with the DataTable component.

Last, after implementing the Datatable component, I was finally able to view the data. I encountered one obstacle, which is pagination, but I was able to overcome it by separating the data into chunks and mapping the values between the first and last index in each chunk to the list. In the coming week, I must complete the search feature and carry on to next tasks.

This week I had only one major objective, which was to complete the new Stock Take module.

After constructing the detail view layout last week, I began this week by creating the layout for the Stock Take list view. The List view will display all of the created stock takes. However, as no data had yet been received from the API, I had to continue developing the detail view.

Furthermore, I needed to retrieve data from the API in the detail view.
It took me quite a while time to input the data and review the list of stock takes. One major issue I had was that I couldn’t make a successful Post request to create the stock stake and kept failing at it. One of the reasons was that I had no validations for the barcode and other data.

I was able to create the validators. By doing so, as well as accessing the API to retrieve item data, I was able to debug the problem more easily than previously. Furthermore, it took some time for me to create the POST request and ensure that the data was correctly sent to the database.

Continue back to the list page, where I was able to access the list of created Stock takes after successfully retrieving the data. In addition, I wanted to utilise the getStockTakeById request to view or modify a particular stock take. And after some effort with the code, I was able to successfully get it to function, allowing me to access the stock take and make any changes.

By the end of the week, I believed I was nearly finished since it appeared functional to me. However, because of a conflict with the API, I was required to map the data manually from one type to another. This was totally new to me since I had very blurry vision on it, studying that and implement it correctly is the next thing to do.

This week was essentially a continuation of last week’s work, for which I needed to fix errors and improve the logic. Some critical bugs were reported that required immediate attention. Changing the Focus logic in the Decimal Text Input component and failing to write a correct test script for the Combo TextBox component. That what mostly happened during this week, and what I’m going to talk about in this blog.

First, I got complaints about some bugs after patching the last update. Such as, Undo operation, was not working after searching and selecting a customer. Another bug was that when processing order with multiple line items, the app didn’t navigate to the second item after processing the first one. Next, with Mr. Peter’s guidance, I found that most of the bugs occurred because of the warehouse identifier, which was hardcoded in many places in the code, so altering that fixed the problem.

After that, I worked on fixing the errors with multi-line items. On the other hand, this caused another issue that occurred whenever a single object was processed, as the rendering time was around 5 seconds. The bug was addressed by modifying the reset box code so that it would only operate with multiple items.

Modifying the focus logic in the DecimalTextInput component was also done this week, where I fixed the bug with the OnBlur property. And I created a unit test for the component to ensure that the input number will always round off based on the specified decimal places. On the other hand, I have been searching and trying different ways to run a correct test for the Combo TextBox component. Most of the ways I found were always getting me a pass result even if the test should be fail. I also came across several techniques for testing that mock the “focus” but unfortunately, those also didn’t work for me.

In conclusion, this week was consumed by fixing the issues raised following the last deployment. Fixing the decimal component focus and doing a test for it, but not conducting enough testing for the combo component, where this and other critical issues will be addressed next week.

After patching the new updates to the system, I had new tasks for this week which were mostly focused on fixing the unnecessary re-rendering. Fixing minor bugs across the system and editing some style with the assistance of a real device as opposed to emulator. and encountering  new issues in the Decimal text box component.

I began debugging the code to fix the re-rendering bug by focusing on the Pick and Pack views, where it was primarily occurring. Initially, I attempted to create a render counter that counts each time a render occurred, which was really useful. It demonstrates that whenever the Data is requested from the API, it is rendered twice. Thanks to Mr. Peter’s explanation, I see now that it was due to an unnecessary application of useState; replacing it with useRef resolved the issue.

Afterwards, I fixed a few issues that were occurring in unpack view. I added the implementation of the error message for scanning the incorrect item and made sure it doesn’t interfere with the existing functionality. In addition, the Focus implementation in other views was not functioning while mounting, and also I managed to get that fixed.

As usual, no work week can pass without some Focus implementation challenges being encountered. After extensive experience with all sorts of errors encountered while implementing the focus in various ways. Nonetheless, I ran into another logic issue with the focus implementation, this time in the Decimal Text Box component.

To wind things up, I was successful this week in fixing a few minor problems, as well as one significant one, such as the render bug. Next, fix the focus bug in the Decimal component before beginning the testing tasks for the upcoming week.

This week’s efforts have been concentrated on perfecting the focus feature and putting it into action. I was introduced to a new type of react native hooks, and the old logic was discarded in favor of the new. By the end of the week, the update had been successfully patched, and the overall result was encouraging.

Fixing last week’s bugs and running through all of the scripts to make sure the focus moves from one box to another as intended, was where I started this week. In addition, after consulting with Mr. Peter and digging into the code, we realize that using Boolean to implement the focus is problematic and leaves behind obvious problems. To that end, he advised that I study the useReducer hook and try to execute the focus with it.

Following that, I gained an understanding of the useReducer concept, structure and implementation, which is typically utilized for complex state logic. However, I met some difficulties to apply the focus implementation in the reducer because we are using a separate component so that was more complex than I expected.

Next, Mr. Peter devised the optimal solution by implementing the focus in a function using ref and invoking it. Compared to the previous usage of a timer that was unpredictable or a boolean that was producing bugs, calling one function by passing the box ref only was far more efficient.

Lastly, after implementing the new solution on every screen, I had to modify the keyboard toggle logic to operate well with the text box focus. I also altered the styles a bit to make the content fit more with the device. And with my supervisor’s confirmation on the current version so I eventually patched the update successfully with all improvements and bugs addressed.

In order to effectively upgrade the application version this week, it was necessary to resolve all bugs associated with the new text box component. New difficulties prevented me from completing the task, and the outcome did not meet expectations.

First, I encountered a new problem in an old component that is mostly used for selecting the quantity option. The defect is that the quantity value accepts only the auto value. In addition, I spent time resolving the error in which I replaced OnChangeText with SetQuantity. The idea sounded successful at first, until I realised that it could not be tested. Therefore, I had to look for a different approach that could be tested.

After that, it was necessary for me to configure the newly added reusable component on each screen that makes use of it. This is where I ran into issues; the focus has been adjusted and is  totally dependent on the timer. But in the code, it was completely sloppy causing distractions. Furthermore, I needed to refactor all the related code from the beginning to find the desirable outcome. So, the current usage of It is depending on user interactions with the system.

This week, I ensured that every screen is compatible with the new component. However, this does not indicate that everything is perfect, as there is always a failure when a negative event occurs. I tried my best to make it function before the end of the week, but I was unsuccessful. Therefore, my main task is to update the incorrect scenario script and ensure that all displays follow the same coding sequence.

This week, I have mostly concentrated on fixing last week’s issues and cleaning out redundant and unnecessary lines of code. The keyboard toggle, specifically the focusing function, was mostly affected by a bug last week. Consequently, it was my responsibility to ensure that focus functions properly and smoothly as required.

First, the focus functions was separated for each text box and connected with its reference, and the usage of them were very unorder and not following certain sequence. Moreover, the submit functions holds unwanted codes that may just make conflicts and make it harder to understand and maintenance. Therefore, creating the reusable keyboard toggle component solved the issue but unfortunately the focusing function still not addressed.

Subsequently, in an effort to resolve the issue, I attempted many times to alter the logic, but to no effect. Mr. Peter provided me with an additional solution to this issue by combining the textbox and keyboard toggle into a single component. Fortunately, after several testing and tweaks, everything ultimately worked as planned.

In the end, this week was helpful for me in a different way because I was able to make a new component and combine two existing components into a reusable one. Making the set ups and configuring the props gave me more understandability,  which will allow me to make faster decisions while dealing with the code.