Skip to content

Commit

Permalink
feat: updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@yokwejuste
yokwejuste committed Mar 5, 2024
1 parent 532a406 commit a748dc1
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 86 deletions.
4 changes: 2 additions & 2 deletions zubhub_backend/zubhub/templates/activities/activity_download.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@
<div class="intro-images">
<span class="i-img">
<img
src="{{ activity.materials_used_image.file_url|convert_link }}"
src="{{ activity.materials_used_image.file_url }}"
alt=""
/>
</span>
Expand All @@ -274,7 +274,7 @@
<div class="intro-images">
{% for img in activity_steps_images %}
<span class="i-img">
<img src="{{ img.file_url|convert_link }}" alt="Activity image" />
<img src="{{ img.file_url }}" alt="Activity image" />
</span>
{% endfor %}
</div>
Expand Down
133 changes: 75 additions & 58 deletions zubhub_frontend/zubhub/src/api/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ class API {
* @returns {Promise<>}
*/
request = ({
url = '/',
method = 'GET',
token,
body,
content_type = 'application/json',
}) => {
url = '/',
method = 'GET',
token,
body,
content_type = 'application/json',
}) => {
if (method === 'GET' && !token) {
return fetch(this.domain + url, {
method,
Expand Down Expand Up @@ -139,16 +139,16 @@ class API {
* @todo - describe method's signature
*/
signup = ({
username,
email,
phone,
dateOfBirth,
user_location,
password1,
password2,
bio,
subscribe,
}) => {
username,
email,
phone,
dateOfBirth,
user_location,
password1,
password2,
bio,
subscribe,
}) => {
const url = 'creators/register/';
const method = 'POST';
const body = JSON.stringify({
Expand Down Expand Up @@ -296,7 +296,7 @@ class API {
const url = `creators/${groupname}/remove-member/${username}/`;
const method = 'DELETE';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -312,7 +312,7 @@ class API {
const url = `creators/${groupname}/toggle-follow/${username}/`;
const method = 'GET';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -328,7 +328,7 @@ class API {
const url = `creators/${groupname}/members/`;
const method = 'GET';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -340,7 +340,7 @@ class API {
*
* @todo - describe method's signature
*/
teamMembersId = ( id ) => {
teamMembersId = (id) => {
const url = `creators/id/${id}/`;
const method = 'GET';
return this.request({ url, method }).then(res => res.json());
Expand All @@ -356,7 +356,7 @@ class API {
const url = `creators/${groupname}/delete-group/`;
const method = 'DELETE';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -372,7 +372,7 @@ class API {
const url = `creators/${groupname}/group-followers/`;
const method = 'GET';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -388,7 +388,7 @@ class API {
const url = `creators/groups/${username}/`;
const method = 'GET';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -404,7 +404,7 @@ class API {
const url = `creators/teams/`;
const method = 'GET';
if (token) {
return this.request({ url, method ,token }).then(res => res.json());
return this.request({ url, method, token }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -422,7 +422,7 @@ class API {
const content_type = false;
const body = data;
if (token) {
return this.request({ url, method ,token, body, content_type }).then(res => res.json());
return this.request({ url, method, token, body, content_type }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand All @@ -439,7 +439,7 @@ class API {
const method = 'POST';
const content_type = 'application/json';
const body = JSON.stringify(data);

if (token) {
return this.request({ url, method, token, body, content_type }).then(res => res.json());
} else {
Expand All @@ -459,7 +459,7 @@ class API {
const content_type = 'application/json';
const body = JSON.stringify(data);
if (token) {
return this.request({ url, method ,token, body, content_type }).then(res => res.json());
return this.request({ url, method, token, body, content_type }).then(res => res.json());
} else {
return this.request({ url, method }).then(res => res.json());
}
Expand Down Expand Up @@ -732,17 +732,17 @@ class API {
* @todo - describe method's signature
*/
createProject = ({
token,
title,
description,
video,
images,
materials_used,
category,
tags,
publish,
activity,
}) => {
token,
title,
description,
video,
images,
materials_used,
category,
tags,
publish,
activity,
}) => {
const url = 'projects/create/';
const method = 'POST';
const body = JSON.stringify({
Expand All @@ -766,17 +766,17 @@ class API {
* @todo - describe method's signature
*/
updateProject = ({
token,
id,
title,
description,
video,
images,
materials_used,
category,
tags,
publish,
}) => {
token,
id,
title,
description,
video,
images,
materials_used,
category,
tags,
publish,
}) => {
const url = `projects/${id}/update/`;
const method = 'PATCH';

Expand Down Expand Up @@ -862,11 +862,11 @@ class API {
};

/**
* @method getActivity
* @author Yaya Mamoudou <[email protected]>
*
* @todo - describe method's signature
*/
* @method getActivity
* @author Yaya Mamoudou <[email protected]>
*
* @todo - describe method's signature
*/
getActivity = ({ token, id }) => {
const url = `activities/${id}`;
return this.request({ token, url }).then(res => res.json());
Expand Down Expand Up @@ -1024,10 +1024,10 @@ class API {
};

/**
* @method getChallenge
* @author Suchakra Sharma <[email protected]>
*
*/
* @method getChallenge
* @author Suchakra Sharma <[email protected]>
*
*/
getChallenge = () => {
const url = `challenge/`;

Expand Down Expand Up @@ -1166,6 +1166,23 @@ class API {
const url = `activities/${id}/toggle-publish/`;
return this.request({ url, token }).then(res => res.json());
};

activityDownload = async ({ id, token }) => {
const url = `${this.domain}activities/${id}/pdf/`;
const response = await fetch(url, {
method: 'GET',
headers: {
'Authorization': `Token ${token}`
}
});

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
const blob = await response.blob();
return blob;
}
};
}

export default API;
43 changes: 18 additions & 25 deletions zubhub_frontend/zubhub/src/views/activity_details/ActivityDetailsV2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ import Activity from '../../components/activity/activity';
import SocialButtons from '../../components/social_share_buttons/socialShareButtons';
import { getUrlQueryObject } from '../../utils.js';
import { activityDefailsStyles } from './ActivityDetails.styles';
import { useReactToPrint } from 'react-to-print';
import Html2Pdf from 'html2pdf.js';

const API = new ZubHubAPI();
const authenticatedUserActivitiesGrid = { xs: 12, sm: 6, md: 6 };
Expand Down Expand Up @@ -86,29 +84,24 @@ export default function ActivityDetailsV2(props) {
props.navigate(window.location.pathname, { replace: true });
};

const handleDownload = useReactToPrint({
onBeforePrint: () => setIsDownloading(true),
onPrintError: error => setIsDownloading(false),
onAfterPrint: () => setIsDownloading(false),
content: () => ref.current,
removeAfterPrint: true,
print: async printIframe => {
const document = printIframe.contentDocument;
if (document) {
const html = document.getElementsByTagName('html')[0];
const pdfOptions = {
padding: 10,
filename: `${activity.title}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
};

const exporter = new Html2Pdf(html, pdfOptions);
await exporter.getPdf(true);
}
},
});
const handleDownload = () => {
setIsDownloading(true);
API.activityDownload({ token: auth.token, id: activity.id })
.then(res => {
// Assuming 'res' is the blob itself, no need for 'res.blob()'
const url = window.URL.createObjectURL(new Blob([res]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', `${activity.title}.pdf`);
document.body.appendChild(link);
link.click();
link.remove();
})
.catch(error => {
console.error('Error downloading PDF:', error);
})
.finally(() => setIsDownloading(false));
};

return (
<div ref={ref} style={{ margin: '0 24px' }}>
Expand Down
18 changes: 17 additions & 1 deletion zubhub_frontend/zubhub/src/views/activity_details/activityDetailsScripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const API = new ZubhubAPI();
export const deleteActivity = args => {
return API.deleteActivity({ token: args.token, id: args.id }).then(res => {
if (res.status === 204) {
toast.success(args.t('activityDetails.activity.delete.dialog.success'));
toast.success(args.t('activityDetails.activity.delete.dialog.forbidden'));
return args.navigate('/activities');
} else {
if (res.status === 403 && res.statusText === 'Forbidden') {
Expand All @@ -21,6 +21,22 @@ export const deleteActivity = args => {
});
};

export const activityDownload = async args => {
const response = await API.activityDownload({ token: args.token, id: args.id });

if (response.status === 200) {
const blob = await response.blob();
return blob;
} else {
if (response.status === 403 && response.statusText === 'Forbidden') {
toast.warning(args.t('activityDetails.activity.download.dialog.forbidden'));
} else {
toast.warning(args.t('activities.errors.dialog.serverError'));
}
}
}


export const togglePublish = async (
e,
id,
Expand Down

0 comments on commit a748dc1

Please sign in to comment.