feat: Integrated Refine to Account modals and User DropDownMenu

feat: Integrated Refine into Data Table
fix: Adapted File-provider to be default dataProvider
2024-03-15 16:00:57 -04:00 · 2024-03-15 16:00:25 -04:00 · 2024-03-15 15:59:02 -04:00
10 changed files with 148 additions and 65 deletions
--- a/app/components/data-table.tsx
+++ b/app/components/data-table.tsx
@ -1,10 +1,10 @@
+import { useState } from "react";
+import { BaseRecord } from "@refinedev/core";
+import { useTable } from "@refinedev/react-table";
 import {
  ColumnDef,
  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  getPaginationRowModel,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table";

 import {
  Table,
@ -16,20 +16,23 @@ import {
 } from "./ui/table"
 import { DataTablePagination } from "./table-pagination"

-interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
 }

-export function DataTable<TData, TValue>({
-  columns,
-  data,
+export function DataTable<TData extends BaseRecord, TValue>({
+  columns
 }: DataTableProps<TData, TValue>) {
-  const table = useReactTable({
-    data,
+  const [hoveredRowId, setHoveredRowId] = useState<string>("");
+
+  const table = useTable({
    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    meta: {
+      hoveredRowId,
+    },
+    refineCoreProps: {
+      resource: "files"
+    }
  })

  return (
@ -40,7 +43,7 @@ export function DataTable<TData, TValue>({
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
-                  <TableHead key={header.id}>
+                  <TableHead key={header.id} style={{ width: header.getSize() }}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
@ -59,6 +62,10 @@ export function DataTable<TData, TValue>({
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && "selected"}
+                onMouseEnter={() => {
+                  console.log(hoveredRowId, row.id);
+                  setHoveredRowId(row.id)
+                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
--- a/app/components/general-layout.tsx
+++ b/app/components/general-layout.tsx
@ -14,7 +14,7 @@ import { useUppy } from "./lib/uppy";
 import type { UppyFile } from "@uppy/core";
 import { Progress } from "~/components/ui/progress";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon, ExitIcon, TrashIcon } from "@radix-ui/react-icons";
 import {
  ClockIcon,
  DriveIcon,
@ -25,12 +25,17 @@ import {
  PageIcon,
  ThemeIcon,
 } from "./icons";
-import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
 import { Avatar } from "@radix-ui/react-avatar";
 import { cn } from "~/utils";
+import { useGetIdentity, useLogout } from "@refinedev/core";
+import { Identity } from "~/data/auth-provider";
+

 export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
  const location = useLocation();
+  const { data: identity } = useGetIdentity<Identity>();
+  const{ mutate: logout } = useLogout()
  return (
    <div className="h-full flex flex-row">
      <header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
@ -95,10 +100,18 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
            <DropdownMenuTrigger>
              <Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
                <Avatar className="bg-ring h-7 w-7 rounded-full" />
-                whirly10
+                {`${identity?.firstName} ${identity?.lastName}`}
                <ChevronDownIcon />
              </Button>
            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuGroup>
+                <DropdownMenuItem onClick={() => logout()}>
+                  <ExitIcon className="mr-2" />
+                  Log Out
+                </DropdownMenuItem>  
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
          </DropdownMenu>
        </div>

--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@ -67,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-primary p-1 text-white shadow-md",
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
@ -80,14 +80,17 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean,
+    variant?: string
  }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, variant, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
+      !variant && "focus:bg-primary-2/50 focus:text-primary-2-foreground",
+      variant === "destructive" && "focus:bg-destructive/50 focus:text-white",
      className
    )}
    {...props}
@ -165,7 +168,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-primary-2/75", className)}
    {...props}
  />
 ))
--- a/app/components/upgrade-account-banner.tsx
+++ b/app/components/upgrade-account-banner.tsx
@ -1,3 +1,6 @@
+import { useGetIdentity } from "@refinedev/core"
+import { Identity } from "~/data/auth-provider"
+
 import {
  CrownIcon,
  PersonIcon,
@ -10,13 +13,14 @@ import { Avatar } from "./ui/avatar"
 import { Button } from "./ui/button"

 export const UpgradeAccountBanner = () => {
+  const { data: identity } = useGetIdentity<Identity>();
  return (
    <div className="flex items-center justify-between p-8 border border-ring rounded-lg bg-secondary-1">
      <div className="flex items-center gap-x-4">
        <Avatar className="border-2 border-ring h-20 w-20" />
        <div>
          <div className="flex items-center gap-x-2 font-bold">
-            wirtly
+            {`${identity?.firstName} ${identity?.lastName}`}
            <CrownIcon className="text-ring" />
          </div>
          <div className="flex gap-x-5 mt-2">
--- a/app/data/file-provider.ts
+++ b/app/data/file-provider.ts
@ -1,15 +1,10 @@
-import type { BaseRecord, CreateManyParams, CreateManyResponse, CreateParams, CreateResponse, CustomParams, CustomResponse, DataProvider, DeleteManyParams, DeleteManyResponse, DeleteOneParams, DeleteOneResponse, GetListParams, GetListResponse, GetManyParams, GetManyResponse, GetOneParams, GetOneResponse, UpdateManyParams, UpdateManyResponse, UpdateParams, UpdateResponse } from "@refinedev/core";
+import type { DataProvider } from "@refinedev/core";

-export class PortalFilesProvider implements DataProvider {
-    getList: <TData extends BaseRecord = BaseRecord>(params: GetListParams) => Promise<GetListResponse<TData>>;
-    getMany?: (<TData extends BaseRecord = BaseRecord>(params: GetManyParams) => Promise<GetManyResponse<TData>>) | undefined;
-    getOne: <TData extends BaseRecord = BaseRecord>(params: GetOneParams) => Promise<GetOneResponse<TData>>;
-    create: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateParams<TVariables>) => Promise<CreateResponse<TData>>;
-    createMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateManyParams<TVariables>) => Promise<CreateManyResponse<TData>>) | undefined;
-    update: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateParams<TVariables>) => Promise<UpdateResponse<TData>>;
-    updateMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateManyParams<TVariables>) => Promise<UpdateManyResponse<TData>>) | undefined;
-    deleteOne: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteOneParams<TVariables>) => Promise<DeleteOneResponse<TData>>;
-    deleteMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteManyParams<TVariables>) => Promise<DeleteManyResponse<TData>>) | undefined;
-    getApiUrl: () => string;
-    custom?: (<TData extends BaseRecord = BaseRecord, TQuery = unknown, TPayload = unknown>(params: CustomParams<TQuery, TPayload>) => Promise<CustomResponse<...>>) | undefined;
+export const defaultProvider: DataProvider = {
+  getList: () => { throw Error("Not Implemented") },
+  getOne: () => { throw Error("Not Implemented") },
+  update: () => { throw Error("Not Implemented") },
+  create: () => { throw Error("Not Implemented") },
+  deleteOne: () => { throw Error("Not Implemented") },
+  getApiUrl: () => "",
 }
--- a/app/root.tsx
+++ b/app/root.tsx
@ -14,6 +14,7 @@ import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import {PortalAuthProvider} from "~/data/auth-provider.js";
 import routerProvider from "@refinedev/remix-router";
+import { defaultProvider } from "./data/file-provider";

 export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
@ -42,6 +43,11 @@ export default function App() {
        <Refine
            authProvider={PortalAuthProvider.create("https://alpha.pinner.xyz")}
            routerProvider={routerProvider}
+            dataProvider={defaultProvider}
+            resources={[
+                { name: 'files' },
+                { name: 'users' }
+            ]}
        >
            <Outlet/>
        </Refine>
--- a/app/routes/account.tsx
+++ b/app/routes/account.tsx
@ -1,5 +1,6 @@
 import { getFormProps, useForm } from "@conform-to/react";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
+import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword } from "@refinedev/core";
 import { useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
@ -19,10 +20,7 @@ import { UsageCard } from "~/components/usage-card";
 import QRImg from "~/images/QR.png";

 export default function MyAccount() {
-  const isLogged = true;
-  if (!isLogged) {
-    window.location.href = "/login";
-  }
+  const { data: identity } = useGetIdentity<{ email: string }>();

  const [openModal, setModal] = useState({
    changeEmail: false,
@ -53,7 +51,7 @@ export default function MyAccount() {
        <ManagementCard>
          <ManagementCardTitle>Email Address</ManagementCardTitle>
          <ManagementCardContent className="text-ring font-semibold">
-          bsimpson@springfield.oh.gov.com
+          {identity?.email}
          </ManagementCardContent>
          <ManagementCardFooter>
            <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
@ -154,7 +152,7 @@ export default function MyAccount() {
        setOpen={(value: boolean) =>
          setModal({ ...openModal, changeEmail: value })
        }
-        currentValue="bsimpson@springfield.oh.gov.com"
+        currentValue={identity?.email || ""}
      />
      <ChangePasswordForm
        open={openModal.changePassword}
@ -176,6 +174,16 @@ const ChangeEmailSchema = z.object({
  email: z.string().email(),
  password: z.string(),
  retypePassword: z.string(),
+})
+.superRefine((data, ctx) => {
+  if (data.password !== data.retypePassword) {
+    return ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["retypePassword"],
+      message: "Passwords do not match",
+    });
+  }
+  return true;
 });

 const ChangeEmailForm = ({
@ -187,6 +195,8 @@ const ChangeEmailForm = ({
  setOpen: (value: boolean) => void;
  currentValue: string;
 }) => {
+  const{ data: identity } = useGetIdentity<{ id: BaseKey }>();
+  const { mutate: updateEmail } = useUpdate();
  const [form, fields] = useForm({
    id: "login",
    constraint: getZodConstraint(ChangeEmailSchema),
@ -194,6 +204,19 @@ const ChangeEmailForm = ({
      return parseWithZod(formData, { schema: ChangeEmailSchema });
    },
    shouldValidate: "onSubmit",
+    onSubmit(e) {
+      e.preventDefault();
+
+      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+      console.log(identity);
+      updateEmail({
+        resource: 'users',
+        id: identity?.id || "",
+        values: {
+          email: data.email.toString()
+        }
+      })
+    }
  });

  return (
@ -236,6 +259,16 @@ const ChangePasswordSchema = z.object({
  currentPassword: z.string().email(),
  newPassword: z.string(),
  retypePassword: z.string(),
+})
+.superRefine((data, ctx) => {
+  if (data.newPassword !== data.retypePassword) {
+    return ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["retypePassword"],
+      message: "Passwords do not match",
+    });
+  }
+  return true;
 });

 const ChangePasswordForm = ({
@ -245,6 +278,7 @@ const ChangePasswordForm = ({
  open: boolean;
  setOpen: (value: boolean) => void;
 }) => {
+  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
  const [form, fields] = useForm({
    id: "login",
    constraint: getZodConstraint(ChangeEmailSchema),
@ -252,6 +286,16 @@ const ChangePasswordForm = ({
      return parseWithZod(formData, { schema: ChangePasswordSchema });
    },
    shouldValidate: "onSubmit",
+    onSubmit(e) {
+      e.preventDefault();
+
+      const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+      
+      updatePassword({
+        password: data.newPassword.toString()
+      });
+
+    },
  });

  return (
@ -270,7 +314,7 @@ const ChangePasswordForm = ({
            />
            <Field
              inputProps={{ name: fields.newPassword.name, type: "password" }}
-              labelProps={{ children: "Password" }}
+              labelProps={{ children: "New Password" }}
              errors={fields.newPassword.errors}
            />
            <Field
--- a/app/routes/file-manager/columns.tsx
+++ b/app/routes/file-manager/columns.tsx
@ -1,6 +1,8 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
+import type { ColumnDef, RowData } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";

 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@ -11,9 +13,16 @@ export type File = {
    createdOn: string;
 };

+declare module '@tanstack/table-core' {
+  interface TableMeta<TData extends RowData> {
+      hoveredRowId: string,
+  }
+}
+
 export const columns: ColumnDef<File>[] = [
    {
      id: "select",
+      size: 20,
      header: ({ table }) => (
        <Checkbox
          
@ -55,11 +64,31 @@ export const columns: ColumnDef<File>[] = [
    },
    {
        accessorKey: "createdOn",
+        size: 200,
        header: "Created On",
-        cell: ({ row }) => (
+        cell: ({ row, table }) => (
          <div className="flex items-center justify-between">
            {row.getValue("createdOn")}
-            {row.getIsSelected() && <MoreIcon />}
+            {(row.getIsSelected() || table.options.meta?.hoveredRowId === row.id)  && (
+              <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreIcon />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <DrawingPinIcon className="mr-2" />
+                    Ping CID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <TrashIcon className="mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            )}
          </div>
        )
    }
--- a/app/routes/file-manager/index.tsx
+++ b/app/routes/file-manager/index.tsx
@ -7,11 +7,6 @@ import { Button } from "~/components/ui/button";
 import { AddIcon } from "~/components/icons";

 export default function FileManager() {
-  const isLogged = true;
-  if (!isLogged) {
-    window.location.href = "/login";
-  }
-
  return (
    <GeneralLayout>
      <h1 className="font-bold mb-4 text-lg">File Manager</h1>
@ -60,20 +55,6 @@ export default function FileManager() {
      </div>
      <DataTable
        columns={columns}
-        data={[
-          {
-            name: "whirly-final-draft.psd",
-            cid: "0xB45165ED3CD437B",
-            size: "1.89 MB",
-            createdOn: "03/02/2024 at 13:29 PM",
-          },
-          {
-            name: "whirly-final-draft.psd",
-            cid: "0xB45165ED3CD437B",
-            size: "1.89 MB",
-            createdOn: "03/02/2024 at 13:29 PM",
-          },
-        ]}
      />
    </GeneralLayout>
  );
--- a/package.json
+++ b/package.json
@ -28,6 +28,7 @@
    "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
    "@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",
    "@refinedev/devtools-shared": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-shared?remix",
+    "@refinedev/react-table": "https://gitpkg.now.sh/LumeWeb/refine/packages/react-table?remix",
    "@refinedev/remix-router": "https://gitpkg.now.sh/LumeWeb/refine/packages/remix?remix",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",
Author	SHA1	Message	Date
Tania Gutierrez	6506917ddb	feat: Integrated Refine to Account modals and User DropDownMenu	2024-03-15 16:00:57 -04:00
Tania Gutierrez	67b579d43b	feat: Integrated Refine into Data Table	2024-03-15 16:00:25 -04:00
Tania Gutierrez	e559e4d709	fix: Adapted File-provider to be default dataProvider	2024-03-15 15:59:02 -04:00