internetarchive · schu96 · Jan 16, 2025
diff --git a/openlibrary/components/BarcodeScanner.vue b/openlibrary/components/BarcodeScanner.vue
@@ -13,10 +13,17 @@
             <br>
             <small>For books that print the ISBN without a barcode</small>
           </button>
+          <button class="barcodescanner__add-to-list glass-button"
+          @click="handleListAdd" :disabled="!isSignedIn">
+            Add to my Want to Read list
+            <br>
+            <small v-if="!isSignedIn" >You must be signed in to enable this feature</small>
+            <small v-else>Currently {{ saveWantToReadList ? 'enabled' : 'disabled'}}</small>
+          </button>
         </div>
       </details>
       <div class="barcodescanner__result-strip">
-         <LazyBookCard v-for="isbnObj in isbnList" :key="isbnObj.isbn" :isbn="isbnObj.isbn" :tentativeCover="isbnObj.cover" />
+         <LazyBookCard v-for="isbnObj in isbnList" :key="isbnObj.isbn" :isbn="isbnObj.isbn" :tentativeCover="isbnObj.cover" :userKey="isSignedIn" :saveWantToReadList="saveWantToReadList"/>
         <div class="empty">
           Point your camera at a barcode! 📷
         </div>
@@ -35,9 +42,15 @@ import { OCRScanner, ThrottleGrouping } from './BarcodeScanner/utils/classes.js'
 
 export default {
     components: { LazyBookCard, SettingsIcon },
+    props: {
+        user_key: {
+            default: ''
+        },
+    },
     data() {
         return {
             disableISBNTextButton: false,
+            saveWantToReadList: false,
             canvasInactive: true,
             lastISBN: null,
             isbnList: [],
@@ -194,7 +207,8 @@ export default {
             if (isbn === this.lastISBN) return;
             if (this.seenISBN.has(isbn)) return;
 
-            if (this.returnTo) {
+            if (this.returnTo && !this.saveWantToReadList) {
+                // Users can't save books to Want To Read since this redirects before LazyBookCard finish its request
                 location = this.returnTo.replace('$$$', isbn);
             }
             this.isbnList.unshift({isbn: isbn, cover: tentativeCoverUrl});
@@ -205,6 +219,17 @@ export default {
             return code.startsWith('97');
         },
 
+        handleListAdd() {
+            if (this.isSignedIn) {
+                this.saveWantToReadList = !this.saveWantToReadList
+            }
+        },
+
+    },
+    computed: {
+        isSignedIn: function() {
+            return this.user_key !== ''
+        }
     },
     async mounted() {
         await this.start();

diff --git a/openlibrary/components/BarcodeScanner/components/LazyBookCard.vue b/openlibrary/components/BarcodeScanner/components/LazyBookCard.vue
@@ -23,6 +23,8 @@ export default {
             type: String,
             default: null,
         },
+        userKey: {},
+        saveWantToReadList: {},
     },
     data() {
         return {
@@ -38,18 +40,47 @@ export default {
     methods: {
         async fromISBN(isbn) {
             fetch(`https://${CONFIGS.OL_BASE_PUBLIC}/isbn/${isbn}.json`).then(r => r.json())
-                .then(editionRecord => {
+                .then(async(editionRecord) => {
                     this.title = editionRecord.title;
                     this.identifier = isbn;
                     this.link = editionRecord.key;
+                    const workPath = editionRecord.works[0].key
 
                     if (editionRecord.covers) {
                         const coverId = editionRecord.covers.find(x => x !== -1);
                         if (coverId) {
                             this.coverSrc = `https://covers.openlibrary.org/b/id/${coverId}-M.jpg`;
                         }
                     }
-                    return fetch(`https://${CONFIGS.OL_BASE_PUBLIC}${editionRecord.works[0].key}.json`).then(r => r.json())
+
+                    if (this.userKey && this.saveWantToReadList) {
+                        const listURL = `https://${CONFIGS.OL_BASE_PUBLIC}${workPath}/bookshelves.json`
+                        const formData = new FormData();
+                        const preFormBody = {
+                            // user info is checked in api.py work_bookshelves
+                            bookshelf_id: 1,
+                            work_id: workPath,
+                            edition_id: editionRecord.key,
+                            action: 'add',
+                            dont_remove: true,
+                        }
+                        for (const [key, value] of Object.entries(preFormBody)) {
+                            formData.set(key, value)
+                        }
+                        fetch (listURL, {
+                            method: 'POST',
+                            body: formData
+                        }).then((response) => {
+                            if (!response.ok) {
+                                throw new Error('Server response was not ok')
+                            }
+                        }).catch((err) => {
+                            this.loading = false;
+                            this.errored = true;
+                            throw new Error(`An error occurred while trying to save to Want to Read: ${err}`)
+                        })
+                    }
+                    return fetch(`https://${CONFIGS.OL_BASE_PUBLIC}${workPath}.json`).then(r => r.json())
                 }).then(workRecord => {
                     return Promise.all(
                         workRecord.authors

diff --git a/openlibrary/templates/barcodescanner.html b/openlibrary/templates/barcodescanner.html
@@ -3,5 +3,6 @@
 $var title: $_('Barcode Scanner (Beta)')
 
 $ ctx.setdefault("show_ol_shell", False)
+$ current_user = ctx.user.key if ctx.user else ""
 
-$:render_component('BarcodeScanner')
+$:render_component('BarcodeScanner', attrs=dict(user_key=current_user))