The Event component is a simple function component. It takes in props of type EventProps, which includes title, description, start, end, url, and email as required properties.
The component renders an event container with a title, event details (including formatted start and end times), event description, and event footer with buttons for URL and email. The formatTime function is used to format the start and end times to a localized string.
resolves #7
Thought Process
I was thinking ahead and gave most elements a class name for easier selecting when it comes to styling.
I initially had 2 separate functions for formatting the start and end time props. I figured since both of those functions were exactly the same, I could write a single function that produces the same functionality.
I'm wondering how this component will be used to render props that it receives from a backend.
Testing Steps
Run npm start in the terminal
In src/App.tsx, you can change the properties
Risks
The Event component is a straightforward and relatively simple component without any obvious risks. However, it's worth noting that there are some potential risks that could be present in the implementation or usage of the component:
The component takes in start and end props of type Date. However, JavaScript Date objects can be tricky to work with due to their behavior around time zones, daylight saving time, and other date-related issues. Care should be taken to ensure proper handling of Date objects to avoid potential bugs related to date and time calculations or comparisons.
Overview
The
Eventcomponent is a simple function component. It takes in props of typeEventProps, which includestitle,description,start,end,url, andemailas required properties.The component renders an event container with a title, event details (including formatted start and end times), event description, and event footer with buttons for URL and email. The
formatTimefunction is used to format thestartandendtimes to a localized string.resolves #7
Thought Process
I was thinking ahead and gave most elements a class name for easier selecting when it comes to styling.
I initially had 2 separate functions for formatting the
startandendtime props. I figured since both of those functions were exactly the same, I could write a single function that produces the same functionality.I'm wondering how this component will be used to render props that it receives from a backend.
Testing Steps
npm startin the terminalsrc/App.tsx, you can change the propertiesRisks
The
Eventcomponent is a straightforward and relatively simple component without any obvious risks. However, it's worth noting that there are some potential risks that could be present in the implementation or usage of the component:The component takes in start and end props of type
Date. However, JavaScriptDateobjects can be tricky to work with due to their behavior around time zones, daylight saving time, and other date-related issues. Care should be taken to ensure proper handling ofDateobjects to avoid potential bugs related to date and time calculations or comparisons.