pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fetch wrapper

Browse Source
This commit is contained in:
shibafu
2020-08-06 02:26:51 +09:00
parent 081dd8da28
commit 422891e237
4 changed files with 106 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
resources/assets/js/fetch.ts Normal file
View File

@@ -0,0 +1,57 @@
import { stringify } from 'qs';
const token = document.head.querySelector<HTMLMetaElement>('meta[name="csrf-token"]');
if (!token) {
console.error('CSRF token not found');
}
const headers = {
'X-CSRF-TOKEN': token?.content ?? '',
};
type QueryParams = { [key: string]: string };
const joinParamsToPath = (path: string, params: QueryParams) =>
Object.keys(params).length === 0 ? path : `${path}?${stringify(params)}`;
const fetchWrapper = (path: string, options: RequestInit = {}) =>
fetch(path, {
credentials: 'same-origin',
headers,
...options,
});
const fetchWithJson = (path: string, body: any, options: RequestInit = {}) =>
fetchWrapper(path, {
body: JSON.stringify(body),
headers: { 'Content-Type': 'application/json' },
...options,
});
const fetchWithForm = (path: string, body: any, options: RequestInit = {}) =>
fetchWrapper(path, {
body: stringify(body),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
...options,
});
export const fetchGet = (path: string, params: QueryParams = {}, options: RequestInit = {}) =>
fetchWrapper(joinParamsToPath(path, params), { method: 'GET', ...options });
export const fetchPostJson = (path: string, body: any, options: RequestInit = {}) =>
fetchWithJson(path, body, { method: 'POST', ...options });
export const fetchPostForm = (path: string, body: any, options: RequestInit = {}) =>
fetchWithForm(path, body, { method: 'POST', ...options });
export const fetchPutJson = (path: string, body: any, options: RequestInit = {}) =>
fetchWithJson(path, body, { method: 'PUT', ...options });
export const fetchPutForm = (path: string, body: any, options: RequestInit = {}) =>
fetchWithForm(path, body, { method: 'PUT', ...options });
export const fetchDeleteJson = (path: string, body: any, options: RequestInit = {}) =>
fetchWithJson(path, body, { method: 'DELETE', ...options });
export const fetchDeleteForm = (path: string, body: any, options: RequestInit = {}) =>
fetchWithForm(path, body, { method: 'DELETE', ...options });

69
resources/assets/js/tissue.ts
View File

@@ -1,3 +1,5 @@
import { fetchGet } from './fetch';
(function ($) {
$.fn.linkCard = function (options) {
const settings = $.extend(
@@ -9,43 +11,44 @@
return this.each(function () {
const $this = $(this);
$.ajax({
url: settings.endpoint,
method: 'get',
type: 'json',
data: {
url: $this.find('a').attr('href'),
},
}).then(function (data) {
const $metaColumn = $this.find('.col-12:last-of-type');
const $imageColumn = $this.find('.col-12:first-of-type');
const $title = $this.find('.card-title');
const $desc = $this.find('.card-text');
const $image = $imageColumn.find('img');
if (data.title === '') {
$title.hide();
} else {
$title.text(data.title);
}
const url = $this.find('a').attr('href');
if (!url) {
return;
}
if (data.description === '') {
$desc.hide();
} else {
$desc.text(data.description);
}
fetchGet(settings.endpoint, { url })
.then((response) => response.json())
.then((data) => {
const $metaColumn = $this.find('.col-12:last-of-type');
const $imageColumn = $this.find('.col-12:first-of-type');
const $title = $this.find('.card-title');
const $desc = $this.find('.card-text');
const $image = $imageColumn.find('img');
if (data.image === '') {
$imageColumn.hide();
$metaColumn.removeClass('col-md-6');
} else {
$image.attr('src', data.image);
}
if (data.title === '') {
$title.hide();
} else {
$title.text(data.title);
}
if (data.title !== '' || data.description !== '' || data.image !== '') {
$this.removeClass('d-none');
}
});
if (data.description === '') {
$desc.hide();
} else {
$desc.text(data.description);
}
if (data.image === '') {
$imageColumn.hide();
$metaColumn.removeClass('col-md-6');
} else {
$image.attr('src', data.image);
}
if (data.title !== '' || data.description !== '' || data.image !== '') {
$this.removeClass('d-none');
}
});
});
};