feat: build basic integration with snoop-react to post submissions to snoopHub, modify schema accordingly to support schema and submission, add basic display of submissions

This commit is contained in:
Matthias Nannt
2022-06-09 23:53:26 +09:00
parent 9ca243b8c7
commit 0d671a86d5
20 changed files with 294 additions and 124 deletions
+5 -5
View File
@@ -18,11 +18,11 @@ export default function FormOnboardingModal({
formId,
}: FormOnboardingModalProps) {
const { form, mutateForm, isLoadingForm } = useForm(formId);
const [title, setTitle] = useState(form.title);
const [name, setName] = useState(form.name);
const submitForm = async (e) => {
e.preventDefault();
const updatedForm = { ...form, title, finishedOnboarding: true };
const updatedForm = { ...form, name, finishedOnboarding: true };
await persistForm(updatedForm);
mutateForm(updatedForm);
setOpen(false);
@@ -106,11 +106,11 @@ export default function FormOnboardingModal({
<div className="mt-1">
<input
type="text"
name="title"
name="name"
className="block w-full border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 sm:text-sm"
placeholder="My form"
value={title}
onChange={(e) => setTitle(e.target.value)}
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
+1 -1
View File
@@ -22,7 +22,7 @@ export default function LayoutShare({ title, formId, children }) {
<Head>
<title>{title}</title>
</Head>
<div className="flex h-screen overflow-hidden bg-gray-50">
<div className="flex min-h-screen overflow-hidden bg-gray-50">
<div className="flex flex-col flex-1 overflow-hidden">
<header className="w-full">
<div className="relative z-10 flex flex-shrink-0 h-16 bg-white border-b border-gray-200 shadow-sm">
+1 -1
View File
@@ -7,7 +7,7 @@ export default function MenuBreadcrumbs({ formId }) {
const pages = [
{ name: "Forms", href: "/forms", current: false },
{ name: form.title, href: "#", current: true },
{ name: form.name, href: "#", current: true },
];
if (isLoadingForm) {
+51
View File
@@ -0,0 +1,51 @@
import { useForm } from "../../lib/forms";
import Loading from "../Loading";
export default function Submission({ formId, submissionSession }) {
const { form, mutateForm, isLoadingForm } = useForm(formId);
if (isLoadingForm) {
return <Loading />;
}
// fill the schema with the values provided by the user
const getSubmission = (submissionSession, schema) => {
console.log("schema", JSON.stringify(schema, null, 2));
console.log(
"submissionSession",
JSON.stringify(submissionSession, null, 2)
);
if (!schema) return {};
const submission = { ...schema };
for (const page of submission.pages) {
if (page.type === "form") {
const pageSubmission = submissionSession.submissions.find(
(s) => s.pageName === page.name
);
if (typeof pageSubmission !== "undefined") {
for (const element of page.elements) {
if (element.type !== "submit") {
if (element.name in pageSubmission.data) {
element.value = pageSubmission.data[element.name];
}
}
}
}
}
}
return submission;
};
return (
<div className="bg-white shadow sm:rounded-lg max-w-">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-gray-900 whitespace-pre-wrap">
{JSON.stringify(
getSubmission(submissionSession, form.schema),
null,
2
)}
</h3>
</div>
</div>
);
}