Merge branch 'develop' into riobuenoDevelops/pinning-network

This commit is contained in:
Juan Di Toro 2024-03-22 17:13:10 +01:00
commit e1ca45f1f1
21 changed files with 687 additions and 491 deletions

View File

@ -1,8 +1,8 @@
import { useMemo} from "react";
import { BaseRecord } from "@refinedev/core";
import type { BaseRecord } from "@refinedev/core";
import { useTable } from "@refinedev/react-table";
import {
ColumnDef,
type ColumnDef,
flexRender,
} from "@tanstack/react-table";
@ -56,9 +56,9 @@ export function DataTable<TData extends BaseRecord, TValue>({
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
{headerGroup.headers.map((header, index) => {
return (
<TableHead key={header.id} style={{ width: header.getSize() }}>
<TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
{header.isPlaceholder
? null
: flexRender(
@ -73,14 +73,14 @@ export function DataTable<TData extends BaseRecord, TValue>({
</TableHeader>
<TableBody>
{rows.length ? (
rows.map((row) => (
rows.map((row, index) => (
<TableRow
key={row.id}
key={`FileDataTableRow_${index}`}
data-state={row.getIsSelected() && "selected"}
className="group"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{row.getVisibleCells().map((cell, index) => (
<TableCell key={`FileDataTableCell_${index}`}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}

View File

@ -1,6 +1,6 @@
import { Label } from "@radix-ui/react-label"
import { Input } from "./ui/input"
import { FieldName, useInputControl } from "@conform-to/react"
import { type FieldName, useInputControl } from "@conform-to/react"
import { useId } from "react"
import { cn } from "~/utils"
import { Checkbox } from "~/components/ui/checkbox"
@ -58,7 +58,7 @@ export const FieldCheckbox = ({
const input = useInputControl({
key,
name: inputProps.name,
formId: inputProps.form,
formId: inputProps.form,
initialValue: defaultChecked ? checkedValue : undefined
})
const fallbackId = useId()

View File

@ -25,20 +25,30 @@ import {
PageIcon,
ThemeIcon,
} from "./icons";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } 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";
import { PinningNetworkBanner } from "./pinning-network-banner";
import { PinningProvider } from "~/providers/PinningProvider";
import type { Identity } from "~/data/auth-provider";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipProvider,
} from "./ui/tooltip";
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
const location = useLocation();
const { data: identity } = useGetIdentity<Identity>();
const{ mutate: logout } = useLogout()
const { mutate: logout } = useLogout();
return (
<PinningProvider>
<div className="h-full flex flex-row">
@ -93,7 +103,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</DialogContent>
</Dialog>
</header>
<div className="flex-1 overflow-y-auto p-10">
<div className="flex items-center gap-x-4 justify-end">
<Button variant="ghost" className="rounded-full w-fit">
@ -142,7 +151,11 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder">
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
<img
className="h-5"
src={lumeColorLogoPng}
alt="Lume Logo"
/>
Connect with us
</Button>
</Link>
@ -252,6 +265,7 @@ const UploadFileItem = ({
file: UppyFile;
onRemove: (id: string) => void;
}) => {
const sizeInMb = bytestoMegabytes(file.size).toFixed(2);
return (
<div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
<div className="flex text-primary-1 items-center justify-between">
@ -263,12 +277,23 @@ const UploadFileItem = ({
<PageIcon className="w-4 h-4" />
)}
</div>
<p className="w-full flex justify-between items-center">
<span className="truncate text-ellipsis max-w-[30ch]">
{file.name}
</span>{" "}
<span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
</p>
<TooltipProvider>
<Tooltip delayDuration={500}>
<TooltipTrigger>
<p className="w-full flex justify-between items-center">
<span className="truncate text-ellipsis max-w-[20ch]">
{file.name}
</span>{" "}
<span>({sizeInMb}MB)</span>
</p>
</TooltipTrigger>
<TooltipContent>
<p>
{file.name} ({sizeInMb}MB)
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Button
size={"icon"}

View File

@ -1,14 +1,21 @@
import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core"
import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
import Tus from "@uppy/tus"
import toArray from "@uppy/utils/lib/toArray"
import Tus from "@uppy/tus";
import toArray from "@uppy/utils/lib/toArray";
import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
import {useSdk} from "~/components/lib/sdk-context.js";
import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
import {
type ChangeEvent,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import DropTarget, { type DropTargetOptions } from "./uppy-dropzone";
import { useSdk } from "~/components/lib/sdk-context";
import UppyFileUpload from "~/components/lib/uppy-file-upload";
import { PROTOCOL_S5, type Sdk } from "@lumeweb/portal-sdk";
import type { S5Client, HashProgressEvent } from "@lumeweb/s5-js";
const LISTENING_EVENTS = [
"upload",
@ -16,46 +23,46 @@ const LISTENING_EVENTS = [
"upload-error",
"file-added",
"file-removed",
"files-added"
] as const
"files-added",
] as const;
export function useUppy() {
const sdk = useSdk()
const sdk = useSdk();
const [uploadLimit, setUploadLimit] = useState<number>(0)
const [uploadLimit, setUploadLimit] = useState<number>(0);
useEffect(() => {
async function getUploadLimit() {
try {
const limit = await sdk.account!().uploadLimit();
setUploadLimit(limit);
} catch (err) {
console.log('Error occured while fetching upload limit', err);
}
}
getUploadLimit();
}, []);
useEffect(() => {
async function getUploadLimit() {
try {
const limit = await sdk.account!().uploadLimit();
setUploadLimit(limit);
} catch (err) {
console.log("Error occured while fetching upload limit", err);
}
}
getUploadLimit();
}, [sdk.account]);
const inputRef = useRef<HTMLInputElement>(null)
const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
const uppyInstance = useRef<Uppy>()
const inputRef = useRef<HTMLInputElement>(null);
const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null);
const uppyInstance = useRef<Uppy>();
const setRef = useCallback(
(element: HTMLElement | null) => _setTargetRef(element),
[]
)
const [, setUppyState] = useState<State>()
[],
);
const [, setUppyState] = useState<State>();
const [state, setState] = useState<
"completed" | "idle" | "initializing" | "error" | "uploading"
>("initializing")
>("initializing");
const [inputProps, setInputProps] = useState<
| {
ref: typeof inputRef
type: "file"
onChange: (event: ChangeEvent<HTMLInputElement>) => void
ref: typeof inputRef;
type: "file";
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
}
| object
>({})
>({});
const getRootProps = useMemo(
() => () => {
return {
@ -63,103 +70,110 @@ export function useUppy() {
onClick: () => {
if (inputRef.current) {
//@ts-expect-error -- dumb html
inputRef.current.value = null
inputRef.current.click()
console.log("clicked", { input: inputRef.current })
inputRef.current.value = null;
inputRef.current.click();
console.log("clicked", { input: inputRef.current });
}
},
role: "presentation"
}
role: "presentation",
};
},
[setRef]
)
[setRef],
);
const removeFile = useCallback(
(id: string) => {
uppyInstance.current?.removeFile(id)
uppyInstance.current?.removeFile(id);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[targetRef, uppyInstance]
)
[targetRef, uppyInstance],
);
const cancelAll = useCallback(
() => uppyInstance.current?.cancelAll({ reason: "user" }),
// eslint-disable-next-line react-hooks/exhaustive-deps
[targetRef, uppyInstance]
)
[targetRef, uppyInstance],
);
useEffect(() => {
if (!targetRef) return
if (!targetRef) return;
const tusPreprocessor = async (fileIDs: string[]) => {
for(const fileID of fileIDs) {
const file = uppyInstance.current?.getFile(fileID) as UppyFile
// @ts-ignore
if (file.uploader === "tus") {
const hashProgressCb = (event: HashProgressEvent) => {
uppyInstance.current?.emit("preprocess-progress", file, {
uploadStarted: false,
bytesUploaded: 0,
preprocess: {
mode: "determinate",
message: "Hashing file...",
value: Math.round((event.total / event.total) * 100)
}
})
}
const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File, {}, {onHashProgress: hashProgressCb})
uppyInstance.current?.setFileState(fileID, {
tus: options,
meta: {
...options.metadata,
...file.meta,
}
})
}
const tusPreprocessor = async (fileIDs: string[]) => {
for (const fileID of fileIDs) {
const file = uppyInstance.current?.getFile(fileID) as UppyFile;
// @ts-ignore
if (file.uploader === "tus") {
const hashProgressCb = (event: HashProgressEvent) => {
uppyInstance.current?.emit("preprocess-progress", file, {
uploadStarted: false,
bytesUploaded: 0,
preprocess: {
mode: "determinate",
message: "Hashing file...",
value: Math.round((event.total / event.total) * 100),
},
});
};
const options = await sdk.protocols!()
.get<S5Client>(PROTOCOL_S5)
.getSdk()
.getTusOptions(
file.data as File,
{},
{ onHashProgress: hashProgressCb },
);
uppyInstance.current?.setFileState(fileID, {
tus: options,
meta: {
...options.metadata,
...file.meta,
},
});
}
}
};
const uppy = new Uppy({
logger: debugLogger,
onBeforeUpload: (files) => {
for (const file of Object.entries(files)) {
// @ts-ignore
file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
}
logger: debugLogger,
onBeforeUpload: (files) => {
for (const file of Object.entries(files)) {
// @ts-ignore
file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
}
return true;
},
return true;
},
}).use(DropTarget, {
target: targetRef
} as DropTargetOptions)
target: targetRef,
} as DropTargetOptions);
uppyInstance.current = uppy
uppyInstance.current = uppy;
setInputProps({
ref: inputRef,
type: "file",
onChange: (event) => {
const files = toArray(event.target.files)
const files = toArray(event.target.files);
if (files.length > 0) {
uppyInstance.current?.log("[DragDrop] Files selected through input")
uppyInstance.current?.addFiles(files)
uppyInstance.current?.log("[DragDrop] Files selected through input");
uppyInstance.current?.addFiles(files);
}
uppy.iteratePlugins((plugin) => {
uppy.removePlugin(plugin);
uppy.removePlugin(plugin);
});
uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
uppy.use(UppyFileUpload, { sdk: sdk as Sdk });
let useTus = false;
let useTus = false;
uppyInstance.current?.getFiles().forEach((file) => {
if (file.size > uploadLimit) {
useTus = true;
}
})
if (useTus) {
uppy.use(Tus, { limit: 6, parallelUploads: 10 })
uppy.addPreProcessor(tusPreprocessor)
uppyInstance.current?.getFiles().forEach((file) => {
if (file.size > uploadLimit) {
useTus = true;
}
});
if (useTus) {
uppy.use(Tus, { limit: 6, parallelUploads: 10 });
uppy.addPreProcessor(tusPreprocessor);
}
// We clear the input after a file is selected, because otherwise
// change event is not fired in Chrome and Safari when a file
@ -169,54 +183,52 @@ export function useUppy() {
// Chrome will not trigger change if we drop the same file twice (Issue #768).
// @ts-expect-error TS freaks out, but this is fine
// eslint-disable-next-line no-param-reassign
event.target.value = null
}
})
event.target.value = null;
},
});
uppy.on("complete", (result) => {
if (result.failed.length === 0) {
console.log("Upload successful üòÄ")
setState("completed")
console.log("Upload successful üòÄ");
setState("completed");
} else {
console.warn("Upload failed üòû")
setState("error")
console.warn("Upload failed üòû");
setState("error");
}
console.log("successful files:", result.successful)
console.log("failed files:", result.failed)
})
console.log("successful files:", result.successful);
console.log("failed files:", result.failed);
});
const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
switch (event) {
case "upload":
setState("uploading")
break
setState("uploading");
break;
case "upload-error":
setState("error")
break
setState("error");
break;
default:
break
break;
}
setUppyState(uppy.getState())
}
setUppyState(uppy.getState());
};
for (const event of LISTENING_EVENTS) {
uppy.on(event, function cb() {
setStateCb(event)
})
setStateCb(event);
});
}
setState("idle")
}, [targetRef, uploadLimit])
setState("idle");
}, [targetRef, uploadLimit]);
useEffect(() => {
return () => {
uppyInstance.current?.cancelAll({ reason: "unmount" })
uppyInstance.current?.logout()
uppyInstance.current?.close()
uppyInstance.current = undefined
}
}, [])
uppyInstance.current?.cancelAll({ reason: "unmount" });
uppyInstance.current?.logout();
uppyInstance.current?.close();
uppyInstance.current = undefined;
};
}, []);
return {
getFiles: () => uppyInstance.current?.getFiles() ?? [],
error: uppyInstance.current?.getState,
@ -227,6 +239,6 @@ export function useUppy() {
getInputProps: () => inputProps,
getRootProps,
removeFile,
cancelAll
}
cancelAll,
};
}

View File

@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
<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",
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background 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}

View File

@ -14,7 +14,7 @@ export function Toaster() {
return (
<ToastProvider>
{toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
{toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
return (
<Toast key={id} {...props}>

View File

@ -0,0 +1,28 @@
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "~/utils"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

View File

@ -50,7 +50,7 @@ export const UsageChart = ({ label, dataset }: UsageChartProps) => {
<AnimatedAxis
orientation="bottom"
hideTicks
tickTransform="translateX(50%)"
tickTransform="translate(50 0)"
tickLabelProps={{ className: "text-sm" }}
/>
<AnimatedAxis

View File

@ -30,7 +30,7 @@ export const accountProvider: SdkProvider = {
if (ret) {
if (ret instanceof Error) {
return Promise.reject(ret)
return Promise.reject(ret satisfies HttpError)
}
} else {
return Promise.reject();

View File

@ -1,15 +1,17 @@
import type {AuthProvider, UpdatePasswordFormTypes} from "@refinedev/core"
import type {AuthProvider, HttpError, UpdatePasswordFormTypes} from "@refinedev/core"
import type {
AuthActionResponse,
CheckResponse,
IdentityResponse,
OnErrorResponse
OnErrorResponse,
SuccessNotificationResponse
// @ts-ignore
} from "@refinedev/core/dist/interfaces/bindings/auth"
import {Sdk} from "@lumeweb/portal-sdk";
import {Sdk, AccountError} from "@lumeweb/portal-sdk";
import type {AccountInfoResponse} from "@lumeweb/portal-sdk";
export type AuthFormRequest = {
email: string;
password: string;
@ -31,7 +33,7 @@ export type Identity = {
email: string;
}
export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes{
export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes {
currentPassword: string;
}
@ -43,6 +45,54 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
}
};
type ResponseResult = {
ret: boolean | Error;
successNotification?: SuccessNotificationResponse;
redirectToSuccess?: string;
redirectToError?: string;
successCb?: () => void;
}
interface CheckResponseResult extends ResponseResult {
authenticated?: boolean;
}
const handleResponse = (result: ResponseResult): AuthActionResponse => {
if (result.ret) {
if (result.ret instanceof AccountError) {
return {
success: false,
error: result.ret satisfies HttpError,
redirectTo: result.redirectToError
}
}
result.successCb?.();
return {
success: true,
successNotification: result.successNotification,
redirectTo: result.redirectToSuccess,
}
}
return {
success: false,
redirectTo: result.redirectToError
}
}
const handleCheckResponse = (result: CheckResponseResult): CheckResponse => {
const response = handleResponse(result);
const success = response.success;
delete response.success;
return {
...response,
authenticated: success
}
}
return {
async login(params: AuthFormRequest): Promise<AuthActionResponse> {
const ret = await sdk.account().login({
@ -50,39 +100,30 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
password: params.password,
});
let redirectTo: string | undefined;
return handleResponse({
ret, redirectToSuccess: "/dashboard", redirectToError: "/login", successCb: () => {
sdk.setAuthToken(sdk.account().jwtToken);
}, successNotification: {
message: "Login Successful",
description: "You have successfully logged in."
if (ret) {
redirectTo = params.redirectTo;
if (!redirectTo) {
redirectTo = ret ? "/dashboard" : "/login";
}
sdk.setAuthToken(sdk.account().jwtToken);
}
return {
success: ret,
redirectTo,
};
});
},
async logout(params: any): Promise<AuthActionResponse> {
let ret = await sdk.account().logout();
return {success: ret, redirectTo: "/login"};
return handleResponse({ret, redirectToSuccess: "/login"});
},
async check(params?: any): Promise<CheckResponse> {
const ret = await sdk.account().ping();
if (ret) {
maybeSetupAuth();
}
return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
return handleCheckResponse({ret, redirectToError: "/login", successCb: maybeSetupAuth});
},
async onError(error: any): Promise<OnErrorResponse> {
return {logout: true};
return {};
},
async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
@ -92,7 +133,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
first_name: params.firstName,
last_name: params.lastName,
});
return {success: ret, redirectTo: ret ? "/dashboard" : undefined};
return handleResponse({
ret, redirectToSuccess: "/login", successNotification: {
message: "Registration Successful",
description: "You have successfully registered. Please check your email to verify your account.",
}
});
},
async forgotPassword(params: any): Promise<AuthActionResponse> {
@ -103,22 +149,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
maybeSetupAuth();
const ret = await sdk.account().updatePassword(params.currentPassword, params.password as string);
if (ret) {
if (ret instanceof Error) {
return {
success: false,
error: ret
}
return handleResponse({
ret, successNotification: {
message: "Password Updated",
description: "Your password has been updated successfully.",
}
return {
success: true
}
} else {
return {
success: false
}
}
});
},
async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {

View File

@ -1,52 +1,134 @@
import type { DataProvider } from "@refinedev/core";
import { SdkProvider } from "~/data/sdk-provider.js";
import type {SdkProvider} from "~/data/sdk-provider.js";
import type {S5Client} from "@lumeweb/s5-js";
import {PROTOCOL_S5} from "@lumeweb/portal-sdk";
import {Multihash} from "@lumeweb/libs5/lib/multihash.js";
import type {AxiosProgressEvent} from "axios";
import {CID, CID_TYPES, METADATA_TYPES, metadataMagicByte, Unpacker} from "@lumeweb/libs5";
export const fileProvider = {
getList: () => {
console.log("Not implemented");
return {
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",
},
],
total: 2
async function getIsManifest(s5: S5Client, hash: string): Promise<boolean | number> {
let type: number | null;
try {
const abort = new AbortController();
const resp = s5.downloadData(hash, {
onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
if (progressEvent.loaded >= 10) {
abort.abort();
}
},
httpConfig: {
signal: abort.signal,
},
});
const data = await resp;
const unpacker = Unpacker.fromPacked(Buffer.from(data));
try {
const magic = unpacker.unpackInt();
if (magic !== metadataMagicByte) {
return false;
}
type = unpacker.unpackInt();
if (!type || !Object.values(METADATA_TYPES).includes(type)) {
return false;
}
} catch (e) {
return false;
}
} catch (e) {
return false;
}
},
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: () => "",
switch (type) {
case METADATA_TYPES.DIRECTORY:
return CID_TYPES.DIRECTORY;
case METADATA_TYPES.WEBAPP:
return CID_TYPES.METADATA_WEBAPP;
case METADATA_TYPES.MEDIA:
return CID_TYPES.METADATA_MEDIA;
case METADATA_TYPES.USER_IDENTITY:
return CID_TYPES.USER_IDENTITY;
}
return 0;
}
export interface FileItem {
cid: string;
type: string;
size: number;
mimeType: string;
pinned: string;
}
export const fileProvider: SdkProvider = {
sdk: undefined,
async getList() {
const items: FileItem[] = [];
try {
const s5 = fileProvider.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk()!;
const pinList = await s5.accountPins();
for (const pin of pinList!.pins) {
const manifest = await getIsManifest(s5, pin.hash) as number;
if (manifest) {
const mHash = Multihash.fromBase64Url(pin.hash);
items.push({
cid: new CID(manifest, mHash, pin.size).toString(),
type: "manifest",
mimeType: "application/octet-stream",
size: pin.size,
pinned: pin.pinned_at,
});
} else {
items.push({
cid: new CID(CID_TYPES.RAW, Multihash.fromBase64Url(pin.hash), pin.size).toString(),
type: "raw",
mimeType: pin.mime_type,
size: pin.size,
pinned: pin.pinned_at,
});
}
}
} catch (e) {
return Promise.reject(e);
}
return {
data: items,
total: items.length,
};
},
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() {
return "";
},
} satisfies SdkProvider;

View File

@ -7,16 +7,17 @@ import type {LinksFunction} from "@remix-run/node";
import '@fontsource-variable/manrope';
import {Refine} from "@refinedev/core";
import routerProvider from "@refinedev/remix-router";
import { notificationProvider } from "~/data/notification-provider";
import {SdkContextProvider} from "~/components/lib/sdk-context";
import { Toaster } from "~/components/ui/toaster";
import {notificationProvider} from "~/data/notification-provider";
import {SdkContextProvider, useSdk} 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";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {useMemo} from "react";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
{rel: "stylesheet", href: stylesheet},
];
const queryClient = new QueryClient();
@ -30,9 +31,9 @@ export function Layout({children}: { children: React.ReactNode }) {
<Meta/>
<Links/>
</head>
<body>
<body className="overflow-hidden">
{children}
<Toaster />
<Toaster/>
<ScrollRestoration/>
<Scripts/>
</body>
@ -40,10 +41,9 @@ export function Layout({children}: { children: React.ReactNode }) {
);
}
export default function App() {
console.log(import.meta.env.VITE_PORTAL_URL);
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
const providers = getProviders(sdk);
function App() {
const sdk = useSdk();
const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
return (
<QueryClientProvider client={queryClient}>
<Refine
@ -65,6 +65,15 @@ export default function App() {
);
}
export default function Root() {
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
return (
<SdkContextProvider sdk={sdk}>
<App/>
</SdkContextProvider>
);
}
export function HydrateFallback() {
return <p>Loading...</p>;
}

View File

@ -1,19 +1,12 @@
import { useGo, useIsAuthenticated } from "@refinedev/core";
import {Authenticated} from "@refinedev/core";
import {Navigate} from "@remix-run/react";
export default function Index() {
const { isLoading, data } = useIsAuthenticated();
const go = useGo();
if (isLoading) {
return <>Checking Login Status</>;
}
if (data?.authenticated) {
go({ to: "/dashboard", type: "replace" });
} else {
go({ to: "/login", type: "replace" });
}
return <>Redirecting</>;
return (
<Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
<>Checking Login Status</>
}>
<Navigate to="/dashboard" replace/>
</Authenticated>
)
}

View File

@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import {
Authenticated,
BaseKey,
type BaseKey,
useGetIdentity,
useUpdate,
useUpdatePassword,
@ -41,7 +41,7 @@ import { Input } from "~/components/ui/input";
import { UsageCard } from "~/components/usage-card";
import QRImg from "~/images/QR.png";
import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
import type {UpdatePasswordFormRequest} from "~/data/auth-provider";
export default function MyAccount() {
const { data: identity } = useGetIdentity<{ email: string }>();
@ -85,7 +85,7 @@ export default function MyAccount() {
<ManagementCard>
<ManagementCardAvatar
button={
<DialogTrigger className="absolute bottom-0 right-0 z-50">
<DialogTrigger asChild className="absolute bottom-0 right-0 z-50">
<Button
onClick={() => setModal({ ...openModal, changeAvatar: true })}
variant="outline"
@ -102,7 +102,7 @@ export default function MyAccount() {
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() => setModal({ ...openModal, changeEmail: true })}>
@ -134,7 +134,7 @@ export default function MyAccount() {
<PasswordDots className="mt-6" />
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() =>
@ -152,7 +152,7 @@ export default function MyAccount() {
Improve security by enabling 2FA.
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() =>
@ -313,7 +313,7 @@ const ChangePasswordSchema = z
});
const ChangePasswordForm = () => {
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
const [form, fields] = useForm({
id: "login",
constraint: getZodConstraint(ChangePasswordSchema),
@ -327,6 +327,7 @@ const ChangePasswordForm = () => {
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
updatePassword({
currentPassword: data.currentPassword.toString(),
password: data.newPassword.toString(),
});
},
@ -469,7 +470,7 @@ const ChangeAvatarForm = () => {
{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`}
{isCompleted ? "Upload completed" : "0% completed"}
</div>
) : null}

View File

@ -1,5 +1,5 @@
import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef, Row } from "@tanstack/react-table";
import { TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef } from "@tanstack/react-table";
import { FileIcon, MoreIcon } from "~/components/icons";
import { Checkbox } from "~/components/ui/checkbox";
import {
@ -7,12 +7,11 @@ import {
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { usePinning } from "~/hooks/usePinning";
import { cn } from "~/utils";
import type { FileItem } from "~/data/file-provider";
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
@ -23,47 +22,7 @@ export type File = {
createdOn: string;
};
const CreatedOnCell = ({ row }: { row: Row<File> }) => {
// const { open } = useNotification();
const { mutate } = usePinning();
return (
<div className="flex items-center justify-between">
{row.getValue("createdOn")}
<DropdownMenu>
<DropdownMenuTrigger
className={cn(
"hidden group-hover:block data-[state=open]:block",
row.getIsSelected() && "block",
)}>
<MoreIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() => {
console.log(`Adding ${row.getValue("cid")} for pinning...`);
mutate({
cid: row.getValue("cid"),
type: "pin"
});
}}>
<DrawingPinIcon className="mr-2" />
Pin CID
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<TrashIcon className="mr-2" />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
};
export const columns: ColumnDef<File>[] = [
export const columns: ColumnDef<FileItem>[] = [
{
id: "select",
size: 20,
@ -106,9 +65,34 @@ export const columns: ColumnDef<File>[] = [
header: "Size",
},
{
accessorKey: "createdOn",
size: 200,
header: "Created On",
cell: ({ row }) => <CreatedOnCell row={row} />,
accessorKey: "pinned",
header: "Pinned On",
cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
},
{
accessorKey: "actions",
header: () => null,
size: 20,
cell: ({ row }) => (
<div className="flex w-5 items-center justify-between">
<DropdownMenu>
<DropdownMenuTrigger
className={cn(
"hidden group-hover:block data-[state=open]:block",
row.getIsSelected() && "block",
)}>
<MoreIcon />
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<TrashIcon className="mr-2" />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
),
},
];

View File

@ -5,59 +5,92 @@ import { columns } from "./columns";
import { Input } from "~/components/ui/input";
import { Button } from "~/components/ui/button";
import { AddIcon } from "~/components/icons";
import { Authenticated } from "@refinedev/core";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog";
import { Field } from "~/components/forms";
export default function FileManager() {
return (
<GeneralLayout>
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
<FileCardList>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
</FileCardList>
<h2 className="font-bold text-l mt-8">Files</h2>
<div className="flex items-center space-x-4 my-6 w-full">
<Input
fullWidth
leftIcon={<AddIcon />}
placeholder="Search files by name or CID"
className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
/>
<Button className="h-12 gap-x-2">
<AddIcon />
Select All
</Button>
<Button className="h-12 gap-x-2">
<AddIcon />
New Folder
</Button>
</div>
<DataTable
columns={columns}
resource="file"
dataProviderName="files"
/>
</GeneralLayout>
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
<GeneralLayout>
<Dialog>
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
<FileCardList>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
<FileCard
fileName="Backups"
size="33 files"
type={FileTypes.Folder}
createdAt="2 days ago"
/>
</FileCardList>
<h2 className="font-bold text-l mt-8">Files</h2>
<div className="flex items-center space-x-4 my-6 w-full">
<Input
fullWidth
leftIcon={<AddIcon />}
placeholder="Search files by name or CID"
className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
/>
<Button className="h-12 gap-x-2">
<AddIcon />
Select All
</Button>
<DialogTrigger asChild>
<Button className="h-12 gap-x-2">
<AddIcon />
Pin Content
</Button>
</DialogTrigger>
</div>
<DataTable
columns={columns}
resource="file"
dataProviderName="files"
/>
<DialogContent>
<DialogHeader>
<DialogTitle>Pin Content</DialogTitle>
</DialogHeader>
<form action="" className="w-full flex flex-col gap-y-4">
<Field
inputProps={{
name: "cids",
placeholder: "Comma separated CIDs",
}}
labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
/>
<Button type="submit" className="w-full">
Pin Content
</Button>
</form>
</DialogContent>
</Dialog>
</GeneralLayout>
</Authenticated>
);
}

69
app/routes/login.otp.tsx Normal file
View File

@ -0,0 +1,69 @@
import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { useGo, useIsAuthenticated, useParsed } from "@refinedev/core";
import { Link } from "@remix-run/react";
import { useEffect } from "react";
import { z } from "zod";
import { Field } from "~/components/forms";
import { Button } from "~/components/ui/button";
import type { LoginParams } from "./login";
const OtpSchema = z.object({
otp: z.string().length(6, { message: "OTP must be 6 characters" }),
});
export default function OtpForm() {
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
const go = useGo();
const parsed = useParsed<LoginParams>();
// TODO: Add support for resending the OTP
const [form, fields] = useForm({
id: "otp",
constraint: getZodConstraint(OtpSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: OtpSchema });
},
shouldValidate: "onSubmit",
});
const valid = true;
const to = parsed.params?.to ?? "/dashboard";
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated && valid) {
go({ to, type: "push" });
}
}
}, [isAuthLoading, authData, to, go]);
return (
<form
className="w-full p-2 max-w-md mt-12 bg-background"
{...getFormProps(form)}>
<span className="block !mb-8 space-y-2">
<h2 className="text-3xl font-bold">Check your inbox</h2>
<p className="text-input-placeholder">
We will need the six digit confirmation code you received in your
email in order to verify your account and get started. Didnt receive
a code?{" "}
<Button type="button" variant={"link"} className="text-md h-0">
Resend now
</Button>
</p>
</span>
<Field
inputProps={{ name: fields.otp.name }}
labelProps={{ children: "Confirmation Code" }}
errors={fields.otp.errors}
/>
<Button className="w-full h-14">Verify</Button>
<p className="text-input-placeholder w-full text-left">
<Link
to="/login"
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
Back to Login
</Link>
</p>
</form>
);
}

View File

@ -1,5 +1,5 @@
import type { MetaFunction } from "@remix-run/node";
import { Link, useLocation } from "@remix-run/react";
import { Link } from "@remix-run/react";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import logoPng from "~/images/lume-logo.png?url";
@ -11,7 +11,6 @@ import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import {
useGo,
useIsAuthenticated,
useLogin,
useParsed,
} from "@refinedev/core";
@ -25,30 +24,11 @@ export const meta: MetaFunction = () => {
];
};
type LoginParams = {
export type LoginParams = {
to: string;
};
export default function Login() {
const location = useLocation();
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
const hash = location.hash;
const go = useGo();
const parsed = useParsed<LoginParams>();
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated) {
let to = "/dashboard";
if (parsed.params?.to) {
to = parsed.params.to;
}
go({ to, type: "push" });
}
}
}, [isAuthLoading, authData]);
return (
<div className="p-10 h-screen relative">
<header>
@ -62,8 +42,7 @@ export default function Login() {
/>
</div>
{hash === "" && <LoginForm />}
{hash === "#otp" && <OtpForm />}
<LoginForm />
<footer className="my-5">
<ul className="flex flex-row">
@ -96,11 +75,12 @@ export default function Login() {
const LoginSchema = z.object({
email: z.string().email(),
password: z.string(),
rememberMe: z.boolean(),
rememberMe: z.boolean().optional(),
});
const LoginForm = () => {
const login = useLogin<AuthFormRequest>();
const go = useGo();
const parsed = useParsed<LoginParams>();
const [form, fields] = useForm({
id: "login",
@ -109,19 +89,27 @@ const LoginForm = () => {
return parseWithZod(formData, { schema: LoginSchema });
},
shouldValidate: "onSubmit",
onSubmit(e) {
onSubmit(e, { submission }) {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
login.mutate({
email: data.email.toString(),
password: data.password.toString(),
rememberMe: data.rememberMe.toString() === "on",
redirectTo: parsed.params?.to,
});
if (submission?.status === "success") {
const data = submission.value;
login.mutate({
email: data.email,
password: data.password,
rememberMe: data.rememberMe ?? false,
redirectTo: parsed.params?.to,
});
}
},
});
useEffect(() => {
if (form.status === "success") {
go({ to: "/login/otp", type: "push" });
}
}, [form.status, go]);
return (
<form
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
@ -159,56 +147,3 @@ const LoginForm = () => {
</form>
);
};
const OtpSchema = z.object({
otp: z.string().length(6, { message: "OTP must be 6 characters" }),
});
const OtpForm = () => {
// TODO: Add support for resending the OTP
const [form, fields] = useForm({
id: "otp",
constraint: getZodConstraint(OtpSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: OtpSchema });
},
shouldValidate: "onSubmit",
});
const valid = false; // TODO: some sort of logic to verify user is on OTP state validly
if (!valid) {
location.hash = "";
return null;
}
return (
<form
className="w-full p-2 max-w-md mt-12 bg-background"
{...getFormProps(form)}>
<span className="block !mb-8 space-y-2">
<h2 className="text-3xl font-bold">Check your inbox</h2>
<p className="text-input-placeholder">
We will need the six digit confirmation code you received in your
email in order to verify your account and get started. Didnt receive
a code?{" "}
<Button type="button" variant={"link"} className="text-md h-0">
Resend now
</Button>
</p>
</span>
<Field
inputProps={{ name: fields.otp.name }}
labelProps={{ children: "Confirmation Code" }}
errors={fields.otp.errors}
/>
<Button className="w-full h-14">Verify</Button>
<p className="text-input-placeholder w-full text-left">
<Link
to="/login"
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
Back to Login
</Link>
</p>
</form>
);
};

View File

@ -47,11 +47,11 @@ export default function Register() {
const login = useLogin<AuthFormRequest>();
const { open } = useNotification();
const [form, fields] = useForm({
id: "register",
constraint: getZodConstraint(RegisterSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: RegisterSchema });
},
id: "register",
constraint: getZodConstraint(RegisterSchema),
onValidate({formData}) {
return parseWithZod(formData, {schema: RegisterSchema});
},
onSubmit(e) {
e.preventDefault();
@ -61,23 +61,9 @@ export default function Register() {
password: data.password.toString(),
firstName: data.firstName.toString(),
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(),
rememberMe: false,
})
}
})
}
});
})
}
});
return (
<div className="p-10 h-screen relative">

View File

@ -4,8 +4,8 @@
@layer base {
:root {
--background: 240, 33%, 3%;
--foreground: 0, 0%, 88%;
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 0%;
--card-foreground: 0 0% 3.9%;

View File

@ -16,19 +16,21 @@
"@conform-to/react": "^1.0.2",
"@conform-to/zod": "^1.0.2",
"@fontsource-variable/manrope": "^5.0.19",
"@lumeweb/portal-sdk": "0.0.0-20240319140708",
"@radix-ui/react-accordion": "^1.1.2",
"@lumeweb/portal-sdk": "0.0.0-20240321203634",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.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-tabs": "^1.0.4",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"@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",
@ -45,6 +47,7 @@
"@visx/visx": "^3.10.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"date-fns": "^3.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.1",