From b409c2a62975d0281b39002b16ffecebc991b869 Mon Sep 17 00:00:00 2001
From: lifeparticle <mahbubzaman17@gmail.com>
Date: Thu, 21 Sep 2023 22:51:09 +1000
Subject: [PATCH] help

---
 .../General/FormComponents/index.tsx          |  4 +-
 .../HelpIcon/components/Help/index.tsx        | 11 +++++
 ui/src/components/General/HelpIcon/index.tsx  | 41 +++++++++++++++++++
 .../Hoc/utils/hooks/usePageTitle.ts           | 10 -----
 .../Hoc/{ => withLabelSize}/withLabelSize.tsx |  0
 .../Hoc/withPageTitle/utils/constants.ts      |  9 ++++
 .../Hoc/withPageTitle/utils/hooks.ts          | 17 ++++++++
 .../withPageTitle.module.scss}                |  0
 .../Hoc/{ => withPageTitle}/withPageTitle.tsx | 14 +++++--
 .../Hoc/{ => withSize}/withSize.tsx           |  0
 ui/src/pages/Routes/index.tsx                 |  2 +-
 11 files changed, 92 insertions(+), 16 deletions(-)
 create mode 100644 ui/src/components/General/HelpIcon/components/Help/index.tsx
 create mode 100644 ui/src/components/General/HelpIcon/index.tsx
 delete mode 100644 ui/src/components/Hoc/utils/hooks/usePageTitle.ts
 rename ui/src/components/Hoc/{ => withLabelSize}/withLabelSize.tsx (100%)
 create mode 100644 ui/src/components/Hoc/withPageTitle/utils/constants.ts
 create mode 100644 ui/src/components/Hoc/withPageTitle/utils/hooks.ts
 rename ui/src/components/Hoc/{withpagetitle.module.scss => withPageTitle/withPageTitle.module.scss} (100%)
 rename ui/src/components/Hoc/{ => withPageTitle}/withPageTitle.tsx (56%)
 rename ui/src/components/Hoc/{ => withSize}/withSize.tsx (100%)

diff --git a/ui/src/components/General/FormComponents/index.tsx b/ui/src/components/General/FormComponents/index.tsx
index 09d8db53..8e6b8f95 100644
--- a/ui/src/components/General/FormComponents/index.tsx
+++ b/ui/src/components/General/FormComponents/index.tsx
@@ -8,13 +8,13 @@ import {
 	Dropdown,
 } from "antd";
 import React from "react";
-import withLabelSize from "components/Hoc/withLabelSize";
+import withLabelSize from "components/Hoc/withLabelSize/withLabelSize";
 import {
 	InputComponentProps,
 	SegmentComponentProps,
 	SelectComponentProps,
 } from "./utils/types";
