josueetcom / teachme Goto Github PK

Make sure to change both the form and the user model and handle it in the user servlet.

This could also be something like what's done for #19 where an alert box lets you type a description, a PATCH /users request is sent and then the data is updated on the page.

Here's how you can submit a form from JavaScript:
https://stackoverflow.com/q/35325370

Submit a POST /users request with the user information from the sign in (e.g. name, email, imgURL). It should fail if the user already exists (which is OK).

You can verify you're submitting the proper values through the Chrome Inspector:

1. Open the Chrome Inspector
2. Go to the Network tab
3. Refresh the page
4. Make sure /users request shows up in the Network tab. If not, it's not being called on sign in.
5. Click on the /users request you sent.
6. Make sure it says POST under Request Headers
7. Check the form data at the bottom section called Form Data is correct.

1. Send a GET /users?id=ID request using fetch() where ID is the ID returned from the sign in object.

   Note: This piece of the issue similar to #23 as that also requires sending requests on sign in.

2. Using the JSON response, populate the teachlist/wishlist items on the left for the current user. Example for how to create HTML elements using JavaScript

If the servlet doesn't work yet, you can mimick a GET response to ensure HTML elements are generated correctly. E.g.

// actual fetch code
// const user = fetch('/users?id=' + user.id)...;
// mimicked user
const user = {
  teachlist: ['foo', 'bar'],
  wishlist: ['baz'],
};
// create the elements

This issue is similar to #18. You might work on both at the same time.

1. Create a button to add items to the wishlist/teachlist.
2. On click, use a prompt to let users enter a new teachlist/wishlist item.
3. Then using JavaScript submit a PATCH /users request with the user ID and the updated property (the list with the new item added). Example using POST (you should use PATCH for this issue though).

You can verify you're submitting the proper values through the Chrome Inspector:

1. Open the Chrome Inspector
2. Go to the Network tab
3. With the inspector open, add a teachlist/wishlist item.
4. Click on the /users request you sent in the Network tab
5. Make sure it says PATCH under Request Headers
6. Check the form data at the bottom section called Form Data is correct.

This issue is similar to #19. You might work on both at the same time.

1. Create a button/icon to delete an item from the wishlist/teachlist.
2. On click, use a confirm alert box to ensure the user wants to delete the item in case it was a misclick.
3. Then using JavaScript, submit a PATCH /users request with the user ID and the updated property (the list with the deleted item removed). Example using POST (you should use PATCH for this issue though).

You can verify you're submitting the proper values through the Chrome Inspector:

1. Open the Chrome Inspector
2. Go to the Network tab
3. With the inspector open, add a teachlist/wishlist item.
4. Click on the /users request you sent in the Network tab
5. Make sure it says PATCH under Request Headers
6. Check the form data at the bottom section called Form Data is correct.

To support partial modifications the prope HTTP method to use is PATCH. The client needs to call PATCH /users?id=123&property=value to update properties for a specific user. In the Java Servlet we need to write doPatch() to handle this. It's body should consist of getting the entity and then updating any properties given if set. It'd look something like this:

// Get the user id from the request and make the entity key.
// Get the user
Entity user = datastore.get(userKey);
// Get a builder for the user
Entity.Builder userEntityBuilder = Entity.newBuilder(user);
// Apply teachlist changes if given
if (request.getParameter("teachlist") != null) {
  String items = Jsoup.clean(request.getParameter("addTeachlistItem"), Whitelist.none()).split(",");
  userEntityBuilder = userEntityBuilder.set("teachList", items);
}
// do something similar for other request parameters

datastore.update(user);

Note: Instead of teachlist you could handle instead parameters like newTeachlistItem/removeTeachlistItem, etc.

In any case, make sure doPatch supports updating the teachlist, wishlist, and description of the user (and whatever other properties that might be updateable)

For additional details on updating a Datastore entity: https://cloud.google.com/datastore/docs/concepts/entities#updating_an_entity