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,
-} from "@tanstack/react-table";
+  getCoreRowModel,
+  useReactTable,
+  getPaginationRowModel,
+} from "@tanstack/react-table"
 
 import {
   Table,
@@ -16,23 +16,20 @@ import {
 } from "./ui/table"
 import { DataTablePagination } from "./table-pagination"
 
-interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
+interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
+  data: TData[]
 }
 
-export function DataTable<TData extends BaseRecord, TValue>({
+export function DataTable<TData, TValue>({
-  columns
+  columns,
+  data,
 }: DataTableProps<TData, TValue>) {
-  const [hoveredRowId, setHoveredRowId] = useState<string>("");
+  const table = useReactTable({
-
+    data,
-  const table = useTable({
     columns,
-    meta: {
+    getCoreRowModel: getCoreRowModel(),
-      hoveredRowId,
+    getPaginationRowModel: getPaginationRowModel(),
-    },
-    refineCoreProps: {
-      resource: "files"
-    }
   })
 
   return (
@@ -43,7 +40,7 @@ export function DataTable<TData extends BaseRecord, TValue>({
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <TableHead key={header.id} style={{ width: header.getSize() }}>
+                  <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -62,10 +59,6 @@ export function DataTable<TData extends BaseRecord, 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}>

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, ExitIcon, TrashIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons";
 import {
   ClockIcon,
   DriveIcon,
@@ -25,17 +25,12 @@ import {
   PageIcon,
   ThemeIcon,
 } from "./icons";
-import { DropdownMenu, DropdownMenuTrigger,  DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
+import { DropdownMenu, DropdownMenuTrigger } 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">
@@ -100,18 +95,10 @@ 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" />
-                {`${identity?.firstName} ${identity?.lastName}`}
+                whirly10
                 <ChevronDownIcon />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuGroup>
-                <DropdownMenuItem onClick={() => logout()}>
-                  <ExitIcon className="mr-2" />
-                  Log Out
-                </DropdownMenuItem>  
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
           </DropdownMenu>
         </div>
 

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-primary p-1 text-white shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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,17 +80,14 @@ 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, variant, ...props }, ref) => (
+>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "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",
+      "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",
       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}
@@ -168,7 +165,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-primary-2/75", className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
 ))

app/components/upgrade-account-banner.tsx

@@ -1,6 +1,3 @@
-import { useGetIdentity } from "@refinedev/core"
-import { Identity } from "~/data/auth-provider"
-
 import {
   CrownIcon,
   PersonIcon,
@@ -13,14 +10,13 @@ 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">
-            {`${identity?.firstName} ${identity?.lastName}`}
+            wirtly
             <CrownIcon className="text-ring" />
           </div>
           <div className="flex gap-x-5 mt-2">

app/data/file-provider.ts

@@ -1,10 +1,15 @@
-import type { DataProvider } from "@refinedev/core";
+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";
 
-export const defaultProvider: DataProvider = {
+export class PortalFilesProvider implements DataProvider {
-  getList: () => { throw Error("Not Implemented") },
+    getList: <TData extends BaseRecord = BaseRecord>(params: GetListParams) => Promise<GetListResponse<TData>>;
-  getOne: () => { throw Error("Not Implemented") },
+    getMany?: (<TData extends BaseRecord = BaseRecord>(params: GetManyParams) => Promise<GetManyResponse<TData>>) | undefined;
-  update: () => { throw Error("Not Implemented") },
+    getOne: <TData extends BaseRecord = BaseRecord>(params: GetOneParams) => Promise<GetOneResponse<TData>>;
-  create: () => { throw Error("Not Implemented") },
+    create: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateParams<TVariables>) => Promise<CreateResponse<TData>>;
-  deleteOne: () => { throw Error("Not Implemented") },
+    createMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateManyParams<TVariables>) => Promise<CreateManyResponse<TData>>) | undefined;
-  getApiUrl: () => "",
+    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;
 }

app/root.tsx

@@ -14,7 +14,6 @@ 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 },
@@ -43,11 +42,6 @@ export default function App() {
         <Refine
             authProvider={PortalAuthProvider.create("https://alpha.pinner.xyz")}
             routerProvider={routerProvider}
-            dataProvider={defaultProvider}
-            resources={[
-                { name: 'files' },
-                { name: 'users' }
-            ]}
         >
             <Outlet/>
         </Refine>

app/routes/account.tsx

@@ -1,6 +1,5 @@
 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";
@@ -20,7 +19,10 @@ import { UsageCard } from "~/components/usage-card";
 import QRImg from "~/images/QR.png";
 
 export default function MyAccount() {
-  const { data: identity } = useGetIdentity<{ email: string }>();
+  const isLogged = true;
+  if (!isLogged) {
+    window.location.href = "/login";
+  }
 
   const [openModal, setModal] = useState({
     changeEmail: false,
@@ -51,7 +53,7 @@ export default function MyAccount() {
         <ManagementCard>
           <ManagementCardTitle>Email Address</ManagementCardTitle>
           <ManagementCardContent className="text-ring font-semibold">
-          {identity?.email}
+          bsimpson@springfield.oh.gov.com
           </ManagementCardContent>
           <ManagementCardFooter>
             <Button className="h-12 gap-x-2" onClick={() => setModal({ ...openModal, changeEmail: true })}>
@@ -152,7 +154,7 @@ export default function MyAccount() {
         setOpen={(value: boolean) =>
           setModal({ ...openModal, changeEmail: value })
         }
-        currentValue={identity?.email || ""}
+        currentValue="bsimpson@springfield.oh.gov.com"
       />
       <ChangePasswordForm
         open={openModal.changePassword}
@@ -174,16 +176,6 @@ 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 = ({
@@ -195,8 +187,6 @@ 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),
@@ -204,19 +194,6 @@ 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 (
@@ -259,16 +236,6 @@ 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 = ({
@@ -278,7 +245,6 @@ const ChangePasswordForm = ({
   open: boolean;
   setOpen: (value: boolean) => void;
 }) => {
-  const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangeEmailSchema),
@@ -286,16 +252,6 @@ 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 (
@@ -314,7 +270,7 @@ const ChangePasswordForm = ({
             />
             <Field
               inputProps={{ name: fields.newPassword.name, type: "password" }}
-              labelProps={{ children: "New Password" }}
+              labelProps={{ children: "Password" }}
               errors={fields.newPassword.errors}
             />
             <Field

app/routes/file-manager/columns.tsx

@@ -1,8 +1,6 @@
-import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
+import type { ColumnDef } from "@tanstack/react-table";
-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.
@@ -13,16 +11,9 @@ 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
           
@@ -64,31 +55,11 @@ export const columns: ColumnDef<File>[] = [
     },
     {
         accessorKey: "createdOn",
-        size: 200,
         header: "Created On",
-        cell: ({ row, table }) => (
+        cell: ({ row }) => (
           <div className="flex items-center justify-between">
             {row.getValue("createdOn")}
-            {(row.getIsSelected() || table.options.meta?.hoveredRowId === row.id)  && (
+            {row.getIsSelected() && <MoreIcon />}
-              <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>
         )
     }

app/routes/file-manager/index.tsx

@@ -7,6 +7,11 @@ 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>
@@ -55,6 +60,20 @@ 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>
   );

package.json

@@ -28,7 +28,6 @@
     "@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",