@onewelcome/react-lib-components 1.5.0 → 1.7.0

package/src/hooks/useUploadFile.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { FileType } from "../Form/FileUpload/FileUpload";
+import { useEffect, useState } from "react";
+import { getValueByPath } from "../util/helper";
+
+export interface UploadResponseType {
+  fileList: FileType[];
+  status: XMLHttpRequest["status"];
+}
+export interface UseUploadFileCallback {
+  onComplete?: (response: UploadResponseType) => void;
+  onProgress?: Function;
+}
+
+export interface UploadFileRequestParams {
+  url: string;
+  headers?: Headers;
+  responseErrorPath?: string;
+  networkErrorText?: string;
+  withCredentials?: boolean;
+}
+
+export const useUploadFile = (
+  files: FileType[],
+  request: UploadFileRequestParams,
+  callbacks?: UseUploadFileCallback
+) => {
+  const { url, headers, withCredentials, networkErrorText, responseErrorPath } = request;
+
+  const { onComplete, onProgress } = callbacks || {};
+
+  const [uploadingFiles, setUploadingFiles] = useState<FileType[]>([]);
+  const [updatedFiles, setUpdatedFiles] = useState<FileType[]>([...files]);
+
+  const getUpdatedList = (
+    fileName: string,
+    fileStatus: FileType["status"],
+    progress?: number,
+    error?: string
+  ) => {
+    return files.map(file => {
+      if (file.name === fileName) {
+        file.progress = progress;
+        file.error = error;
+        file.status = fileStatus;
+      }
+      return { ...file };
+    });
+  };
+
+  const recordProgress = (e: ProgressEvent<XMLHttpRequestEventTarget>, fileName: string) => {
+    const progress = (e.loaded / e.total) * 100;
+    const updatedData = getUpdatedList(fileName, "uploading", progress);
+    setUpdatedFiles(updatedData);
+    onProgress && onProgress(fileName, progress);
+  };
+
+  const getFileStatus = (
+    requestStatus: XMLHttpRequest["status"],
+    responseText: XMLHttpRequest["responseText"]
+  ) => {
+    let fileStatus: FileType["status"] = undefined;
+    let error = "";
+    if (requestStatus >= 200 && requestStatus < 400) {
+      fileStatus = "completed";
+    } else if (requestStatus === 0) {
+      fileStatus = "retry";
+      error =
+        networkErrorText || "Network error. Check internet connection and retry uploading the file";
+    } else if (requestStatus >= 400 && requestStatus < 500) {
+      const response = responseText && JSON.parse(JSON.stringify(responseText));
+      fileStatus = "error";
+      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Bad request";
+    } else if (requestStatus >= 500) {
+      const response = responseText && JSON.parse(JSON.stringify(responseText));
+      fileStatus = "error";
+      error = responseErrorPath ? getValueByPath(response, responseErrorPath) : "Server Error";
+    }
+    return { fileStatus, error };
+  };
+
+  const handleOnComplete = (xhr: XMLHttpRequest, fileName: string) => {
+    const { status, readyState, responseText } = xhr;
+    if (readyState === xhr.DONE) {
+      const { fileStatus, error } = getFileStatus(status, responseText);
+      const updatedList = getUpdatedList(fileName, fileStatus, undefined, error);
+      setUpdatedFiles(updatedList);
+      const response = { fileList: updatedList, status };
+      setUploadingFiles(prevState => prevState.filter(selected => selected.name === fileName));
+      onComplete && onComplete(response);
+    }
+  };
+
+  const uploadFile = (file: FileType) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener("progress", e => recordProgress(e, file.name));
+    xhr.addEventListener("readystatechange", () => handleOnComplete(xhr, file.name));
+    headers && headers.forEach((value, key) => xhr.setRequestHeader(key, value));
+    withCredentials && (xhr.withCredentials = true);
+    xhr.open("POST", url, true);
+    const formData = new FormData();
+    formData.append("file", file.data as File);
+    formData.append("name", file.name);
+    xhr.send(formData);
+  };
+
+  useEffect(() => {
+    if (!url || !files.length) {
+      return;
+    }
+
+    files.forEach(file => {
+      if (!file.status && !uploadingFiles.find(selected => selected.name === file.name)) {
+        setUploadingFiles(prevState => [...prevState, file]);
+        uploadFile(file);
+      }
+    });
+  }, [url, files]);
+
+  return { updatedFiles, setUpdatedFiles, uploadingFiles };
+};

package/src/index.ts

@@ -123,3 +123,4 @@ export { HeaderCell } from "./DataGrid/datagrid.interfaces";
 export { DataGrid, Props as DataGridProps } from "./DataGrid/DataGrid";
 export { DataGridRow, Props as DataGridRowProps } from "./DataGrid/DataGridBody/DataGridRow";
 export { DataGridCell, Props as DataGridCellProps } from "./DataGrid/DataGridBody/DataGridCell";
+export { Banner, Props as BannerProps } from "./Notifications/Banner/Banner";

