fix qr code

ui/src/components/General/ErrorComponent/index.tsx

@@ -15,7 +15,7 @@ const ErrorComponent: React.FC<ErrorComponentProps> = ({
 	return (
 		<Card title={category}>
 			<Alert
-				message={"REASON"}
+				message={"Reason"}
 				description={
 					<>
 						{reasons.map((reason) => (

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 (
+		<Card style={{ width: "500px" }}>
+			<Alert
+				message={"Something went wrong"}
+				description={
+					<>
+						<Button
+							onClick={() =>
+								window.location.assign(window.location.pathname)
+							}
+						>
+							Refresh
+						</Button>
+					</>
+				}
+				type="error"
+				showIcon
+			/>
+		</Card>
+	);
+};
+
+export default FallbackComponent;

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 = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
@@ -50,7 +51,7 @@ const withPageTitle = <T extends object>(
 							</div>
 						)}
 					</ErrorBoundary>
-					<ErrorBoundary fallback={<p>Something went wrong</p>}>
+					<ErrorBoundary FallbackComponent={FallbackComponent}>
 						<WrappedComponent {...props} />
 					</ErrorBoundary>
 				</div>

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;
 	}
 }

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(<QRcode />);
+	});
+
+	test("textarea input providation", () => {
+		render(<QRcode />);
+
+		const textarea = screen.getByPlaceholderText("Enter input");
+
+		fireEvent.change(textarea, { target: { value: "Test text" } });
+
+		expect(textarea).toHaveValue("Test text");
+	});
+});

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 (
+				<ErrorComponent
+					category="Input Error"
+					reasons={["Input text is too long"]}
+					solutions={[
+						"Input should be small",
+						"Compressing the data before generating the QR code",
+						"truncate or split the text and generate multiple QR Code",
+					]}
+				/>
+			);
+		}
+		return this.props.children;
+	}
+}
+
+export default QRCodeErrorBoundary;

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
 						/>
 					</Form.Item>
@@ -110,23 +113,25 @@ const QRcode: React.FC = () => {
 					</Form.Item>
 				</Form>
 			</Card>
-			<Card className={style.qrcode__output}>
+			<Card className={classNames(style.qrcode__output, "qrcode")}>
 				{value.length > 0 ? (
 					<Space
 						direction="vertical"
 						align="center"
 						size={"large"}
 						id="myqrcode"
 					>
-						<QRCode
-							value={value}
-							color={color}
-							bgColor={bgColor}
-							bordered={bordered}
-							size={size}
-							iconSize={iconSize}
-							icon={icon}
-						/>
+						<QRCodeErrorBoundary>
+							<QRCode
+								value={value}
+								color={color}
+								bgColor={bgColor}
+								bordered={bordered}
+								size={size}
+								iconSize={iconSize}
+								icon={icon}
+							/>
+						</QRCodeErrorBoundary>
 						<DropdownDownloadButton
 							handleDownload={downloadQRCode}
 						/>

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);