Everyone experiences emotions that fluctuate unpredictably. While enduring these emotional ups and downs, I often wondered the reason why I felt bad, but sometimes simply ended up grumbling. This led me to think about understanding my emotions in a more systematic way. As a result, I began to record my feelings daily in a diary and tried quantifying them for analysis. Through this process, I realized that factors like unhealthy food and insufficient sleep significantly impacted my mood. Based on these insights, I developed a web app, Emotion Diary, to help users quantify their emotions and express them in clearer language.
This Emotion Diary app will be a powerful tool for users to more accurately understand their emotions and learn how they respond to daily life changes. It aims to manage entries of the user's emotional diary, the todos state would represent the entries of the emotional diary, and functions like onCreate, onUpdate, onDelete used to add, modify, or delete diary entries. The Header component provides an interface for adding new diary entries, while the List and TodoItem components display the saved diary entries and allow for each to be modified or deleted.
-
App: This is the root component that encompasses all other components. It maintains a state calledtodos, which is passed down to the child components. -
Header: Manages the header section of the user interface. It has functions likeonCreate,onUpdate, andonDeleteto perform tasks related to creating, updating, and deleting to-do items. -
TodoStateContext.Provider: This component is responsible for providing thetodosstate to its child components through the Context API, allowing for easy access to thetodosstate in the descendants. -
TodoDispatchContext.Provider: This component provides functions such asonCreate,onUpdate,onDeleteto its child components through the Context API. These functions are used to perform actions that modify the state. -
Editor: This component is tasked with adding or editing to-do items. It can create new to-dos using theonCreatefunction. -
List: A component that displays the list of to-do items, listing each item. Here, thetodosstate is utilized. -
TodoItem: This component represents an individual to-do item. It allows for updating or deleting a to-do item through theonUpdateandonDeletefunctions.
Handling the ProcessedComment interface in both array and single object formats made the data processing logic somewhat complicated. For instance, when handling the CREATE action, a single ProcessedComment object had to be created, whereas the INIT action required dealing with an array. This method-dependent difference in data processing logic made debugging a bit challenging. In future situations where I need to use TypeScript, I plan to use arrays for processing ProcessedComment type data consistently, or clearly distinguish the types (e.g., ProcessedComment | ProcessedComment[]) according to the situation and clarify the corresponding processing logic.
I embarked on this project to migrate my React-based toy project to TypeScript, despite having no prior experience with TypeScript. Diving into the official TypeScript documentation and leveraging Stack Overflow, I self-learned the differences between TypeScript and JavaScript, particularly within the React framework.
As I delved into TypeScript for the first time I found it to be a fascinating experience. While in JavaScript, I sometimes had to circle back to components to double-check parameters or values being passed or deal with situations where something was meant to be a number but ended up being interpreted as a string. TypeScript, though slightly more restrictive, eliminated these issues. TypeScript's type system made me confront these things that might have slipped through the cracks in how my JavaScript worked. The process of explicitly defining types not only highlighted these formerly ambiguous aspects but also allowed me to write code with confidence, knowing it was less prone to errors.