Save Button

package.json

@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "survey-core": "latest",
     "survey-react-ui": "latest",
-    "swr": "^2.2.4"
+    "swr": "^2.2.4",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.jsx

@@ -8,6 +8,8 @@ import DialogComp from "./DialogComp/DialogComp";
 import LogoBar from "./MenuBar/LogoBar";
 import StartScreenComp from "./StartScreenComp/StartScreenComp";
 
+import { useShowStartScreen } from "./store/store";
+
 const customColorOptions = {
   keyColor: "#3a3a3a",
   numberColor: "blue",
@@ -18,37 +20,38 @@ const customColorOptions = {
 };
 
 function App() {
-  const [showStartScreen, setShowStartScreen] = useState(true);
+  const [saveSurvey, setSaveSurvey] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [result, setResult] = useState(null);
   const [surveyReset, setSurveyReset] = useState(false);
   const [templateURL, setTemplateURL] = useState("");
 
-  console.log("App: reset", surveyReset);
+  const startScreen = useShowStartScreen();
 
+  const saveResults = (val) => {
+    console.log(val);
+  };
+  console.log("RESULT", result);
   // setTimeout(() => {
   //   setSurveyReset(false);
   // }, 0);
 
   return (
     <>
-      {showStartScreen ? (
+      {startScreen ? (
         <StartScreenComp
-          setShowStartScreen={setShowStartScreen}
           setSurveyReset={setSurveyReset}
           surveyReset={surveyReset}
           setTemplateURL={setTemplateURL}
         />
       ) : (
         <div className="wrapper">
           <div className="headerWrap">
-            <LogoBar
-              startScreen={false}
-              setShowStartScreen={setShowStartScreen}
-            />
+            <LogoBar startScreen={false} />
             <TopMenuBar
               setSurveyReset={setSurveyReset}
               setTemplateURL={setTemplateURL}
+              saveResults={saveResults}
             />
           </div>
           <div className="mainWrap">
@@ -57,6 +60,7 @@ function App() {
               setResult={setResult}
               surveyReset={surveyReset}
               templateURL={templateURL}
+              saveSurvey={saveSurvey}
             />
 
             {showPreview && (

src/DialogComp/DialogComp.tsx

@@ -4,6 +4,8 @@ import { Cross2Icon } from "@radix-ui/react-icons";
 import formatHighlight from "json-format-highlight";
 import ShowPreviewIcon from "../IconsComponents/ShowPreviewIcon";
 
+import { useIntermediateData } from "../store/store";
+
 import "../App.css";
 const customColorOptions = {
   keyColor: "#3a3a3a",
@@ -16,6 +18,7 @@ const customColorOptions = {
 
 const DialogComp = ({ result }) => {
   const [open, setOpen] = React.useState(false);
+  const jsonPreview = useIntermediateData();
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild className="showPreview">
@@ -35,7 +38,9 @@ const DialogComp = ({ result }) => {
             className="modalJson"
             dangerouslySetInnerHTML={{
               __html: formatHighlight(
-                result ? "<pre>\n" + result + "\n</pre>" : "No preview yet",
+                jsonPreview
+                  ? "<pre>\n" + jsonPreview + "\n</pre>"
+                  : "No preview yet",
                 customColorOptions
               ),
             }}

src/IconsComponents/SaveIcon.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function SaveIcon() {
+  return (
+    <svg
+      width="18px"
+      height="18px"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 5.75C3 4.23122 4.23122 3 5.75 3H15.7145C16.5764 3 17.4031 3.34241 18.0126 3.9519L20.0481 5.98744C20.6576 6.59693 21 7.42358 21 8.28553V18.25C21 19.7688 19.7688 21 18.25 21H5.75C4.23122 21 3 19.7688 3 18.25V5.75ZM5.75 4.5C5.05964 4.5 4.5 5.05964 4.5 5.75V18.25C4.5 18.9404 5.05964 19.5 5.75 19.5H6V14.25C6 13.0074 7.00736 12 8.25 12H15.75C16.9926 12 18 13.0074 18 14.25V19.5H18.25C18.9404 19.5 19.5 18.9404 19.5 18.25V8.28553C19.5 7.8214 19.3156 7.37629 18.9874 7.0481L16.9519 5.01256C16.6918 4.75246 16.3582 4.58269 16 4.52344V7.25C16 8.49264 14.9926 9.5 13.75 9.5H9.25C8.00736 9.5 7 8.49264 7 7.25V4.5H5.75ZM16.5 19.5V14.25C16.5 13.8358 16.1642 13.5 15.75 13.5H8.25C7.83579 13.5 7.5 13.8358 7.5 14.25V19.5H16.5ZM8.5 4.5V7.25C8.5 7.66421 8.83579 8 9.25 8H13.75C14.1642 8 14.5 7.66421 14.5 7.25V4.5H8.5Z"
+        fill="#212121"
+      />
+    </svg>
+  );
+}

src/MenuBar/Header.css

@@ -45,3 +45,8 @@
   gap: 10px;
   padding: 0.4rem 1.5rem;
 }
+
+.uuid {
+  font-size: small;
+  font-weight: 700;
+}

src/MenuBar/LogoBar.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import "./Header.css";
 
-export default function LogoBar({ startScreen, setShowStartScreen }) {
+import { useSetShowStartScreen } from "../store/store";
+
+export default function LogoBar({ startScreen }) {
+  const setStartScreen = useSetShowStartScreen();
   return (
     <div className={startScreen ? "headerStartScreen" : "header"}>
       <h1
         className={startScreen ? "logoWrapStartScreen" : "logoWrap"}
-        onClick={() => setShowStartScreen(true)}
+        onClick={() => setStartScreen()}
       >
         Template Designer{" "}
         <span className="slogan">

src/MenuBar/TopMenuBar.tsx

@@ -4,20 +4,29 @@ import Button from "../ui/Button";
 import MakeCopyDialog from "../DialogComp/MakeCopyDialog";
 import OpenFileDialog from "../DialogComp/OpenFileDialog";
 import "./Header.css";
+import { useUuid, useSetSaveOnServer } from "../store/store";
 
 export default function TopMenuBar({
   setSurveyReset,
   surveyReset,
   setTemplateURL,
+  saveResults,
 }) {
+  const uuid = useUuid();
+  const save = useSetSaveOnServer();
   return (
     <div className="topMenuBar">
-      <div onClick={() => setSurveyReset(!surveyReset)}>
-        <Button label="New" />
+      <div onClick={() => save()}>
+        <Button label="Save" />
       </div>
-      <OpenFileDialog setTemplateURL={setTemplateURL} />
+      {/* <OpenFileDialog setTemplateURL={setTemplateURL} />
       <MakeCopyDialog />
-      <Button label="Publish" />
+      <Button label="Publish" /> */}
+      {uuid && (
+        <p>
+          <span className="uuid">UUID:</span> {uuid}
+        </p>
+      )}
     </div>
   );
 }

src/StartScreenComp/BluePrintsTable.tsx

@@ -1,9 +1,14 @@
 // @ts-nocheck
 import React from "react";
 
+import { useSetUuid, useUuid } from "../store/store";
+
 import "./StartScreenComp.css";
 
-export default function BluePrintsTable({ data, setUUID, UUID, value, mode }) {
+export default function BluePrintsTable({ data, value, mode }) {
+  const setUUID = useSetUuid();
+  const UUID = useUuid();
+
   return (
     <div className="tableFixHead">
       <table>
@@ -35,8 +40,10 @@ export default function BluePrintsTable({ data, setUUID, UUID, value, mode }) {
                   return (
                     <tr
                       key={item.uuid}
-                      onClick={() => setUUID(item.uuid)}
-                      className={item.uuid == UUID && "choosen"}
+                      onClick={() => {
+                        setUUID(item.uuid);
+                      }}
+                      className={item.uuid == UUID ? "choosen" : ""}
                     >
                       <td>{item.EXPERIMENT}</td>
                       <td>{item.template_author}</td>

src/StartScreenComp/StartScreenComp.tsx

@@ -6,6 +6,7 @@ import BluePrintsTable from "./BluePrintsTable";
 
 import useSWR from "swr";
 import { fetcher } from "../lib/fetcher";
+import { useUuid, useSetUuid, useSetShowStartScreen } from "../store/store";
 
 import "./StartScreenComp.css";
 
@@ -17,9 +18,13 @@ export default function StartScreenComp({
 }) {
   const [value, setValue] = useState("");
   const [mode, setMode] = useState("Finalized");
-  const [UUID, setUUID] = useState(null);
+  // const [UUID, setUUID] = useState(null);
   const [copied, setCopied] = useState(false);
 
+  const UUID = useUuid();
+  const setUUID = useSetUuid();
+  const setStartScreen = useSetShowStartScreen();
+
   const { data } = useSWR(
     "https://api.ramanchada.ideaconsult.net/template",
     fetcher
@@ -54,7 +59,8 @@ export default function StartScreenComp({
   const editORView = () => {
     if (mode == "Draft" && UUID) {
       setTemplateURL(`https://api.ramanchada.ideaconsult.net/template/${UUID}`);
-      setShowStartScreen(false);
+      // setShowStartScreen(false);
+      setStartScreen();
     }
   };
 
@@ -67,6 +73,7 @@ export default function StartScreenComp({
         The Template Designer App is under development right now.
       </p>
       <LogoBar startScreen={true} />
+
       <div className="descriptionNew">
         <p className="description">
           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione
@@ -78,8 +85,10 @@ export default function StartScreenComp({
         <button
           className="createNewBtn"
           onClick={() => {
-            setShowStartScreen(false);
+            // setShowStartScreen(false);
+            setStartScreen();
             setSurveyReset(true);
+            setUUID("");
           }}
         >
           Create a new Draft
@@ -111,8 +120,8 @@ export default function StartScreenComp({
           />
           <BluePrintsTable
             data={data}
-            setUUID={setUUID}
-            UUID={UUID}
+            // setUUID={setUUID}
+            // UUID={UUID}
             value={value}
             mode={mode}
           />