fixing errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@8base/file-manager",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -12,13 +12,12 @@
   "peerDependencies": {
     "apollo-client": "^2.6.3",
     "graphql": "^14.0.0",
-    "react": "^16.8.6",
+    "react": "^16.13.1",
     "react-apollo": "^3.1.0",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.14.0"
   },
   "dependencies": {
-    "@emotion/css": "^11.11.2",
-    "@types/react": "^18.2.61",
+    "@emotion/css": "^11.1.3",
     "filestack-js": "3.7.0",
     "graphql-tag": "^2.10.0",
     "react-dropzone": "^11.3.4"
@@ -31,9 +30,6 @@
     "babel-jest": "^24.8.0",
     "graphql": "^14.3.1",
     "jest": "24.7.1",
-    "react": "^16.8.6",
-    "react-apollo": "^3.1.0",
-    "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
     "ts-jest": "^24.0.2",
     "typescript": "^4.1.3"

src/FileInput.filestack.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-import { withApollo, WithApolloClient } from 'react-apollo';
-import { ApolloClient } from 'apollo-client';
+import { useQuery, gql, ApolloError } from '@apollo/client';
 import * as filestack from 'filestack-js';
-import gql from 'graphql-tag';
 import { FilestackFileInputProps as FileInputProps, FileInputState } from './types';
 
 const FILE_UPLOAD_INFO_QUERY = gql`
@@ -17,162 +15,163 @@ const FILE_UPLOAD_INFO_QUERY = gql`
 `;
 
 // @ts-ignore
-const FileInputFilestack: React.ComponentType<FileInputProps> = withApollo(
+class FileInputFilestack extends React.Component<FileInputProps> {
   // @ts-ignore
-  class FileInput extends React.Component<WithApolloClient<FileInputProps>, FileInputState> {
-    // @ts-ignore
-    public static defaultProps = {
-      maxFiles: 1,
-      value: null,
-      sessionCache: false,
-    };
-
-    public static getDerivedStateFromProps(props: FileInputProps, state: FileInputState) {
-      let nextState = null;
+  public static defaultProps = {
+    maxFiles: 1,
+    value: null,
+    sessionCache: false,
+  };
 
-      if (props.value !== state.value) {
-        nextState = { value: props.value };
-      }
+  public static getDerivedStateFromProps(props: FileInputProps, state: FileInputState) {
+    let nextState = null;
 
-      return nextState;
+    if (props.value !== state.value) {
+      nextState = { value: props.value };
     }
 
-    public filestack?: { [key: string]: any };
-    public filestackPromise?: Promise<void>;
+    return nextState;
+  }
 
-    constructor(props: FileInputProps & { client: ApolloClient<any> }) {
-      super(props);
+  public filestack?: { [key: string]: any };
+  public filestackPromise?: Promise<void>;
 
-      this.state = {
-        error: null,
-        originalFile: null,
-        path: null,
-        value: props.value || null,
-      };
-    }
+  constructor(props: FileInputProps) {
+    super(props);
 
-    public componentDidMount() {
-      this.filestackPromise = this.initFilestack();
-      if (this.props.fallbackOptions) {
-        this.pick(this.props.fallbackOptions);
-      }
-    }
+    this.state = {
+      error: null,
+      originalFile: null,
+      path: null,
+      value: props.value || null,
+    };
+  }
 
-    public async initFilestack() {
-      const { client, sessionCache } = this.props;
+  public componentDidMount() {
+    this.filestackPromise = this.initFilestack();
+    if (this.props.fallbackOptions) {
+      this.pick(this.props.fallbackOptions);
+    }
+  }
 
-      let response = null;
+  public async initFilestack() {
+    const { sessionCache } = this.props;
 
-      try {
-        response = await client.query({ query: FILE_UPLOAD_INFO_QUERY, fetchPolicy: this.props.fetchPolicy });
-      } catch (e) {
-        // @ts-ignore
-        this.setState({ error: e });
+    let response = null;
 
-        return;
-      }
+    try {
+      const { data, loading } = useQuery(FILE_UPLOAD_INFO_QUERY, {
+        fetchPolicy: this.props.fetchPolicy
+      });
+      response = data;
+    } catch (e) {
+      // @ts-ignore
+      this.setState({ error: e });
 
-      const { apiKey, policy, signature, path } = response.data.fileUploadInfo;
+      return;
+    }
 
-      this.setState({ path });
+    const { apiKey, policy, signature, path } = response.data.fileUploadInfo;
 
-      this.filestack = filestack.init(apiKey, {
-        security: {
-          policy,
-          signature,
-        },
-        sessionCache,
-      });
-    }
+    this.setState({ path });
 
-    public onUploadDone = async ({ filesUploaded }: any) => {
-      if (!this.filestack) {
-        return;
-      }
+    this.filestack = filestack.init(apiKey, {
+      security: {
+        policy,
+        signature,
+      },
+      sessionCache,
+    });
+  }
 
-      const { policy = '""', signature = '""' } = this.filestack.session;
+  public onUploadDone = async ({ filesUploaded }: any) => {
+    if (!this.filestack) {
+      return;
+    }
 
-      let value = filesUploaded.map(({ handle, filename, url, mimetype }: any) => {
-        const urlOrigin = url ? new URL(url).origin : '';
+    const { policy = '""', signature = '""' } = this.filestack.session;
 
-        return {
-          downloadUrl: `${urlOrigin}/security=p:${policy},s:${signature}/${handle}`,
-          fileId: handle,
-          filename,
-          mimetype,
-          public: !!this.props.public,
-        };
-      });
+    let value = filesUploaded.map(({ handle, filename, url, mimetype }: any) => {
+      const urlOrigin = url ? new URL(url).origin : '';
 
-      let originalFile = filesUploaded.map((item: any) => item.originalFile);
+      return {
+        downloadUrl: `${urlOrigin}/security=p:${policy},s:${signature}/${handle}`,
+        fileId: handle,
+        filename,
+        mimetype,
+        public: !!this.props.public,
+      };
+    });
 
-      const { maxFiles, onUploadDone, onChange } = this.props;
+    let originalFile = filesUploaded.map((item: any) => item.originalFile);
 
-      if (maxFiles === 1) {
-        value = value[0];
-        originalFile = originalFile[0];
-      }
+    const { maxFiles, onUploadDone, onChange } = this.props;
 
-      if (typeof onUploadDone === 'function') {
-        value = await onUploadDone(value, originalFile);
-      }
+    if (maxFiles === 1) {
+      value = value[0];
+      originalFile = originalFile[0];
+    }
 
-      this.setState({ value, originalFile });
+    if (typeof onUploadDone === 'function') {
+      value = await onUploadDone(value, originalFile);
+    }
 
-      if (typeof onChange === 'function') {
-        onChange(value, originalFile);
-      }
-    };
+    this.setState({ value, originalFile });
 
-    public collectPickerOptions = () => {
-      const { maxFiles } = this.props;
-      const { path } = this.state;
+    if (typeof onChange === 'function') {
+      onChange(value, originalFile);
+    }
+  };
 
-      return {
-        exposeOriginalFile: true,
-        maxFiles,
-        onUploadDone: this.onUploadDone,
-        storeTo: {
-          path,
-        },
-      };
+  public collectPickerOptions = () => {
+    const { maxFiles } = this.props;
+    // @ts-ignore
+    const { path } = this.state;
+
+    return {
+      exposeOriginalFile: true,
+      maxFiles,
+      onUploadDone: this.onUploadDone,
+      storeTo: {
+        path,
+      },
     };
+  };
 
-    public pick = async (options = {}) => {
-      await this.filestackPromise;
+  public pick = async (options = {}) => {
+    await this.filestackPromise;
 
-      if (!this.filestack) {
-        return;
-      }
+    if (!this.filestack) {
+      return;
+    }
 
-      if ('maxFiles' in options) {
-        console.warn('Specify "maxFiles" as a prop for FileInput component'); // tslint:disable-line
-      }
+    if ('maxFiles' in options) {
+      console.warn('Specify "maxFiles" as a prop for FileInput component'); // tslint:disable-line
+    }
 
-      if ('onUploadDone' in options) {
-        console.warn('Specify "onUploadDone" as a prop for FileInput component'); // tslint:disable-line
-      }
+    if ('onUploadDone' in options) {
+      console.warn('Specify "onUploadDone" as a prop for FileInput component'); // tslint:disable-line
+    }
 
-      const pickerOptions = this.collectPickerOptions();
+    const pickerOptions = this.collectPickerOptions();
 
-      const picker = this.filestack.picker({
-        ...options,
-        ...pickerOptions,
-      });
+    const picker = this.filestack.picker({
+      ...options,
+      ...pickerOptions,
+    });
 
-      await picker.open();
+    await picker.open();
 
-      return picker;
-    };
+    return picker;
+  };
 
-    public render() {
-      const { children } = this.props;
-
-      const { error, value, originalFile } = this.state;
+  public render() {
+    const { children } = this.props;
+    // @ts-ignore
+    const { error, value, originalFile } = this.state;
 
-      return children({ pick: this.pick, value, originalFile, error });
-    }
-  },
-);
+    return children({ pick: this.pick, value, originalFile, error });
+  }
+}
 
 export { FileInputFilestack };

src/FileInput.tsx

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
 
 import { PickerOptions } from 'filestack-js';
-import gql from 'graphql-tag';
-import { useQuery } from 'react-apollo';
-
+import { useQuery, gql, ApolloError } from '@apollo/client';
 import { FileInputAws } from './FileInput.aws';
 import { FileInputFilestack } from './FileInput.filestack';
 import { AWSFileInputProps, CommonFileInputProps, RenderPropType } from './types';

src/hooks/useFilePicker.ts

@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect } from 'react';
 
 import axios from 'axios';
 import { PickerOptions } from 'filestack-js';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useDropzone } from 'react-dropzone';
 
 import { CommonFileInputProps, FileInputState, FileValue } from 'src/types';