feat: add new responses view in results; add csv download feature for responses

lib/events.ts

@@ -0,0 +1,8 @@
+export const getEventName = (eventType: string) => {
+  switch (eventType) {
+    case "pageSubmission":
+      return "Page Submission";
+    default:
+      return eventType;
+  }
+};

lib/submissionSessions.ts

@@ -14,3 +14,45 @@ export const useSubmissionSessions = (formId: string) => {
     mutateSubmissionSessions: mutate,
   };
 };
+
+// fill the schema with the values provided by the user
+export const getSubmission = (submissionSession, schema) => {
+  if (!schema) return {};
+  // create new submission
+  const submission = {
+    id: submissionSession.id,
+    createdAt: submissionSession.createdAt,
+    pages: [],
+  };
+  if (submissionSession.events.length > 0) {
+    // iterate through schema pages to fill submission
+    for (const page of schema.pages) {
+      // new submission page
+      const submissionPage = {
+        name: page.name,
+        type: page.type,
+        elements: page.elements
+          ? JSON.parse(JSON.stringify(page.elements))
+          : [],
+      };
+      // search for elements in schema pages of type "form" and fill their value into the submission
+      if (page.type === "form") {
+        const pageSubmission = submissionSession.events.find(
+          (s) => s.type === "pageSubmission" && s.data?.pageName === page.name
+        );
+        if (typeof pageSubmission !== "undefined") {
+          for (const [elementIdx, element] of page.elements.entries()) {
+            if (element.type !== "submit") {
+              if (element.name in pageSubmission.data?.submission) {
+                submissionPage.elements[elementIdx].value =
+                  pageSubmission.data.submission[element.name];
+              }
+            }
+          }
+        }
+      }
+      submission.pages.push(submissionPage);
+    }
+  }
+  return submission;
+};

lib/types.ts

@@ -52,7 +52,10 @@ export type SchemaOption = {
   value: string;
 };
 
-export type pageSubmissionData = {
+export type pageSubmissionEvent = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
   type: "pageSubmission";
   data: {
     submissionSessionId: string;
@@ -62,15 +65,47 @@ export type pageSubmissionData = {
 };
 
 export type submissionCompletedEvent = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
   type: "submissionCompleted";
   data: { [key: string]: string };
 };
 
-export type updateSchemaEvent = { type: "updateSchema"; data: Schema };
+export type updateSchemaEvent = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  type: "updateSchema";
+  data: Schema;
+};
 
 export type ApiEvent =
-  | pageSubmissionData
+  | pageSubmissionEvent
   | submissionCompletedEvent
   | updateSchemaEvent;
 
 export type WebhookEvent = Event & { formId: string; timestamp: string };
+
+export type SubmissionSession = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  form?: any;
+  userFingerprint: string;
+  events: ApiEvent[];
+};
+
+export type Submission = {
+  id?: string;
+  createdAt?: string;
+  pages?: SubmissionPage[];
+};
+
+type SubmissionPage = {
+  name: string;
+  type: string;
+  elements: SubmissionPageElement[];
+};
+
+type SubmissionPageElement = SchemaElement & { value: string };

lib/utils.ts

@@ -62,7 +62,7 @@ export const convertDateString = (dateString: string) => {
   );
 };
 
-export const convertDateTimeString = (dateString) => {
+export const convertDateTimeString = (dateString: string) => {
   const date = new Date(dateString);
   return intlFormat(
     date,
@@ -79,3 +79,18 @@ export const convertDateTimeString = (dateString) => {
     }
   );
 };
+
+export const convertTimeString = (dateString: string) => {
+  const date = new Date(dateString);
+  return intlFormat(
+    date,
+    {
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+    },
+    {
+      locale: "en",
+    }
+  );
+};