Add WIP

package.json

@@ -12,7 +12,10 @@
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "survey-analytics": "^1.11.8",
     "survey-core": "^1.11.8",
+    "survey-creator-core": "^1.11.8",
+    "survey-creator-react": "^1.11.8",
     "survey-react-ui": "^1.11.8"
   }
 }

src/app/creator/page.js

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { SurveyCreatorComponent, SurveyCreator } from "survey-creator-react";
+import "survey-core/defaultV2.css";
+import "survey-creator-core/survey-creator-core.css";
+
+export default function Page() {
+  let [creator, setCreator] = useState();
+
+  useEffect(() => {
+    const newCreator = new SurveyCreator({
+      showLogicTab: true,
+      showTranslationTab: true,
+    });
+    setCreator(newCreator);
+  }, []);
+
+  return <div>{creator && <SurveyCreatorComponent creator={creator} />}</div>;
+}

src/app/form/[slug]/page.js

@@ -1,16 +1,13 @@
 "use client";
 
-import { slugify } from "@/utils";
 import { Model } from "survey-core";
 import { Survey } from "survey-react-ui";
 import { surveys } from "@/data";
-
-import styles from "./page.module.css";
+import "survey-core/defaultV2.css";
 
 export default function Page({ params: { slug } }) {
-  const survey = surveys.find((x) => slugify(x.title) == slug);
-
-  const model = new Model(survey);
+  const survey = surveys.find((x) => x.slug === slug);
+  const model = new Model(survey.survey);
 
   return (
     <div>

src/app/page.js

@@ -1,13 +1,15 @@
 import { surveys } from "@/data";
-import styles from "./page.module.css";
 import { SurveyListItem } from "@/components/survey-list-item";
+import Link from "next/link";
+import styles from "./page.module.css";
 
 export default function Home() {
   return (
     <main>
+      <Link href="/creator">Create a new survey</Link>
       <ul>
         {surveys.map((survey) => {
-          return <SurveyListItem key={survey.title} survey={survey} />;
+          return <SurveyListItem key={survey.slug} survey={survey} />;
         })}
       </ul>
     </main>

src/app/results/[slug]/page.js

@@ -0,0 +1,44 @@
+"use client";
+
+import { VisualizationPanel } from "survey-analytics";
+import { Model } from "survey-core";
+import "survey-analytics/survey.analytics.min.css";
+
+import { surveys } from "@/data";
+import { useEffect, useState } from "react";
+
+export default function Page({ params: { slug } }) {
+  const [survey, setSurvey] = useState(null);
+  const [vizPanel, setVizPanel] = useState(null);
+
+  useEffect(() => {
+    const currentSurvey = surveys.find((x) => x.slug == slug);
+    const survey = new Model(currentSurvey.survey);
+    setSurvey(survey);
+
+    const currentPanel = new VisualizationPanel(
+      survey.getAllQuestions(),
+      currentSurvey.results,
+      {
+        allowHideQuestions: false,
+      }
+    );
+    setVizPanel(currentPanel);
+  }, [slug]);
+
+  useEffect(() => {
+    if (vizPanel) {
+      vizPanel.render("surveyVizPanel");
+    }
+
+    return () => {
+      document.getElementById("surveyVizPanel").innerHTML = "";
+    };
+  }, [vizPanel]);
+
+  return (
+    <div>
+      <div id="surveyVizPanel" />
+    </div>
+  );
+}

src/components/survey-list-item.js

@@ -1,12 +1,19 @@
-import { slugify } from "@/utils";
 import Link from "next/link";
 
 export const SurveyListItem = ({ survey }) => {
-  console.log(survey);
   return (
     <div>
-      <p>{survey.title}</p>
-      <Link href={`/form/${slugify(survey.title)}`}>Fill out form</Link>
+      <p>{survey.survey.title}</p>
+      <ul>
+        <li>
+          <Link href={`/form/${survey.slug}`}>Fill out form</Link>
+        </li>
+        {survey.results.length > 0 && (
+          <li>
+            <Link href={`/results/${survey.slug}`}>Results</Link>
+          </li>
+        )}
+      </ul>
     </div>
   );
 };