ProductUpdates Component

ProductUpdates Component

The ProductUpdates component is the customer-facing display for product updates, composed of the icon, the small display, and the full modal for all product updates.

Props

The component itself does not take any props.

State

React State

singleUpdate

This state is a boolean controlling whether the small popup for displaying the most recent product update is visible--[true] for visible, [false] for not rendered.

seeAll

This state performs the same role as singleUpdate but for the modal that displays all of the product updates.

hasViewed

This state stores whether the current user has unviewed product updates according to the last time they checked the product updates--[true] if they have unseen updates, else [false].

External State

notificationTracker

This value is retrieved using the useNotificationTracker firehook that retrieves the entire notificationTracker document for the user, which stores three elements:
notificationList is the list of all the notifications for a user.
notifications stores the timestamp of the last time the user checked their notifications
productUpdates stores the timestamp of the last time the user checked the product updates.
Only the final piece is relevant to this component. It is used to compare with the timestamps of the updates to check if the user has viewed them.

productUpdate

This value is retrieved using the useProductUpdate firehook that retrieves the most recent product update.

user

This value is retrieved using the useMyUser firehook that retrieves the current user.

{
    postId: string;
    title: string;
    description: string;
    listItems: string[];
    timeEntered: FireTimestamp;
    edited?: FireTimestamp;

}

Refs

There are two refs in this component, used to allow clicking off the product update modal and popup.
singleRef is a ref to the top level component for the single product update display.
seeAllRef is a ref to the top level component of the product update modal.

Component Hierarchy

ProductUpdates
|--ProductUpdate is the component for formatting and displaying the client-relevant data of a single product update
|--ProductUpdatesModal is the component for formatting and displaying, in a modal, all of the product updates. Also depends on ProductUpdate for formatting singular updates.

Functions

First useEffect

This useEffect sets the hasViewed state whenever the notificationTracker or productUpdate states update. If any state is undefined, or the last time the current user viewed the product updates is earlier than the latest product update, hasViewed is true, else false.

updateTrackable

Parameters: None Runtime: O(1) algorithmic, but an asynchronous firebase call Returns: void This function sets the hasViewed state to true, and also calls the viewedTrackable firebase function. The viewedTrackable function takes three parameters:

user: FireUser | undefined, 
notificationTracker: NotificationTracker | undefined, 
viewedNotifs: boolean

In this function, they are supplied as the current user, the notificationTracker, and false in this case (false implies product updates were viewed, true implies notifications were viewed). This firebase function then reconstructs the local notificationTracker as a partial and updates a ref to the database notificationTracker with the correct timestamp changed to the current time.

onClickOff

Parameters: None Runtime: O(1), with asynchronous state update calls Returns: void This function is supplied as an event listener on the entire document when seeAll updates. When a click occurs, this function checks if the click occurred outside singleRef, and if it did, sets singleUpdate to false. Otherwise, it checks if the click occurred outside the seeAllRef, and if it did, sets seeAll to false, and additionally sets singleUpdate to false and calls updateTrackable() if seeAll was already true.

Second useEffect

Parameters: None Runtime: O(1) Returns: closure to remove event listener This useEffect is utilized to register a mousedown event listener on the document with onClickOff as a handler, and establish the cleanup function to remove this listener when the component unmounts.

iconClicked

Parameters: None Runtime: O(1) but asynchronously toggles state Returns: void This function is just a wrapper for toggling singleUpdate to the opposite of its current value.

seeAllClicked

Parameters: None Runtime: O(1) but asynchronously toggles state Returns: void This function toggles seeAll to true.