feat: start of dm overview page
This commit is contained in:
parent
67da0a72db
commit
5d2ce7705c
14 changed files with 442 additions and 34 deletions
|
@ -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>
|
||||
|
|
|
@ -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) => (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue