Open
Description
If anyone prefer English, we are happy to translate and discuss in English with you 😄
จุดประสงค์
- ในตอนนี้เรา import model (TypeScript interface) ที่ถูกออกแบบไว้ตั้งแต่ต้นมาอ้างอิงใน shared component ทำให้ props ต่างๆ ของ component couple กับ model มากจนเกินไป เมื่อโปรเจคเริ่มเกิดความเปลี่ยนแปลง เราพบผลเสียที่ตามมาคือ
- หาก structure ของ data source หรือตัว model มีความเปลี่ยนแปลง เราต้องแก้ไขโค้ดในระดับ component ด้วย
- บาง component อ้างอิง props type ด้วย model แต่ใช้แค่บาง property ใน interface นั้น ทำให้มีการส่งข้อมูลลงมาที่ component มากกว่าที่จำเป็น ส่งผลเสียต่อ performance
- ดังนั้นแล้วเราจึงต้องทำการ refactor: decouple shared component และ model ออกจากกัน เพื่อแก้ปัญหาทั้งสองข้อข้างต้น และปูทางไปสู่การปรับ data source ของโปรเจคในปีนี้
Scope ของ issue นี้
เริ่มต้นที่
src/components/PromiseList/PromiseCard.svelte
src/components/PromiseList/PromiseList.svelte
สิ่งที่ต้องทำ
- อ่าน README เพื่อทำความเข้าใจโปรเจค
- ลบการ import type จาก
/models
และ+page.server
(ยกเว้น enum ที่ทำหน้าที่เป็น constant ไม่ใช่ data structure) - ปรับ props และ type ของ props ให้เหมาะสมกับหน้าที่ component นั้นๆ รับเฉพาะข้อมูลที่จำเป็น
- อัพเดต story file (.story.svelte ที่ใช้ชื่อเดียวกัน) และทดสอบใน Histoire (
yarn story:dev
) ว่าใช้งานได้ถูกต้อง UI ตรงกับ https://parliament-watch.pages.dev/stories/ - ปรับ component อื่นๆ ที่ใช้ component นี้ให้ส่ง props อย่างถูกต้อง
- สามารถใช้
yarn run check
เพื่อตรวจสอบ error ของ type จากทั้งโปรเจคได้ว่ามีส่วนไหนที่ตกหล่นหรือไม่
Metadata
Assignees
Labels
No labels