diff --git a/package.json b/package.json index 8e1cbd3..b3dfb29 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "peerDependencies": { "@tanstack/react-query": "^5.40.0", "axios": "^1.7.2", - "payload": "beta" + "payload": "beta", + "react-player": "^2.16.0" }, "devDependencies": { "@payloadcms/db-mongodb": "3.0.0-beta.36", @@ -62,6 +63,7 @@ "prettier": "^2.7.1", "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", + "react-player": "^2.16.0", "sharp": "^0.33.3", "typescript": "^5.4.2" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3eec454..edeca7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,9 @@ devDependencies: react-dom: specifier: 19.0.0-rc-f994737d14-20240522 version: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522) + react-player: + specifier: ^2.16.0 + version: 2.16.0(react@19.0.0-rc-f994737d14-20240522) sharp: specifier: ^0.33.3 version: 0.33.4 @@ -6779,6 +6782,10 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true + /load-script@1.0.0: + resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==} + dev: true + /locate-path@3.0.0: resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} engines: {node: '>=6'} @@ -6849,6 +6856,10 @@ packages: is-buffer: 1.1.6 dev: true + /memoize-one@5.2.1: + resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} + dev: true + /memoize-one@6.0.0: resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==} dev: true @@ -7652,6 +7663,10 @@ packages: react: 19.0.0-rc-f994737d14-20240522 dev: true + /react-fast-compare@3.2.2: + resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} + dev: true + /react-image-crop@10.1.8(react@19.0.0-rc-f994737d14-20240522): resolution: {integrity: sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==} peerDependencies: @@ -7678,6 +7693,19 @@ packages: react-dom: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522) dev: true + /react-player@2.16.0(react@19.0.0-rc-f994737d14-20240522): + resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==} + peerDependencies: + react: '>=16.6.0' + dependencies: + deepmerge: 4.3.1 + load-script: 1.0.0 + memoize-one: 5.2.1 + prop-types: 15.8.1 + react: 19.0.0-rc-f994737d14-20240522 + react-fast-compare: 3.2.2 + dev: true + /react-select@5.8.0(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)(types-react@19.0.0-beta.2): resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==} peerDependencies: diff --git a/src/components/AfterDashboard/index.tsx b/src/components/AfterDashboard/index.tsx index 9cd196b..aa37c48 100644 --- a/src/components/AfterDashboard/index.tsx +++ b/src/components/AfterDashboard/index.tsx @@ -2,70 +2,137 @@ import React from 'react' import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' +import { Button } from '@payloadcms/ui/elements/Button' +import ReactPlayer from 'react-player' import axios from 'axios' import './index.scss' const queryClient = new QueryClient() +type ResponseType = { + data: { + id: string + media_type: string + media_url: string + permalink: string + caption: string + }[] + paging: { before: string; after: string } +} + +const LoadingCards = () => + Array(6) + .fill(0) + .map(() =>
) + +const baseEndpoint = '/api/instagram-list/' + function Posts() { + const [endpoint, setEndpoint] = React.useState(baseEndpoint) + const [first, setFirst] = React.useState('') + const { isPending, error, data: response, isFetching, - } = useQuery<{ - data: { - id: string - media_type: string - media_url: string - permalink: string - caption: string - }[] - paging: { before: string; after: string } - }>({ - queryKey: ['IGPostsList'], - queryFn: () => axios.get(`/api/instagram-list`).then(res => res.data), + // refetch, + } = useQuery({ + queryKey: [endpoint], + queryFn: () => + axios.get(endpoint).then(res => { + if (endpoint === baseEndpoint) setFirst(res?.data?.paging?.before) + return res.data + }), + staleTime: 1000 * 60 * 5, + refetchOnMount: false, + refetchOnWindowFocus: false, }) - if (isPending) return 'Loading...' + // if () + // return ( + //
+ // + //
+ // ) if (error) return 'An error has occurred: ' + error.message return ( -
- {response?.data?.map(({ id, media_type, media_url, permalink, caption }) => ( -
- {(media_type === 'CAROUSEL_ALBUM' || media_type === 'IMAGE') && } -

- media id: - {id} -

-

- - Link to post - -

-

- - Link to {media_type} - -

-

{caption}

-
- ))} -
{isFetching ? 'Updating...' : ''}
- -
+ <> +
+ {!isPending && !isFetching && Array.isArray(response.data) ? ( + response?.data?.map(({ id, media_type, media_url, permalink, caption }) => ( +
+ {(media_type === 'CAROUSEL_ALBUM' || media_type === 'IMAGE') && ( + + )} + {media_type === 'VIDEO' && ( + + )} +

+ media id: + {id} +

+

+ + Link to post + +

+

+ + Link to {media_type} + +

+

{caption}

+
+ )) + ) : ( + + )} +
+
+ + + +
+ ) } const AfterDashboard: React.FC = () => { return ( -
+

Instagram posts

This Plugin allows you to import Instagram Posts into Payload and use them as regular @@ -74,6 +141,7 @@ const AfterDashboard: React.FC = () => {

here is a list of your posts:

+ ) } @@ -92,7 +160,7 @@ const cardStyle: React.CSSProperties = { gap: '1rem', boxShadow: '0 0 10px rgba(0,0,0,0.1)', borderRadius: '5px', - maxHeight: '600px', + height: '400px', overflow: 'scroll', } const zeroMarginStyle: React.CSSProperties = { diff --git a/src/plugin.ts b/src/plugin.ts index 0827153..d3d0a8a 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -44,17 +44,18 @@ export const samplePlugin = method: 'get', handler: async req => { if (req.user) { - const response = await axios - .get( - `https://graph.instagram.com/me/media?fields=id,media_url,permalink,media_type,caption&access_token=${process.env.INSTAGRAM_ACCESS_TOKEN}&limit=25`, - ) - .then(res => res.data) + const { before, after } = req.query + const endpoint = `https://graph.instagram.com/me/media?fields=id,media_url,permalink,media_type,caption&access_token=${ + process.env.INSTAGRAM_ACCESS_TOKEN + }&limit=6${before ? `&before=${before}` : ''}${after ? `&after=${after}` : ''}` + + const response = await axios.get(endpoint).then(res => res.data) return new Response( JSON.stringify({ data: response.data, paging: { - before: response.paging.cursors.before, - after: response.paging.cursors.after, + before: response?.paging?.cursors?.before, + after: response?.paging?.cursors?.after, }, }), {