TODO LIST

• Make Profile Edit Dialog safe on Front & Backend following the authority level
• 10/03/21 CY - Made checkboxes and radio buttons readonly when in viemode
• 10/03/21 CY - Issue: In ProfileEditDialog, either: Formik component outside Dialog component makes <Button type="submit"> not work(temporary fix is to use onClick={submitForm}), OR if Formik component is inside the Dialog component, then the dialog's sticky title and action breaks ← Fixed by using first method
• 10/03/21 CY - Issue: Error messages do not show when submitting form ← Fixed by having initial values have defined initial values. When they're undefined, no error message shows.
• [] Currently, there are multiple instances of profile editdialogs. Fix if unnecessary
• CY - Update signUp action with respect to the new fields
• 19/02/21 CY - Issue: In Signup page, when gender is chosen and you leave the page and come back, it is unchecked ← Dirty fix by getting value from another useField and applying it to the original useField
• 19/02/21 CY - In Signup page, email availability is now checked immediately
• 15/02/21 CY - Implemented tabs in reports page
• 27/09/20 CY - Implemented new AuthPage
• PWA features
  • 13/09/20 CY - Implemented Push notification for Android
  • 08/09/20 CY - Implemented Offline support
  • 06/09/20 CY - Implemented Share text feautre
  • 05/09/20 CY - Implemented Live Update feature
• 05/09/20 CY - Updated Icons
• 03/09/20 CY - Added build time in drawer
• 03/09/20 CY - Made attendance link with firestore
• 03/09/20 CY - Complete the relationships between change of date from PrayersPage and state and props of PrayerListItem
• 02/09/20 CY - Implemented responsive sidebar
• 29/08/20 CY - FAB now zooms in and out
• 14/08/20 CY - Implemented Attendance mode in report page
• 04/08/20 CY - Fixed positioning of FAB
• Styling
  • Padding and spacing
  • 02/09/20 CY - Removed unnecessary paddings on reports listitem
  • 15/08/20 CY - Issue: There seems to be some sizing problem with Textfield in list in reports page. Transitioning from prayer<->attendance causes some unwanted movement throughout the whole page ← Solved by adding a "paddingBottom: 0" to TextField InputProps. UPDATE: Actually, it turns out the problem is using textfield and buttongroup at the same time. When using ToggleButtonGroup, the problem disappears
  • 04/08/20 CY - AuthPage new style
  • 01/07/20 CY - Changed Appbar and side drawer to have primary main colour
  • 27/06/20 CY - Removed 'OK' & 'Cancel' on datepicker using variant="inline" and moved datepicker icon to the start
  • 27/06/20 CY - Stylised Theme editor page
  • 24/06/20 CY - Finished styling prayer list item
  • 24/06/20 CY - Finished styling app bar and drawer
• Implement Calendar page
  • 17/07/20 CY - Basic implementation of calendar page
• 14/07/20 CY - Make prayers save on firestore
• 14/07/20 CY - Connect Date and Prayer query
  • 14/07/20 CY - Convert prayers objects to report objects
  • 14/07/20 CY - Implemented timer and onBlur based autosave
• 14/07/20 CY - Add a FAB
• 14/07/20 CY - Add a save snackbar
• 11/07/20 CY - Install new typographies: Added font installer in theme editor page
• 01/07/20 CY - Finished adding JSON input feature on theme page
• 27/06/20 CY - Added Theme editor page
• 27/06/20 CY - Added Storybook 'npm run storybook' - See Link
• 26/06/20 CY - Typed CustomList & ContainerMain using generics
• 26/06/20 CY - Implement Date & Datepicker dialog
• 24/06/20 CY - Changed the notice alert icon
• 24/06/20 CY - Implemented new design prayer component
• 24/06/20 CY - Refactored List components into Presentational & Container
• 12/06/20 JH - Added delete, edit on Notice
• Made prayers query a redux reducer
  • Issue: Not so clean implementation. Probably should find another way
