biome format --write

src/hocs/with_load_more/with_load_more.jsx

@@ -6,104 +6,112 @@ import './with_load_more.scss'
 
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
-const withLoadMore = ({
-  fetch, // function to fetch entries and return a promise
-  select, // function to select data from store
-  unmounted, // function called at "destroyed" lifecycle
-  childPropName = 'entries', // name of the prop to be passed into the wrapped component
-  additionalPropNames = [] // additional prop name list of the wrapper component
-}) => (WrappedComponent) => {
-  const originalProps = Object.keys(getComponentProps(WrappedComponent))
-  const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
+const withLoadMore =
+  ({
+    fetch, // function to fetch entries and return a promise
+    select, // function to select data from store
+    unmounted, // function called at "destroyed" lifecycle
+    childPropName = 'entries', // name of the prop to be passed into the wrapped component
+    additionalPropNames = [], // additional prop name list of the wrapper component
+  }) =>
+  (WrappedComponent) => {
+    const originalProps = Object.keys(getComponentProps(WrappedComponent))
+    const props = originalProps
+      .filter((v) => v !== childPropName)
+      .concat(additionalPropNames)
 
-  return {
-    props,
-    data () {
-      return {
-        loading: false,
-        bottomedOut: false,
-        error: false,
-        entries: []
-      }
-    },
-    created () {
-      window.addEventListener('scroll', this.scrollLoad)
-      if (this.entries.length === 0) {
-        this.fetchEntries()
-      }
-    },
-    unmounted () {
-      window.removeEventListener('scroll', this.scrollLoad)
-      unmounted && unmounted(this.$props, this.$store)
-    },
-    methods: {
-      // Entries is not a computed because computed can't track the dynamic
-      // selector for changes and won't trigger after fetch.
-      updateEntries () {
-        this.entries = select(this.$props, this.$store) || []
-      },
-      fetchEntries () {
-        if (!this.loading) {
-          this.loading = true
-          this.error = false
-          fetch(this.$props, this.$store)
-            .then((newEntries) => {
-              this.loading = false
-              this.bottomedOut = isEmpty(newEntries)
-            })
-            .catch(() => {
-              this.loading = false
-              this.error = true
-            })
-            .finally(() => {
-              this.updateEntries()
-            })
+    return {
+      props,
+      data() {
+        return {
+          loading: false,
+          bottomedOut: false,
+          error: false,
+          entries: [],
         }
       },
-      scrollLoad (e) {
-        const bodyBRect = document.body.getBoundingClientRect()
-        const height = Math.max(bodyBRect.height, -(bodyBRect.y))
-        if (this.loading === false &&
-          this.bottomedOut === false &&
-          this.$el.offsetHeight > 0 &&
-          (window.innerHeight + window.pageYOffset) >= (height - 750)
-        ) {
+      created() {
+        window.addEventListener('scroll', this.scrollLoad)
+        if (this.entries.length === 0) {
           this.fetchEntries()
         }
-      }
-    },
-    render () {
-      const props = {
-        ...this.$props,
-        [childPropName]: this.entries
-      }
-      const children = this.$slots
-      return (
-        <div class="with-load-more">
-          <WrappedComponent {...props}>
-            {children}
-          </WrappedComponent>
-          <div class="with-load-more-footer">
-            {this.error &&
-              <button onClick={this.fetchEntries} class="button-unstyled -link -fullwidth alert error">
-                {this.$t('general.generic_error')}
-              </button>
-            }
-            {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries} role="button" tabindex="0">{this.$t('general.more')}</a>}
+      },
+      unmounted() {
+        window.removeEventListener('scroll', this.scrollLoad)
+        unmounted && unmounted(this.$props, this.$store)
+      },
+      methods: {
+        // Entries is not a computed because computed can't track the dynamic
+        // selector for changes and won't trigger after fetch.
+        updateEntries() {
+          this.entries = select(this.$props, this.$store) || []
+        },
+        fetchEntries() {
+          if (!this.loading) {
+            this.loading = true
+            this.error = false
+            fetch(this.$props, this.$store)
+              .then((newEntries) => {
+                this.loading = false
+                this.bottomedOut = isEmpty(newEntries)
+              })
+              .catch(() => {
+                this.loading = false
+                this.error = true
+              })
+              .finally(() => {
+                this.updateEntries()
+              })
+          }
+        },
+        scrollLoad(e) {
+          const bodyBRect = document.body.getBoundingClientRect()
+          const height = Math.max(bodyBRect.height, -bodyBRect.y)
+          if (
+            this.loading === false &&
+            this.bottomedOut === false &&
+            this.$el.offsetHeight > 0 &&
+            window.innerHeight + window.pageYOffset >= height - 750
+          ) {
+            this.fetchEntries()
+          }
+        },
+      },
+      render() {
+        const props = {
+          ...this.$props,
+          [childPropName]: this.entries,
+        }
+        const children = this.$slots
+        return (
+          <div class="with-load-more">
+            <WrappedComponent {...props}>{children}</WrappedComponent>
+            <div class="with-load-more-footer">
+              {this.error && (
+                <button
+                  onClick={this.fetchEntries}
+                  class="button-unstyled -link -fullwidth alert error"
+                >
+                  {this.$t('general.generic_error')}
+                </button>
+              )}
+              {!this.error && this.loading && (
+                <FAIcon spin icon="circle-notch" />
+              )}
+              {!this.error && !this.loading && !this.bottomedOut && (
+                <a onClick={this.fetchEntries} role="button" tabindex="0">
+                  {this.$t('general.more')}
+                </a>
+              )}
+            </div>
           </div>
-        </div>
-      )
+        )
+      },
     }
   }
-}
 
 export default withLoadMore

src/hocs/with_subscription/with_subscription.jsx

@@ -6,86 +6,87 @@ import './with_subscription.scss'
 
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
-const withSubscription = ({
-  fetch, // function to fetch entries and return a promise
-  select, // function to select data from store
-  childPropName = 'content', // name of the prop to be passed into the wrapped component
-  additionalPropNames = [] // additional prop name list of the wrapper component
-}) => (WrappedComponent) => {
-  const originalProps = Object.keys(getComponentProps(WrappedComponent))
-  const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
+const withSubscription =
+  ({
+    fetch, // function to fetch entries and return a promise
+    select, // function to select data from store
+    childPropName = 'content', // name of the prop to be passed into the wrapped component
+    additionalPropNames = [], // additional prop name list of the wrapper component
+  }) =>
+  (WrappedComponent) => {
+    const originalProps = Object.keys(getComponentProps(WrappedComponent))
+    const props = originalProps
+      .filter((v) => v !== childPropName)
+      .concat(additionalPropNames)
 
-  return {
-    props: [
-      ...props,
-      'refresh' // boolean saying to force-fetch data whenever created
-    ],
-    data () {
-      return {
-        loading: false,
-        error: false
-      }
-    },
-    computed: {
-      fetchedData () {
-        return select(this.$props, this.$store)
-      }
-    },
-    created () {
-      if (this.refresh || isEmpty(this.fetchedData)) {
-        this.fetchData()
-      }
-    },
-    methods: {
-      fetchData () {
-        if (!this.loading) {
-          this.loading = true
-          this.error = false
-          fetch(this.$props, this.$store)
-            .then(() => {
-              this.loading = false
-            })
-            .catch(() => {
-              this.error = true
-              this.loading = false
-            })
+    return {
+      props: [
+        ...props,
+        'refresh', // boolean saying to force-fetch data whenever created
+      ],
+      data() {
+        return {
+          loading: false,
+          error: false,
         }
-      }
-    },
-    render () {
-      if (!this.error && !this.loading) {
-        const props = {
-          ...this.$props,
-          [childPropName]: this.fetchedData
+      },
+      computed: {
+        fetchedData() {
+          return select(this.$props, this.$store)
+        },
+      },
+      created() {
+        if (this.refresh || isEmpty(this.fetchedData)) {
+          this.fetchData()
         }
-        const children = this.$slots
-        return (
-          <div class="with-subscription">
-            <WrappedComponent {...props}>
-              {children}
-            </WrappedComponent>
-          </div>
-        )
-      } else {
-        return (
-          <div class="with-subscription-loading">
-            {this.error
-              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <FAIcon spin icon="circle-notch"/>
-            }
-          </div>
-        )
-      }
+      },
+      methods: {
+        fetchData() {
+          if (!this.loading) {
+            this.loading = true
+            this.error = false
+            fetch(this.$props, this.$store)
+              .then(() => {
+                this.loading = false
+              })
+              .catch(() => {
+                this.error = true
+                this.loading = false
+              })
+          }
+        },
+      },
+      render() {
+        if (!this.error && !this.loading) {
+          const props = {
+            ...this.$props,
+            [childPropName]: this.fetchedData,
+          }
+          const children = this.$slots
+          return (
+            <div class="with-subscription">
+              <WrappedComponent {...props}>{children}</WrappedComponent>
+            </div>
+          )
+        } else {
+          return (
+            <div class="with-subscription-loading">
+              {this.error ? (
+                <a onClick={this.fetchData} class="alert error">
+                  {this.$t('general.generic_error')}
+                </a>
+              ) : (
+                <FAIcon spin icon="circle-notch" />
+              )}
+            </div>
+          )
+        }
+      },
     }
   }
-}
 
 export default withSubscription