package/src/mixins.module.scss

@@ -156,17 +156,26 @@
   }
 }
 
-@mixin outline {
+@mixin outline(
+  $color: var(--light-grey-border),
+  $style: var(--input-border-style),
+  $width: var(--input-border-width),
+  $borderRadius: var(--input-border-radius),
+  $backgroundColor: ""
+) {
   .outline {
     pointer-events: none;
     position: absolute;
     margin: 0;
     padding: 0;
     inset: 0;
-    border-color: var(--light-grey-border);
-    border-style: var(--input-border-style);
-    border-width: var(--input-border-width);
-    border-radius: var(--input-border-radius);
+    border-color: $color;
+    border-style: $style;
+    border-width: $width;
+    border-radius: $borderRadius;
+    @if ($backgroundColor != "") {
+      background-color: $backgroundColor;
+    }
     @include transition(all, 0.2s, ease-in-out);
   }
 }
@@ -249,3 +258,13 @@
     transition-duration: 0.1ms;
   }
 }
+
+@mixin width-size($size) {
+  .w-#{$size} {
+    width: $size * 1%;
+  }
+}
+
+@for $i from 1 through 100 {
+  @include width-size($i + 5);
+}

package/src/util/helper.test.tsx

@@ -16,7 +16,15 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { fireEvent, waitFor } from "@testing-library/dom";
-import { generateID, filterProps, debounce, throttle } from "./helper";
+import {
+  generateID,
+  filterProps,
+  debounce,
+  throttle,
+  areArraysDifferent,
+  getValueByPath,
+  isEqual
+} from "./helper";
 import { render } from "@testing-library/react";
 
 /* Generate an ID of 20 characters with a string woven in */
@@ -165,3 +173,150 @@ describe("throttling works", () => {
     expect(exampleFunction).not.toHaveBeenCalledTimes(10);
   });
 });
+
+describe("areArraysDifferent works as expected", () => {
+  it("should return true for different arrays", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      },
+      {
+        name: "test2"
+      }
+    ];
+
+    const arr2 = [
+      {
+        name: "test1"
+      },
+      {
+        name: "test3"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(true);
+  });
+
+  it("should return false for arrays with same values", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const arr2 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(false);
+  });
+
+  it("should return false for falsy values", () => {
+    const arr1 = [
+      {
+        name: "test1"
+      }
+    ];
+
+    const arr2 = [
+      {
+        label: "test1"
+      }
+    ];
+
+    const result = areArraysDifferent(arr1, arr2, "name");
+    expect(result).toBe(true);
+  });
+});
+
+describe("return correct values from getValueByPath", () => {
+  it("should return the correct value form a multi layered object", () => {
+    const val = "test";
+    const obj = {
+      firstNode: {
+        secondNode: {
+          thirdNode: {
+            val
+          }
+        }
+      }
+    };
+
+    const result = getValueByPath(obj, "firstNode.secondNode.thirdNode.val");
+    expect(result).toBe(val);
+  });
+});
+
+describe("verifies if isEqual returns the correct value", () => {
+  it("should return true for equal values objects", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const obj2 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(true);
+  });
+
+  it("should return false for unequal values objects", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const obj2 = {
+      name1: "test1"
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+
+  it("should return false for falsy values", () => {
+    const obj1 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+    const obj2 = null;
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+
+  it("should return false for different types", () => {
+    const obj1 = [
+      {
+        name1: "test1",
+        name2: {
+          val: "test2"
+        }
+      }
+    ];
+    const obj2 = {
+      name1: "test1",
+      name2: {
+        val: "test2"
+      }
+    };
+
+    const res = isEqual(obj1, obj2);
+    expect(res).toBe(false);
+  });
+});

package/src/util/helper.tsx

@@ -143,3 +143,36 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
     }
   };
 };
+
+export const isEqual = (x: any, y: any): boolean => {
+  const typesCoincide = x && y && typeof x === "object" && typeof y === "object";
+  return typesCoincide
+    ? Object.keys(x).length === Object.keys(y).length &&
+        Object.keys(x).every(key => isEqual(x[key], y[key]))
+    : x === y;
+};
+
+export const areArraysDifferent = (
+  arr1: Record<string, any>[],
+  arr2: Record<string, any>[],
+  key: string
+) => {
+  if (arr1.length !== arr2.length) {
+    return true;
+  } else {
+    const firstFilteredArray = arr1.filter(arr1Item =>
+      arr2.some((arr2Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+    const secondFilteredArray = arr2.filter(arr2Item =>
+      arr1.some((arr1Item: { [x: string]: any }) => !isEqual(arr1Item[key], arr2Item[key]))
+    );
+
+    return !!firstFilteredArray.length || !!secondFilteredArray.length;
+  }
+};
+
+export const getValueByPath = (obj: { [key: string]: any }, path: string): any => {
+  return path.split(".").reduce((res, prop) => {
+    return res[prop];
+  }, obj);
+};