Month: January 2024

I carried out the remaining tasks from last week’s internship this week by putting the entity into practice. The ability to create and update commands was something I had finished. Thus, I still need to create the functionality to obtain entity by id query, get list query, and delete the entity command. Therefore, before querying the entity list and entity information by id, I started implementing the removing entity feature. When I implemented the feature of querying the entity list, I realized that I needed to add two more functions to the repository part. The first function is to get the entity list with page number and page size. Meanwhile, the second function is to get the number of entities from the query. 

Based on the search result, the handler portion of this feature will return the dto with the entity list, page size, page number, and number of entities. Mr. Peter informed me that there will only be one response to the get entity list query—an HTTP status code of 200 OK—after I had completed developing the entity entity. The response of HTTP status code 204 No Content will not be returned since it is a search function. So, I quickly fixed the problem and continue to implement another new entity.

A few fundamental CRUD operations, including the create, update, and delete entity commands as well as the get entity list and get item entity by id query, will be included in this object. 

When testing the API for this entity, I need to include the table and data from another entity, which are entity and store, in order to make the test work. The test won’t function if I don’t include the entity and store entities because the entity table is related to entity A table and the entity A table is linked to the entity B table. Mr. Peter has advised that I include a check to ensure that there are no duplicate of complex ids after I have completed creating this entity. In order to solve this puzzle, he also advised me to use complex keys. 

Since the price is required for the frontend to generate the post page, I have also included the selling price to the item API. Last but not least, Mr. Peter has requested that I include sorting to each table list. This is a result of the data’s constant inconsistency with the ids order. Consequently, I have updated each table list in the repository section with a “ORDER BY id” statement. The table will be listed in ascending order of id when the get list API is invoked.

During this week, I was faced two problems in the UI. When I want to add the layout into the page, there are showing an error that use a UI event handler in a non-client component. To overcome this error, I should add the “use client directive” in the page I want to add the layout. The second problem I faced was the “TypeError: map() is not a function” in React. To tackle this kind of problem, I should make sure the values are an Array before calling “map()” function.

Besides that, I was adding the “Header” and “Hamburger Menu” into the main page before I doing the layout. Therefore, I adding the layout with these two components, I found that the web page renders the components twice, and I removed the components in the main page. But I need to modified again as I see it re-render twice at the element there. In the “Header” component, I add the title function for changing the title in each page. I also modified the “Search” function as the user typing some inputs, the system will not be sending the request every single time until the user press the “Enter” key or clicked the “Search” button.

On the other hand, I change the external CSS file to inline Tailwind CSS style. This is due to the reason that the inline Tailwind style will set the styling priority first, and this way is very easy to capture the CSS problem when coding. In this process, I learned something new with the difference between the CSS style and the Tailwind CSS style. When I was changing the CSS style, meanwhile, I was checking and cleaning the code.

In the end of this week, Mr. Peter was giving me a new task which is create a CRUD function for Entity Type. This function is same like the task I created before, so I just copy and paste the code and change the terms only. In addition, he also told me try to integrate the real Item API into the React frontend. Since this Item page consider many components, he tells me to break down the API first. Therefore, I am trying to call the list DTO of the item first to show in the page.