From 386c75531d9a9331b57a346f13d5b0cb601d0c2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 17 May 2024 08:47:43 +0100
Subject: [PATCH] feat: Setup query, routing, and placeholder Feedbac component

---
 .../components/Flow/FeedbackPage.tsx          | 15 ++++
 editor.planx.uk/src/routes/feedback.tsx       | 73 +++++++++++++++++++
 editor.planx.uk/src/routes/flow.tsx           |  2 +
 3 files changed, 90 insertions(+)
 create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx
 create mode 100644 editor.planx.uk/src/routes/feedback.tsx

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx
new file mode 100644
index 0000000000..4d4b50ef0f
--- /dev/null
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackPage.tsx
@@ -0,0 +1,15 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { Feedback } from "routes/feedback";
+
+interface Props {
+  feedback: Feedback[];
+}
+
+export const FeedbackPage: React.FC<Props> = ({ feedback }) => {
+  return (
+    <Box component="pre" sx={{ fontSize: 12, overflowY: "auto" }}>
+      {JSON.stringify(feedback, null, 4)}
+    </Box>
+  );
+};
diff --git a/editor.planx.uk/src/routes/feedback.tsx b/editor.planx.uk/src/routes/feedback.tsx
new file mode 100644
index 0000000000..078223a994
--- /dev/null
+++ b/editor.planx.uk/src/routes/feedback.tsx
@@ -0,0 +1,73 @@
+import { ComponentType } from "@opensystemslab/planx-core/types";
+import { FeedbackCategory } from "components/Feedback";
+import { Sentiment } from "components/Feedback/MoreInfoFeedback";
+import gql from "graphql-tag";
+import { compose, mount, NotFoundError, route, withData } from "navi";
+import { FeedbackPage } from "pages/FlowEditor/components/Flow/FeedbackPage";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import { client } from "../lib/graphql";
+import { makeTitle } from "./utils";
+
+type FeedbackType = Sentiment & FeedbackCategory;
+
+export interface Feedback {
+  id: number;
+  type: FeedbackType;
+  nodeTitle: string | null;
+  nodeType: keyof typeof ComponentType | null;
+  userComment: string | null;
+  userContext: string | null;
+  createdAt: string;
+}
+
+const feedbackRoutes = compose(
+  withData((req) => ({
+    mountpath: req.mountpath,
+  })),
+
+  mount({
+    "/": route(async (req) => {
+      const { team: teamSlug, flow: flowSlug } = req.params;
+
+      const isAuthorised = useStore.getState().canUserEditTeam(teamSlug);
+      if (!isAuthorised)
+        throw new NotFoundError(
+          `User does not have access to ${req.originalUrl}`,
+        );
+
+      const {
+        data: { feedback },
+      } = await client.query<{ feedback: Feedback[] }>({
+        query: gql`
+          query GetFeebackForFlow($teamSlug: String!, $flowSlug: String!) {
+            feedback: feedback_summary(
+              order_by: { created_at: asc }
+              where: {
+                team_slug: { _eq: $teamSlug }
+                service_slug: { _eq: $flowSlug }
+              }
+            ) {
+              id: feedback_id
+              type: feedback_type
+              nodeTitle: node_title
+              nodeType: node_type
+              userComment: user_comment
+              userContext: user_context
+              createdAt: created_at
+            }
+          }
+        `,
+        variables: { teamSlug, flowSlug },
+      });
+
+      return {
+        title: makeTitle("Flow Feedback"),
+        view: <FeedbackPage feedback={feedback} />,
+      };
+    }),
+  }),
+);
+
+export default feedbackRoutes;
diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx
index 22a797e35c..a21a13446b 100644
--- a/editor.planx.uk/src/routes/flow.tsx
+++ b/editor.planx.uk/src/routes/flow.tsx
@@ -202,6 +202,8 @@ const routes = compose(
       };
     }),
 
+    "/feedback": lazy(() => import("./feedback")),
+
     "/nodes": compose(
       withView((req) => {
         const [flow, ...breadcrumbs] = req.params.flow.split(",");