From 8ae6b61378db964a61dc593f36676f5004841ec2 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Sat, 14 Oct 2023 13:36:34 +0600 Subject: [PATCH] fix qr code --- .../General/ErrorComponent/index.tsx | 2 +- .../General/FallbackComponent/index.tsx | 27 ++++++++++++ .../Hoc/withPageTitle/withPageTitle.tsx | 3 +- .../pages/Generator/QRcode/QRcode.module.scss | 3 +- ui/src/pages/Generator/QRcode/QRcode.test.tsx | 19 ++++++++ .../QRcode/components/QRCodeErrorBoundary.tsx | 43 +++++++++++++++++++ ui/src/pages/Generator/QRcode/index.tsx | 25 ++++++----- ui/src/styles/antd-overrides.css | 1 + 8 files changed, 110 insertions(+), 13 deletions(-) create mode 100644 ui/src/components/General/FallbackComponent/index.tsx create mode 100644 ui/src/pages/Generator/QRcode/QRcode.test.tsx create mode 100644 ui/src/pages/Generator/QRcode/components/QRCodeErrorBoundary.tsx diff --git a/ui/src/components/General/ErrorComponent/index.tsx b/ui/src/components/General/ErrorComponent/index.tsx index 29d0d457..bf837147 100644 --- a/ui/src/components/General/ErrorComponent/index.tsx +++ b/ui/src/components/General/ErrorComponent/index.tsx @@ -15,7 +15,7 @@ const ErrorComponent: React.FC = ({ return ( {reasons.map((reason) => ( diff --git a/ui/src/components/General/FallbackComponent/index.tsx b/ui/src/components/General/FallbackComponent/index.tsx new file mode 100644 index 00000000..4f24b8a1 --- /dev/null +++ b/ui/src/components/General/FallbackComponent/index.tsx @@ -0,0 +1,27 @@ +import { Alert, Button, Card } from "antd"; +import React from "react"; + +const FallbackComponent: React.FC = () => { + return ( + + + + + } + type="error" + showIcon + /> + + ); +}; + +export default FallbackComponent; diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx index 249c9e9e..78f39af1 100644 --- a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx +++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx @@ -6,6 +6,7 @@ import usePageTitle from "./utils/hooks"; import { HeadProvider, Title, Link, Meta } from "react-head"; import { NO_PADDING, NO_TITLE } from "./utils/constants"; import { ErrorBoundary } from "react-error-boundary"; +import FallbackComponent from "components/General/FallbackComponent"; const withPageTitle = ( WrappedComponent: React.ComponentType @@ -50,7 +51,7 @@ const withPageTitle = ( )} - Something went wrong

}> + diff --git a/ui/src/pages/Generator/QRcode/QRcode.module.scss b/ui/src/pages/Generator/QRcode/QRcode.module.scss index b70990c5..eb2de098 100644 --- a/ui/src/pages/Generator/QRcode/QRcode.module.scss +++ b/ui/src/pages/Generator/QRcode/QRcode.module.scss @@ -6,10 +6,11 @@ } &__output { + height: 623px; display: flex; flex-direction: column; align-items: center; justify-content: center; - overflow: hidden; + overflow-y: auto; } } diff --git a/ui/src/pages/Generator/QRcode/QRcode.test.tsx b/ui/src/pages/Generator/QRcode/QRcode.test.tsx new file mode 100644 index 00000000..c6f617e5 --- /dev/null +++ b/ui/src/pages/Generator/QRcode/QRcode.test.tsx @@ -0,0 +1,19 @@ +import { fireEvent, render, screen } from "@testing-library/react"; +import { describe, test } from "vitest"; +import QRcode from "."; + +describe("QRCODE", () => { + test("render component without crash", () => { + render(); + }); + + test("textarea input providation", () => { + render(); + + const textarea = screen.getByPlaceholderText("Enter input"); + + fireEvent.change(textarea, { target: { value: "Test text" } }); + + expect(textarea).toHaveValue("Test text"); + }); +}); diff --git a/ui/src/pages/Generator/QRcode/components/QRCodeErrorBoundary.tsx b/ui/src/pages/Generator/QRcode/components/QRCodeErrorBoundary.tsx new file mode 100644 index 00000000..9685386c --- /dev/null +++ b/ui/src/pages/Generator/QRcode/components/QRCodeErrorBoundary.tsx @@ -0,0 +1,43 @@ +import ErrorComponent from "components/General/ErrorComponent"; +import { Component, ReactNode } from "react"; + +type ErrorBoundaryProps = { + children: ReactNode; +}; + +type ErrorBoundaryState = { + hasError: boolean; +}; + +class QRCodeErrorBoundary extends Component< + ErrorBoundaryProps, + ErrorBoundaryState +> { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + componentDidCatch() { + this.setState({ hasError: true }); + } + + render() { + if (this.state.hasError) { + return ( + + ); + } + return this.props.children; + } +} + +export default QRCodeErrorBoundary; diff --git a/ui/src/pages/Generator/QRcode/index.tsx b/ui/src/pages/Generator/QRcode/index.tsx index ae3a6157..47a7623f 100644 --- a/ui/src/pages/Generator/QRcode/index.tsx +++ b/ui/src/pages/Generator/QRcode/index.tsx @@ -9,6 +9,8 @@ import { detectData } from "pages/Tools/Sorting/utils/helper"; import ColorPickerWithInput from "components/General/ColorPickerWithInput"; import { ResponsiveInputWithLabel } from "components/General/FormComponents"; import { handleImageUpload } from "utils/helper-functions/files"; +import QRCodeErrorBoundary from "./components/QRCodeErrorBoundary"; +import { classNames } from "utils/helper-functions/string"; const { TextArea } = Input; @@ -50,6 +52,7 @@ const QRcode: React.FC = () => { rows={7} onChange={(e) => setValue(e.target.value)} data-gramm={false} + placeholder="Enter input" allowClear /> @@ -110,7 +113,7 @@ const QRcode: React.FC = () => { - + {value.length > 0 ? ( { size={"large"} id="myqrcode" > - + + + diff --git a/ui/src/styles/antd-overrides.css b/ui/src/styles/antd-overrides.css index 3a8ea0ef..10dd0588 100644 --- a/ui/src/styles/antd-overrides.css +++ b/ui/src/styles/antd-overrides.css @@ -27,6 +27,7 @@ h5 { .ant-layout-content, .notification-container, .search_container, +.qrcode, .ant-menu { &::-webkit-scrollbar { width: var(--bt-size-8);