Month: December 2023

Last week, I improved the customer page even more. However, although the form had no content, I discovered that the submission was successful. This will be a major issue because it may cause the data storage to store a large amount of null customer data. Because I was unable to determine the exact cause of the form submission success, the form submission button has been set to disable, and the button’s color has changed to grey when the form is not filled. In addition, I added an error message when the form is not filled out. For example, if the name is null, a red error message will appear at the bottom of the customer name column. This assists the user in recognizing the necessary parts of the form that must be filled out and minimizing the form submission problem.

Besides that, I found out that the customer data will not update correctly to the data storage through the api. This is caused by the data storage needed are not match with the data I submitted. I noticed that the api post, update function will transfer data related to the addresses as Boolean variable. However, I was passed in the data as an array. I need to reconsider my api passing code development. Thus, I added a function to change the array submitted to become a suitable format as the api needed. Now, the data passing will be fine and I will get the exact updated data.

Furthermore, I had slightly renamed the file and the CSS name. Mr. Peter advised me that the naming should be consistent with either a capital or a lowercase letter. However, I discovered that renaming the folder is not possible. I need to make a new folder and move all of my functions inside it. The folder name should now be in lower case, while the CSS name should be in capital letters. Mr. Peter also advised me to include a space between the functions. The extra space will make it easier for other developers to read. My code will be better and easier to read after these changes.

The customer page was nearly finished by the end of the week. I should test more frequently in order to identify the defect that is causing the bugs. Also, since my internship is coming to an end, I should start using Trello to manage my work periods. I should finish all of my tasks by the middle of January.

On the first and second day of last week, I continue modified the item-detail panel and the width of the web page when the side drawer is opened. In the item-detail panel, I used Array.join() method to separate the category type with a comma in the table. I also used carousel method to display multiple images in the panel. For the search function, I used Array.every() method to ensure that each term in search query is present in the item name.

Mr. Peter give me a task that create a Store page which should include CRUD function. He mentions that this page should consists the entity details. This store page is getting data from the API. At first, I created a panel that show the detail of the store. Then, I pulled out the branch and merge it into my existing feature branch which is “store” in order to use Redux.

For the CRUD function, I refer to the “Customer” which created from my colleague and make some changes that fulfil the requirement of “Store” page. So far, I completed the “Create” and “Update” function, the “Read” function I will complete in next week to show the list of the store with the search function.

Last week, I finished integrating the API into the React website. This API will establish a data link between the database and the system. At first, I didn’t realize the APIprovided by my colleagues had many methods such as getByIdAsync, getListAsync, updateAsync, deleteAsync, and createAsync. In my development, I only used getListAsync for displaying purposes. I did not concentrate on using the API to create, update, and delete entities. However, the getListAsync method will not return information about a specific customer. I need to use getByIdAsync to view all of the data for a single customer. For example, the addresses types were missing from getAsync but were present in getByIdAsync. Thus, I need to use all the methods for the customer page.

When the system was first being developed, I struggled with the create new customer and modify an existing customer. It’s because they’ll be using the same module to display the data. I used to just pass the length of the array as the ID of a new customer, but I changed my mind. When setting the value, I will now pass the ID as undefined to the module and/or method. Because the react hook form requires the use of setValue when passing data to the module, I used the “||” to determine the data’s existence. When getByIdAsync returns an undefined Id, I setValue to null and convert this file into a create customer form.

Aside from that, the provided API lacks of customer types yet includes the address name and address remark. Following Mr. Peter’s clarification, I should revise the customer page prototype to include the address name and address remark instead. Fortunately, these minor changes are straightforward; I only need to add two new text boxes to the address column. Furthermore, I successfully  eliminate the duplicate code. The code was now shorter, and fewer files were required for each page.

By the end of the week, I couldn’t connect to the API’s POST function. I informed Mr. Peter and will resolve the issue within the next week. I believe that the customer page will be completed within the next week, at which point I will embark on the journey of creating the main page. I only have one month to finish the main pages, and I’m hoping to finish them before the internship ends.

