Styles, donations flow, introduce new roles

[NathanWEdwards]

This request proposes several style changes, additions/modifications to support donation flow, a calendar component, and additional support for custom claims.

This request performs back-end Firebase tasks with cloud functions (functions/src/index.ts). src/api/firebase-admin.ts has been refactored into src/api/firebase.ts .

A document's field member that references another document should be of a DocumentReference type. Changes throughout the source code have been made to accomodate this request. For example, when adding a new event with src/api/firebase-admin.ts:addEvent(...), the createdBy property of an event should be a document reference to a system account.

• package.json

  • Add Emoticon, Fullcalendar, mui (Material UI), types for Babel generator, and SASS packages as dependencies
  • Update Firebase and Next JS packages to more recent versions

• tsconfig.json

  • Type dependencies should be added to the TypeScript configuration file

• functions/src/index.ts

  • canReadDonations(...) Return true if the authenticated user is authorized to read all donations
  • checkClaim(...) Given a Firebase Auth Id for a user and the name of a Firebase Auth custom claim, return true if the custom claim is applied to this user and is true and return false otherwise. Reject the promise to return whether a claim is present on a user and is true if the claims for a user is not available (e.g. the supplied user Id does not reference an actual user.)
  • getImageAsSignedUrl(...) Given the bucket URL of a cloud storage file, access the file with the Admin SDK and create a signed URL that is accessible for two minutes
  • toggleClaim(...) Given a Firebase Auth Id for a user and the name of a Firebase Auth custom claim, grant access if the value of the claim is false and revoke access if the value of the claim is true. If the claim is undefined, grant access to this claim. Reject the promise to toggle a claim if the custom claims for a user is not available (e.g. the supplied user Id does not reference an actual user)
  • setClaim(...) Given a Firebase Auth Id for a user and the name of a Firebase Auth custom claim and the value of a claim, set the claim with the provided value.
  • setClaimForAidWorker(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to have 'aid worker' privileges
  • setClaimForDonationReadAccess(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to read any donation
  • setClaimForVolunteer(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to have 'volunteer' privileges
  • toggleClaimForAdmin(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'administrator' privileges
  • toggleClaimForAidWorker(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'aid worker' privileges
  • toggleClaimForVerified(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'verified' privileges
  • toggleClaimForVolunteer(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'volunteer' privileges
  • toggleCanReadDonations(...) Given a Firebase Auth Id for a user, toggle a user's permissions to read any donation

• src/api/firebase.ts

  • app: FirebaseApp, db: Firestore, storage: FirebaseStorage, auth: Auth constants are now properly exported
  • initFunctions() initializes FireBase Cloud Functions
  • callCanReadDonations(...) Return true if the authenticated user is authorized to read all donations
  • callCheckClaim(...) Given a Firebase Auth Id for a user and the name of a Firebase Auth custom claim, return true if the custom claim is applied to this user and is true and return false otherwise. Reject the promise to return whether a claim is present on a user and is true if the claims for a user is not available (e.g. the supplied user Id does not reference an actual user.)
  • callGetImageAsSignedUrl(...) Given the bucket URL of a cloud storage file, access the file with the Admin SDK and create a signed URL that is accessible for two minutes
  • callToggleClaim(...) Given a Firebase Auth Id for a user and the name of a Firebase Auth custom claim, grant access if the value of the claim is false and revoke access if the value of the claim is true. If the claim is undefined, grant access to this claim. Reject the promise to toggle a claim if the custom claims for a user is not available (e.g. the supplied user Id does not reference an actual user)
  • callSetClaimForAidWorker(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to have 'aid worker' privileges
  • callSetClaimForDonationReadAccess(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to read any donation
  • callSetClaimForVolunteer(...) Given a Firebase Auth Id for a user and a boolean value, set authorization for a user to have 'volunteer' privileges
  • callToggleClaimForAdmin(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'administrator' privileges
  • callToggleClaimForAidWorker(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'aid worker' privileges
  • callToggleClaimForVerified(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'verified' privileges
  • callToggleClaimForVolunteer(...) Given a Firebase Auth Id for a user, toggle a user's authorization to have 'volunteer' privileges
  • callToggleCanReadDonations(...) Given a Firebase Auth Id for a user, toggle a user's permissions to read any donation

• src/api/firebase-donations.ts

  • _getDonations(...) Given a collection of Donation Detail Firebase collection document references, this internal helper method retrieves a donation detail document and its associated donation document, and retrieves a download URL with an authorization token for the current user for each image present in the two documents
  • getAllDonations(...) Get all donations
  • getActiveDonation(...) Get all 'active' donations
  • getDonations(...) Get all donations where the 'donor' field matches the authenticated user

• src/api/firebase-images.ts

  • imageReferenceConverter(...) Given a collection of Firebase Image collection document references, retrieve a download URL with an authorization token for the current user to each image resource provided

• src/app/account/page.tsx

  • The Browse component for displaying donations should be used on this page for displaying donations to follow the principles of optimization for code re-use

• src/app/about/page.tsx

  • the set of FAQS should be of a type { question: string, answer: ReactNode }[]

    {
        question: "How do I request items for myself?",
        answer:
            <p>
                Requests need to come from designated agencies to streamline coordination and to ensure that resources are allocated to those most in need in the community.
                You can learn more about our designated agencies, <a href="#">here</a>.
            </p>
    }

• src/app/calendar/page.ts

  • Displays a calendar components

• src/components/Calendar.tsx

  • A dedicated component should be made available for scheduling and displaying events

• src/components/Header.tsx

  • The icon in the header could be updated to an icon of a stroller
  • The title should not persist and overlap elements on the screen as the scrolls

• src/models/donations.ts

  • The images field should supports the Document Reference type (Firebase) and string type (URLs to resources on a storage bucket) tailored for reducing the number of types required for working with donation data

• src/models/donations-details.ts

  • The images field should supports the Document Reference type (Firebase) and string type (URLs to resources on a storage bucket) tailored for reducing the number of types required for working with donation data

• src/styles/globalStyles.module.scss

  • SASS may be leveraged for applying themes and styles on app global styles

[NathanWEdwards]

This is great @NathanWEdwards . Love the styling changes and all the Material UI components look great. All the backend changes look good to me, and I like the use of docRefs instead of strings for images. Only things I noticed were:

• you can no longer select multiple images on the donation page, you have to add one at a time.
• the footer links all cram together on mobile

Thanks, @bryanparmelee.

• you can no longer select multiple images on the donation page, you have to add one at a time. The 'multiple' attribute in src/app/Donate/page.tsx has returned:
• the footer links all cram together on mobile The flex direction for the Footer is now set to 'column' from 0px - 450px: