@griddo/ax 11.4.24 → 11.5.0

package/src/__tests__/components/Gallery/GalleryPanel/GalleryDragAndDrop/GalleryDragAndDrop.test.tsx

@@ -1,249 +0,0 @@
-import React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent, act, waitFor } from "../../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
-import configureStore from "redux-mock-store";
-import "@testing-library/jest-dom";
-import thunk from "redux-thunk";
-
-import { parseTheme } from "@ax/helpers";
-import GalleryDragAndDrop, {
-  IGalleryDragAndDropProps,
-  IDispatchProps,
-} from "@ax/components/Gallery/GalleryPanel/GalleryDragAndDrop";
-import globalTheme from "@ax/themes/theme.json";
-
-afterEach(() => {
-  cleanup();
-  jest.clearAllMocks();
-});
-
-const middlewares: any = [thunk];
-const mockStore = configureStore(middlewares);
-
-const defaultGalleryDDProps = mock<IGalleryDragAndDropProps>();
-const defaultDispatchProps = mock<IDispatchProps>();
-
-describe("GalleryDragAndDrop component rendering", () => {
-  it("should render the component", () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = false;
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
-  });
-
-  it("should render the component with the DragAndDrop", () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = true;
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
-    expect(screen.getAllByTestId("drag-drop-wrapper")).toBeTruthy();
-  });
-});
-
-describe("GalleryDragAndDrop component actions", () => {
-  it("should trigger the handleFileclick", () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = true;
-
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const clickInputSpy = jest.spyOn(HTMLInputElement.prototype, "click");
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    const buttonSelect = screen.getByTestId("button-line-inverse");
-    act(() => {
-      fireEvent.click(buttonSelect);
-    });
-    expect(clickInputSpy).toBeCalled();
-  });
-
-  it("should trigger the handleTryAgain", () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = true;
-
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    const buttonTry = screen.getByText(/TRY AGAIN/i);
-    fireEvent.click(buttonTry);
-    expect(store.getActions()).toContainEqual({
-      payload: { errorMsg: "", isError: false, isUploading: false },
-      type: "gallery/SET_UPLOAD_ERROR",
-    });
-  });
-
-  it("should trigger the DragAndDrop handleDragOver action", () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = true;
-
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    const galleryDragAndDropComponent = (
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>
-    );
-
-    render(galleryDragAndDropComponent, { store });
-
-    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
-    const dragDropComponent = screen.getAllByTestId("drag-drop-wrapper");
-    expect(dragDropComponent).toBeTruthy();
-
-    const dataTransfer = {
-      dropEffect: "",
-    };
-    fireEvent.dragOver(dragDropComponent[0], {
-      dataTransfer,
-    });
-    expect(dataTransfer.dropEffect).toBe("copy");
-  });
-
-  it("should trigger the DragAndDrop handleDrop action", async () => {
-    defaultGalleryDDProps.validFormats = ["png", "jpg"];
-    defaultGalleryDDProps.allowUpload = true;
-    const refreshImagesMock = defaultGalleryDDProps.refreshImages as jest.MockedFunction<() => Promise<void>>;
-
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-
-    const store = mockStore(initialStore);
-
-    const defaultProps = {
-      ...defaultGalleryDDProps,
-      ...defaultDispatchProps,
-    };
-
-    const galleryDragAndDropComponent = (
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryDragAndDrop {...defaultProps} />
-      </ThemeProvider>
-    );
-
-    render(galleryDragAndDropComponent, { store });
-
-    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
-    const dragDropComponent = screen.getAllByTestId("drag-drop-wrapper");
-    expect(dragDropComponent).toBeTruthy();
-
-    fireEvent.drop(dragDropComponent[0], {
-      dataTransfer: {
-        files: [new File([""], "darthvader.png", { type: "png" })],
-      },
-    });
-
-    await waitFor(() => expect(refreshImagesMock).toHaveBeenCalled(), { timeout: 3100 });
-  });
-});

package/src/__tests__/components/Gallery/GalleryPanel/GalleryPanel.test.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-
-import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
-import { mock } from "jest-mock-extended";
-import "@testing-library/jest-dom";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
-
-import { parseTheme } from "@ax/helpers";
-import GalleryPanel, { IGalleryPanelProps } from "@ax/components/Gallery/GalleryPanel";
-import globalTheme from "@ax/themes/theme.json";
-import { defaultStore } from "./../../../../__mocks__/store/GenericStore";
-
-afterEach(() => {
-  cleanup();
-  jest.clearAllMocks();
-});
-
-const middlewares: any = [thunk];
-const mockStore = configureStore(middlewares);
-
-const defaultProps = mock<IGalleryPanelProps>();
-
-defaultProps.validFormats = ["png", "jpg"];
-const setImageMocked = defaultProps.setImage as jest.MockedFunction<(imageData: any) => void>;
-defaultProps.isGlobalTab = true;
-defaultProps.site = 1;
-defaultProps.selectedTab = "";
-const refreshImagesMocked = defaultProps.refreshImages as jest.MockedFunction<() => Promise<void>>;
-
-describe("GalleryPanel component rendering", () => {
-  it("should render the component", () => {
-    const initialStore = {
-      gallery: {
-        isSaving: {
-          save: false,
-          saveAdd: false,
-          delete: false,
-        },
-      },
-    };
-    const store = mockStore({ ...defaultStore, ...initialStore });
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <GalleryPanel {...defaultProps} />
-      </ThemeProvider>,
-      { store }
-    );
-
-    expect(screen.getByTestId("gallery-drag-drop-wrapper")).toBeTruthy();
-    expect(screen.getByTestId("detail-panel-wrapper")).toBeTruthy();
-  });
-});

