feat: refactoring of code and addition of new e2e test suite for inst…

…agram posts

.gitignore

@@ -5,6 +5,9 @@ dev/pnpm-lock.yaml
 
 .vscode
 
+# Testing
+test-results
+
 # Created by https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 ### macOS ###
@@ -100,7 +103,6 @@ typings/
 # dotenv environment variables file
 .env
 
-
 ### SublimeText ###
 # cache files for sublime text
 *.tmlanguage.cache

dev/next.config.mjs

@@ -1,4 +1,7 @@
 import { withPayload } from '@payloadcms/next/withPayload'
+import dotenv from 'dotenv'
+
+dotenv.config({ path: '../.env' })
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

dev/src/payload.config.ts

@@ -27,7 +27,7 @@ export default buildConfig({
   },
   plugins: [instagramPlugin({ enabled: true })],
   db: mongooseAdapter({
-    url: process.env.DATABASE_URI || '',
+    url: 'mongodb://127.0.0.1/payloadtests',
   }),
   sharp,
   onInit: async payload => {
@@ -38,5 +38,17 @@ export default buildConfig({
         password: devUser.password,
       },
     })
+    if (process.env.USE_ACCESS_TOKEN)
+      await payload.updateGlobal({
+        slug: 'apikeys',
+        data: {
+          refreshToken: process.env.USE_ACCESS_TOKEN,
+          updatedAt: new Date().toISOString(),
+          createdAt: new Date().toISOString(),
+        },
+        context: {
+          bypass: true,
+        },
+      })
   },
 })

dev/tsconfig.json

@@ -9,7 +9,7 @@
       ],
       "@payload-config": [
         "./src/payload.config.ts"
-      ]
+      ],
     },
     "baseUrl": ".",
     "lib": [

package.json

@@ -16,7 +16,7 @@
     "Instagram"
   ],
   "scripts": {
-    "dev": "cd dev && cross-env NODE_OPTIONS=--no-deprecation next dev --turbo",
+    "dev": "cd dev && cross-env NODE_OPTIONS=--no-deprecation PAYLOAD_DROP_DATABASE='true' next dev --turbo",
     "build": "tsc",
     "test": "cd test && jest --config=./jest.config.js",
     "test:e2e": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 tsx ./test/runE2E.ts",
@@ -52,7 +52,7 @@
     "@typescript-eslint/parser": "5.12.1",
     "comment-json": "^4.2.3",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
+    "dotenv": "^8.6.0",
     "eslint": "^8.19.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.5.0",

src/api/hooks/useInstagramCollection.ts

@@ -0,0 +1,37 @@
+import { QueryClient, useMutation, useQuery } from '@tanstack/react-query'
+import { instagramCollectionEndpoint } from '../../plugin'
+import { PostType } from '../../types'
+
+type UseInstagramCollectionType = {
+  queryClient: QueryClient
+}
+
+const useInstagramCollection = ({ queryClient }: UseInstagramCollectionType) => {
+  const { data: instagramCollection } = useQuery<{ docs: PostType[] }>({
+    queryKey: [instagramCollectionEndpoint],
+    queryFn: () => fetch(instagramCollectionEndpoint).then(res => res.json()),
+  })
+
+  const { mutate: mutateInstagramCollection } = useMutation({
+    mutationFn: (post: PostType) =>
+      fetch(instagramCollectionEndpoint, {
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify(post),
+        credentials: 'include',
+      }).then(res => {
+        return res.json()
+      }),
+    onSuccess: res => {
+      queryClient.invalidateQueries({ queryKey: [instagramCollectionEndpoint] })
+      alert(`Status: ${res?.message}`)
+    },
+  })
+
+  return { instagramCollection, mutateInstagramCollection }
+}
+
+export default useInstagramCollection

src/api/hooks/useInstagramPosts.ts

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query'
+import { PostType } from '../../types'
+
+type UseInstagramPostsType = {
+  endpoint: string
+}
+
+type UseInstagramResponseType = {
+  isPending: boolean
+  error: Error | null
+  isFetching: boolean
+  isLoading: boolean
+  response: {
+    data: PostType[]
+    paging: { before: string; after: string }
+  }
+}
+
+const useInstagramPosts = ({ endpoint }: UseInstagramPostsType): UseInstagramResponseType => {
+  const {
+    isPending,
+    error,
+    data: response,
+    isFetching,
+    isLoading,
+  } = useQuery({
+    queryKey: [endpoint],
+    queryFn: () =>
+      fetch(endpoint).then(res => {
+        if (!res.ok) throw new Error(res.status.toString())
+        return res.json()
+      }),
+    staleTime: 1000 * 60 * 5,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+  })
+  return { isPending, error, response, isFetching, isLoading }
+}
+
+export default useInstagramPosts

src/api/hooks/useToken.ts

@@ -0,0 +1,35 @@
+import { QueryClient, useMutation } from '@tanstack/react-query'
+import { addAccessTokenEndpoint } from '../../plugin'
+
+type UseTokenType = {
+  endpoint: string
+  queryClient: QueryClient
+  setToken: React.Dispatch<React.SetStateAction<string>>
+}
+
+const useToken = ({ endpoint, queryClient, setToken }: UseTokenType) => {
+  const { mutate: addAccessToken } = useMutation({
+    mutationFn: (body: { accessToken: string }) =>
+      fetch(addAccessTokenEndpoint, {
+        body: JSON.stringify(body),
+        method: 'POST',
+        credentials: 'include',
+      }).then(res => {
+        if (!res.ok) throw new Error(res.status.toString())
+        return res.json()
+      }),
+    onSuccess: _res => {
+      queryClient.invalidateQueries({ queryKey: [endpoint] })
+      alert('Status: token successfully added!')
+      setToken('')
+    },
+    onError: _res => {
+      alert('Status: the token provided is not correct, try again')
+      setToken('')
+    },
+  })
+
+  return { addAccessToken }
+}
+
+export default useToken

src/InstagramPosts.ts → src/collections/InstagramPosts.ts

@@ -1,5 +1,5 @@
 import { CollectionConfig } from 'payload/types'
-import { childrenEndpoint, mediaEndpoint } from './plugin'
+import { childrenEndpoint, mediaEndpoint } from '../plugin'
 
 // Example Collection - For reference only, this must be added to payload.config.ts to be used.
 const InstagramPosts: CollectionConfig = {