From 8db0a6f7a8016abd08b7a8ba47ff7a3f847d9ecf Mon Sep 17 00:00:00 2001
From: Ehan <ehanahamed@ehan.dev>
Date: Fri, 16 Aug 2024 11:05:35 -0400
Subject: [PATCH] use client side js (after SSR renders main page data) to show
 edit button for users if userid from client matches userid of server-rendered
 studyset

---
 web/index.js            |   4 +-
 web/views/studyset.html | 313 ++--------------------------------------
 2 files changed, 12 insertions(+), 305 deletions(-)

diff --git a/web/index.js b/web/index.js
index bdd41f9d..32a1dc33 100644
--- a/web/index.js
+++ b/web/index.js
@@ -210,7 +210,9 @@ fastify.get("/studysets/:studyset", function (request, reply) {
         reply.view("studyset.html", {
           ...themeData(request),
           studyset: result.data[0],
-          profile: profile
+          profile: profile,
+          apiUrl: apiUrl,
+          apiPublicKey: apiPublicKey
         })
       })
     } else {
diff --git a/web/views/studyset.html b/web/views/studyset.html
index 41e1f000..46bc0705 100644
--- a/web/views/studyset.html
+++ b/web/views/studyset.html
@@ -266,312 +266,17 @@ <h2>Edit</h2>
       </div>
     </main>
     <eta>~ include("./partials/footer") </eta>
+    <script src="/assets/js/supabase.min.js"></script>
     <script>
-      function loadDashboard() {
-        supabaseClient.auth.getUser().then(function (result) {
-          userId = result.data.user.id;
-        });
-        supabaseClient
-          .from("studyset")
-          .select()
-          .then(function (result) {
-            studysetlist = result.data;
-            if (studysetlist.length === 0) {
-              var box = document.createElement("div");
-              box.setAttribute("class", "box");
-              box.setAttribute("id", "mainDashboardUserStudysetlistEmpty");
-              document
-                .getElementById("mainDashboardUserStudysetlistdiv")
-                .appendChild(box);
-              document.getElementById(
-                "mainDashboardUserStudysetlistEmpty",
-              ).innerHTML = "<p>No study sets are saved to your account.</p>";
-            } else {
-              for (var i = 0; i < studysetlist.length; i++) {
-                /* the html structure below needs to be copied to reference 11 when changed */
-                var box = document.createElement("div");
-                box.setAttribute("class", "box");
-                box.setAttribute(
-                  "id",
-                  "mainDashboardUserStudysetlist" + i.toString(),
-                );
-                document
-                  .getElementById("mainDashboardUserStudysetlistdiv")
-                  .appendChild(box);
-                document.getElementById(
-                  "mainDashboardUserStudysetlist" + i.toString(),
-                ).innerHTML =
-                  "<p>" +
-                  studysetlist[i].name +
-                  "</p> <div class='flex'> <button id='mainDashboardUserStudysetlist" +
-                  i.toString() +
-                  "Openbutton'> Open </button> <button id='mainDashboardUserStudysetlist" +
-                  i.toString() +
-                  "Deletebutton' class='red'> Delete </button>";
-                document
-                  .getElementById(
-                    "mainDashboardUserStudysetlist" +
-                      i.toString() +
-                      "Openbutton",
-                  )
-                  .addEventListener("click", function (event) {
-                    sessionData.studySetData =
-                      /* studysetlist.ID.json */
-                      /* to get the selected ID, take event.target.id and remove the extra text like "mainDashboard..." and "Openbutton..." */
-                      studysetlist[
-                        event.target.id
-                          .replace("mainDashboardUserStudysetlist", "")
-                          .replace("Openbutton", "")
-                      ].json;
-                    studySet.open();
-                    document
-                      .getElementById("mainActionsSave")
-                      .classList.add("hide");
-                  });
-                document
-                  .getElementById(
-                    "mainDashboardUserStudysetlist" +
-                      i.toString() +
-                      "Deletebutton",
-                  )
-                  .addEventListener("click", function (event) {
-                    var thisId =
-                      studysetlist[
-                        event.target.id
-                          .replace("mainDashboardUserStudysetlist", "")
-                          .replace("Deletebutton", "")
-                      ].id;
-                    supabaseClient
-                      .from("studyset")
-                      .select()
-                      .eq("id", thisId)
-                      .then(function (result) {
-                        var thisName = result.data[0].name;
-                        supabaseClient
-                          .from("explore")
-                          .delete()
-                          .eq("user_id", userId)
-                          .eq("name", thisName)
-                          .then(function () {
-                            /*
-                            here we delete from studyset table
-                            AFTER we delete from explore
-                            (which is why this is in a .then())
-
-                            because we need to get the name from studyset table
-                            to be able to delete from explore table
-                            if we delete from studyset first, we cant delete from explore anymore
-                          */
-                            supabaseClient
-                              .from("studyset")
-                              .delete()
-                              .eq("id", thisId)
-                              .then(function () {
-                                /* remove self (and parent) from ui list */
-                                /* needs to change when structure changes (reference 11) */
-                                event.target.parentElement.parentElement.remove();
-                              });
-                          });
-                      });
-                  });
-              }
-            }
-          });
-      }
-
-      function saveEditedStudySet() {
-        if (states.current.isNewUser === false) {
-          supabaseClient
-            .from("studyset")
-            .insert({
-              user_id: userId,
-              name: sessionData.studySetData.name,
-              json: sessionData.studySetData,
-            })
-            .then(function (result) {
-              if (result.status === 201) {
-                document
-                  .getElementById(ui.elements.open.saveDone)
-                  .classList.remove("hide");
-                document
-                  .getElementById(ui.elements.open.save)
-                  .classList.add("hide");
-                document
-                  .getElementById("mainSaveClouderror")
-                  .classList.add("hide");
-              } else if (result.status !== 201) {
-                document
-                  .getElementById(ui.elements.open.saveDone)
-                  .classList.add("hide");
-                document
-                  .getElementById("mainSaveClouderror")
-                  .classList.remove("hide");
-              }
-            });
-          if (sessionData.studySetData.settings.public === true) {
-            getNickname(function (nickname) {
-              supabaseClient
-                .from("explore")
-                .insert({
-                  user_id: userId,
-                  user_nickname: nickname,
-                  name: sessionData.studySetData.name,
-                  json: sessionData.studySetData,
-                })
-                .then();
-            });
-          } else {
-            /* if its not public in settings, but the set is in explore from a previous save, delete it from explore */
-            supabaseClient
-              .from("explore")
-              .delete()
-              .eq("user_id", userId)
-              .eq("name", sessionData.studySetData.name)
-              .then();
-          }
-        } else if (states.current.isNewUser === true) {
-          alert(
-            "work in progress, states.current.isNewUser is true (20230908224800)",
-          );
+      var sb = supabase.createClient(
+        "<eta>= data.apiUrl </eta>",
+        "<eta>= data.apiPublicKey </eta>"
+      )
+      sb.auth.getSession().then(function (result) {
+        if (result.error == null && result.data.session.user.id == "<eta>= data.studyset.user_id </eta>") {
+          document.getElementById("edit-button").classList.remove("hide");
         }
-      }
-    </script>
-    <script src="./js/states.js"></script>
-    <script>
-      var ui = {
-        elements: {
-          sections: {
-            dashboard: "mainDashboarddiv",
-            open: "mainOpendiv",
-            edit: "mainEditdiv",
-            /* flashcards: document.getElementById("sectionFlashcards"), */
-          },
-          buttons: {
-            create: "mainDashboardCreate",
-            importOptions: "buttonImportOptions",
-          },
-          inputs: {
-            importLocal: {
-              file: "inputImportLocalFile",
-            },
-            edit: {
-              name: "mainEditName",
-              table: "mainEditTable",
-            },
-          },
-          links: {
-            exportLocal: {
-              newUserDownload: "mainOpenActionsSaveNewuserExportLocalDownload",
-              userDownload: "mainOpenActionsSaveUserExportLocalDownload",
-            },
-          },
-          alerts: {
-            successImport: "alertSuccessImport",
-            errorImport: "alertErrorImport",
-            flashcardsEnd: "alertFlashcardsEnd",
-          },
-          open: {
-            save: "mainActionsSave",
-            saveDone: "mainOpenSavedone",
-          },
-          edit: {
-            table: "mainEditTable",
-            settings: {
-              public: {
-                true: "publicTrue",
-                false: "publicFalse",
-              },
-            },
-            studySetIsCopy: "mainEditStudySetIsCopy",
-            studySetIsCopyButtons: {
-              update: "mainEditStudySetIsCopyUpdate",
-              back: "mainEditStudySetIsCopyBack",
-            },
-          },
-          flashcards: {
-            card: "flashcardsCard",
-            content: "flashcardsContent",
-            front: "flashcardsFront",
-            back: "flashcardsBack",
-          },
-          importOther: {
-            button: "mainDashboardImportotherImportbutton",
-            data: "mainDashboardImportotherData",
-            termDelimiter: "mainDashboardImportotherTermdelimiter",
-            rowDelimiter: "mainDashboardImportotherRowdelimiter",
-          },
-          activities: {
-            host: "mainOpenActivitylistHost",
-          },
-          states: {
-            newUser: [
-              "mainDashboardNewuserdiv",
-              "mainOpenActionsSaveNewuserdiv",
-            ],
-            user: [
-              "mainDashboardUserdiv",
-              "mainOpenActionsSaveUserdiv",
-              "mainEditSettingsPublic",
-            ],
-            setIsMine: ["mainOpenEditbutton", "mainOpenBottomEditbutton"],
-            setIsNotMine: ["mainOpenBottomCopybutton", "mainOpenCreator"],
-            setIsLarge: ["mainOpenBottomdiv"],
-          },
-        },
-        states: {
-          newUser: function (isNewUser) {
-            if (isNewUser === false) {
-              loadDashboard();
-            }
-          },
-        },
-      };
-    </script>
-    <script src="https://ehui.ehan.dev/js/ehUi.js"></script>
-    <script src="./js/sections.js"></script>
-    <script src="./js/buttons.js"></script>
-    <script src="./js/studySet.js"></script>
-    <script src="./js/sessionData.js"></script>
-    <script src="./js/importLocal.js"></script>
-    <script src="./js/edit.js"></script>
-    <script src="./js/exportLocal.js"></script>
-    <script src="./js/flashcards.js"></script>
-    <script src="./pocketbase/pocketbase.umd.js"></script>
-    <script src="./js/pocketbase.js"></script>
-    <script src="./js/exploreToDashboard.js"></script>
-    <script src="./js/importOther.js"></script>
-    <script>
-      /* functionality of studySetIsCopy buttons below */
-      document
-        .getElementById(ui.elements.edit.studySetIsCopyButtons.update)
-        .addEventListener("click", function () {
-          /* updateStudySet() & isStudySetCopy() are in js/supabase.js */
-          updateStudySet();
-          studySet.open();
-          document
-            .getElementById(ui.elements.edit.studySetIsCopy)
-            .classList.add("hide");
-        });
-      document
-        .getElementById(ui.elements.edit.studySetIsCopyButtons.back)
-        .addEventListener("click", function () {
-          document
-            .getElementById(ui.elements.edit.studySetIsCopy)
-            .classList.add("hide");
-        });
-      /*
-    Make download button also hide the modal when clicked (just like save to acc button)
-    */
-      document
-        .getElementById(ui.elements.links.exportLocal.newUserDownload)
-        .addEventListener("click", function () {
-          document.getElementById(ui.elements.open.save).classList.add("hide");
-        });
-      document
-        .getElementById(ui.elements.links.exportLocal.userDownload)
-        .addEventListener("click", function () {
-          document.getElementById(ui.elements.open.save).classList.add("hide");
-        });
+      })
     </script>
   </body>
 </html>