79 user dashboard 2 #80
Conversation
…r-dashboard-2 # Conflicts: # components/DayViewItem.tsx
cshimm
requested review from
a team,
Diego-Cano,
Asfand00,
MiguelQuintana1,
katrina-l-hill and
AzariasANeals
There was a problem hiding this comment.
@cshimm , this is really solid work. Wonderful job! It really is fulfilling what we're wanting from this feature for the application, so this is a fantastic addition.
I did run into some issues when jumping between the month and week views, with the latter taking on more of a hit when toggling between the two but I don't feel that that is a major concern this sprint and PR; establishing these components and getting them to where we want conceptually is far more of my aim, which you feel you did quite well. LGTM!
There was a problem hiding this comment.
Excellent job, Cameron with this component, I tested on the iOS simulator, and it works perfectly. However, when I tested this component on the web, it seemed like it had a problem resizing. I did like the picker you used; it looks super good. I worked this week applying different pickers, and I know how difficult it is to make this work on all platforms without breaking the others.
GMT20250210-060543_Clip_Miguel.Quintana.s.Clip.02_09_2025.mp4
resolves #79
Description
Implements the month view and week view on the user dashboard. These views will be used to display dummy shift data for the user including but not limited to role, building, room, start time, end time and total hours for the shift. When the user navigates to the user dashboard page they will be greeted with the month view with all of their shifts marked with a black dot. Underneath the calendar is a scroll view of shift detail items that correspond to the marked dates in the calendar. Note that days can support multiple shifts.
Technology used
The package
react-native-calendars version: ~1.1308.1was used for both the month and week calendars as well as the item list that displays shift info.Read more: https://wix.github.io/react-native-calendars/docs/Intro
Data
dummyShiftData.tscontains an array of ShiftData objects. These objects are imported statically and accessed only once when the UserDashboard component mounts.To test
npm installnpm starton your deviceComponents
Month View
The month view displays a month calendar using the
<Calendar/>component fromreact-native-calendars. Days can be tapped to view shift details on a specific day. Tapping days marked with a shift will scroll the shift details container (<AgendaList/>) to that day. Note that nothing happens when selecting a day without a shift.You can also switch the currently selected month by tapping the arrows in the calendar header.
Week View
The week view displays shifts for the current week only using the
<WeekCalendar/>component fromreact-native-calendars.DayViewItem
This is the component that is rendered for every shift in the shift details container. Here is what it displays:
Role
Building: Room
Shift duration | StartTime - EndTime (each 12 hr format)
Day View Items container
This component displays the DayViewItems as a list using
<AgendaList/>fromreact-native-calendars. It consists of a date section header with DayViewItems underneath for corresponding shifts. Because<AgendaList/>inhereits from<FlatList/>the items rendered are scrollable.Example
2025-02-09.14-46-51.mp4
Limitations
I ran into issues with the
<WeekCalendar/>not initializing properly when it was the default view loaded. I'm not entirely sure what the issue ever was but I'm sure its that can be fixed should we rather have the week view be the default view when loading the user dashboard.