#100DaysOfCode - Intern
Tags: 100daysofcode, react, javascript, typescript
Published: 2023-07-08 06:07:28

**Day 55 - 59 of the #100DaysOfCode** (Week 1)

`.map()`
`useState()`
`Components and Props`

✅️ Create a **Module** page, add a card component called **ModuleCard**, and load it into the page based on the data file (Using the .map() function)

✅️ Create a modal box component called **ModuleModal** and a click function for **ModuleCard**, which can show **ModuleModal**.

✅️ Update **ModuleModal**, which shows the data based on which **ModuleCard** has been clicked.

✅️ Create four new pages called **CustomerGroup**, **ServiceCategory**, **Profession**, and **ResourceType**, which contain a **New button** and have a function to pop up the modal box component to create new data.

✅️ Update the four pages. Load it into the **TableCol** component based on the sample data created (Another of using the .map() function), which contains the **CheckBox**, **Edit**, and **Remove button** and has a function for both of them to pop up the modal box component able to edit or remove.

**Day 60 - 64 of the #100DaysOfCode** (Week 2)
`useEffect(() => {})`
Redux `createSlice`, `PayloadAction`, `useDispatch()`, `action`, `useAppSelector()`
`MongoDB`

✅️ Start with a new experience using the MongoDB database in the project.

✅️ Update **CustomerGroup**. Create controller, model, route, service, and validation in the **API** file. Replace the loaded previous sample data with the database data. The same goes for updating the other three pages.

✅️ Update the function of the **New**, **Edit**, and **Remove** buttons, which allows them to create and enter new data title and send it to the database, edit and update the data title and update it to the database, and remove the data and update the data to the database which change the `active: 0` but the data remain in the database. 

✅️ Update the four pages **Show in List** checkbox and the database. Whenever the checkbox is checked or unchecked, it will send and update the boolean value, and the side menu will pop up the one that has been checked.

**Day 65 - 68 of the #100DaysOfCode** (Week 3)

✅️ Fix the code

✅️ Update InfoForm and AppSelectMultiplePanel

1. When the user have selected an option or clicked on a button, it will automatically add a new select input below on it. 

2. Make an icon appear beside the select input when only one select input have selected the option or have more than one select panel.

**Day 69 - 73 of the #100DaysOfCode** (Week 4)

✅️ Add a new page called **WelcomePage**, and a new component called **CircleCheckBox**. This page have contains the **Card** component with **CircleCheckBox** inside of it and a `onClick` function. The user can click on the **Card** component which show up the modal box to allow the user to add his/her first data of **Service**, **Customer**, **Provider**, and **Resource**. Once the user have add the data or have the data more than one, the checkbox will automatically checked and the **Card** component will lost the onClick function.

✅️ Add a new page called **SetupModule**, which is before the **WelcomePage**. This page will allow the user to toggle the switch and will make changes for **WelcomePage**.

**Day 74 - 78 of the #100DaysOfCode** (Week 5)
`useParams()`

✅ Add new report page and report details page and learn on using `useParams()` on some of the report page and report details page.

**Day 79 - 83 of the #100DaysOfCode** (Week 6)
`res.send()`
`res.status()`

✅ Continue updating the report page and report details page from the previous week, and create some new component and style on it. 

✅ Add a new action and slice for the report and report details page to send and get the data from API.

**Day 84 - 87 of the #100DaysOfCode** (Week 7)

✅ Start to code based on the new UI design that has been given.

**Day 88 - 92 of the #100DaysOfCode** (Week 8)

✅ Continue on coding based on the UI design last week.

**Day 93 - 96 of the #100DaysOfCode** (Week 9)

✅ Start to coding on using Redux.

✅ Learned another new way of passing the data from one page to another page.
`useNavigate()`, `useLocation()`