package/src/components/Gallery/GalleryPanel/GalleryDragAndDrop/index.tsx

@@ -1,239 +0,0 @@
-import React, { memo, useEffect, useRef, useState } from "react";
-import { connect } from "react-redux";
-
-import { galleryActions } from "@ax/containers/Gallery";
-import { IImage, IRootState } from "@ax/types";
-import { Icon, DragAndDrop, ProgressBar } from "@ax/components";
-
-import * as S from "./style";
-
-const GalleryDragAndDrop = (props: IProps) => {
-  const {
-    isImageSelected,
-    validFormats,
-    site,
-    allowUpload,
-    refreshImages,
-    uploadError,
-    isUploading,
-    isSuccess,
-    isError,
-    errorMsg,
-    uploadImage,
-    selectImage,
-    visible,
-    resetGalleryState,
-  } = props;
-  const validExtensions = validFormats.map((format) => `.${format}`).join(",");
-  const videoFormats = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
-  const filesInputRef = useRef<HTMLInputElement>(null);
-  const filesButtonRef = useRef<HTMLButtonElement>(null);
-  const [inDropZone, setInDropZone] = useState(false);
-  const [dropDepth, setDropDepth] = useState(0);
-  const [uploadingState, setUploadingState] = useState({ total: 0, ready: 0 });
-  const [progress, setProgress] = useState(0);
-
-  useEffect(() => {
-    resetGalleryState();
-  }, [resetGalleryState]);
-
-  const handleDragEnter = () => {
-    setDropDepth((depth) => depth + 1);
-  };
-
-  const handleDragLeave = () => {
-    setDropDepth((depth) => depth - 1);
-    if (dropDepth > 1) return;
-    setInDropZone(false);
-  };
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    e.dataTransfer.dropEffect = "copy";
-    setInDropZone(true);
-  };
-
-  const checkType = (type: string) => {
-    for (const i in validFormats) {
-      if (type.includes(validFormats[i])) return true;
-    }
-    return false;
-  };
-
-  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
-    const files = Array.from(e.dataTransfer.files);
-    await uploadFiles(files);
-    setDropDepth(0);
-  };
-
-  const handleFilesUpload = (e: any) => {
-    const files: File[] = Array.from(e.currentTarget.files);
-    uploadFiles(files);
-  };
-
-  const uploadFiles = async (files: File[]) => {
-    try {
-      if (!files.every((file) => checkType(file.type))) {
-        uploadError(true, "Invalid format");
-        return;
-      }
-
-      setUploadingState({ total: files.length, ready: 0 });
-      let lastImage: IImage | undefined;
-      while (files.length) {
-        const file = files.shift();
-        lastImage = file && (await uploadImage(file, site, setProgress, visible));
-        setUploadingState((state) => ({ total: state.total, ready: state.ready + 1 }));
-      }
-
-      setInDropZone(false);
-      setUploadingState({ total: 0, ready: 0 });
-      setTimeout(async () => {
-        refreshImages && (await refreshImages());
-        lastImage && selectImage(lastImage);
-      }, 3000);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const uploading = isUploading || uploadingState.total > uploadingState.ready;
-  const success = isSuccess && uploadingState.total === uploadingState.ready;
-
-  const handleTryAgain = () => {
-    uploadError(false);
-    setInDropZone(false);
-  };
-
-  const handleFileClick = () => {
-    filesInputRef && filesInputRef.current && filesInputRef.current.click();
-  };
-
-  const errorWrapper = errorMsg ? <S.ErrorMsg>{errorMsg}</S.ErrorMsg> : null;
-
-  const renderDragAndDrop = () => (
-    <DragAndDrop
-      data-testid="drag-drop-wrapper"
-      onDrop={handleDrop}
-      onDragOver={handleDragOver}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      validFormats={validFormats}
-    >
-      <S.StatusWrapper onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
-        <S.DragStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
-          <S.DragIcon>
-            <Icon name="image" size="36" />
-          </S.DragIcon>
-          <S.DragTitle>Drag your file here</S.DragTitle>
-          <S.DragSubtitle>or</S.DragSubtitle>
-          <S.FilesInput type="file" ref={filesInputRef} multiple accept={validExtensions} onInput={handleFilesUpload} />
-          <S.FilesButton ref={filesButtonRef} type="button" buttonStyle="line" onClick={handleFileClick}>
-            Select files
-          </S.FilesButton>
-          <S.DragSubtitle>
-            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
-          </S.DragSubtitle>
-          <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
-        </S.DragStatus>
-        <S.DragOverStatus onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}>
-          <S.DragIcon>
-            <Icon name="success" size="36" />
-          </S.DragIcon>
-          <S.DragTitle>Drop your file</S.DragTitle>
-          <S.DragSubtitle>
-            Valid formats: {validFormats.filter((format) => !videoFormats.includes(format)).join(", ")} and videos.
-          </S.DragSubtitle>
-          <S.DragSubtitle>Max. size: 50MB</S.DragSubtitle>
-        </S.DragOverStatus>
-      </S.StatusWrapper>
-    </DragAndDrop>
-  );
-
-  const renderPlaceholder = () => (
-    <S.StatusWrapper>
-      <S.DragIcon>
-        <Icon name="image" size="36" />
-      </S.DragIcon>
-      <S.DragTitle>Select an image to see details</S.DragTitle>
-    </S.StatusWrapper>
-  );
-
-  return (
-    <S.Wrapper hidden={isImageSelected} data-testid="gallery-drag-drop-wrapper">
-      <S.DragAndDropWrapper inDropZone={inDropZone} uploading={uploading} success={success} error={isError}>
-        {allowUpload ? renderDragAndDrop() : renderPlaceholder()}
-      </S.DragAndDropWrapper>
-      <S.UploadingWrapper inDropZone={inDropZone} uploading={uploading} success={success} error={isError}>
-        <S.StatusWrapper>
-          <S.UploadingStatus>
-            <S.DragIcon>
-              <Icon name="image" size="36" />
-            </S.DragIcon>
-            <S.ProgressBar>
-              <ProgressBar percentage={progress} />
-            </S.ProgressBar>
-            <S.DragTitle>Uploading...</S.DragTitle>
-          </S.UploadingStatus>
-          <S.SuccessStatus>
-            <S.DragIcon>
-              <Icon name="success" size="36" />
-            </S.DragIcon>
-            <S.DragTitle>Image loaded!</S.DragTitle>
-          </S.SuccessStatus>
-          <S.ErrorStatus>
-            <S.DragIcon>
-              <Icon name="alert" size="36" />
-            </S.DragIcon>
-            <S.DragTitle>Error uploading image</S.DragTitle>
-            {errorWrapper}
-            <S.StyledButton type="button" buttonStyle="text" onClick={handleTryAgain}>
-              TRY AGAIN
-            </S.StyledButton>
-          </S.ErrorStatus>
-        </S.StatusWrapper>
-      </S.UploadingWrapper>
-    </S.Wrapper>
-  );
-};
-
-export interface IGalleryDragAndDropProps {
-  isImageSelected: boolean;
-  validFormats: string[];
-  site: number | "global";
-  allowUpload: boolean;
-  refreshImages?: () => Promise<void>;
-  isUploading: boolean;
-  isSuccess: boolean;
-  isError: boolean;
-  errorMsg: string;
-  visible?: boolean;
-}
-
-const mapStateToProps = (state: IRootState) => ({
-  isUploading: state.gallery.isUploading,
-  isSuccess: state.gallery.isSuccess,
-  isError: state.gallery.isError,
-  errorMsg: state.gallery.errorMsg,
-});
-
-export interface IDispatchProps {
-  selectImage(item: IImage | null): void;
-  uploadError: (error: boolean, msg?: string) => Promise<void>;
-  resetGalleryState: () => Promise<void>;
-  uploadImage: (
-    imageFiles: File | File[],
-    site: number | string,
-    setProgress?: (progress: number) => void,
-    visible?: boolean
-  ) => Promise<IImage>;
-}
-
-const mapDispatchToProps = {
-  uploadError: galleryActions.uploadError,
-  uploadImage: galleryActions.uploadImage,
-  resetGalleryState: galleryActions.resetGalleryState,
-};
-
-type IProps = IGalleryDragAndDropProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(memo(GalleryDragAndDrop));

package/src/containers/FileDrive/utils.tsx

@@ -1,37 +0,0 @@
-import { IFolderTree } from "@ax/types";
-
-const getPath = (tree: IFolderTree[], targetID: number): IFolderTree[] | undefined => {
-  for(const element of tree){
-    if (element.id === targetID) {
-        return [element];
-    }
-    if (element.children.length) {
-        const result = getPath(element.children, targetID);
-        if (result) {
-            result.unshift(element);
-            return result;
-        }
-    }
-  }
-};
-
-const getNewBreadcrumb = (tree: IFolderTree[], target: number | null) => {
-  if(!target) return [];
-
-  return getPath(tree, target) || [];
-}
-
-const updatePropertyById = (id: number, data: IFolderTree[], property: string, value: any) => {
-    for (let i = 0; i < data.length; i++) {
-      if (data[i].id === id) {
-        data[i] = { ...data[i], [property]: value };
-      }
-      if (data[i].children !== undefined && data[i].children.length > 0) {
-        data[i].children = updatePropertyById(id, data[i].children, property, value);
-      }
-    }
-
-    return data;
-}
-
-export { getNewBreadcrumb, updatePropertyById };