Welcome page and select date to view appointment #53
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's Guide by SourceryThis PR implements a welcome page and adds date selection functionality for viewing appointments. The changes include a new welcome screen component, enhanced appointment list with date navigation, improved UI styling, and simplified local authentication checks. The implementation focuses on improving user experience with better navigation and clearer UI elements. Updated class diagram for AppointmentList componentclassDiagram
class AppointmentList {
- manager
- appointments
- loading
- date
- selectDate
+ fetchAppointments()
+ changeDate(days: number)
+ onNextDate()
+ onPrevDate()
}
note for AppointmentList "Added date and selectDate state variables and methods for date navigation"
Class diagram for new WelcomeScreen componentclassDiagram
class WelcomeScreen {
+ onNext: () => void
}
note for WelcomeScreen "New component for displaying welcome message and app features"
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Hey @pemba1s1, here is an example of how you can ask me to improve this pull request: @Sweep Add unit tests for the `navigateDate` function in `AppointmentList.tsx` to verify it correctly increments and decrements dates when given different DateDirection values. 📖 For more information on how to use Sweep, please read our documentation. |
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey @pemba1s1 - I've reviewed your changes and they look great!
Here's what I looked at during the review
- 🟡 General issues: 1 issue found
- 🟢 Security: all looks good
- 🟢 Testing: all looks good
- 🟡 Complexity: 1 issue found
- 🟢 Documentation: all looks good
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
components/AppointmentList.tsx
Outdated
| setLoading(false); | ||
| } else { | ||
| // Handle unauthorized access | ||
| if (res?.code == 401) { |
There was a problem hiding this comment.
suggestion: Consider handling other error cases explicitly rather than silently failing
Add error handling for other status codes and consider showing an error message to the user when the request fails
There was a problem hiding this comment.
errors are handled somewhere else. This is only checking if token has expired.
components/AppointmentList.tsx
Outdated
| * Changes the current date by a specified number of days. | ||
| * @param days - The number of days to change the date by. | ||
| */ | ||
| const changeDate = (days: number) => { |
There was a problem hiding this comment.
issue (complexity): Consider consolidating date navigation logic into a single handler with an enum-based approach.
The date selection logic can be simplified while maintaining functionality:
- Replace the three date navigation functions with a single handler using a direction enum:
enum DateDirection {
PREV = -1,
NEXT = 1
}
const navigateDate = (direction: DateDirection) => {
setDate(prevDate => {
const newDate = new Date(prevDate);
newDate.setDate(prevDate.getDate() + direction);
return newDate;
});
};- Simplify the date picker integration by handling it directly in the component:
<View style={styles.dateSelector}>
<TouchableOpacity onPress={() => navigateDate(DateDirection.PREV)}>
<Ionicons name="chevron-back-outline" size={20} color="black" />
</TouchableOpacity>
<RNDateTimePicker
value={date}
onChange={(event, selectedDate) => {
if (event.type === 'set' && selectedDate) {
setDate(selectedDate);
}
}}
mode="date"
/>
<TouchableOpacity onPress={() => navigateDate(DateDirection.NEXT)}>
<Ionicons name="chevron-forward-outline" size={20} color="black" />
</TouchableOpacity>
</View>This approach:
- Reduces state by removing selectDate
- Consolidates date navigation logic
- Simplifies the date picker integration
- Maintains the same functionality with less code
components/AppointmentList.tsx
Outdated
Comment on lines
51
to
63
| if (res.status === StatusType.SUCCESS) { | ||
| // Split appointments into past and upcoming | ||
| const { pastAppointments, upcomingAppointments } = splitAppointments( | ||
| res.data | ||
| ); | ||
| setAppointments(upcomingAppointments.concat(pastAppointments)); | ||
| setLoading(false); | ||
| } else { | ||
| // Handle unauthorized access | ||
| if (res?.code == 401) { | ||
| setHasAccessToken(false); | ||
| } | ||
| } |
There was a problem hiding this comment.
suggestion (code-quality): Merge else clause's nested if statement into else if (merge-else-if)
Suggested change
| if (res.status === StatusType.SUCCESS) { | |
| // Split appointments into past and upcoming | |
| const { pastAppointments, upcomingAppointments } = splitAppointments( | |
| res.data | |
| ); | |
| setAppointments(upcomingAppointments.concat(pastAppointments)); | |
| setLoading(false); | |
| } else { | |
| // Handle unauthorized access | |
| if (res?.code == 401) { | |
| setHasAccessToken(false); | |
| } | |
| } | |
| if (res.status === StatusType.SUCCESS) { | |
| // Split appointments into past and upcoming | |
| const { pastAppointments, upcomingAppointments } = splitAppointments( | |
| res.data | |
| ); | |
| setAppointments(upcomingAppointments.concat(pastAppointments)); | |
| setLoading(false); | |
| } | |
| else if (res?.code == 401) { | |
| setHasAccessToken(false); | |
| } | |
Explanation
Flattening if statements nested within else clauses generates code that iseasier to read and expand upon.
This was referenced Oct 29, 2024
This was referenced Oct 29, 2024
yingbull
approved these changes
Oct 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue: #45 #47
Screenshot
Summary by Sourcery
Add a welcome screen to guide users through the app's features and implement date selection for viewing appointments. Enhance the user interface with improved styling and update the README for better clarity on project setup.
New Features:
Enhancements:
Documentation: