Saved collections

[cherylwu834]

Summary

Implement front-end and back-end for save screen to display the user's saved items, and add save/unsave functionality to writing activity pages.

Co-authored-by: Joy Cheng joycheng@g.ucla.edu

Bookmark Screen Overview

• Name of Component: BookmarksScreen
• Functionality:
  • This page displays all the user’s collections. Currently, the only collection displayed is the “All Saved” collection, which includes everything the user has saved.
• Where is it used:
  • The user can navigate to the BookmarksScreen from the HomeScreen.
  • The user can navigate to the SavedScreen from the BookmarksScreen.

Save Screen Overview

• Name of Component: SavedScreen
• Functionality:
  • This page displays all the user’s most recently saved items:
    • Story Starters
      • Plot Points
      • Traits
      • Objects/Items
      • Settings
    • Triple Flips
    • Door Activities
  • There is a “View all” button for each type of item that navigates to the ViewAllSavedScreen , which displays all the saved items of the given type.
• Where is it used:
  • The SavedScreen can be navigated to from the BookmarksScreen.
  • The user can navigate to the ViewAllSavedScreen from the SavedScreen.

Methods

• getId retrieves the user ID belonging to the current user of the session, through Redux’s Secure Store, in order to retrieve user-specific data.
• getActivityByID, getPlotPointByID, getTraitByID, getItemByID, getSettingByID are each used to get a specific saved item from the database by the item’s ID.
• getActivities, getTripleFlips , getPlotPoints, getTraits, getItems, getSettings are each used to get a specified number of the most recently saved items. Each of these functions sets a state variable to a list of these items in order from most recent to least recent.

View All Screen Overview

• Name of Component: ViewAllSavedScreen
• Functionality:
  • This page displays all the user’s saved items of a particular type, organized by date from most recent to least recent.
  • The user can press the pencil icon in the top right to enter an editing mode in which they can select specific items for deletion.
    • Once they have selected at least one item, they can press the “Delete all” button to delete their selected items.
    • If they have no items selected, they can press the “Cancel” button to exit the editing mode.
• Where is it used:
  • The ViewAllSavedScreen can be navigated to from the SavedScreen.

Props

• The subject variable is passed when navigating from the SavedScreen. subject specifies which type of item the ViewAllSavedScreen should display (e.g., Plot Points, Triple Flips).

Methods

• getId retrieves the user ID belonging to the current user of the session, through Redux’s Secure Store, in order to retrieve user-specific data.
• getActivityByID, getPlotPointByID, getTraitByID, getItemByID, getSettingByID are each used to get a specific saved item from the database by the item’s ID.
• getActivities, getTripleFlips , getPlotPoints, getTraits, getItems, getSettings are each used to get all items of the given type. Each of these functions sets a state variable to a list of these items along with the dates they were saved and their IDs in order from most recent to least recent.
• removeActivity, removeTripleFlip , removePlot, removeTrait, removeItem, removeSetting are each used to remove a specific saved item from the user’s saved items by the item’s ID.
• changeSelected is used to modify the list of items selected by the user for deletion.
• removeSelected is used to remove the selected items by repeatedly calling one of the removal functions (removeActivity, removeTripleFlip , removePlot, removeTrait, removeItem, or removeSetting depending on the type of item displayed) once per selected item.

Save Functionality Added to Story Starters, Triple Flip, and Progressive Writing Activities

Front-End Methods

These methods are all on Story Starters, Triple Flip, and Progressive Writing Activities. They have the same basic functionality but for their respective different screens.

• checkIfSaved(value)
  • This check if the object/trait/setting/plot point/triple flip/activity ID that is passed in has already been saved by the user and updates the saved state accordingly. This is used whenever there might be a change in the saved state.
• saveItem() savePlot() saveSetting() saveTrait() saveTripleFlip() saveActivity()
  • This saves the current object/trait/setting/plot point ID into the list of user’s saved items. If the current ID has already been saved, it will not do anything.
• removeItem() removePlot() removeSetting() removeTrait() removeTripleFlip() removeActivity()
  • This removes the current object/trait/setting/plot point ID into the list of user’s saved items.
• saveButton()
  • Return React Native render code based on the state of saved and resultShown so that is displays the correct button or doesn’t display a button.

Back-End Methods

Back-end methods were written to support each of the front-end methods detailed above other than saveButton. They modify the user collection and are in the userController.js and userRoutes.js.

• checkIfSave Functions: checkIfSavedItem() checkIfSavedSetting() checkIfSavedPlot() checkIfSavedTrait() checkIfSavedTripleFlip() checkIfSavedActivity()
  • Send a boolean based on if an item of specified ID was found in the user's saved arrays.
• Save Function: Added check for an ID that has already been saved before saving to save functions. The function does not modify the collection if the ID has already been saved.
• RemoveSave Functions: Modified remove functions to remove an array element of a specific item ID based on the request body instead of all items.

Screen Recordings

Bookmark, Saved, and View All Saved Screen

bookmarks.mov

Save Functionality on Writing Activity Screen

Save.Shortened.mp4