feat: Unblock Page

.trunk/.gitignore

@@ -0,0 +1,9 @@
+*out
+*logs
+*actions
+*notifications
+*tools
+plugins
+user_trunk.yaml
+user.yaml
+tmp

.trunk/configs/.markdownlint.yaml

@@ -0,0 +1,10 @@
+# Autoformatter friendly markdownlint config (all formatting rules disabled)
+default: true
+blank_lines: false
+bullet: false
+html: false
+indentation: false
+line_length: false
+spaces: false
+url: false
+whitespace: false

.trunk/configs/.yamllint.yaml

@@ -0,0 +1,10 @@
+rules:
+  quoted-strings:
+    required: only-when-needed
+    extra-allowed: ["{|}"]
+  empty-values:
+    forbid-in-block-mappings: true
+    forbid-in-flow-mappings: true
+  key-duplicates: {}
+  octal-values:
+    forbid-implicit-octal: true

.trunk/configs/svgo.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    {
+      name: "preset-default",
+      params: {
+        overrides: {
+          removeViewBox: false, // https://github.com/svg/svgo/issues/1128
+          sortAttrs: true,
+          removeOffCanvasPaths: true,
+        },
+      },
+    },
+  ],
+};

.trunk/trunk.yaml

@@ -0,0 +1,37 @@
+# This file controls the behavior of Trunk: https://docs.trunk.io/cli
+# To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
+version: 0.1
+cli:
+  version: 1.19.0
+# Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
+plugins:
+  sources:
+    - id: trunk
+      ref: v1.4.2
+      uri: https://github.com/trunk-io/plugins
+# Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
+runtimes:
+  enabled:
+    - [email protected]
+    - [email protected]
+# This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
+lint:
+  enabled:
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - git-diff-check
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+    - [email protected]
+actions:
+  disabled:
+    - trunk-announce
+    - trunk-check-pre-push
+    - trunk-fmt-pre-commit
+  enabled:
+    - trunk-upgrade-available

app/(dashboard)/u/[username]/community/_components/column.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { UserAvatar } from "@/components/user-avatar";
+import { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown } from "lucide-react";
+import { UnblockButton } from "./unblock-button";
+
+export type BlockedUser = {
+  id: string;
+  userId: string;
+  imageUrl: string;
+  username: string;
+  createdAt: string;
+};
+
+export const columns: ColumnDef<BlockedUser>[] = [
+  {
+    accessorKey: "username",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Username
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center gap-x-4">
+        <UserAvatar
+          username={row.original.username}
+          imageUrl={row.original.imageUrl}
+        />
+        <span>{row.original.username}</span>
+      </div>
+    ),
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => (
+      <Button
+        variant="ghost"
+        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+      >
+        Date blocked
+        <ArrowUpDown className="ml-2 h-4 w-4" />
+      </Button>
+    ),
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <UnblockButton userId={row.original.userId} />,
+  },
+];

app/(dashboard)/u/[username]/community/_components/data-table.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

app/(dashboard)/u/[username]/community/_components/unblock-button.tsx

@@ -0,0 +1,33 @@
+import { onUnblock } from "@/actions/block";
+import { Button } from "@/components/ui/button";
+import { useTransition } from "react";
+import { toast } from "sonner";
+
+interface UnblockButtonProps {
+  userId: string;
+}
+
+export const UnblockButton = ({ userId }: UnblockButtonProps) => {
+  const [isPending, startTransition] = useTransition();
+
+  const onClick = () => {
+    startTransition(() => {
+      onUnblock(userId)
+        .then((result) =>
+          toast.success(`User ${result.blocked.username} unblocked`)
+        )
+        .catch(() => toast.error("Something went wrong"));
+    });
+  };
+  return (
+    <Button
+      disabled={isPending}
+      onClick={onClick}
+      variant="link"
+      size="sm"
+      className="text-blue-500 w-full"
+    >
+      Unblcok
+    </Button>
+  );
+};

app/(dashboard)/u/[username]/community/page.tsx

@@ -1,11 +1,25 @@
-import React from "react";
+import { getBlockedUsers } from "@/lib/block-service";
+import { columns } from "./_components/column";
+import { DataTable } from "./_components/data-table";
+import { format } from "date-fns";
+
+const Community = async () => {
+  const blockedUsers = await getBlockedUsers();
+
+  const formattedData = blockedUsers.map((block) => ({
+    ...block,
+    userId: block.blocked.id,
+    imageUrl: block.blocked.imageUrl,
+    username: block.blocked.username,
+    createdAt: format(new Date(block.blocked.createdAt), "dd/MM/yyyy"),
+  }));
 
-const Community = () => {
   return (
     <div className="p-6">
       <div className="mb-4">
         <h1 className="text-2xl font-bold">Community Settings</h1>
       </div>
+      <DataTable columns={columns} data={formattedData} />
     </div>
   );
 };