From 0e7c18e088216469d00c044aa98eb569b0be2304 Mon Sep 17 00:00:00 2001 From: Anthony Debucquoy Date: Wed, 6 Mar 2024 21:38:09 +0100 Subject: [PATCH] Base for rest api utilisation (#53) The restConsumer will be the base, then I will create a js file per "object" (for instance there will be users.js with all endpoints for users using the restConsumer.js) Reviewed-on: https://git.herisson.ovh/PGL/Clyde/pulls/53 Reviewed-by: Wal Reviewed-by: Maxime <231026@umons.ac.be> Co-authored-by: Anthony Debucquoy Co-committed-by: Anthony Debucquoy --- frontend/src/i18n.js | 18 ++----------- frontend/src/login.js | 1 + frontend/src/rest/restConsumer.js | 45 +++++++++++++++++++++++++++++++ frontend/src/utils.js | 17 ++++++++++++ 4 files changed, 65 insertions(+), 16 deletions(-) create mode 100644 frontend/src/rest/restConsumer.js create mode 100644 frontend/src/utils.js diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js index 17fdbce..eaf2dac 100644 --- a/frontend/src/i18n.js +++ b/frontend/src/i18n.js @@ -9,6 +9,8 @@ * */ +import { getCookie } from './utils.js'; + const default_lang = "EN"; let langs; @@ -36,22 +38,6 @@ export default function i18n(key, options) { // Those functions are utility functions use by previous exported functions. // -/** - * Return the content of a cookie with specified key - * @param key cookie name - */ -function getCookie(key){ - key = key + "=" - let cookies = decodeURIComponent(document.cookie).split(";"); - for (let el of cookies) { - el = el.trimStart(); - if(el.indexOf(key) == 0){ - return el.substr(key.length, el.length); - } - } - return ""; -} - /** * Function that load the file with translation from the specified lang and return a dictionnary * @param select the language to load. could be null to fetch the cookies for an answer diff --git a/frontend/src/login.js b/frontend/src/login.js index 3ca2456..5e4180d 100644 --- a/frontend/src/login.js +++ b/frontend/src/login.js @@ -1,4 +1,5 @@ import './assets/main.css' +import 'vue3-toastify/dist/index.css'; import { createApp } from 'vue' import App from './Login.vue' diff --git a/frontend/src/rest/restConsumer.js b/frontend/src/rest/restConsumer.js new file mode 100644 index 0000000..25729bd --- /dev/null +++ b/frontend/src/rest/restConsumer.js @@ -0,0 +1,45 @@ +import { getCookie } from '../utils.js' +import { toast } from 'vue3-toastify' + +const restURL = import.meta.env.PROD ? "https://clyde.herisson.ovh/api" : "http://localhost:8080" + +export async function restGet(endPoint) { + return await _rest(endPoint, {method: "GET"}); +} + +export async function restPost(endPoint, data) { + return await _rest(endPoint, {method: "POST", body: data}); +} + +export async function restDelete(endPoint, data) { + return await _rest(endPoint, {method: "DELETE", body: data}); +} + +export async function restPatch(endPoint, data) { + return await _rest(endPoint, {method: "PATCH", body: data}); +} + +/** + * backbone for the request made by the frontend + * + * specification + * - If the user has "session_token" cookie set, it will use it in the authorization field of the http request + * - The result will be returned as a json to access fields easily ( the backend should send json response ) + * + * @Example _rest("/ping", {user: data}) -> {id:0, txt:"pong"} + */ +async function _rest(endPoint, config){ + endPoint.at(0) != "/" ? console.error("Carefull, you certainly should put a / at the begenning of your endPoint ") : true; + let session_token = getCookie("session_token"); + let headers = new Headers({'Authorization': session_token}); + config['headers'] = headers; + return toast.promise(fetch(restURL + endPoint, config), + { + pending: config['pending'] != null ? config['pending'] : 'pending', + error: config['error'] != null ? config['error'] : 'Network Failure...', + success: config['success'] != null ? config['success'] : {render(res){ + return res.ok ? "Success" : "error"; + }}, + }) + .then( e => e.json()).catch( e => e ); +} diff --git a/frontend/src/utils.js b/frontend/src/utils.js new file mode 100644 index 0000000..e79eec4 --- /dev/null +++ b/frontend/src/utils.js @@ -0,0 +1,17 @@ +/** + * Return the content of a cookie with specified key + * @param key cookie name + */ +function getCookie(key){ + key = key + "=" + let cookies = decodeURIComponent(document.cookie).split(";"); + for (let el of cookies) { + el = el.trimStart(); + if(el.indexOf(key) == 0){ + return el.substr(key.length, el.length); + } + } + return ""; +} + +export {getCookie};