Assignment 3 FAQs

TextContent

I am not able to see changes unless I do a hard refresh (or some other weird behavior, e.g. not finding any links).
In our application, a lot of the automatic refreshes are handled by toggling the refresh variables. For instance, when you make some modification to the database that you want other parts of the application to know, you toggle one or more of the refresh variables, which trigger other functions to compute via useEffect and cause updates to the components you see. However, to see this in action, you need to be properly toggling the variables and have a useEffect that listens to them.

Make sure you…

1. have a useEffect that is listening to changes in the refresh variables. When the refresh variable changes, you should call addAnchorMarks() to update your anchor marks based on the most recently updated anchors in the database.
2. are only updating your anchors after you have updated your node content. You may handle both logic in sequence in the same function using proper await calls, or you may implement them in different functions and chain them together using .then()
3. are only setting the refresh variables AFTER you have updated both node content and anchors. Otherwise when you application refreshes (and when functions such as addAnchorMarks are triggered), they might be operating on previous application states and cause weird behavior)

All my links are getting deleted when I press save.
This can occur due to a variety of implementation-specific reasons, but here are a couple guides to think through:

1. You likely use some array-like structure to keep track of the anchors that you need to delete (those that exist in the database but not in the editor). Try using console.log to see if this array contains more anchors than what should be deleted.
2. How are you constructing this array of anchors to be deleted?

   • As suggested in the handout, we are looping through the node marks where mark.type.name == "link". Usually, as we are looping through, we keep track of the anchors that still exist in the editor and don't want to delete them. We have seen some students doing it in the following way:

     ​​​​​​​​filteredMarks.forEach(async(mark) => {
     ​​​​​​​​    ...
     ​​​​​​​​    const anchorResponse = await FrontendAnchorGateway.getAnchor(xxx);
     
     ​​​​​​​​    ...
     ​​​​​​​​    await FrontendAnchorGateway.updateExtent(...)
     ​​​​​​​​})
     
     

   • It is important to note that the forEach loop is not promise aware. It does not wait for the asynchronous operations to complete. It iterates through the items in the array immediately. This may lead to issues if you need to ensure that certain operations need to be completed before moving to the next steps (e.g. adding anchors or removing anchors from an array) (In short, any await inside a forEach will not wait)

   • If this is the problem you are encountering, you can create an array of promises and use Promise.all to wait for all promises to resolve before moving ot the next execution. E.g.

     ​​​​​​​​let promises = [];
     ​​​​​​​​filteredMarks.forEach((mark) => {
     ​​​​​​​​    // Make sure you are pushing an array of promises,
     ​​​​​​​​    // not an array of responses!
     ​​​​​​​​    promises.push(...);
     ​​​​​​​​})
     ​​​​​​​​await Promise.all(promises);
     

     ​​​​​​​​​​  Note: It is easier to define the array of promises and invoke `Promise.all` outside of the `editor.doc.descendants` loop to avoid type issues.
     

Whenever I load the page, I see a content update failure that says "toUpdate parameters invalid".
Before or inside the call to the function where you update your node content, make sure that the editor variable is non-null. If you don't check this and instead make a call to the backend with editor?.getHTML(), the value may be NULL which will cause the backend to view this as an invalid request.

Debugging tips
In general, if an action is causing unintended behavior, it is useful to think through the chain of actions that get triggered by the action. E.g. Is a state variable toggled? If so, is there any useEffect that is listening on that variable? What functions are triggered by that useEffect? Are any of these functions further toggling state variables and triggering more functions? Is there an infinite or intended loop somewhere?

ImageContent

I am using the input components from @chakra-ui/react library. Why am I unable to increment/decrement the counter?

The NumberInput component takes in a prop onChange. The function signature of this prop is

(method) UseCounterProps.onChange?(valueAsString: string, valueAsNumber: number): void

i.e. it gives you access to the value that the user has most recently inputted (when the onChange is triggered). You can use the fields valueAsString and/or valueAsNumber when you are updating appropriate states. We frequently see students making calls such as setWidth(width)–i.e. you are setting the width state variable to your current width value, which is why the value never gets changed.

I have made sure that my width and height variables are changing correctly. Why is my image not resizing correctly?
- You can use the inspect tool in developer console to see if the width and height values are actually applied on the HTML element.
- If image is resizing instead of cropping, make sure you are applying the styles to the div/container, rather than the image