Merge pull request #23 from dorelljames/issue-22

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-asset-source-pexels",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "> Be careful with your *API key*. If you use this Sanity plugin, it's a good idea to make your repository private. Technically, the said API key can be accessed inside of the JS-bundle if someone knows the domain for the studio.",
   "keywords": [
     "sanity",

src/proxyClient.ts → src/createClient.ts

@@ -1,9 +1,20 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const proxyClient = () => {
-  const baseURL = 'https://sanity-plugin-asset-source-pexels-api-proxy.dorelljames.com'
+export const createClient = (API_KEY?: string) => {
+  const baseURL = API_KEY
+    ? 'https://api.pexels.com/v1'
+    : 'https://sanity-plugin-asset-source-pexels-api-proxy.dorelljames.com'
+  const headers = API_KEY
+    ? {
+        headers: {
+          Authorization: API_KEY,
+        },
+      }
+    : {}
 
   const getPhotos = (path: string, params: unknown) => {
-    return fetch(`${baseURL}${path}?${new URLSearchParams(params as URLSearchParams)}`)
+    return fetch(`${baseURL}${path}?${new URLSearchParams(params as URLSearchParams)}`, {
+      ...headers,
+    })
       .then((res) => {
         if (!res.ok) {
           return {error: res.statusText}

src/hooks/usePhotos.tsx

@@ -1,18 +1,14 @@
 /* eslint-disable camelcase */
 import React from 'react'
-import {Photos, createClient} from 'pexels'
-import {proxyClient} from '../proxyClient'
+import {Photos} from 'pexels'
+import {createClient} from '../createClient'
 import useDebounce from './useDebounce'
 import type {PexelsAssetSourceConfig} from '../types'
 
 export function usePhotos(config: PexelsAssetSourceConfig) {
   const client = React.useMemo(() => {
-    if (config?.useProxyClient) {
-      return proxyClient()
-    }
-
     return createClient(config?.API_KEY)
-  }, [config?.API_KEY, config?.useProxyClient])
+  }, [config?.API_KEY])
   const perPage = config?.results?.perPage!
 
   const [state, setState] = React.useState('idle') // loading > success | error