Refreshr App Week 4

March 05, 2019

Part 1 - Individual Accomplishments

week4 My github: timh1203

Provide a paragraph (5-8 sentences) summarizing the work you did this week, the challenges you faced, the tools you used, and your accomplishments

This week was much better than last since we had most of our functionality built out. The difficult part this week was connecting everything together and structuring our app to match in the database and the sendgrid database. I worked more on stylings and layout this week. The user flow is important to help the user use the app more easily.

One important feature I implemented was to automatically schedule 2 days, 2 weeks, and 2 months from the date that the user selecters. This helps out the teacher by not having to go through 3 separate processes to create a campaign. The drawback is that they can't select the dates as of yet. A crucial tool in this implementation was Moment JS.

Ticket 1 Github Ticket 1 Trello -Add working solution of SG flow with date selection
-Added 5 hours onto user input to make it effectively same day
-When user inputs April 1st, it will store April 1st, 2019 12am instead of March 31st, 2019 7PM

Ticket 2 Github Ticket 2 Trello -combined ListForm and RecipientForm together
-corrected transition logic and buttons
-made pages responsive
-removed old forms: Recipient and Selection

Ticket 3 Github Ticket 3 Trello -Add logic to remove specific recipient from recipientData state before sending to Sendgrid
-Add icon for onClick
-Add icon next to user name and centered

Ticket 4 Github Ticket 4 Trello -Add logic to schedule 2d, 2wk, 2mo from input date
-Add render of the dates on page for user's ease
-Add some basic styles


Detailed Analysis: Ticket 4

A key piece in making this pull request was MomentJS. We were using javascript date object before and it's definitely not as flexible. After importing and reading some of the documentation, I found it much easier to convert dates and format the output of the dates to my liking. I will definitely use this package from now on when working with dates.

Screenshot 2019-03-05 18.36.37

In the screenshot above, you can see that I was formatting out the dates into an easy to read format as well as the unix time which would be used more in the official sendgrid opeations. Another aspect that proved challenging were the different time zones. MomentJS has a great feature to save the data according to the time zone instead of working with the UTC time zone. That way, when the teacher schedules for 8am in their time zone, it will stay that way for them even though it might be listed as UTC in our database and sendgrid.

Screenshot 2019-03-06 17.53.21

This photo shows the pull request made to the master branch and the commits that were a part of it. Another aspect I worked on was implementing the visual render of the information of the dates for the different campaigns so that the teacher would be able to see when the other 3 refreshrs were scheduled.

Screenshot 2019-03-06 17.54.13

This is the code where I was working with the time after the user has inputted. The timeTriData is for the sendgrid operation on the master component to submit different campaigns with the pre-calculated times from the user inputs. The setSchedule was to add the data to the state so it could render out to the users the 3 pre-calculated dates and times.

Screenshot 2019-03-06 17.53.48

This last photo shows the implementation of the timeTriData and how the big call to sendgrid utilizes multiple calls and separated out functions so it's clear what's happening when a user clicks the button to send up everything to sendgrid.


Part 2 - Milestone Reflections

As a part of your journal entry, write ¼ to ½ a page reflecting on your experiences working with a team to make your product look and feel as good as it works under the hood. Describe how the duties of you and your team shifted tasks shifted towards the front end - and debugging the back end to improve UX.

As a group, provide documentation of your progress and remaining tasks: Link to each page and describe any remaining bugs, fixes, or tasks that need to be completed on that page

Minor bugs or quirks are expected, as documented in your writeup. Your PM will review your site to confirm that it has: Consistent UI Appropriate color scheme Few console errors or warnings Error handling for expected user interaction cases Load speeds are reasonable

Making the product look and feel good was easier than implementing functionality. However, there still remains work to do to make the app really sparkle. The theming is consistent and the color schemes are there. There still needs to be font change, small transitions and other tweaks to make the app really shine.

In terms of the front end, we had to adjust some of the data on state to make the information render correctly. We also had to decide how we'd like to lay out the project as a whole since there are lot of different views we wanted to make flow more logically. Consolidating forms and menus were also a priority in order to improve the user experience.

In terms of the back end, we had to make some adjustments to our database this week to correct for some of the way the data was coming back. By saving the data correctly to the database, we could then pull the information to the front and render out the correct information. We had to debug a couple issues since we added some of our DB schemas to fit in Auth0 and data coming back from sendgrid, primarily different ID's.