blob: 6231eaf30070a2d3cc8fb85c38fc97027dc98885 (
plain) (
blame)
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
127
128
129
130
131
132
133
134
135
|
import { useAniList } from "@/lib/anilist/useAnilist";
import { useWatchProvider } from "@/lib/context/watchPageProvider";
import { useState } from "react";
import { toast } from "sonner";
type Props = {
toggle: boolean;
position: "top" | "bottom";
setToggle: (prev: any) => void;
session: any;
};
export default function RateModal({
toggle,
position,
setToggle,
session,
}: Props) {
const [startRate, setStartRate] = useState(false);
const { markComplete } = useAniList(session);
const { dataMedia } = useWatchProvider();
async function handleSubmit(event: any) {
event.preventDefault();
const data = new FormData(event.target);
const rating = data.get("rating");
const notes = data.get("notes");
try {
await markComplete(dataMedia?.id, { notes, scoreRaw: rating });
toast.success("Successfully rated!");
setToggle((prev: any) => {
return {
...prev,
isOpen: false,
};
});
} catch (error) {
toast.error("Failed to rate!");
}
}
function handleClose() {
setToggle((prev: any) => {
return {
...prev,
isOpen: false,
};
});
}
return (
<>
<div
className={`w-full h-[20dvh] fixed bg-gradient-to-${
position === "top"
? `b top-0 from-black/20`
: "t -bottom-5 from-black/40"
} to-transparent z-10 transition-all duration-200 ease-in-out ${
toggle ? "" : "opacity-0 pointer-events-none"
}`}
/>
<div
style={{ width: startRate ? "300px" : "240px" }}
className={`${
position === "top"
? toggle
? `top-5`
: `-top-48`
: toggle
? `bottom-10`
: `-bottom-48`
} fixed text-white font-semibold z-50 font-karla transition-all duration-300 ease-in-out left-1/2 transform -translate-x-1/2 bg-secondary p-3 rounded flex flex-col justify-center items-center gap-4`}
>
<p className="text-lg">What do you think?</p>
<div
className={`flex gap-2 font-medium text-center transition-all duration-200 ${
startRate
? "scale-50 hidden pointer-events-none"
: "scale-100 opacity-100"
}`}
>
<button
onClick={() => setStartRate(true)}
className="w-[100px] py-1 bg-action/10 rounded text-action"
>
Rate Now
</button>
<button
onClick={handleClose}
className="w-[100px] py-1 border border-opacity-0 hover:border-opacity-10 rounded border-white"
>
Close
</button>
</div>
{startRate && (
<form
onSubmit={handleSubmit}
className="flex flex-col items-center gap-3 w-full"
>
<input
type="number"
min={1}
max={100}
required
name="rating"
placeholder="rate from 1-100"
className="appearance-none w-full text-white placeholder-zinc-400 bg-white/10 py-1 px-2 rounded text-sm"
/>
<input
type="text"
name="notes"
placeholder="notes"
className="appearance-none w-full text-white placeholder-zinc-400 bg-white/10 py-1 px-2 rounded text-sm"
/>
<div className="flex gap-2 w-full">
<button
type="submit"
className="w-full py-1 bg-action/10 hover:bg-action/20 rounded text-action"
>
Submit
</button>
<button
type="button"
onClick={handleClose}
className="w-full py-1 rounded hover:bg-white/20"
>
Cancel
</button>
</div>
</form>
)}
</div>
</>
);
}
|