Repository: internetarchive/openlibrary

Issue:
Duplicate list on subject pages
<!-- What problem are we solving? What does the experience look like today? What are the symptoms? -->
When logged in, if user has one subject in one or more lists, the list appears twice in the `Lists` section of the subject. Once in the user list of associated lists and once in the general list of associated lists. However, nothing separates them visually.

### Evidence / Screenshot (if possible)
![image](https://user-images.githubusercontent.com/73437497/152846704-d9b91b8d-25e7-4b06-a363-3a683a2d3d17.png)

### Relevant url?
<!-- `https://openlibrary.org/...` -->

### Steps to Reproduce
<!-- What steps caused you to find the bug? -->
1. Add subject to a list
2. Go to the subject page and look at the `Lists` section

### Details

- **Logged in (Y/N)?** Y
- **Browser type/version?**
- **Operating system?**
- **Environment (prod/dev/local)?** prod
<!-- If not sure, put prod -->

### Proposal & Constraints
<!-- What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere? -->
We could:
- Separate them in two separate sections
- Remove user lists from general list (Could also be applied to the edition/work pages to remove redundant information)
- Something else ...

### Related files
<!-- Files related to this issue; this is super useful for new contributors who might want to help! If you're not sure, leave this blank; a maintainer will add them. -->

### Stakeholders
<!-- @ tag stakeholders of this bug -->

Show "Want to Read" button for books on search results page.
<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->

### Describe the problem that you'd like solved
<!-- A clear and concise description of what you want to happen. -->
While searching for books in Open Library, a patron may find several books that they would like to read in the search results.  In order to add all of these books to their "Want to Read" list, a patron would have to open each book's page, click the reading log button, navigate back to the search results, and repeat.

### Proposal & Constraints
<!-- What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere? -->
Add a button (or a similar type of UI element) to each of the search result items that allows patrons to add a book to their "Want to Read" list with a single click.  It would also be nice if clicking the component again would remove the book from the list.

<!-- Which suggestions or requirements should be considered for how feature needs to appear or be implemented? -->
It should be clear to patrons that clicking the button will add the book to their "Want to Read" list.  If a signed out patron clicks the button, they should be directed to the login page.

### Additional context
<!-- Add any other context or screenshots about the feature request here. -->

### Stakeholders
<!-- @ tag stakeholders of this bug -->





Discussion:

I'd like to see this feature added as well.
Charlie
One thing @jimchamp and I noticed during our call today is that we actually **do** have "Want to Read" button implemented for a List view already on the My Reading Log page.

It's worth noting that this version of the "Want to Read" button only covers the Reading Log and not a patron's Lists.

I'm proposing we have 2 separate buttons:
1. The green **Want to Read Button** which combines lists & reading log and currently exists on the books page (for now, the only way to add a book to a list)
2. The **Reading Log Button** which currently only exists on My Reading Log page (but, as per this issue, could easily be adapted to go on the Search Results + My Lists pages). This **Reading Log Button** won't include Lists, just switch Reading Log shelves.

Regarding point #2, we may want to make the styling more consistent between 1 and 2 (currently 2 is a grey bordered white button and 1 is a green button).

@jimchamp mentions it would be great if we could use the same component and consolidate 1 & 2, but @mekarpeles says, as a first step, we're already using (1) on the books page and (2) on the Reading Log page, and presumably it's going to be the same amount of work to turn (2) -> (1) on the Reading Log page as it will the Search Results + Lists page -> (1).

cc: @mheiman, @Sabreen-Parveen, @jimchamp, @cdrini 
@Sabreen-Parveen let us know if you have interest + time in this one, now that we have a fairly easy approach, otherwise, there may be another member of the community who may wish to give it a try. Thank you all!
Yes @mekarpeles I want to work on this issue.
Can we just use the reading log button from the reeading log page, as it will be a lot easier work to do and is in consideration with our current use case?

Resolving patch:
diff --git a/openlibrary/plugins/upstream/mybooks.py b/openlibrary/plugins/upstream/mybooks.py
--- a/openlibrary/plugins/upstream/mybooks.py
+++ b/openlibrary/plugins/upstream/mybooks.py
@@ -5,6 +5,7 @@
 from infogami.utils.view import public, safeint, render
 
 from openlibrary import accounts
+from openlibrary.utils import extract_numeric_id_from_olid
 from openlibrary.core.booknotes import Booknotes
 from openlibrary.core.bookshelves import Bookshelves
 from openlibrary.core.lending import add_availability
@@ -393,6 +394,12 @@ def get_works(
             raise
 
 
+@public
+def get_read_status(work_key, username):
+    work_id = extract_numeric_id_from_olid(work_key.split('/')[-1])
+    return Bookshelves.get_users_read_status_of_work(username, work_id)
+
+
 class PatronBooknotes:
     """Manages the patron's book notes and observations"""
 


Test patch:
diff --git a/tests/unit/js/html-test-data.js b/tests/unit/js/html-test-data.js
--- a/tests/unit/js/html-test-data.js
+++ b/tests/unit/js/html-test-data.js
@@ -71,3 +71,31 @@ export const bookDropdownSample = `
         <div class="arrow arrow-unactivated"></div>
     </a>
 `;
+
+export const listCreationForm = `
+    <form method="post" class="floatform" name="new-list" id="new-list">
+    <div class="formElement">
+        <div class="label">
+            <label for="list_label">Name:</label>
+        </div>
+        <div class="input">
+            <input type="text" name="list_label" id="list_label" class="text required" value="sample text" required="">
+        </div>
+    </div>
+    <div class="formElement">
+        <div class="label">
+            <label for="list_desc">Description:</label>
+        </div>
+        <div class="input">
+            <textarea name="list_desc" id="list_desc" rows="5" cols="30">Sample text</textarea>
+        </div>
+    </div>
+    <div class="formElement">
+        <div class="input">
+            <button id="create-list-button" type="submit" class="larger">Create new list</button>
+            &nbsp; &nbsp;
+            <a class="small dialog--close plain red" href="javascript:;">Cancel</a>
+        </div>
+    </div>
+    </form>
+`
diff --git a/tests/unit/js/test.lists.js b/tests/unit/js/test.lists.js
new file mode 100644
--- /dev/null
+++ b/tests/unit/js/test.lists.js
@@ -0,0 +1,16 @@
+import { clearCreateListForm } from '../../../openlibrary/plugins/openlibrary/js/lists/index.js';
+import { listCreationForm } from './html-test-data';
+
+describe('clearCreateListForm', () => {
+    document.body.innerHTML = listCreationForm
+    const listName = document.querySelector('#list_label')
+    const listDesc = document.querySelector('#list_desc')
+
+    test('Clears form when called', () => {
+        expect(listName.value.length).toBeGreaterThan(0)
+        expect(listDesc.value.length).toBeGreaterThan(0)
+        clearCreateListForm()
+        expect(listName.value.length).toBe(0)
+        expect(listDesc.value.length).toBe(0)
+    })
+})