From 457d8ad6bc693bd175e55838273cd7a09330e217 Mon Sep 17 00:00:00 2001
From: Keith Wagner <244694+kpwags@users.noreply.github.com>
Date: Mon, 3 Jul 2023 11:02:33 -0400
Subject: [PATCH] Added a Page for Reporting Issues

Added a page for reporting issues or requesting features.

Closes #124
---
 frontend/src/App.tsx                          |  2 ++
 .../src/components/Elements/Footer/Footer.tsx |  1 +
 frontend/src/components/Pages/Login/Login.tsx |  1 -
 .../Pages/ReportAnIssue/ReportAnIssue.less    | 13 ++++++++
 .../Pages/ReportAnIssue/ReportAnIssue.tsx     | 33 +++++++++++++++++++
 .../components/Pages/ReportAnIssue/index.tsx  |  2 ++
 frontend/src/styles/App.less                  | 11 +++++++
 7 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.less
 create mode 100644 frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.tsx
 create mode 100644 frontend/src/components/Pages/ReportAnIssue/index.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ff32641..137e09f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -23,6 +23,7 @@ import ManageMeats from '@components/Pages/ManageMeats';
 import ManageRecipes from '@components/Pages/ManageRecipes';
 import RecipeListing from '@components/Pages/RecipeListing';
 import Search from '@components/Pages/Search';
+import ReportAnIssue from '@components/Pages/ReportAnIssue';
 import PrivateFilter from '@components/PrivateFilter/PrivateFilter';
 
 import './styles/App.less';
@@ -141,6 +142,7 @@ const App = (): JSX.Element => (
                             />
                         </Route>
                         <Route path="/search" element={(<PrivateFilter><Search /></PrivateFilter>)} />
+                        <Route path="/report-an-issue" element={(<ReportAnIssue />)} />
                         <Route path="/" element={<Landing />} />
                     </Routes>
                 </BaseLayout>
diff --git a/frontend/src/components/Elements/Footer/Footer.tsx b/frontend/src/components/Elements/Footer/Footer.tsx
index af1cfb3..80b098d 100644
--- a/frontend/src/components/Elements/Footer/Footer.tsx
+++ b/frontend/src/components/Elements/Footer/Footer.tsx
@@ -14,6 +14,7 @@ const Footer = (): JSX.Element => {
                 <li><Link to="/">Home</Link></li>
                 {siteSettings.isPublic || user !== null ? (<li><Link to="/search">Search</Link></li>) : null}
                 {user !== null ? (<li><Link to="/recipes/add">Add Recipe</Link></li>) : null}
+                <li><Link to="/report-an-issue">Report an Issue</Link></li>
             </ul>
             <div className="copyright">&copy; {(new Date()).getFullYear()} {siteSettings.title}</div>
         </Layout.Footer>
diff --git a/frontend/src/components/Pages/Login/Login.tsx b/frontend/src/components/Pages/Login/Login.tsx
index 99d64f6..a2981cf 100644
--- a/frontend/src/components/Pages/Login/Login.tsx
+++ b/frontend/src/components/Pages/Login/Login.tsx
@@ -23,7 +23,6 @@ const Login = ({
     const urlRedirect = query.get('redirect');
 
     const completeLoginProcess = (authResult: AuthResult) => {
-        console.log({ redirectTo, urlRedirect });
         loginUser(authResult.accessToken);
         navigate(urlRedirect || redirectTo);
     };
diff --git a/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.less b/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.less
new file mode 100644
index 0000000..a0e45ec
--- /dev/null
+++ b/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.less
@@ -0,0 +1,13 @@
+@import (reference) '../../../styles/Theme.less';
+
+.report-an-issue {
+    .button-area {
+        margin-top: 2rem;
+    }
+
+    a.ant-btn-primary {
+        background-color: @color-green-01;
+        border-color: @color-green-01;
+        color: @color-white;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.tsx b/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.tsx
new file mode 100644
index 0000000..a527117
--- /dev/null
+++ b/frontend/src/components/Pages/ReportAnIssue/ReportAnIssue.tsx
@@ -0,0 +1,33 @@
+import { Button, Space, Typography } from 'antd';
+
+import './ReportAnIssue.less';
+
+const { Link, Title, Paragraph } = Typography;
+
+const ReportAnIssue = (): JSX.Element => (
+    <div className="page-container report-an-issue">
+        <Title level={1}>Report An Issue</Title>
+        <Paragraph>As embarassing as it might be, this software is not perfect and there could of course be bugs and other less-than-favorable issues.</Paragraph>
+        <Paragraph>
+            If you run into a bug or other issue, please visit our <Link href="https://github.com/kpwags/digital-family-cookbook">GitHub Repository</Link> and
+            create an issue for it and I can look into it and hopefully quickly fix it.
+        </Paragraph>
+        <Paragraph>Also, feel free to create an issue if you see something that could be improved or if you have a feature you&apos;d like to request.</Paragraph>
+        <Space direction="horizontal" size={12} className="button-area">
+            <Button
+                type="primary"
+                href="https://github.com/kpwags/digital-family-cookbook/issues/new?assignees=&labels=&projects=&template=bug_report.md&title="
+            >
+                Report a Bug
+            </Button>
+            <Button
+                type="primary"
+                href="https://github.com/kpwags/digital-family-cookbook/issues/new?assignees=&labels=&projects=&template=feature_request.md&title="
+            >
+                Request a Feature
+            </Button>
+        </Space>
+    </div>
+);
+
+export default ReportAnIssue;
diff --git a/frontend/src/components/Pages/ReportAnIssue/index.tsx b/frontend/src/components/Pages/ReportAnIssue/index.tsx
new file mode 100644
index 0000000..36e1c23
--- /dev/null
+++ b/frontend/src/components/Pages/ReportAnIssue/index.tsx
@@ -0,0 +1,2 @@
+export * from './ReportAnIssue';
+export { default } from './ReportAnIssue';
diff --git a/frontend/src/styles/App.less b/frontend/src/styles/App.less
index 9e90f84..a4f42d4 100644
--- a/frontend/src/styles/App.less
+++ b/frontend/src/styles/App.less
@@ -90,6 +90,10 @@ a:hover {
   text-decoration: underline;
 }
 
+.ant-typography a.ant-typography {
+  text-decoration: underline;
+}
+
 div.ant-typography,
 .ant-typogrpahy p {
   font-size: 1.1rem;
@@ -228,6 +232,13 @@ ul {
   min-height: calc(100vh - 64px - 138px);
 }
 
+.page-container {
+  width: min(100ch, 100vw - 2rem);
+  margin: 4rem auto 0 auto;
+  padding: 0 10px;
+  max-width: 100%;
+}
+
 .align-right {
   text-align: right;
 }