Fix API base URL + phase 2 of removing /search

This commit is contained in:
Elias Schriefer
2024-07-08 22:09:02 +02:00
parent ba973ca4c8
commit e190d3b84a
5 changed files with 22 additions and 20 deletions

View File

@@ -1,4 +1,5 @@
import Dataset from "./dataset.js"; import Dataset from "./dataset.js";
import { CATEGORIES_ENDPOINT, DATASETS_ENDPOINT } from "./constants.js";
const form = document.forms[0]; const form = document.forms[0];
const { const {
@@ -69,7 +70,7 @@ changeCategoryBtn.addEventListener("click", e => {
validationListener(); validationListener();
}); });
let categoriesResponse = await fetch(`${location.origin}/api/v1/categories`); let categoriesResponse = await fetch(CATEGORIES_ENDPOINT);
let categories = []; let categories = [];
if (!categoriesResponse.ok) { if (!categoriesResponse.ok) {
console.warn("Could not load categories!"); console.warn("Could not load categories!");
@@ -102,7 +103,7 @@ form.addEventListener("submit", async e => {
if (!categories.map(c => c.name).includes(newCategoryName)) { if (!categories.map(c => c.name).includes(newCategoryName)) {
// Try to add the new category // Try to add the new category
const newCategoryResponse = await fetch(`/api/v1/categories`, { const newCategoryResponse = await fetch(CATEGORIES_ENDPOINT, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json;charset=utf-8" }, headers: { "Content-Type": "application/json;charset=utf-8" },
body: JSON.stringify({ name: newCategoryName }), body: JSON.stringify({ name: newCategoryName }),
@@ -139,7 +140,7 @@ form.addEventListener("submit", async e => {
// Don't allow several requests to be sent at the same time // Don't allow several requests to be sent at the same time
addBtn.disabled = true; addBtn.disabled = true;
let response = await fetch("/api/v1/datasets", { let response = await fetch(DATASETS_ENDPOINT, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json;charset=utf-8" }, headers: { "Content-Type": "application/json;charset=utf-8" },
body: JSON.stringify(newContent), body: JSON.stringify(newContent),
@@ -150,7 +151,7 @@ form.addEventListener("submit", async e => {
dataset.storageSetKey("created-locally", true); dataset.storageSetKey("created-locally", true);
if (response.ok) { if (response.ok) {
location.assign("/"); location.assign("..");
} else { } else {
addBtn.disabled = !form.checkValidity(); addBtn.disabled = !form.checkValidity();
} }

View File

@@ -1,2 +1,2 @@
export const DATASET_ENDPOINT = "/api/v1/datasets"; export const DATASETS_ENDPOINT = "api/v1/datasets";
export const getBaseURL = () => location.origin; export const CATEGORIES_ENDPOINT = "api/v1/categories";

View File

@@ -1,4 +1,4 @@
import { DATASET_ENDPOINT, getBaseURL } from "./constants.js"; import { DATASETS_ENDPOINT } from "./constants.js";
export default class Dataset { export default class Dataset {
static #datasets = new Map(); static #datasets = new Map();
@@ -124,7 +124,7 @@ export default class Dataset {
datasetContainer.dataset.id = this.#id; datasetContainer.dataset.id = this.#id;
datasetContainer.addEventListener("click", event => { datasetContainer.addEventListener("click", event => {
if (!event.target.classList.contains("btn")) { if (!event.target.classList.contains("btn")) {
let detailsPage = new URL("/details.html", location.origin); let detailsPage = new URL("details.html", location.href);
detailsPage.searchParams.append("id", this.#id); detailsPage.searchParams.append("id", this.#id);
window.location.href = detailsPage.toString(); window.location.href = detailsPage.toString();
} }
@@ -182,8 +182,8 @@ export default class Dataset {
async vote(up = true) { async vote(up = true) {
const fetchURL = new URL( const fetchURL = new URL(
`${DATASET_ENDPOINT}/id/${this.#id}/${up ? "up" : "down"}vote`, `${DATASETS_ENDPOINT}/id/${this.#id}/${up ? "up" : "down"}vote`,
getBaseURL(), location.href,
); );
const response = await fetch(fetchURL, { const response = await fetch(fetchURL, {

View File

@@ -1,3 +1,4 @@
import { DATASETS_ENDPOINT } from "./constants.js";
import Dataset from "./dataset.js"; import Dataset from "./dataset.js";
const mainPage = document.getElementById("details"); const mainPage = document.getElementById("details");
@@ -22,7 +23,7 @@ let currentRating = 0;
const currentLocation = new URL(location.href); const currentLocation = new URL(location.href);
if (currentLocation.searchParams.has("id")) { if (currentLocation.searchParams.has("id")) {
const id = currentLocation.searchParams.get("id"); const id = currentLocation.searchParams.get("id");
const response = await fetch(`/api/v1/datasets/id/${id}`); const response = await fetch(`${DATASETS_ENDPOINT}/id/${id}`);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
@@ -72,7 +73,7 @@ backButton.addEventListener("click", () => {
deleteButton.addEventListener("click", async () => { deleteButton.addEventListener("click", async () => {
if (dataset != null) { if (dataset != null) {
const response = await fetch( const response = await fetch(
`/api/v1/datasets/id/${dataset.id}`, `${DATASETS_ENDPOINT}/id/${dataset.id}`,
{ method: 'DELETE' } { method: 'DELETE' }
); );
@@ -99,13 +100,13 @@ rating.addEventListener("mouseleave", () => {
rating.addEventListener("click", async () => { rating.addEventListener("click", async () => {
if (!dataset.storageGetKey("is-rated", false)) { if (!dataset.storageGetKey("is-rated", false)) {
const starsResponse = await fetch( const starsResponse = await fetch(
`/api/v1/datasets/id/${dataset.id}/stars?stars=${currentRating}`, `${DATASETS_ENDPOINT}/id/${dataset.id}/stars?stars=${currentRating}`,
{ method: 'PUT' } { method: 'PUT' }
); );
if (starsResponse.ok) { if (starsResponse.ok) {
dataset.storageSetKey("is-rated", true); dataset.storageSetKey("is-rated", true);
const response = await fetch(`/api/v1/datasets/id/${dataset.id}`); const response = await fetch(`${DATASETS_ENDPOINT}/id/${dataset.id}`);
const data = await response.json(); const data = await response.json();
dataset = new Dataset(data); dataset = new Dataset(data);

View File

@@ -1,4 +1,4 @@
import { DATASET_ENDPOINT, getBaseURL } from "./constants.js" import { DATASETS_ENDPOINT, CATEGORIES_ENDPOINT } from "./constants.js"
import { fetchQuery } from "./contentUtility.js"; import { fetchQuery } from "./contentUtility.js";
import Dataset from "./dataset.js"; import Dataset from "./dataset.js";
@@ -25,7 +25,7 @@ export let searchBarTimeout;
const searchDelay = 500; const searchDelay = 500;
// Event listeners // Event listeners
addButton.addEventListener("click", () => location.assign("/add.html")); addButton.addEventListener("click", () => location.assign("add.html"));
filterButton.addEventListener("change", () => fetchQuery(createQuery(), true)); filterButton.addEventListener("change", () => fetchQuery(createQuery(), true));
filterButton.addEventListener("click", () => fetchCategories()); filterButton.addEventListener("click", () => fetchCategories());
searchButton.addEventListener("click", () => fetchQuery(createQuery(), true)); searchButton.addEventListener("click", () => fetchQuery(createQuery(), true));
@@ -83,7 +83,7 @@ function getSortQuery() {
// creates query for the whole toolbar, so that searching, sorting and filtering are always combined // creates query for the whole toolbar, so that searching, sorting and filtering are always combined
function createQuery() { function createQuery() {
updateSections(); updateSections();
let queryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL()); let queryURL = new URL(DATASETS_ENDPOINT, location.href);
queryURL.searchParams.append("search", getSearchQuery()); queryURL.searchParams.append("search", getSearchQuery());
let filterQuery = getFilterQuery(); let filterQuery = getFilterQuery();
@@ -115,7 +115,7 @@ function updateSections() {
// fetches the further categories used in the filter function // fetches the further categories used in the filter function
function fetchCategories() { function fetchCategories() {
const fetchURL = new URL("api/v1/categories", getBaseURL()); const fetchURL = new URL(CATEGORIES_ENDPOINT, location.href);
fetch(fetchURL) fetch(fetchURL)
.then(resp => resp.json()) .then(resp => resp.json())
.then((data) => { .then((data) => {
@@ -133,7 +133,7 @@ function fetchCategories() {
// fetches entries for the initial page // fetches entries for the initial page
async function fetchInitialEntries() { async function fetchInitialEntries() {
let recentsQueryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL()); let recentsQueryURL = new URL(DATASETS_ENDPOINT, location.href);
recentsQueryURL.searchParams.append("sort", "date"); recentsQueryURL.searchParams.append("sort", "date");
recentsQueryURL.searchParams.append("direction", "desc"); recentsQueryURL.searchParams.append("direction", "desc");
recentsQueryURL.searchParams.append("size", "6"); recentsQueryURL.searchParams.append("size", "6");
@@ -146,7 +146,7 @@ async function fetchInitialEntries() {
document.querySelector("#recents .datasets").appendChild(recentDataset.createDatasetHTMLElement()); document.querySelector("#recents .datasets").appendChild(recentDataset.createDatasetHTMLElement());
} }
let topVotedQueryURL = new URL(DATASET_ENDPOINT + "/search", getBaseURL()); let topVotedQueryURL = new URL(DATASETS_ENDPOINT, location.href);
topVotedQueryURL.searchParams.append("sort", "upvotes"); topVotedQueryURL.searchParams.append("sort", "upvotes");
topVotedQueryURL.searchParams.append("direction", "desc"); topVotedQueryURL.searchParams.append("direction", "desc");
topVotedQueryURL.searchParams.append("size", "1"); topVotedQueryURL.searchParams.append("size", "1");