Don't show empty channels

This commit is contained in:
jude 2024-04-16 11:42:19 +01:00
parent d52b8b26f2
commit e38c63f5ba
2 changed files with 64 additions and 25 deletions

View File

@ -1,7 +1,8 @@
import { useQuery } from "react-query";
import { fetchGuildChannels, fetchGuildTodos } from "../../api";
import { ChannelInfo, fetchGuildChannels, fetchGuildTodos } from "../../api";
import { useGuild } from "../App/useGuild";
import { Todo } from "../Todo";
import { Todo as TodoT } from "../../api";
import { Loader } from "../Loader";
import { CreateTodo } from "../Todo/CreateTodo";
@ -15,34 +16,47 @@ export const GuildTodos = () => {
return <Loader />;
}
const sortedTodos = guildTodos.sort((a, b) => (a.id > b.id ? -1 : 1));
const sortedTodos = guildTodos.sort((a, b) => (a.id < b.id ? -1 : 1));
const globalTodos = sortedTodos.filter((todo) => todo.channel_id === null);
return (
<>
<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 (
<>
<h2>#{channel.name}</h2>
{sortedTodos
.filter((todo) => todo.channel_id === channel.id)
.map((todo) => (
<strong>Create todo list</strong>
<CreateTodo channel={null} showSelector={true} />
<strong>Todo lists</strong>
{globalTodos.length > 0 && (
<>
<h2>Server</h2>
{globalTodos.map((todo) => (
<>
<Todo todo={todo} key={todo.id} />
</>
))}
<CreateTodo channel={null} />
</>
)}
{channels
.map(
(channel) =>
[channel, sortedTodos.filter((todo) => todo.channel_id === channel.id)] as [
ChannelInfo,
TodoT[],
],
)
.filter(([_, todos]) => todos.length > 0)
.map(([channel, todos]) => {
return (
<>
<h2>#{channel.name}</h2>
{todos.map((todo) => (
<>
<Todo todo={todo} key={todo.id} />
</>
))}
<CreateTodo channel={channel.id} />
</>
);
})}
<CreateTodo channel={channel.id} />
</>
);
})}
</>
);
};

View File

@ -1,11 +1,11 @@
import { useMutation, useQueryClient } from "react-query";
import { postGuildTodo } from "../../api";
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 = ({ channel }) => {
export const CreateTodo = ({ showSelector = false, channel }) => {
const guild = useGuild();
const [recentlyCreated, setRecentlyCreated] = useState(false);
@ -13,6 +13,8 @@ export const CreateTodo = ({ channel }) => {
const flash = useFlash();
const { isSuccess, data: channels } = useQuery(fetchGuildChannels(guild));
const queryClient = useQueryClient();
const mutation = useMutation({
...postGuildTodo(guild),
@ -44,6 +46,29 @@ export const CreateTodo = ({ channel }) => {
class="input todo-input"
onInput={(ev) => setNewTodo((todo) => ({ ...todo, value: ev.currentTarget.value }))}
/>
{showSelector && (
<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 ? (