feat: start of dm overview page

This commit is contained in:
Samuel 2024-12-12 18:44:44 +01:00
parent 67da0a72db
commit 5d2ce7705c
14 changed files with 442 additions and 34 deletions

View file

@ -1,17 +1,19 @@
import { type Component, createResource, Show } from "solid-js";
import { type Component, createEffect, createResource, Show } from "solid-js";
import type { RouteSectionProps } from "@solidjs/router";
import { overallSentMessagesQuery, SELF_ID, threadOverviewQuery } from "~/db";
import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db";
import { OverviewTable, type RoomOverview } from "./overview-table";
export const Overview: Component<RouteSectionProps> = () => {
const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID).executeTakeFirstOrThrow());
const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
const [roomOverview] = createResource<RoomOverview[]>(async () => {
return (await threadOverviewQuery.execute()).map((row) => {
return (await allThreadsOverviewQuery()).rows.map((row) => {
const isGroup = row.title !== null;
console.log(row);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const name = (
isGroup
@ -33,13 +35,18 @@ export const Overview: Component<RouteSectionProps> = () => {
});
});
createEffect(() => {
console.log(roomOverview());
});
return (
<div>
<p>All messages: {allSelfSentMessagesCount()?.message_count as number}</p>
<p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
<Show
when={!roomOverview.loading}
fallback="Loading..."
>
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
<OverviewTable data={roomOverview()!} />;
</Show>
</div>

View file

@ -1,4 +1,5 @@
import { type Component, createSignal, For, Match, Show, Switch } from "solid-js";
import { useNavigate } from "@solidjs/router";
import {
type ColumnFiltersState,
@ -37,7 +38,7 @@ export interface RoomOverview {
const columnHelper = createColumnHelper<RoomOverview>();
const archivedFilterFn: FilterFn<RoomOverview> = (row, columnId, filterValue) => {
const archivedFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) => {
if (filterValue === true) {
return true;
}
@ -241,6 +242,8 @@ export const OverviewTable = (props: OverviewTableProps) => {
},
});
const navigate = useNavigate();
return (
<div>
<div class="flex flex-row items-center gap-x-4">
@ -304,8 +307,14 @@ export const OverviewTable = (props: OverviewTableProps) => {
<For each={table.getRowModel().rows}>
{(row) => (
<TableRow
class="[&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
class="cursor-pointer [&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
data-state={row.getIsSelected() && "selected"}
onClick={() => {
const threadId = row.original.threadId;
const isGroup = row.original.isGroup;
navigate(`/${isGroup ? "group" : "dm"}/${threadId.toString()}`);
}}
>
<For each={row.getVisibleCells()}>
{(cell) => (