Merge pull request 'Refine Integration' (#13) from riobuenoDevelops/refine-integration into develop
Reviewed-on: #13
This commit is contained in:
commit
5aa62f7d82
|
|
@ -1,4 +1,4 @@
|
|||
import { useState } from "react";
|
||||
import { useMemo} from "react";
|
||||
import { BaseRecord } from "@refinedev/core";
|
||||
import { useTable } from "@refinedev/react-table";
|
||||
import {
|
||||
|
|
@ -14,6 +14,7 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "./ui/table"
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
import { DataTablePagination } from "./table-pagination"
|
||||
|
||||
interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
|
||||
|
|
@ -21,22 +22,31 @@ interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown
|
|||
}
|
||||
|
||||
export function DataTable<TData extends BaseRecord, TValue>({
|
||||
columns
|
||||
columns,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const [hoveredRowId, setHoveredRowId] = useState<string>("");
|
||||
|
||||
const table = useTable({
|
||||
columns,
|
||||
meta: {
|
||||
hoveredRowId,
|
||||
},
|
||||
refineCoreProps: {
|
||||
resource: "files"
|
||||
}
|
||||
})
|
||||
|
||||
const loadingRows = useMemo(() => Array(4).fill({}).map(() => ({
|
||||
getIsSelected: () => false,
|
||||
getVisibleCells: () => columns.map(() => ({
|
||||
column: {
|
||||
columnDef: {
|
||||
cell: <Skeleton className="h-4 w-full bg-primary-1/30" />,
|
||||
}
|
||||
},
|
||||
getContext: () => null
|
||||
})),
|
||||
})), [])
|
||||
|
||||
const rows = table.refineCore.tableQueryResult.isLoading ? loadingRows : table.getRowModel().rows
|
||||
|
||||
return (
|
||||
<div className="rounded-lg">
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
|
|
@ -57,15 +67,12 @@ export function DataTable<TData extends BaseRecord, TValue>({
|
|||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
{rows.length ? (
|
||||
rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
onMouseEnter={() => {
|
||||
console.log(hoveredRowId, row.id);
|
||||
setHoveredRowId(row.id)
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
|
|
@ -84,6 +91,6 @@ export function DataTable<TData extends BaseRecord, TValue>({
|
|||
</TableBody>
|
||||
</Table>
|
||||
<DataTablePagination table={table} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,21 @@ import { Avatar } from "./ui/avatar";
|
|||
import { Button } from "./ui/button";
|
||||
import { EditIcon, FingerPrintIcon } from "./icons";
|
||||
|
||||
const ManagementCardAvatar = ({ src }: { src?: string }) => {
|
||||
const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<div className="relative w-fit h-fit">
|
||||
<Avatar className="border-2 border-ring h-28 w-28" />
|
||||
<Button
|
||||
{!button
|
||||
? <Button
|
||||
onClick={onClick}
|
||||
variant="outline"
|
||||
className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
||||
<EditIcon />
|
||||
</Button>
|
||||
: button
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { cn } from "~/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import * as React from "react"
|
||||
import { Cross2Icon } from "@radix-ui/react-icons"
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "~/utils"
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants> & { cancelMutation?: () => void }
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import {
|
||||
Toast,
|
||||
ToastAction,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from "~/components/ui/toast"
|
||||
import { useToast } from "~/components/ui/use-toast"
|
||||
|
||||
export function Toaster() {
|
||||
const { toasts } = useToast()
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
|
||||
const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
|
||||
return (
|
||||
<Toast key={id} {...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && (
|
||||
<ToastDescription>{description}</ToastDescription>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
{undoButton}
|
||||
<ToastClose />
|
||||
</Toast>
|
||||
)
|
||||
})}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
// Inspired by react-hot-toast library
|
||||
import * as React from "react"
|
||||
|
||||
import type {
|
||||
ToastActionElement,
|
||||
ToastProps,
|
||||
} from "~/components/ui/toast"
|
||||
|
||||
const TOAST_LIMIT = 1
|
||||
const TOAST_REMOVE_DELAY = 1000000
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string
|
||||
title?: React.ReactNode
|
||||
description?: React.ReactNode
|
||||
action?: ToastActionElement
|
||||
}
|
||||
|
||||
const actionTypes = {
|
||||
ADD_TOAST: "ADD_TOAST",
|
||||
UPDATE_TOAST: "UPDATE_TOAST",
|
||||
DISMISS_TOAST: "DISMISS_TOAST",
|
||||
REMOVE_TOAST: "REMOVE_TOAST",
|
||||
} as const
|
||||
|
||||
let count = 0
|
||||
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_SAFE_INTEGER
|
||||
return count.toString()
|
||||
}
|
||||
|
||||
type ActionType = typeof actionTypes
|
||||
|
||||
type Action =
|
||||
| {
|
||||
type: ActionType["ADD_TOAST"]
|
||||
toast: ToasterToast
|
||||
}
|
||||
| {
|
||||
type: ActionType["UPDATE_TOAST"]
|
||||
toast: Partial<ToasterToast>
|
||||
}
|
||||
| {
|
||||
type: ActionType["DISMISS_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
| {
|
||||
type: ActionType["REMOVE_TOAST"]
|
||||
toastId?: ToasterToast["id"]
|
||||
}
|
||||
|
||||
interface State {
|
||||
toasts: ToasterToast[]
|
||||
}
|
||||
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
|
||||
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) {
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId)
|
||||
dispatch({
|
||||
type: "REMOVE_TOAST",
|
||||
toastId: toastId,
|
||||
})
|
||||
}, TOAST_REMOVE_DELAY)
|
||||
|
||||
toastTimeouts.set(toastId, timeout)
|
||||
}
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "ADD_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
}
|
||||
|
||||
case "UPDATE_TOAST":
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||
),
|
||||
}
|
||||
|
||||
case "DISMISS_TOAST": {
|
||||
const { toastId } = action
|
||||
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId)
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t
|
||||
),
|
||||
}
|
||||
}
|
||||
case "REMOVE_TOAST":
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
}
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listeners: Array<(state: State) => void> = []
|
||||
|
||||
let memoryState: State = { toasts: [] }
|
||||
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action)
|
||||
listeners.forEach((listener) => {
|
||||
listener(memoryState)
|
||||
})
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, "id">
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId()
|
||||
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: "UPDATE_TOAST",
|
||||
toast: { ...props, id },
|
||||
})
|
||||
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
|
||||
|
||||
dispatch({
|
||||
type: "ADD_TOAST",
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss()
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
}
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState)
|
||||
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState)
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState)
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}, [state])
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
|
||||
}
|
||||
}
|
||||
|
||||
export { useToast, toast }
|
||||
|
|
@ -10,10 +10,16 @@ type AccountData = AccountParams;
|
|||
|
||||
export const accountProvider: SdkProvider = {
|
||||
getList: () => {
|
||||
throw Error("Not Implemented")
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: [],
|
||||
});
|
||||
},
|
||||
getOne: () => {
|
||||
throw Error("Not Implemented")
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
// @ts-ignore
|
||||
async update<TVariables extends AccountParams = AccountParams>(
|
||||
|
|
@ -44,10 +50,16 @@ export const accountProvider: SdkProvider = {
|
|||
};
|
||||
},
|
||||
create: () => {
|
||||
throw Error("Not Implemented")
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
deleteOne: () => {
|
||||
throw Error("Not Implemented")
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
getApiUrl: () => "",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,39 @@
|
|||
import type { DataProvider } from "@refinedev/core";
|
||||
import {SdkProvider} from "~/data/sdk-provider.js";
|
||||
import { SdkProvider } from "~/data/sdk-provider.js";
|
||||
|
||||
export const fileProvider: SdkProvider = {
|
||||
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") },
|
||||
export const fileProvider = {
|
||||
getList: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: [],
|
||||
total: 0,
|
||||
});
|
||||
},
|
||||
getOne: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
id: 1
|
||||
},
|
||||
});
|
||||
},
|
||||
update: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
create: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
deleteOne: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
getApiUrl: () => "",
|
||||
}
|
||||
} satisfies SdkProvider;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import type {
|
||||
NotificationProvider,
|
||||
OpenNotificationParams,
|
||||
} from "@refinedev/core";
|
||||
import type { ToastActionElement } from "~/components/ui/toast";
|
||||
import { toast } from "~/components/ui/use-toast";
|
||||
|
||||
interface Provider extends Omit<NotificationProvider, "open"> {
|
||||
open: (
|
||||
params: Omit<OpenNotificationParams, "type"> & {
|
||||
action?: ToastActionElement;
|
||||
type: "default" | "destructive";
|
||||
},
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const notificationProvider = () => {
|
||||
return {
|
||||
open: ({
|
||||
key,
|
||||
message,
|
||||
description,
|
||||
undoableTimeout,
|
||||
cancelMutation,
|
||||
action,
|
||||
type,
|
||||
}) => {
|
||||
toast({
|
||||
variant: type,
|
||||
key,
|
||||
title: message,
|
||||
description,
|
||||
duration: undoableTimeout,
|
||||
action,
|
||||
cancelMutation,
|
||||
});
|
||||
},
|
||||
close: () => {},
|
||||
} satisfies Provider;
|
||||
};
|
||||
|
|
@ -7,7 +7,9 @@ import type {LinksFunction} from "@remix-run/node";
|
|||
import '@fontsource-variable/manrope';
|
||||
import {Refine} from "@refinedev/core";
|
||||
import routerProvider from "@refinedev/remix-router";
|
||||
import {SdkContextProvider} from "~/components/lib/sdk-context.js";
|
||||
import { notificationProvider } from "~/data/notification-provider";
|
||||
import {SdkContextProvider} from "~/components/lib/sdk-context";
|
||||
import { Toaster } from "~/components/ui/toaster";
|
||||
import {getProviders} from "~/data/providers.js";
|
||||
import {Sdk} from "@lumeweb/portal-sdk";
|
||||
import resources from "~/data/resources.js";
|
||||
|
|
@ -27,6 +29,7 @@ export function Layout({children}: { children: React.ReactNode }) {
|
|||
</head>
|
||||
<body>
|
||||
{children}
|
||||
<Toaster />
|
||||
<ScrollRestoration/>
|
||||
<Scripts/>
|
||||
</body>
|
||||
|
|
@ -41,6 +44,7 @@ export default function App() {
|
|||
<Refine
|
||||
authProvider={providers.auth}
|
||||
routerProvider={routerProvider}
|
||||
notificationProvider={notificationProvider}
|
||||
dataProvider={providers.default}
|
||||
resources={resources}
|
||||
options={{disableTelemetry: true}}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,19 @@
|
|||
import {useGo, useIsAuthenticated} from "@refinedev/core";
|
||||
import {useEffect} from "react";
|
||||
import { useGo, useIsAuthenticated } from "@refinedev/core";
|
||||
|
||||
export default function Index() {
|
||||
const {isLoading, data} = useIsAuthenticated();
|
||||
const { isLoading, data } = useIsAuthenticated();
|
||||
|
||||
const go = useGo();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
if (data?.authenticated) {
|
||||
go({to: "/dashboard", type: "replace"});
|
||||
} else {
|
||||
go({to: "/login", type: "replace"});
|
||||
}
|
||||
}
|
||||
}, [isLoading, data]);
|
||||
|
||||
if (isLoading) {
|
||||
return <>Checking Login Status</> || null;
|
||||
return <>Checking Login Status</>;
|
||||
}
|
||||
|
||||
return (<>Redirecting</>) || null;
|
||||
if (data?.authenticated) {
|
||||
go({ to: "/dashboard", type: "replace" });
|
||||
} else {
|
||||
go({ to: "/login", type: "replace" });
|
||||
}
|
||||
|
||||
return <>Redirecting</>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { getFormProps, useForm } from "@conform-to/react";
|
||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
|
||||
import { DialogClose } from "@radix-ui/react-dialog";
|
||||
import { Cross2Icon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
Authenticated,
|
||||
BaseKey,
|
||||
|
|
@ -7,11 +9,19 @@ import {
|
|||
useUpdate,
|
||||
useUpdatePassword,
|
||||
} from "@refinedev/core";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { z } from "zod";
|
||||
import { Field } from "~/components/forms";
|
||||
import { GeneralLayout } from "~/components/general-layout";
|
||||
import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons";
|
||||
import {
|
||||
AddIcon,
|
||||
CloudCheckIcon,
|
||||
CloudIcon,
|
||||
CloudUploadIcon,
|
||||
CrownIcon,
|
||||
EditIcon,
|
||||
} from "~/components/icons";
|
||||
import { useUppy } from "~/components/lib/uppy";
|
||||
import {
|
||||
ManagementCard,
|
||||
ManagementCardAvatar,
|
||||
|
|
@ -25,6 +35,7 @@ import {
|
|||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { UsageCard } from "~/components/usage-card";
|
||||
|
|
@ -39,12 +50,24 @@ export default function MyAccount() {
|
|||
changeEmail: false,
|
||||
changePassword: false,
|
||||
setupTwoFactor: false,
|
||||
changeAvatar: false,
|
||||
});
|
||||
|
||||
return (
|
||||
<Authenticated key="account" v3LegacyAuthProviderCompatible>
|
||||
<GeneralLayout>
|
||||
<h1 className="text-lg font-bold mb-4">My Account</h1>
|
||||
<Dialog
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setModal({
|
||||
changeEmail: false,
|
||||
changePassword: false,
|
||||
setupTwoFactor: false,
|
||||
changeAvatar: false,
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<UsageCard
|
||||
label="Usage"
|
||||
currentUsage={2}
|
||||
|
|
@ -60,7 +83,18 @@ export default function MyAccount() {
|
|||
<h2 className="font-bold my-8">Account Management</h2>
|
||||
<div className="grid grid-cols-3 gap-x-8">
|
||||
<ManagementCard>
|
||||
<ManagementCardAvatar />
|
||||
<ManagementCardAvatar
|
||||
button={
|
||||
<DialogTrigger className="absolute bottom-0 right-0 z-50">
|
||||
<Button
|
||||
onClick={() => setModal({ ...openModal, changeAvatar: true })}
|
||||
variant="outline"
|
||||
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
}
|
||||
/>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
<ManagementCardTitle>Email Address</ManagementCardTitle>
|
||||
|
|
@ -68,12 +102,14 @@ export default function MyAccount() {
|
|||
{identity?.email}
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, changeEmail: true })}>
|
||||
<AddIcon />
|
||||
Change Email Address
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
|
|
@ -98,12 +134,16 @@ export default function MyAccount() {
|
|||
<PasswordDots className="mt-6" />
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, changePassword: true })}>
|
||||
onClick={() =>
|
||||
setModal({ ...openModal, changePassword: true })
|
||||
}>
|
||||
<AddIcon />
|
||||
Change Password
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
|
|
@ -112,12 +152,16 @@ export default function MyAccount() {
|
|||
Improve security by enabling 2FA.
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
|
||||
onClick={() =>
|
||||
setModal({ ...openModal, setupTwoFactor: true })
|
||||
}>
|
||||
<AddIcon />
|
||||
Enable Two-Factor Authorization
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
</div>
|
||||
|
|
@ -160,26 +204,15 @@ export default function MyAccount() {
|
|||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
</div>
|
||||
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
|
||||
<ChangeEmailForm
|
||||
open={openModal.changeEmail}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, changeEmail: value })
|
||||
}
|
||||
currentValue={identity?.email || ""}
|
||||
/>
|
||||
<ChangePasswordForm
|
||||
open={openModal.changePassword}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, changePassword: value })
|
||||
}
|
||||
/>
|
||||
<SetupTwoFactorDialog
|
||||
open={openModal.setupTwoFactor}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, setupTwoFactor: value })
|
||||
}
|
||||
/>
|
||||
<DialogContent>
|
||||
{openModal.changeAvatar && <ChangeAvatarForm />}
|
||||
{openModal.changeEmail && (
|
||||
<ChangeEmailForm currentValue={identity?.email || ""} />
|
||||
)}
|
||||
{openModal.changePassword && <ChangePasswordForm />}
|
||||
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</GeneralLayout>
|
||||
</Authenticated>
|
||||
);
|
||||
|
|
@ -202,15 +235,7 @@ const ChangeEmailSchema = z
|
|||
return true;
|
||||
});
|
||||
|
||||
const ChangeEmailForm = ({
|
||||
open,
|
||||
setOpen,
|
||||
currentValue,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
currentValue: string;
|
||||
}) => {
|
||||
const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
|
||||
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
|
||||
const { mutate: updateEmail } = useUpdate();
|
||||
const [form, fields] = useForm({
|
||||
|
|
@ -237,10 +262,10 @@ const ChangeEmailForm = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="mb-8">Change Email</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
|
||||
{currentValue}
|
||||
</div>
|
||||
|
|
@ -266,9 +291,7 @@ const ChangeEmailForm = ({
|
|||
/>
|
||||
<Button className="w-full h-14">Change Email Address</Button>
|
||||
</form>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -289,14 +312,8 @@ const ChangePasswordSchema = z
|
|||
return true;
|
||||
});
|
||||
|
||||
const ChangePasswordForm = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}) => {
|
||||
const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
|
||||
const ChangePasswordForm = () => {
|
||||
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(ChangePasswordSchema),
|
||||
|
|
@ -310,17 +327,16 @@ const ChangePasswordForm = ({
|
|||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
|
||||
updatePassword({
|
||||
currentPassword: data.currentPassword.toString(),
|
||||
password: data.newPassword.toString(),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="mb-8">Change Password</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form {...getFormProps(form)}>
|
||||
<Field
|
||||
inputProps={{
|
||||
|
|
@ -345,31 +361,18 @@ const ChangePasswordForm = ({
|
|||
/>
|
||||
<Button className="w-full h-14">Change Password</Button>
|
||||
</form>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SetupTwoFactorDialog = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}) => {
|
||||
const SetupTwoFactorDialog = () => {
|
||||
const [continueModal, setContinue] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(value) => {
|
||||
setOpen(value);
|
||||
setContinue(false);
|
||||
}}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-y-6">
|
||||
{continueModal ? (
|
||||
<>
|
||||
|
|
@ -391,17 +394,107 @@ const SetupTwoFactorDialog = ({
|
|||
<div className="p-4 border text-primary-2 text-center font-bold">
|
||||
HHH7MFGAMPJ44OM44FGAMPJ44O232
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-14"
|
||||
onClick={() => setContinue(true)}>
|
||||
<Button className="w-full h-14" onClick={() => setContinue(true)}>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ChangeAvatarForm = () => {
|
||||
const {
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
getFiles,
|
||||
upload,
|
||||
state,
|
||||
removeFile,
|
||||
cancelAll,
|
||||
} = useUppy();
|
||||
|
||||
console.log({ state, files: getFiles() });
|
||||
|
||||
const isUploading = state === "uploading";
|
||||
const isCompleted = state === "completed";
|
||||
const hasStarted = state !== "idle" && state !== "initializing";
|
||||
|
||||
const file = getFiles()?.[0];
|
||||
|
||||
const imagePreview = useMemo(() => {
|
||||
if (file) {
|
||||
return URL.createObjectURL(file.data);
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader className="mb-6">
|
||||
<DialogTitle>Edit Avatar</DialogTitle>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{!hasStarted && !getFiles().length ? (
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
|
||||
<input
|
||||
hidden
|
||||
aria-hidden
|
||||
name="uppyFiles[]"
|
||||
key={new Date().toISOString()}
|
||||
multiple
|
||||
{...getInputProps()}
|
||||
/>
|
||||
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
|
||||
<p>Drag & Drop Files or Browse</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!hasStarted && file && (
|
||||
<div className="border border-border rounded p-4 bg-primary-dark relative">
|
||||
<Button
|
||||
className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
|
||||
onClick={() => removeFile(file?.id)}>
|
||||
<Cross2Icon className="size-4" />
|
||||
</Button>
|
||||
<img
|
||||
className="w-full h-48 object-contain"
|
||||
src={imagePreview}
|
||||
alt="New Avatar Preview"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasStarted ? (
|
||||
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
|
||||
<CloudCheckIcon className="w-32 h-32" />
|
||||
{isCompleted ? "Upload completed" : `0% completed`}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isUploading ? (
|
||||
<DialogClose asChild onClick={cancelAll}>
|
||||
<Button size={"lg"} className="mt-6">
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogClose>
|
||||
) : null}
|
||||
|
||||
{isCompleted ? (
|
||||
<DialogClose asChild>
|
||||
<Button size={"lg"} className="mt-6">
|
||||
Close
|
||||
</Button>
|
||||
</DialogClose>
|
||||
) : null}
|
||||
|
||||
{!hasStarted && !isCompleted && !isUploading ? (
|
||||
<Button size={"lg"} className="mt-6" onClick={upload}>
|
||||
Upload
|
||||
</Button>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ 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";
|
||||
import { cn } from "~/utils";
|
||||
|
||||
// This type is used to define the shape of our data.
|
||||
// You can use a Zod schema here if you want.
|
||||
|
|
@ -66,12 +67,13 @@ 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) && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<DropdownMenuTrigger className={
|
||||
cn("hidden group-hover:block data-[state=open]:block", row.getIsSelected() && "block")
|
||||
}>
|
||||
<MoreIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
|
|
@ -88,7 +90,6 @@ export const columns: ColumnDef<File>[] = [
|
|||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Field, FieldCheckbox } from "~/components/forms"
|
|||
import { getFormProps, useForm } from "@conform-to/react"
|
||||
import { z } from "zod"
|
||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod"
|
||||
import {useLogin, useRegister} from "@refinedev/core";
|
||||
import {useLogin, useNotification, useRegister} from "@refinedev/core";
|
||||
import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
|
|
@ -45,6 +45,7 @@ const RegisterSchema = z
|
|||
export default function Register() {
|
||||
const register = useRegister<RegisterFormRequest>()
|
||||
const login = useLogin<AuthFormRequest>();
|
||||
const { open } = useNotification();
|
||||
const [form, fields] = useForm({
|
||||
id: "register",
|
||||
constraint: getZodConstraint(RegisterSchema),
|
||||
|
|
@ -62,6 +63,12 @@ export default function Register() {
|
|||
lastName: data.lastName.toString(),
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "Verify your Email",
|
||||
description: "An Email was sent to your email address. Please verify your email address to activate your account.",
|
||||
key: "register-success"
|
||||
})
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import { Field } from "~/components/forms";
|
|||
import { getFormProps, useForm } from "@conform-to/react";
|
||||
import { z } from "zod";
|
||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
|
||||
import { ToastAction } from "~/components/ui/toast";
|
||||
import { useNotification } from "@refinedev/core";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [{ title: "Sign Up" }];
|
||||
|
|
@ -18,12 +20,26 @@ const RecoverPasswordSchema = z.object({
|
|||
email: z.string().email(),
|
||||
});
|
||||
export default function RecoverPassword() {
|
||||
const { open } = useNotification();
|
||||
const [form, fields] = useForm({
|
||||
id: "sign-up",
|
||||
constraint: getZodConstraint(RecoverPasswordSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: RecoverPasswordSchema });
|
||||
},
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "Password reset email sent",
|
||||
description: "Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.",
|
||||
action: <ToastAction altText="Cancel">Cancel</ToastAction>,
|
||||
cancelMutation: () => {
|
||||
console.log("cancel mutation");
|
||||
},
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: another detail is the reset password has no screen to either accept a new pass or
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@radix-ui/react-progress": "^1.0.3",
|
||||
"@radix-ui/react-select": "^2.0.0",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-toast": "^1.1.5",
|
||||
"@refinedev/cli": "^2.16.1",
|
||||
"@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
|
||||
"@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",
|
||||
|
|
|
|||
Loading…
Reference in New Issue