# Coding Retrospection
Author: Phạm Như Hoa
---
#### Đoạn Code ban đầu
```typescript=
.title {
font-size: 15px;
font-weight: 550;
padding: 15px 0px 0px 20px;
}
```
----
#### Suy nghĩ khi viết code
* Thêm css vào file css để được giao diện mong muốn
----
#### Đoạn Code sau khi sửa
```typescript=
<div class="card-title fw-bold fs-4 w-100">
//content
</div>
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Tận dụng những gì thư viện có sẵn để code được gọn hơn, hạn chế thêm css trực tiếp
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
this.router.navigate(['thanh-tra/ke-hoach', id]);
```
----
#### Suy nghĩ khi viết code
* Đưa ra đường đẫn đúng là được
----
#### Đoạn Code sau khi sửa
```typescript=
this.router.navigate(['/', 'thanh-tra', 'ke-hoach', id]);
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Đường dẫn rõ ràng và dễ đọc hơn
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
constructor(
private router: Router,
private route: ActivatedRoute,
private planService: PlanService
) {}
```
----
#### Suy nghĩ khi viết code
* Thêm để sử dụng, sau không sử dụng nữa nhưng chưa xoá
----
#### Đoạn Code sau khi sửa
```typescript=
constructor(
private route: ActivatedRoute,
private planService: PlanService
) {}
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Xoá các tham số khi không sử dụng
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
<div class="d-inline" *ngFor="let field of item.listFieldIds; let last = last">
<span [category]="field"></span>
<ng-container *ngIf="!last">, </ng-container>
</div>
```
----
#### Suy nghĩ khi viết code
* đúng dữ liệu
----
#### Đoạn Code sau khi sửa
```typescript=
<span [categories]="item.listFieldIds">
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Đối với những dữ liệu có thể dùng nhiều lần thì cân nhắc tới việc thêm directory/component để có thể tái sử dụng và code ngắn gọn hơn.
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
if (value.province && value.province !== province) {
//
}
```
----
#### Suy nghĩ khi viết code
* Đúng điều kiện đang mong muốn
----
#### Đoạn Code sau khi sửa
```typescript=
if (value.province && !value.province?.isEqual(province)) {
//
}
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Sử dụng các function có sẵn để có hiệu quả tốt hơn: isEqual() sử dụng để so sánh 2 đối tượng trong nhiều trường hợp toán tử '===' không thể xử lý.
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
classifyByStatus(attachments: any[]) {
attachments.forEach((item) => {
switch (item.status) {
case AttachStatus.QuyetDinhVaKeHoach:
case AttachStatus.ChuanBi:
this.attachmentChuanbi.push(item);
break;
case AttachStatus.CongBoQuyetDinh:
case AttachStatus.BienBanLamViec:
case AttachStatus.TienHanh:
this.attachmentTienhanh.push(item);
break;
case AttachStatus.DanhSachVanBanLienQuanBCKQ:
case AttachStatus.KetLuan:
this.attachmentKetthuc.push(item);
break;
default:
break;
}
});
```
----
#### Suy nghĩ khi viết code
* Ra đúng dữ liệu mình mong muốn là được
----
#### Đoạn Code sau khi sửa
```typescript=
transformData(attachments: any[]) {
const attGroup: any = attachments.groupBy('status');
this.attachmentChuanbi = [
...(attGroup[AttachStatus.QuyetDinhVaKeHoach] || []),
...(attGroup[AttachStatus.ChuanBi] || []),
];
this.attachmentTienhanh = [
...(attGroup[AttachStatus.CongBoQuyetDinh] || []),
...(attGroup[AttachStatus.BienBanLamViec] || []),
...(attGroup[AttachStatus.TienHanh] || []),
];
this.attachmentKetthuc = [
...(attGroup[AttachStatus.DanhSachVanBanLienQuanBCKQ] || []),
...(attGroup[AttachStatus.KetLuan] || []),
];
}
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Cố gắng tối ưu code,
* Hạn chế sử dụng vòng lặp khi xử lý dữ liệu.
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
if (organization) {
let combinedNames = '';
if (organization.name) {
combinedNames += organization.name;
}
if (organization.parent) {
if (combinedNames) {
combinedNames += ', ';
}
combinedNames += organization.parent.name;
}
```
----
#### Suy nghĩ khi viết code
* Ra đúng dữ liệu mình mong muốn
----
#### Đoạn Code sau khi sửa
```typescript=
if (organization) {
let combinedNames = '';
if (organization.name) {
combinedNames += organization.name;
}
if (organization.parent) {
if (combinedNames) {
combinedNames += ', ';
}
combinedNames += organization.parent.name;
}
const names = [organization?.name, organization.parent?.name].compact().join(', ');
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Sử dụng các hàm có sẵn để có kết quả tốt hơn: compact() dùng để lọc các kết quả "falsy", tránh lỗi và đảm bảo các kết quả đều hợp lệ.
----
Free notes
---
#### Đoạn Code ban đầu
```typescript=
events: {
dataPointSelection: (_event, _chartContext, config) => {
const ID = config.w.config.xaxis.categories[config.dataPointIndex];
this.initialYear(ID);
}
```
----
#### Suy nghĩ khi viết code
* Thư viện đã định nghĩa kiểu dữ liệu nên không cần định nghĩa lại
----
#### Đoạn Code sau khi sửa
```typescript=
events: {
dataPointSelection: (_event: any, _chartContext: any, config: any) => {
const ID = config.w.config.xaxis.categories[config.dataPointIndex];
this.initialYear(ID);
}
```
----
#### Cảm nhận / Học được gì sau khi sửa code
* Cần định nghĩa kiểu dữ liệu cho cấc tham số khi truyền vào
----
Free notes
{"description":"Author: <Name>","title":"Coding Retrospection by Sunshine","contributors":"[{\"id\":\"fab33967-ef11-479a-9705-a9adaa3d7e73\",\"add\":8364,\"del\":2468}]"}