This week I continue to solve the API problem that I encountered last week. The issue I ran into last week was that Postman was not able to establish a connection to the database. After the guidance and advice from Mr. Peter, I can run the API on Postman correctly. The docker-compose.yml file contained some missing information, which caused the issue. Upon incorporating the data and reconstructing the docker-compose.yml, I successfully executed the API through Postman.

This week, I also ran into a problem where I couldn’t get software to connect to the database. I have attempted to establish a connection with the server and launch software again in order to access my database. The database system is in recovery mode or the database connection has timed out, according to the error message I received. Despite my attempts to use Google Chrome to remedy the issue, the error persisted. I thus told Mr. Peter about this mistake right away. He explained to me that the issue was caused by an excessive amount of memory in the log file. So, after solving the problem, I was able to run the database again.

In addition, Mr. Peter discovered that third parties had gained access to the data kept in our MongoDB. This is a result of the deletion of the database that held the item data. The MongoDB server also established a new database named “READ_ME_TO_RECOVER.” In order to prevent anyone else from accessing our MongoDB server in the future, Mr. Peter quickly shuttered it. He then built a new server and added a far more complex login and password to prevent unauthorized users from readily accessing our MongoDB.

After Mr. Peter fixed the MongoDB issue the following day, no additional new connections were made, indicating that as of right now, no hacker was attempting to steal our data. But Mr. Peter has told me to keep a close eye on the MongoDB and let him know if someone hacks our data once more. This week, I have attempted to access the MongoDB, but it continues to fail. In order for Mr. Peter to try to debug and identify the issue, he has asked me to push my workings to the feature branch.

During the past week, my primary goal was to address various bugs in the modified section of the application where the progress bar with SignalR had been recently implemented. As mentioned in my previous blog, a critical issue arose when attempting to save changes after the loading bar reached 100 of saving batch data, triggering an error message stating “batch too large.” After thorough debugging, it was identified that the problem originated from Cassandra. To resolve this, Mr. Peter showed me a temporary solution by directly overwriting the save changes in the database. The rationale behind this approach is the potential removal of Cassandra usage in the future.

The next bug involved the progress bar not advancing and continuously displaying “Queue (0/0)” after the user clicked ‘cancel’ during a previous process. This issue was rectified by making minor changes to the conditional statements. However, the most time-consuming bug to diagnose was an unresponsive UI on the cancel button during data generation. This occurred after the user initiated another process in the same section. Initially, a thread-related problem was suspected, but even after converting certain parts of the code to asynchronous, the issue persisted. 

Towards the end of the week, I inserted a line of code to monitor the changes in the progress bar and its GUID. It became evident that with each cancellation, multiple GUIDs were managing the progress in the subsequent progress bar. My initial hypothesis was that the cancellation process might not be completed and the multiplication of GUID during each cancellation could be the root cause of the lagging issue. Unfortunately, by the end of the week, I was unable to resolve this particular section of the code.

This week I display what I have done so far to Mr. Peter. He pointed out several points that I should change. First of all, he suggests me prevent any hardcoded way because all of the data will get from API. Therefore, the hardcoded way will lead me to write the same function again and again and I use the .map function to overcome this issue. He also suggests that the naming of the folder and the file must be consistent. This is due to the reason that easier to let other find the file according to the structure. For example, every file or the folder of the first letter must be capital and the CSS style must be renaming it with the same name of the file that use the CSS file.

On the other hand, he also suggests the position of the “Search bar” need to change to on the top center of the page. This “Search” is the most frequently use in the page, therefore, I make the width of the search bar 70% to the width of the page and place between the “Header” and “Navigator”. In the item-detail panel, he mention that there will be a several number of images need to display, not only one, so, I am consider to use carousel method to display the images.

Lastly, he suggests the general components like the “Header” which can use anywhere put into the main file so that any page can display the header code at one time, no need every file to import this component again. Since, I change the location of the file, so I need to rename the path and the division of the header and the main content of the page need to change.