Update style and style rules

Author: bidoubiwa

admin/src/components/Collections.js

@@ -29,15 +29,15 @@ const headers = [
   },
   {
     name: 'In MeiliSearch',
-    value: 'indexed'
+    value: 'indexed',
   },
   {
     name: 'Indexing',
-    value: 'isIndexing'
+    value: 'isIndexing',
   },
   {
     name: 'Documents',
-    value: 'numberOfDocuments'
+    value: 'numberOfDocuments',
   },
   {
     name: 'Hooks',
@@ -64,9 +64,12 @@ const Collections = ({ updateCredentials }) => {
   const watchUpdates = async ({ collection }) => {
     if (!watching.includes(collection)) {
       setWatchingCollection(prev => [...prev, collection])
-      const response = await request(`/${pluginId}/indexes/${collection}/update/`, {
-        method: 'GET'
-      })
+      const response = await request(
+        `/${pluginId}/indexes/${collection}/update/`,
+        {
+          method: 'GET',
+        }
+      )
       if (response.error) errorNotifications(response)
 
       setWatchingCollection(prev => prev.filter(col => col !== collection))
@@ -76,30 +79,39 @@ const Collections = ({ updateCredentials }) => {
 
   // Add collection to MeiliSearch
   const addCollection = async ({ name: collection }) => {
-    setCollectionsList(prev => prev.map(col => {
-      if (col.name === collection) return { ...col, indexed: 'Creating..', _isChecked: true }
-      return col
-    }))
+    setCollectionsList(prev =>
+      prev.map(col => {
+        if (col.name === collection)
+          return { ...col, indexed: 'Creating..', _isChecked: true }
+        return col
+      })
+    )
     const response = await request(`/${pluginId}/collections/${collection}`, {
-      method: 'POST'
+      method: 'POST',
     })
     if (response.error) {
       errorNotifications(response)
     } else {
-      successNotification({ message: `${collection} is created!`, duration: 4000 })
+      successNotification({
+        message: `${collection} is created!`,
+        duration: 4000,
+      })
       watchUpdates({ collection }) // start watching
     }
     setUpdatedCollections(false) // Ask for up to date data
   }
 
   // Re-indexes all rows from a given collection to MeilISearch
   const updateCollections = async ({ collection }) => {
-    setCollectionsList(prev => prev.map(col => {
-      if (col.name === collection) return { ...col, indexed: 'Start update...', _isChecked: true }
-      return col
-    }))
+    setCollectionsList(prev =>
+      prev.map(col => {
+        if (col.name === collection)
+          return { ...col, indexed: 'Start update...', _isChecked: true }
+        return col
+      })
+    )
     const response = await request(`/${pluginId}/collections/${collection}/`, {
-      method: 'PUT'
+      method: 'PUT',
     })
     if (response.error) {
       errorNotifications(response)
@@ -116,14 +128,18 @@ const Collections = ({ updateCredentials }) => {
       method: 'DELETE',
     })
     if (res.error) errorNotifications(res)
-    else successNotification({ message: `${collection} collection is removed from MeiliSearch!`, duration: 4000 })
+    else
+      successNotification({
+        message: `${collection} collection is removed from MeiliSearch!`,
+        duration: 4000,
+      })
     setUpdatedCollections(false) // ask for up to date data
   }
 
   // Depending on the checkbox states will eather
   // - Add the collection to MeiliSearch
   // - Remove the collection from MeiliSearch
-  const addOrRemoveCollection = async (row) => {
+  const addOrRemoveCollection = async row => {
     if (row._isChecked) await removeCollection(row)
     else addCollection(row)
   }
@@ -140,27 +156,32 @@ const Collections = ({ updateCredentials }) => {
   }
 
   // Construct verbose table text
-  const constructColRow = (col) => {
+  const constructColRow = col => {
     const { indexed, isIndexing, numberOfDocuments, numberOfRows } = col
     return {
       ...col,
       indexed: indexed ? 'Yes' : 'No',
       isIndexing: isIndexing ? 'Yes' : 'No',
       numberOfDocuments: `${numberOfDocuments} / ${numberOfRows}`,
       hooked: constructReloadStatus(col.indexed, col.hooked),
-      _isChecked: col.indexed
+      _isChecked: col.indexed,
     }
   }
 
   const fetchCollections = async () => {
-    const { collections, error, ...res } = await request(`/${pluginId}/collections/`, {
-      method: 'GET'
-    })
+    const { collections, error, ...res } = await request(
+      `/${pluginId}/collections/`,
+      {
+        method: 'GET',
+      }
+    )
 
     if (error) errorNotifications(res)
     else {
       // Start watching collection that are being indexed
-      collections.map(col => col.isIndexing && watchUpdates({ collection: col.name }))
+      collections.map(
+        col => col.isIndexing && watchUpdates({ collection: col.name })
+      )
       // Create verbose text that will be showed in the table
       const verboseCols = collections.map(col => constructColRow(col))
       // Find possible collection that needs a reload to activate its hooks
@@ -176,9 +197,13 @@ const Collections = ({ updateCredentials }) => {
   const reload = async () => {
     try {
       strapi.lockApp({ enabled: true })
-      const { error, ...res } = await request(`/${pluginId}/reload`, {
-        method: 'GET'
-      }, true)
+      const { error, ...res } = await request(
+        `/${pluginId}/reload`,
+        {
+          method: 'GET',
+        },
+        true
+      )
       if (error) {
         errorNotifications(res)
         strapi.unlockApp()
@@ -192,42 +217,44 @@ const Collections = ({ updateCredentials }) => {
   }
 
   return (
-      <div className="col-md-12">
-          <Wrapper>
-              <Table
-                className='collections'
-                headers={headers}
-                rows={collectionsList}
-                withBulkAction
-                onSelect={(row) => {
-                  addOrRemoveCollection(row)
-                }}
-                onClickRow={(e, data) => {
-                  addOrRemoveCollection(data)
-                }}
-                rowLinks={[
-                  {
-                    icon: <UpdateButton forwardedAs='span'>Update</UpdateButton>,
-                    onClick: data => {
-                      updateCollections({ collection: data.name })
-                    }
-                  }
-                ]}
-              />
-              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                  {
-                  needReload && <Button
-                    color="delete"
-                    className="reload_button"
-                    onClick={() => { reload() }}
-                    style={{ marginTop: '20px' }}
-                                >
-                      Reload Server
-                  </Button>
-                }
-              </div>
-          </Wrapper>
-      </div>
+    <div className="col-md-12">
+      <Wrapper>
+        <Table
+          className="collections"
+          headers={headers}
+          rows={collectionsList}
+          withBulkAction
+          onSelect={row => {
+            addOrRemoveCollection(row)
+          }}
+          onClickRow={(e, data) => {
+            addOrRemoveCollection(data)
+          }}
+          rowLinks={[
+            {
+              icon: <UpdateButton forwardedAs="span">Update</UpdateButton>,
+              onClick: data => {
+                updateCollections({ collection: data.name })
+              },
+            },
+          ]}
+        />
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          {needReload && (
+            <Button
+              color="delete"
+              className="reload_button"
+              onClick={() => {
+                reload()
+              }}
+              style={{ marginTop: '20px' }}
+            >
+              Reload Server
+            </Button>
+          )}
+        </div>
+      </Wrapper>
+    </div>
   )
 }
 

admin/src/utils/notifications.js

@@ -1,10 +1,10 @@
-export function errorNotifications ({ message, link }) {
+export function errorNotifications({ message, link }) {
   strapi.notification.toggle({
-    title,
+    title: 'Operation on MeiliSearch failed',
     type: 'warning',
     message: message,
     ...(link && { link: { url: link, label: 'learn more' } }),
-    blockTransition: true // The user has to close the error notification manually
+    blockTransition: true, // The user has to close the error notification manually
   })
 }
 
@@ -13,6 +13,6 @@ export function successNotification({ message, duration = 4000, link }) {
     type: 'success',
     message: message,
     ...(link && { link: { url: link, label: 'learn more' } }),
-    timeout: duration
+    timeout: duration,
   })
 }

config/functions/bootstrap.js

@@ -18,7 +18,7 @@ const meilisearch = {
   lifecycles: () => strapi.plugins.meilisearch.services.lifecycles,
 }
 
-async function getClient (credentials) {
+async function getClient(credentials) {
   const client = meilisearch.client(credentials)
   return await meilisearch.http(client)
 }
@@ -38,18 +38,18 @@ async function getCredentials() {
   return { apiKey, host }
 }
 
-function addHookedCollectionsToStore ({ store, collections }) {
+function addHookedCollectionsToStore({ store, collections }) {
   store.set({
     key: 'meilisearch_hooked',
-    value: collections
+    value: collections,
   })
 }
 
-async function getHookedCollectionsFromStore ({ store }) {
+async function getHookedCollectionsFromStore({ store }) {
   return store.get({ key: 'meilisearch_hooked' })
 }
 
-function addLifecycles ({ client, collections }) {
+function addLifecycles({ client, collections }) {
   // Add lifecyles
   collections.map(collection => {
     const model = strapi.models[collection]
@@ -58,15 +58,15 @@ function addLifecycles ({ client, collections }) {
 
     meilisearchLifecycles.map(lifecycleName => {
       const fn = model.lifecycles[lifecycleName] || (() => {})
-      model.lifecycles[lifecycleName] = (data) => {
+      model.lifecycles[lifecycleName] = data => {
         fn(data)
         meilisearch.lifecycles()[lifecycleName](data, collection, client)
       }
     })
   })
 }
 
-async function initHooks (store) {
+async function initHooks(store) {
   try {
     const credentials = await getCredentials()
     const getHookedCollections = await getHookedCollectionsFromStore({ store })
@@ -81,14 +81,16 @@ async function initHooks (store) {
       const models = strapi.models
 
       // get list of Indexes In MeilISearch that are Collections in Strapi
-      const indexedCollections = Object.keys(models).filter(model => indexes.includes(model))
+      const indexedCollections = Object.keys(models).filter(model =>
+        indexes.includes(model)
+      )
       addLifecycles({
         collections: indexedCollections,
-        client
+        client,
       })
       addHookedCollectionsToStore({
         collections: indexedCollections,
-        store
+        store,
       })
     }