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- media id: - {id} -
-- - Link to post - -
- -{caption}
-+ media id: + {id} +
++ + Link to post + +
+ +{caption}
+here is a list of your posts: