Attempt to at move app into app sub dir

app/web/src/pages/SubjectAccessRequestsPage/SubjectAccessRequestsPage.js

@@ -0,0 +1,164 @@
+import { useState, useEffect } from 'react'
+import SubjectAccessRequestsCell from 'src/components/SubjectAccessRequestsCell'
+import { Flash, useQuery, useMutation, useFlash } from '@redwoodjs/web'
+import { Form, Submit } from '@redwoodjs/forms'
+
+import MainLayout from 'src/layouts/MainLayout'
+import Seo from 'src/components/Seo/Seo'
+import InputTextForm from 'src/components/InputTextForm'
+
+export const QUERY = gql`
+  query SUBJECT_ACCESS_REQUEST($userName: String!) {
+    userName(userName: $userName) {
+      id
+      userName
+      email
+      name
+      createdAt
+      updatedAt
+      image
+      bio
+      Parts {
+        id
+        title
+        description
+        code
+        mainImage
+        createdAt
+        updatedAt
+        deleted
+      }
+      Reaction {
+        id
+        emote
+        part {
+          id
+          title
+        }
+        createdAt
+        updatedAt
+      }
+      Comment {
+        id
+        text
+        part {
+          id
+          title
+        }
+        createdAt
+        updatedAt
+      }
+      SubjectAccessRequest {
+        id
+        comment
+        createdAt
+        updatedAt
+      }
+    }
+  }
+`
+
+const CREATE_SUBJECT_ACCESS_REQUEST_MUTATION = gql`
+  mutation CreateSubjectAccessRequestMutation(
+    $input: CreateSubjectAccessRequestInput!
+  ) {
+    createSubjectAccessRequest(input: $input) {
+      id
+      comment
+      payload
+      userId
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+const SubjectAccessRequestPage = () => {
+  const { addMessage } = useFlash()
+  const [input, setInput] = useState({})
+  const { data } = useQuery(QUERY, {
+    skip: !input.userName,
+    variables: { userName: input.userName },
+  })
+  const onSubmit = (input) => {
+    setInput(input)
+  }
+  const stringData = JSON.stringify(data?.userName)
+  const [createSubjectAccessRequest] = useMutation(
+    CREATE_SUBJECT_ACCESS_REQUEST_MUTATION,
+    {
+      onCompleted: () => {
+        addMessage('SubjectAccessRequest created.', {
+          classes: 'rw-flash-success',
+        })
+      },
+    }
+  )
+  useEffect(() => {
+    if (stringData) {
+      createSubjectAccessRequest({
+        variables: {
+          input: {
+            comment: input?.comment,
+            payload: stringData,
+            userId: data?.userName?.id,
+          },
+        },
+      })
+    }
+  }, [stringData])
+  return (
+    <MainLayout>
+      <Seo
+        title={'Subject Access Request'}
+        description="Code of Conduct"
+        lang="en-US"
+      />
+      <section className="max-w-6xl mx-auto mt-20">
+        <SubjectAccessRequestsCell />
+        Here to fulfill a user's right to portability, before running this
+        please check that the query in
+        "pages/SubjectAccessRequestPage/SubjectAccessRequestPage.js" is
+        up-to-date.
+        <Form onSubmit={onSubmit}>
+          <div
+            className="grid items-center gap-2"
+            style={{ gridTemplateColumns: 'auto 1fr' }}
+          >
+            <span className="capitalize text-gray-500 text-sm align-middle my-3">
+              userName:
+            </span>
+            <InputTextForm
+              className="text-xl"
+              name="userName"
+              validation={{
+                required: true,
+              }}
+            />
+            <div />
+            <div className="mt-10">
+              Please add how they made the request, who is fulling it (who you
+              are) and any other details
+            </div>
+            <span className="capitalize text-gray-500 text-sm align-middle my-3">
+              comment:
+            </span>
+            <InputTextForm
+              className="text-xl"
+              name="comment"
+              validation={{
+                required: true,
+              }}
+            />
+          </div>
+          <Submit className="bg-indigo-200 text-indigo-800 p-2 px-4 shadow hover:shadow-lg mt-4 rounded">
+            Submit
+          </Submit>
+        </Form>
+        <pre className="whitespace-pre-wrap">{stringData}</pre>
+      </section>
+    </MainLayout>
+  )
+}
+
+export default SubjectAccessRequestPage