AB-66: improve profile load, refactor db slightly, add show specialist from admin panel

Author: balickim

package.json

@@ -15,6 +15,7 @@
     "@prisma/client": "4.14.1",
     "@t3-oss/env-nextjs": "0.2.2",
     "@tanstack/react-query": "4.29.5",
+    "@tanstack/react-query-devtools": "4.29.14",
     "@tanstack/react-table": "8.9.2",
     "@trpc/client": "10.23.0",
     "@trpc/next": "10.23.0",

src/components/AdminPanel/UserList/columns.tsx

@@ -1,11 +1,12 @@
 import { ColumnDef } from '@tanstack/react-table';
+import dayjs from 'dayjs';
+import { AiOutlineCheck } from 'react-icons/ai';
 
 import { DataTableColumnHeader } from './data-table-column-header';
-import { Task } from 'components/AdminPanel/UserList/schema';
-import { AiOutlineCheck } from 'react-icons/ai';
-import dayjs from 'dayjs';
+import { User } from 'components/AdminPanel/UserList/schema';
+import { DataTableRowActions } from 'components/AdminPanel/UserList/data-table-row-actions';
 
-export const columns: ColumnDef<Task>[] = [
+export const columns: ColumnDef<User>[] = [
   {
     accessorKey: 'name',
     header: ({ column }) => (
@@ -49,4 +50,8 @@ export const columns: ColumnDef<Task>[] = [
     // @ts-ignore
     cell: ({ row }) => <div className="w-[250px]">{dayjs(row.getValue('created_at').toString()).format('YYYY-MM-DD HH:mm:ss')}</div>,
   },
+  {
+    id: 'actions',
+    cell: ({ row }) => <DataTableRowActions row={row} />,
+  },
 ];

src/components/AdminPanel/UserList/data-table-row-actions.tsx

@@ -0,0 +1,56 @@
+import { Row } from '@tanstack/react-table';
+import { userSchema } from 'components/AdminPanel/UserList/schema';
+import { ROLES } from '@prisma/client';
+import { BsArrowUpRightSquare } from 'react-icons/bs';
+
+interface DataTableRowActionsProps<TData> {
+  row: Row<TData>
+}
+
+export function DataTableRowActions<TData> ({
+  row,
+}: DataTableRowActionsProps<TData>) {
+  // const [isOpen, setIsOpen] = useState(false);
+  const user = userSchema.parse(row.original);
+
+  if (user.role !== ROLES.SPECIALIST) return null;
+  return (
+    <>
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={`./dashboard/community/${user.id}`}
+        className="p-1"
+      >
+        <BsArrowUpRightSquare size={32} />
+      </a>
+      {/*<button*/}
+      {/*  id="dropdownDefaultButton"*/}
+      {/*  className="text-black hover:bg-gray-400 p-2 text-center"*/}
+      {/*  onClick={() => setIsOpen(!isOpen)}*/}
+      {/*>*/}
+      {/*  <HiDotsHorizontal />*/}
+      {/*</button>*/}
+      {/*{isOpen*/}
+      {/*  ? <div*/}
+      {/*    id="dropdown"*/}
+      {/*    className="z-10 absolute bg-white"*/}
+      {/*  >*/}
+      {/*    <ul className="py-2 text-sm text-gray-700" aria-labelledby="dropdownDefaultButton">*/}
+      {/*      <li>*/}
+      {/*        <a*/}
+      {/*          target="_blank"*/}
+      {/*          rel="noopener noreferrer"*/}
+      {/*          href={`./dashboard/community/${user.id}`}*/}
+      {/*          className="block px-4 py-2 hover:bg-gray-100"*/}
+      {/*        >*/}
+      {/*          Podgląd*/}
+      {/*        </a>*/}
+      {/*      </li>*/}
+      {/*    </ul>*/}
+      {/*  </div>*/}
+      {/*  : null*/}
+      {/*}*/}
+    </>
+  );
+}

src/components/AdminPanel/UserList/data-table.tsx

@@ -24,10 +24,17 @@ export function DataTable<TData, TValue> ({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const [rowSelection, setRowSelection] = React.useState({});
+
   const table = useReactTable({
     data,
     columns,
+    state: {
+      rowSelection,
+    },
     getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
   });
 
   return (

src/components/AdminPanel/UserList/schema.ts

@@ -1,12 +1,13 @@
 import { z } from 'zod';
 
-export const schema = z.object({
-  name: z.string().optional(),
-  surname: z.string().optional(),
-  clerk_user_id: z.string().optional(),
-  email: z.string().optional(),
-  created_at: z.string().optional(),
-  role: z.any(),
+export const userSchema = z.object({
+  id: z.any().optional(),
+  name: z.any().optional(),
+  surname: z.any().optional(),
+  clerk_user_id: z.any().optional(),
+  email: z.any().optional(),
+  created_at: z.any().optional(),
+  role: z.any().optional(),
 });
 
-export type Task = z.infer<typeof schema>
+export type User = z.infer<typeof userSchema>

src/components/Dashboard/Layout/sidebar/index.tsx

@@ -63,7 +63,7 @@ const Sidebar = ({ open, setOpen }: ISidebar) => {
         <Links routes={routes} />
       </ul>
       <button
-        onClick={() => signOut().then(() => push('./'))}
+        onClick={() => signOut().then(() => push('./join-us'))}
         className={'absolute left-10 bottom-20 flex items-center gap-2 text-gray-400 text-lg'}
       >
         <MdLogout size={24} /> Wyloguj się