90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "react-query";
|
|
import { fetchGuildChannels, postGuildTodo } from "../../api";
|
|
import { useGuild } from "../App/useGuild";
|
|
import { useState } from "preact/hooks";
|
|
import { useFlash } from "../App/FlashContext";
|
|
import { ICON_FLASH_TIME } from "../../consts";
|
|
|
|
export const CreateTodo = () => {
|
|
const guild = useGuild();
|
|
|
|
const [recentlyCreated, setRecentlyCreated] = useState(false);
|
|
const [newTodo, setNewTodo] = useState({ value: "", channel_id: null });
|
|
|
|
const flash = useFlash();
|
|
|
|
const queryClient = useQueryClient();
|
|
const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
|
|
const mutation = useMutation({
|
|
...postGuildTodo(guild),
|
|
onSuccess: (data) => {
|
|
if (data.error) {
|
|
flash({
|
|
message: data.error,
|
|
type: "error",
|
|
});
|
|
} else {
|
|
flash({
|
|
message: "Todo created",
|
|
type: "success",
|
|
});
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["GUILD_TODO"],
|
|
});
|
|
setRecentlyCreated(true);
|
|
setTimeout(() => {
|
|
setRecentlyCreated(false);
|
|
}, ICON_FLASH_TIME);
|
|
}
|
|
},
|
|
});
|
|
|
|
console.log(newTodo);
|
|
|
|
return (
|
|
<div class="todo">
|
|
<textarea
|
|
class="input todo-input"
|
|
onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
|
|
/>
|
|
<div class="control has-icons-left">
|
|
<div class="select">
|
|
<select
|
|
name="channel"
|
|
class="channel-selector"
|
|
onInput={(ev) =>
|
|
setNewTodo((todo) => ({
|
|
...todo,
|
|
channel_id: ev.currentTarget.value || null,
|
|
}))
|
|
}
|
|
>
|
|
<option value="">(None)</option>
|
|
{isSuccess && channels.map((c) => <option value={c.id}>{c.name}</option>)}
|
|
</select>
|
|
</div>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-hashtag"></i>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => mutation.mutate(newTodo)} class="button is-success save-btn">
|
|
<span class="icon">
|
|
{mutation.isLoading ? (
|
|
<span class="icon">
|
|
<i class="fas fa-spin fa-cog"></i>
|
|
</span>
|
|
) : recentlyCreated ? (
|
|
<span class="icon">
|
|
<i class="fas fa-check"></i>
|
|
</span>
|
|
) : (
|
|
<span class="icon">
|
|
<i class="fas fa-sparkles"></i>
|
|
</span>
|
|
)}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|