• Created Dates page and have it be the landing prayers page
• Make week view list all past weeks this year in prayers page
• Make the current page highlight on the side drawer
• Make local BibleRef a redux state
• Implement restricting view to my cell only
• Implement Bible page
  • Implemented basic functionality
  • Implemented search with highlight match
  • Updated Bible names
  • Firestore persistence
  • Styling
  • Refactor repeated Bible dialogs
• Implement uploading thumbnail size profile photo
• Implement Absolute importing
• 13/03/20 - Add notices page
• 12/03/20 - Implement delete profile photo
  • Implemented basic delete function
  • Issue: Dialog does not update its states/render after close e.g. After deleting/uploading photo, previous state of image is left behind. After closing the dialog once more manually then opening fixes the issue ← Solved with useEffect hook
  • Replace position of "Cancel delete" to the "Choose Image"
• 12/03/20 - Typed up date objects depending on download(firestore Timestamp) or upload(Date)
• 11/03/20 - Implement Photo upload
• 11/03/20 - Implement displaying profile photo
• Implement Prayers page
• Implement formik with edit profile card
• Implement "Go back to previous page" after sign in for public pages too
• Included "Playground" item to the sidebar
• Implemented conditional "My Account/Sign In" item in the sidebar
• Finish styling the edit profile card
• Implement edit profile card
• Implemented sign out button and made appbar take title prop
• Implemented search function to filter the members list
• Make Account, Members, Prayers, Calendar page at the side bar
• Implement rerouting for signin/up ← (See Issue 1.)
  • Update: Solved Issue 1.
• Implement progress animation
• Implement reset password
• Make "name" prop in form fields in AuthPage one of key of IAuthForm
• Make the yup input object, type safe with IAuthForm
• Implement Signin/up error message
• Implement Remember me
• Use Formik for forms (Youtube, Github)
• Implement custom components to be used with Formik (Youtube, Github)
• Implement validation using Yup (Youtube, Github)
• Join Auth and Firestore profile (Youtube, Github)

Issues

Issue 2. How to reproduce error: "/public" → "/" → "public". This creates "TypeError: Cannot read property 'name' of undefined" error. The problem is the list "membersDic" in this setting is not fully loaded which causes the error. We need to somehow find a way to make sure to render only after all the data is ready.

• UPDATE: Partially solved by filtering out the prayer list which only has memberId in the membersDic. Still, the problem lies why does the membersDic load slowly when we return to the public page?

Issue 1. Rerouting after signin currently has a problem. After success, in the promise, the redux state for auth is not yet updated and therefore made a temporary fix by waiting 1 millisecond. See the 'signIn' function in 'authActions.ts' ← Solved by checking for authstate and redirecting by conditionally returning redirect on signin page

• UPDATE: Properly implemented rerouting all in PrivateRouter component

Questions

• How to make conditional type? See src→utils→example.ts
  • See notes.tsx on section "Conditional type based on value"
• How should we structure our database? In particular, if we only have members details have one source of truth on "members" collection, then users like 목사님 may end up doing 300+ reads every session. This could be dealt with: caching/having multiple source of truth synchronised by firefunctions/summary document
• There is a lag between firebase auth update and redux-firebase state
• How should we sign people up?

Notes

• 'firestoreReducer' from "redux-firestore" has "any" ReturnType and is able to hook up typescript definitions when using "useSelect" with "state.firestore"

• @date-io/date-fns 2.x(Dependency for @material-ui/pickers) seems to be broken and so we use 1.3.13 instead

• Firestore automatically converts Date type into Timestamp type which causes some confusion. Timestamp must first be converted to Date type to use the usual Date methods.

• Seems like IconButton component should but doesn't expect a 'component' prop which causes Typescript error found in ProfileEditDialog. There has already been a similar issue with material-ui here ← Seems fixed now

• react-swipeable-views currently has known bug with the latest version so we use version 0.13.3 which currently works ← Fixed from 0.13.9

Tips

• You can combine two class styles by doing className={`${classes.style1} ${classes.style2}`}