Scroll Lab

Important this will take two labs and we will hook it up to firebase in the next lab. 

Scroll lab (total 190 points)

For this lab, implement the following screen meeting these specs, here is a snack to start with: Feel free to modify the invite card component structure. (link to design, link to sample JSON invitation cards):

1.1     Display a single Invitation Card (30 points)

You are required to implement a custom component for this section. Do not use any existing npm packages to implement your card.

1.1.1     As a user I am able to see a single pending invitation card. (5 points)

1.1.2     As a user I can see the avatar of a person who is inviting me to dinner. (5 points)

Images can be found here 

1.1.3     As a user I can see the name of the person who is inviting me to dinner. (5 points)

1.1.4     As a user I can see the date and time of the dinner. (5 points)

The date-time should be in the following format < Month Name> –

1.1.5     As a user I only see the calendar section if there are no invitations. (10 points)

If there are no pending invitations, the invitation section should disappear.

1.2       List of pending invitations (5 Points)

Since only one invitation is visible at a time. We would like to be able to show the user a list of pending invitations.

1.2.1     As a user I can see a list of pending invitations. (5 points)

Fetch the JSON from the endpoint specified above, and display all the invitations as pending, since none of the invitations have a state. You will also reuse this JSON in the horizontal scroll view section.

1.3     Pending Carousel (45 Points)

In an ideal world, we would not have to accept or reject an invitation in order to see the next invitation. It would be great if we could look at all the invitations and then decide.

1.3.1     As a user I can swipe through a list of my pending invitations. (45 points)

Feel to use npm or other open-source react-native packages to implement this.  

Here is one that you might find useful: 

1.4     Display the Events for today, tomorrow & the next day (30 points) Assuming that today is 12/12/19

Once you have accepted an event it gets added to your event calendar.  The event calendar should display event cards for the current day and the next two days.

1.4.1     As a user I see an ‘add event’ button if there are no events scheduled on that day. (15 points)

1.4.2     As a user I can see the event cards for today, tomorrow and the day after tomorrow. (15 points)

1.5     Vertical Scrolling Event Section (40 points)

Only displaying the events for the next 3 days is limiting. A user might want to be able to view all the events in a month by scrolling up and down in that section.

1.5.1     As a user I can vertically scroll through all the days in the month. (40 points)

Your solution should not load all of the events at once. It should instead do adaptive loading and load the events only when they are needed. (You will extend this in the firebase lab,  to active adaptive loading use a flat-list. See podcast example) 

You should also handle the cases relating to a variable number of days in each month.

1.6     Horizontal Swiping by Month (40 points)

Wouldn’t it be great if users were also able to scroll horizontally?  So, they could see the dinner calendar months in advance.

1.6.1     As a user I can swipe horizontally to view the events in the upcoming months. (40 points)

You should not load all of the events for the year. But instead, you should do adaptive loading and only load the events for the next and previous month. 

It is OK. to only make the top section of the months move. 

Check the current date using State.