-import withSize from "components/Hoc/withSize";
+import withSize from "components/Hoc/withSize/withSize";
 import { DropdownButtonProps } from "antd/es/dropdown";
 
 const ResponsiveSelect: React.FC<SelectComponentProps> = (props) => {
diff --git a/ui/src/components/General/HelpIcon/components/Help/index.tsx b/ui/src/components/General/HelpIcon/components/Help/index.tsx
new file mode 100644
index 00000000..b2abac4c
--- /dev/null
+++ b/ui/src/components/General/HelpIcon/components/Help/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+interface indexProps {
+	text: string;
+}
+
+const Help: React.FC<indexProps> = ({ text }) => {
+	return <h1>{text}</h1>;
+};
+
+export default Help;
diff --git a/ui/src/components/General/HelpIcon/index.tsx b/ui/src/components/General/HelpIcon/index.tsx
new file mode 100644
index 00000000..a37eabf9
--- /dev/null
+++ b/ui/src/components/General/HelpIcon/index.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { Button, Modal } from "antd";
+import Icon from "components/General/Icon";
+import Help from "./components/Help";
+
+const HelpIcon: React.FC<{ helpText: string }> = ({ helpText }) => {
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const showModal = () => {
+		setIsModalOpen(true);
+	};
+
+	const closeModal = () => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<>
+			<Button
+				size="small"
+				key="Github"
+				type="default"
+				shape="circle"
+				icon={<Icon name="Info" size={15} />}
+				onClick={showModal}
+			/>
+			<Modal
+				title="Help"
+				open={isModalOpen}
+				footer={null}
+				keyboard={true}
+				maskClosable={true}
+				onCancel={closeModal}
+			>
+				<Help text={helpText} />
+			</Modal>
+		</>
+	);
+};
+
+export default HelpIcon;
diff --git a/ui/src/components/Hoc/utils/hooks/usePageTitle.ts b/ui/src/components/Hoc/utils/hooks/usePageTitle.ts
deleted file mode 100644
index 249371c5..00000000
--- a/ui/src/components/Hoc/utils/hooks/usePageTitle.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { routes } from "pages/Routes/utils/constant";
-import { useLocation } from "react-router-dom";
-
-const usePageTitle = () => {
-	const location = useLocation();
-	const page = routes.find((route) => route.path === location.pathname);
-	return [page?.title ?? "Page Not Found", page?.description ?? ""];
-};
-
-export default usePageTitle;
diff --git a/ui/src/components/Hoc/withLabelSize.tsx b/ui/src/components/Hoc/withLabelSize/withLabelSize.tsx
similarity index 100%
rename from ui/src/components/Hoc/withLabelSize.tsx
rename to ui/src/components/Hoc/withLabelSize/withLabelSize.tsx
diff --git a/ui/src/components/Hoc/withPageTitle/utils/constants.ts b/ui/src/components/Hoc/withPageTitle/utils/constants.ts
new file mode 100644
index 00000000..757dc526
--- /dev/null
+++ b/ui/src/components/Hoc/withPageTitle/utils/constants.ts
@@ -0,0 +1,9 @@
+import { routesById } from "pages/Routes/utils/constant";
+
+const PAGES = ["About", "Feedback", "Newsfeed"];
+
+const HELP = {
+	[routesById.colorpicker.id]: "colorpicker",
+	[routesById.shadesandtints.id]: "shadesandtints",
+};
+export { PAGES, HELP };
diff --git a/ui/src/components/Hoc/withPageTitle/utils/hooks.ts b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
new file mode 100644
index 00000000..8e2bab45
--- /dev/null
+++ b/ui/src/components/Hoc/withPageTitle/utils/hooks.ts
@@ -0,0 +1,17 @@
+import { routes } from "pages/Routes/utils/constant";
+import { useLocation } from "react-router-dom";
+import { HELP } from "./constants";
+
+const usePageTitle = () => {
+	const { pathname } = useLocation();
+	const page = routes.find((route) => route.path === pathname) || {
+		title: "Page Not Found",
+		description: "",
+		id: "",
+	};
+
+	const { title, description, id } = page;
+	return [title, description, HELP[id] || ""];
+};
+
+export default usePageTitle;
diff --git a/ui/src/components/Hoc/withpagetitle.module.scss b/ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
similarity index 100%
rename from ui/src/components/Hoc/withpagetitle.module.scss
rename to ui/src/components/Hoc/withPageTitle/withPageTitle.module.scss
diff --git a/ui/src/components/Hoc/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx
similarity index 56%
rename from ui/src/components/Hoc/withPageTitle.tsx
rename to ui/src/components/Hoc/withPageTitle/withPageTitle.tsx
index abdb968f..177dc716 100644
--- a/ui/src/components/Hoc/withPageTitle.tsx
+++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx
@@ -1,18 +1,26 @@
 import Text from "components/General/Text/Text";
-import usePageTitle from "components/Hoc/utils/hooks/usePageTitle";
 import style from "./withpagetitle.module.scss";
+import HelpIcon from "components/General/HelpIcon";
+import { Space } from "antd";
+import { PAGES } from "./utils/constants";
+import usePageTitle from "./utils/hooks";
 
 const withPageTitle = <T extends object>(
 	WrappedComponent: React.ComponentType<T>
 ) => {
 	const WithPageTitle = (props: T) => {
-		const [title, description] = usePageTitle();
+		const [title, description, helpText] = usePageTitle();
 
 		return (
 			<div className={title === "Home" ? "" : style.withpagetitle}>
 				{title !== "Home" && (
 					<>
-						<Text text={title} level={3} />
+						<Space align="center">
+							<Text text={title} level={3} />
+							{helpText && !PAGES.includes(title) && (
+								<HelpIcon helpText={helpText} />
+							)}
+						</Space>
 						<Text text={description} level={5} />
 						<br />
 					</>
diff --git a/ui/src/components/Hoc/withSize.tsx b/ui/src/components/Hoc/withSize/withSize.tsx
similarity index 100%
rename from ui/src/components/Hoc/withSize.tsx
rename to ui/src/components/Hoc/withSize/withSize.tsx
diff --git a/ui/src/pages/Routes/index.tsx b/ui/src/pages/Routes/index.tsx
index 95849050..b0d766b1 100644
--- a/ui/src/pages/Routes/index.tsx
+++ b/ui/src/pages/Routes/index.tsx
@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Route, Routes as RRDRoutes } from "react-router-dom";
-import withPageTitle from "components/Hoc/withPageTitle";
+import withPageTitle from "components/Hoc/withPageTitle/withPageTitle";
 import { routes } from "./utils/constant";
 import { Spin } from "antd";