Skip to content

Commit

Permalink
use client side js (after SSR renders main page data) to show edit bu…
Browse files Browse the repository at this point in the history 
…tton for users if userid from client matches userid of server-rendered studyset
  • Loading branch information
@ehanahamed
ehanahamed committed Nov 20, 2024
1 parent 4e11484 commit 8db0a6f
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 305 deletions.
4 changes: 3 additions & 1 deletion web/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
313 changes: 9 additions & 304 deletions web/views/studyset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 8db0a6f

Please sign in to comment.