Add create todo under each channel

Sort channels for consistency
This commit is contained in:
jude 2024-04-11 15:31:27 +01:00
parent 5406e6b8ec
commit 5e99a6f9de
3 changed files with 20 additions and 32 deletions

View File

@ -129,9 +129,13 @@ export const fetchGuildInfo = (guild: string) => ({
export const fetchGuildChannels = (guild: string) => ({
queryKey: ["GUILD_CHANNELS", guild],
queryFn: () =>
axios.get(`/dashboard/api/guild/${guild}/channels`).then((resp) => resp.data) as Promise<
ChannelInfo[]
>,
axios
.get(`/dashboard/api/guild/${guild}/channels`)
.then((resp) =>
resp.data.sort((a: ChannelInfo, b: ChannelInfo) =>
a.name == b.name ? 0 : a.name > b.name ? 1 : -1,
),
) as Promise<ChannelInfo[]>,
staleTime: GUILD_INFO_STALE_TIME,
});

View File

@ -19,11 +19,15 @@ export const GuildTodos = () => {
return (
<>
<strong>Create Todo</strong>
<CreateTodo />
<br />
<strong>Todo list</strong>
<h2>Server</h2>
{sortedTodos
.filter((todo) => todo.channel_id == null)
.map((todo) => (
<>
<Todo todo={todo} key={todo.id} />
</>
))}
<CreateTodo channel={null} />
{channels.map((channel) => {
return (
<>
@ -35,6 +39,7 @@ export const GuildTodos = () => {
<Todo todo={todo} key={todo.id} />
</>
))}
<CreateTodo channel={channel.id} />
</>
);
})}

View File

@ -1,20 +1,19 @@
import { useMutation, useQuery, useQueryClient } from "react-query";
import { fetchGuildChannels, postGuildTodo } from "../../api";
import { useMutation, useQueryClient } from "react-query";
import { 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 = () => {
export const CreateTodo = ({ channel }) => {
const guild = useGuild();
const [recentlyCreated, setRecentlyCreated] = useState(false);
const [newTodo, setNewTodo] = useState({ value: "", channel_id: null });
const [newTodo, setNewTodo] = useState({ value: "", channel_id: channel });
const flash = useFlash();
const queryClient = useQueryClient();
const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
const mutation = useMutation({
...postGuildTodo(guild),
onSuccess: (data) => {
@ -45,26 +44,6 @@ export const CreateTodo = () => {
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 ? (