Skip to content
This repository was archived by the owner on Aug 13, 2023. It is now read-only.

frontend methods to call API endpoints #15

Open
nisten711 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

frontend methods to call API endpoints #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Frontend/src/api/api.constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const BASE_PATH = "http://localhost:44366";

export const EP_GET_HEALTH = "/health";
export const EP_GET_TRASHED_USER_VIDEOS = (userId) =>
`/video/trashed?userId=${userId}`;
export const EP_GET_UNTRASHED_USER_VIDEOS = (userId) =>
`/video/untrashed?userId=${userId}`;
export const EP_PUT_TRASH_USER_VIDEO = (userId, videoId) =>
`/video/trash?videoId=${videoId}`;
export const EP_DELETE_USER_VIDEO = (videoId) => `/video?videoId=${videoId}`;
97 changes: 65 additions & 32 deletions Frontend/src/clients/baseClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,69 @@
import { API_URL_PREFIX } from '../constants';
import { API_URL_PREFIX } from "../constants";

const makeRequest = async (endpoint, method, additional) => {
return fetch(
`${API_URL_PREFIX}${endpoint}`,
{
method,
mode: 'cors',
...(additional !== undefined && { ...additional }),
}
).then(response => {
if (response.ok) {
return response.json().catch(error => {
return {};
});
}
if (typeof response.text === 'function') {
return response.text().then(text => {
return {
'error': text,
'statusCode': response.status,
}
});
}
return {
'error': response.statusText,
'statusCode': response.status,
}
}).then(response => {
return response;
}).catch(error => {
console.log(error);
return fetch(`${API_URL_PREFIX}${endpoint}`, {
Copy link

@zaicevas zaicevas May 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function would probably read better with await and try-catch. An idea - it could take onSuccess and onError callbacks as parameters to make it more reusable

method,
mode: "cors",
...(additional !== undefined && { ...additional }),
})
.then((response) => {
if (response.ok) {
return response.json().catch((error) => {
return {};
});
}
if (typeof response.text === "function") {
return response.text().then((text) => {
Copy link

@zaicevas zaicevas May 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you assume that text() returns a promise/thenable?

return {
error: text,
statusCode: response.status,
};
});
}
return {
error: response.statusText,
statusCode: response.status,
};
})
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
});
}
};

export default makeRequest;
const makeApiRequest = async (base_path, endpoint, method, additional) => {
return fetch(`${base_path}${endpoint}`, {
method,
mode: "cors",
...(additional !== undefined && { ...additional }),
Copy link

@zaicevas zaicevas May 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...additional should be enough even if it is undefined. OR, if you're afraid of undefined, you can provide a default value: const makeApiRequest = async (base_path, endpoint, method, additional = {}) => ...

})
.then((response) => {
if (response.ok) {
return response.json().catch((error) => {
return {};
});
}
if (typeof response.text === "function") {
return response.text().then((text) => {
return {
error: text,
statusCode: response.status,
};
});
}
return {
error: response.statusText,
statusCode: response.status,
};
})
.then((response) => {
return response;
})
.catch((error) => {
console.log(error);
});
};

export { makeRequest, makeApiRequest };
57 changes: 49 additions & 8 deletions Frontend/src/clients/videoClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,53 @@
import makeRequest from "./baseClient";
import { makeRequest, makeApiRequest } from "./baseClient";
import {
BASE_PATH,
EP_DELETE_USER_VIDEO,
EP_GET_TRASHED_USER_VIDEOS,
EP_GET_UNTRASHED_USER_VIDEOS,
EP_PUT_TRASH_USER_VIDEO,
} from "../api/api.constants";

const uploadVideo = async (video) => {
const formData = new FormData();
formData.append('formFile', video);
const getUntrashedUserVideos = async (userId) => {
Copy link

@zaicevas zaicevas May 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this function async, considering you're not using await ? Same applies to other functions in this file

Copy link
Collaborator Author

@nisten711 nisten711 May 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function receives a response from makeApiRequest. response is a promise which is then delegated (passed) to the caller of this function. Function that returns a promise has to be marked with async to indicate that it is awaitable and does not return the 'raw result' but rather - a promise.

const response = makeApiRequest(
Copy link

@zaicevas zaicevas May 26, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like it could be simplified to:

return makeApiRequest(...)

BASE_PATH,
EP_GET_UNTRASHED_USER_VIDEOS(userId),
"GET"
);
return response;
};

const getTrashedUserVideos = async (userId) => {
const response = makeApiRequest(
BASE_PATH,
EP_GET_TRASHED_USER_VIDEOS(userId),
"GET"
);
return response;
};

const trashUserVideo = async (userId, videoId) => {
const response = makeApiRequest(
BASE_PATH,
EP_PUT_TRASH_USER_VIDEO(userId, videoId),
"PUT"
);
return response;
};

return makeRequest('video', 'POST', { body: formData });
}
const deleteUserVideo = async (userId, videoId) => {
const response = makeApiRequest(
BASE_PATH,
EP_DELETE_USER_VIDEO(videoId),
"DELETE"
);
return response;
};

export {
uploadVideo,
const uploadVideo = async (video) => {
const formData = new FormData();
formData.append("formFile", video);

return makeRequest("video", "POST", { body: formData });
};

export { uploadVideo };