40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { useQuery } from "react-query";
|
|
import { useParams } from "wouter";
|
|
import { fetchGuildChannels } from "../../api";
|
|
import { useReminder } from "./ReminderContext";
|
|
|
|
export const ChannelSelector = () => {
|
|
const { guild } = useParams();
|
|
|
|
const [reminder, setReminder] = useReminder();
|
|
|
|
const { isSuccess, data } = useQuery(fetchGuildChannels(guild));
|
|
|
|
return (
|
|
<div class="control has-icons-left">
|
|
<div class="select">
|
|
<select
|
|
name="channel"
|
|
class="channel-selector"
|
|
onInput={(ev) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
channel: ev.currentTarget.value,
|
|
}));
|
|
}}
|
|
>
|
|
{isSuccess &&
|
|
data.map((c) => (
|
|
<option value={c.id} selected={c.id === reminder.channel}>
|
|
{c.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div class="icon is-small is-left">
|
|
<i class="fas fa-hashtag"></i>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|