51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { JSXElement, createSignal, onMount, useContext } from "solid-js";
|
|
|
|
import { LoginContext } from "../../Context/GlobalState";
|
|
import { EngagementIcon } from "../../Util/Icons";
|
|
import { engage, getEngagementCount } from "../../Util/api";
|
|
|
|
export default function EngagementButton(props: {
|
|
postId: string;
|
|
}): JSXElement {
|
|
const [engagementCount, setEngagementCount] = createSignal(0);
|
|
const login_ctx = useContext(LoginContext)!;
|
|
|
|
onMount((): void => {
|
|
void setUp();
|
|
});
|
|
|
|
const setUp = async (): Promise<void> => {
|
|
const r = await getEngagementCount(props.postId);
|
|
setEngagementCount(r);
|
|
};
|
|
|
|
// Function to handle engagement
|
|
const handleEngagement = async (): Promise<void> => {
|
|
try {
|
|
const response = await engage(props.postId, login_ctx.token());
|
|
if (response.ok) {
|
|
// Update engagement count if the request is successful
|
|
setEngagementCount(await response.json());
|
|
} else {
|
|
console.error("Failed to engage:", response.statusText);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error engaging:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div class="flex p-1">
|
|
<button
|
|
class="rounded-base btn btn-xs hover:border-primary"
|
|
aria-label="Show sign of engagement"
|
|
onClick={handleEngagement} // Call handleEngagement function on button click
|
|
>
|
|
<EngagementIcon />
|
|
</button>
|
|
<span class="text-1xl countdown px-1.5 pt-1.5 text-center">
|
|
<p style={{ "--value": engagementCount() }} />
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|