The app has three sections, a list of tags to filter events, a list of upcoming...

  
 
 
 

Transcribed Image Text:

The app has three sections, a list of tags to filter events, a list of upcoming events, and the user's agenda. The tag list displays the set of tags returned from the backend that are extracted from the event list. When a tag is selected, it will be used to filter the events returned from the backend. The backend will only return a maximum of 5 events. DO NOT CHANGE THIS. The user may select multiple tags to narrow the search results to view more events. The user can RSVP to an event. Pressing the "Change RSVP" button multiple times will cycle through the possible responses (This isn't the best user experience but it works for the purposes of the lab). The list of events that the user has responded to is listed below in "Your Agenda". This list should update dynamically as the user RSVPs to events or changes their response. The user can also remove their RSVP entirely by pressing the red X in their agenda. Data Model See types.ts for definitions. User (not functional in the app) • .id name friendlds: array of ids of friends (to control visibility); unused Event List . array of Social Events SocialEvent . id . ⋅ title description tags: array of tags that describe this event; used for filtering date . startTime • duration Minutes (unused) . location (unused) • attendees: list of RSVPs (unused) owner: User who created the event (unused) RSVP . id event response: yes, no, maybe, no-response visibility: public, friends, private (unused) numGuests: number of friends you're bringing (unused) Tasks Finish the tag filter The TagFilterview should accept a list of tags to display and then call a callback when the user presses one of the tags. Wire it up so that it accepts a property of type TagFilterList and a callback of type (tagFilter: TagFilter) -> void. App already has an implementation of handleTagFilterChange that will update the tagFilterList state variable. App fetches the list of tags from the backend and these are dynamic based on the scheduled events. Requirements 3000 The TagFilterview shows the list of tags fetched from the backend in App When the user taps on a tag, TagFilterlist calls a callback in App and does not change any data. App provides the tagFilterList state variable to TagFilterview as a property App handles the callback that you added to TagFilterview and updates the tagFilterList state variable Finish the event list The EventListview should display the event List that App fetches from the backend which is filtered by the tag list. Add a property to EventListview that provides eventList to the component for rendering. Additionally, this component will render helpful messages to the user when the event list is being fetched from the server and when a truncated event list is returned. Pass the event ListLoading and eventList Truncated state variables from App into the component. When a user taps on the Change RSVP button, this should fire the handleRSVPChange handler in App to update the user's RSVP to this event. Add a callback to EventListview that will pass on the onttress callback to this method in App. The callback should have the type (event: SocialEvent) > void and pass the SocialEvent that was tapped to the parent component. Requirements AgendaView shows the list of events that the user has RSVPD to from App AgendaView updates dynamically when the list of RSVPD events changes or when the response to an RSVP is updated. When the user taps on the red X, the RSVP is passed to the parent component for handling. The app has three sections, a list of tags to filter events, a list of upcoming events, and the user's agenda. The tag list displays the set of tags returned from the backend that are extracted from the event list. When a tag is selected, it will be used to filter the events returned from the backend. The backend will only return a maximum of 5 events. DO NOT CHANGE THIS. The user may select multiple tags to narrow the search results to view more events. The user can RSVP to an event. Pressing the "Change RSVP" button multiple times will cycle through the possible responses (This isn't the best user experience but it works for the purposes of the lab). The list of events that the user has responded to is listed below in "Your Agenda". This list should update dynamically as the user RSVPs to events or changes their response. The user can also remove their RSVP entirely by pressing the red X in their agenda. Data Model See types.ts for definitions. User (not functional in the app) • .id name friendlds: array of ids of friends (to control visibility); unused Event List . array of Social Events SocialEvent . id . ⋅ title description tags: array of tags that describe this event; used for filtering date . startTime • duration Minutes (unused) . location (unused) • attendees: list of RSVPs (unused) owner: User who created the event (unused) RSVP . id event response: yes, no, maybe, no-response visibility: public, friends, private (unused) numGuests: number of friends you're bringing (unused) Tasks Finish the tag filter The TagFilterview should accept a list of tags to display and then call a callback when the user presses one of the tags. Wire it up so that it accepts a property of type TagFilterList and a callback of type (tagFilter: TagFilter) -> void. App already has an implementation of handleTagFilterChange that will update the tagFilterList state variable. App fetches the list of tags from the backend and these are dynamic based on the scheduled events. Requirements 3000 The TagFilterview shows the list of tags fetched from the backend in App When the user taps on a tag, TagFilterlist calls a callback in App and does not change any data. App provides the tagFilterList state variable to TagFilterview as a property App handles the callback that you added to TagFilterview and updates the tagFilterList state variable Finish the event list The EventListview should display the event List that App fetches from the backend which is filtered by the tag list. Add a property to EventListview that provides eventList to the component for rendering. Additionally, this component will render helpful messages to the user when the event list is being fetched from the server and when a truncated event list is returned. Pass the event ListLoading and eventList Truncated state variables from App into the component. When a user taps on the Change RSVP button, this should fire the handleRSVPChange handler in App to update the user's RSVP to this event. Add a callback to EventListview that will pass on the onttress callback to this method in App. The callback should have the type (event: SocialEvent) > void and pass the SocialEvent that was tapped to the parent component. Requirements AgendaView shows the list of events that the user has RSVPD to from App AgendaView updates dynamically when the list of RSVPD events changes or when the response to an RSVP is updated. When the user taps on the red X, the RSVP is passed to the parent component for handling.