1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { useState, useEffect } from "react";
import { toast } from "react-toastify";
function useMedia(username, accessToken, status) {
const [media, setMedia] = useState([]);
const fetchGraphQL = async (query, variables) => {
const response = await fetch("https://graphql.anilist.co/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ query, variables }),
});
return response.json();
};
useEffect(() => {
if (!username || !accessToken) return;
const queryMedia = `
query ($username: String, $status: MediaListStatus) {
MediaListCollection(userName: $username, type: ANIME, status: $status) {
lists {
status
name
entries {
id
mediaId
status
progress
score
media {
id
status
nextAiringEpisode {
timeUntilAiring
episode
}
title {
english
romaji
}
episodes
coverImage {
large
}
}
}
}
}
}
`;
fetchGraphQL(queryMedia, { username, status: status?.stats }).then((data) =>
setMedia(data.data.MediaListCollection.lists)
);
}, [username, accessToken, status?.stats]);
return media;
}
export function useAniList(session, stats) {
const accessToken = session?.user?.token;
const username = session?.user?.name;
const status = stats || null;
const media = useMedia(username, accessToken, status);
const fetchGraphQL = async (query, variables) => {
const response = await fetch("https://graphql.anilist.co/", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: accessToken ? `Bearer ${accessToken}` : undefined,
},
body: JSON.stringify({ query, variables }),
});
return response.json();
};
const markComplete = (mediaId) => {
if (!accessToken) return;
const completeQuery = `
mutation($mediaId: Int ) {
SaveMediaListEntry(mediaId: $mediaId, status: COMPLETED) {
id
mediaId
status
}
}
`;
fetchGraphQL(completeQuery, { mediaId }).then((data) =>
console.log({ Complete: data })
);
};
const markProgress = (mediaId, progress, stats, volumeProgress) => {
if (!accessToken) return;
const progressWatched = `
mutation($mediaId: Int, $progress: Int, $status: MediaListStatus, $progressVolumes: Int) {
SaveMediaListEntry(mediaId: $mediaId, progress: $progress, status: $status, progressVolumes: $progressVolumes) {
id
mediaId
progress
status
}
}
`;
fetchGraphQL(progressWatched, {
mediaId,
progress,
status: stats,
progressVolumes: volumeProgress,
}).then(() => {
console.log(`Progress Updated: ${progress}`);
toast.success(`Progress Updated: ${progress}`, {
position: "bottom-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
draggable: true,
theme: "dark",
});
});
};
return { media, markComplete, markProgress };
}
|