feat: add nuxt util to scrape formid from public libcal calendar page (…

…#515)

* feat: add nuxt util and slug function

* chore: update ucla-library-website-components

* fix: uncomment code

* feat: improvement on scrapeFormId

* fix: url

* feat: improvement on scrapeFormId

* fix: scrapeFormId Fix with parinita

* fix: scrapeFormId Fix with parinita

* fix: use plugin instead of helper functions for scraping form id from third party API

* fix: update component package version

Co-authored-by: pghorpade <pghorpade@library.ucla.edu>

nuxt.config.js

@@ -45,7 +45,8 @@ export default {
         '~/plugins/preview.client.js',
         '~/plugins/browser-events.client.js',
         '~/plugins/craft.js',
-        '~/plugins/data-api.js'
+        '~/plugins/data-api.js',
+        '~/plugins/scrape-formid.client.js'
     ],
 
     /*

package.json

@@ -40,7 +40,7 @@
         "sass": "^1.45.2",
         "sass-loader": "^10.1.1",
         "ucla-library-design-tokens": "^5.4.1",
-        "ucla-library-website-components": "^1.64.2",
+        "ucla-library-website-components": "^1.64.4",
         "vue-svg-loader": "^0.16.0",
         "vue-template-compiler": "^2.6.12"
     }

pages/visit/events-exhibits/_slug.vue

@@ -25,21 +25,23 @@
             An error occurred :(
         </p>
         <header-sticky
-            v-else
             class="sticky-header"
             :primary-items="primaryItems"
             :secondary-items="secondaryItems"
         />
         <banner-text
+            v-if="formData"
             category="Event"
             title="Curabitur Tortor Pellentesque"
             text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan, metus in aliquet venenatis, mi lectus placerat leo, congue gravida mi quam sit amet neque."
             button-text="Curabitur"
-            byline="a"
-            register-event="true"
+            :register-event="true"
         />
 
-        Event detail here
+        <h3>Event formData here</h3>
+        {{ formData }}
+        <hr>
+        <h3>Event detail here</h3>
         {{ allEvents }}
 
         <!-- <flexible-blocks
@@ -57,44 +59,70 @@ import _get from "lodash/get"
 
 // GQL
 import HEADER_MAIN_MENU_ITEMS from "~/gql/queries/HeaderMainMenuItems"
-
-import BlockFormData from "~/data/BlockFormData.json"
-
+import { computed } from "vue"
 export default {
+    vue: {
+        config: {
+            unwrapInjectedRef: true,
+        },
+    },
     provide() {
         return {
             eventId: "9383207",
-            blockFormData: BlockFormData.mock0,
-            libcalEndpoint: this.libcalEndpointProxy
+            blockFormData: computed(() => this.formData),
+            libcalEndpoint: this.libcalEndpointProxy,
         }
     },
     data() {
         return {
             allEvents: [],
             primaryItems: [],
             secondaryItems: [],
-            libcalEndpointProxy: this.$config.libcalProxy
+            formData: {},
+            formId: "",
+            eventId: "9383207",
+            libcalEndpointProxy: this.$config.libcalProxy,
         }
     },
     async fetch() {
         console.log("In fetch start")
         const navData = await this.$graphql.default.request(
             HEADER_MAIN_MENU_ITEMS
         )
-        console.log(navData)
-        // sample event id = 9383207
         this.primaryItems = _get(navData, "primary", [])
         this.secondaryItems = _get(navData, "secondary", [])
-        console.log("params " + this.$route.params.slug)
-        const data = await this.$axios.$get(
-            `/1.1/events/${this.$route.params.slug}`
-        )
+        /* const formId = await $scrapeApi.scrapeFormId("9383207")
+        const formData = await $axios.$get(`api/1.1/events/form/${formId}`)
+
+        console.log("has  data from scrapeid function: " + formData)*/
+        /* if (fetchData && fetchData.length == 1) {
+                this.formData = fetchData[0]
+                console.log("In mounted client side:" + this.formData)
+            }*/
+
+        // console.log('formId' + this.formId)
+        let events = await this.$axios.$get("1.1/events/9383207")
+        console.log("events: " + events)
+        this.allEvents = [...events.events]
+        // console.log("params " + this.$route.params.slug)
         // TODO get event data from Craft
         // return {
         //     page: {},
         // }
-        this.allEvents = [...this.allEvents, ...data.events]
-        console.log(data.events)
+
+        // console.log(this.formData.events)
+        // _get(data, "entry", {}),
+    },
+
+    async mounted() {
+        const formDataArray = await this.$scrapeApi.scrapeFormId("9383207")
+        console.log(formDataArray)
+        if (formDataArray && formDataArray.length == 1) {
+            this.formData = formDataArray[0]
+            console.log(
+                "In mounted client side:" + JSON.stringify(this.formData)
+            )
+        }
     },
 }
 </script>

plugins/scrape-formid.client.js

@@ -0,0 +1,22 @@
+export default function({$axios}, inject){
+    const libcalURL = "https://calendar.library.ucla.edu/event/"
+    inject('scrapeApi', {
+        scrapeFormId,
+    })
+    async function scrapeFormId(eventId = ""){
+        const response = await fetch(libcalURL + eventId)
+        const html = await response.text()
+        var parser = new DOMParser()
+        var doc = parser.parseFromString(html, "text/html")
+        let formId = doc.querySelector("input[name='fid']").getAttribute("value") 
+        console.log(formId) 
+        console.log(doc)
+        const formData = await fetchformData(formId)
+        return formData
+    }
+
+    async function fetchformData(formId){
+        const formData = await $axios.$get(`api/1.1/events/form/${formId}`)
+        return formData
+    }
+}

utils/scrapeFormId.js

@@ -0,0 +1,48 @@
+/**
+ * Scrapping function in Nuxt utils directory, this will accept event-id from event slug page, and return formId.
+ * @param {String} eventId
+ * @returns {String}
+ */
+
+function scrapeFormId(eventId = "", axios) {
+    fetch('https://calendar.library.ucla.edu/event/' + eventId)
+        .then(function(response) {
+        // When the page is loaded convert it to text
+            return response.text()
+        })
+        .then(function(html) {
+            // Initialize the DOM parser
+            var parser = new DOMParser()
+
+            // Parse the text
+            var doc = parser.parseFromString(html, "text/html")
+
+            // You can now even select part of that html as you would in the regular DOM 
+            // Example:
+            // var docArticle = doc.querySelector('article').innerHTML;
+
+            let formId = doc.querySelector("input[name='fid']").getAttribute("value") 
+            console.log(formId) 
+            console.log(doc)
+            const formPromise =  axios.$get(
+                `api/1.1/events/form/${formId}`
+            )
+
+            formPromise.then((response) => {
+                console.log(response)
+                return response
+                /* const jsonPromise = response.json()
+                jsonPromise.then((data) => {
+                    console.log(data)
+                    return data
+                }) */
+            })
+
+
+        })
+        .catch(function(err) {  
+            console.log('Failed to fetch page: ', err)  
+        })
+}
+
+export default scrapeFormId