fp/packages/next/app/uppy.tsx

'use client';

import React, { useState, createContext, useContext, useEffect } from 'react';
import Uppy from '@uppy/core';
import AwsS3 from '@uppy/aws-s3';
import RemoteSources from '@uppy/remote-sources';
import { useAuth } from './components/auth';
import { companionUrl } from '@/app/lib/constants';


// Uppy is a challenging react integration. Following are some references
//   @see https://github.com/transloadit/uppy/issues/4727#issuecomment-1761118428


export const UppyContext = createContext(new Uppy());

export default function UppyProvider({
  children
}: {
  children: React.ReactNode
}) {
  const { authData } = useAuth();
  const uppy = new Uppy(
  // const [uppy] = useState(() => new Uppy(
      {
        autoProceed: true,
        debug: true,
        logger: {
          debug: console.info,
          warn: console.log,
          error: console.error
        },

      }
    )
    .use(RemoteSources, {
      companionUrl,
      title: 'testing 123',
    })
    .use(AwsS3, {
      companionUrl,
      shouldUseMultipart: true,
      abortMultipartUpload: () => {}, // @see https://github.com/transloadit/uppy/issues/1197#issuecomment-491756118
      companionHeaders: {
        'authorization': `Bearer ${authData?.accessToken}`
      }
    })
  // );

  

  return (
    <UppyContext.Provider value={uppy}>
      {children}
    </UppyContext.Provider>
  )
}