Compare commits

..

No commits in common. "c9de506c565db301017a22e85856a9a462b42cba" and "7b31d561fed8bf8d60f6a2991b6bb6a49eadf70b" have entirely different histories.

23 changed files with 722 additions and 975 deletions

View File

@ -1,8 +1,8 @@
import { useMemo} from "react";
import type { BaseRecord } from "@refinedev/core";
import { BaseRecord } from "@refinedev/core";
import { useTable } from "@refinedev/react-table";
import {
type ColumnDef,
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, index) => {
{headerGroup.headers.map((header) => {
return (
<TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
<TableHead key={header.id} 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, index) => (
rows.map((row) => (
<TableRow
key={`FileDataTableRow_${index}`}
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="group"
>
{row.getVisibleCells().map((cell, index) => (
<TableCell key={`FileDataTableCell_${index}`}>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
{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 { type FieldName, useInputControl } from "@conform-to/react"
import { FieldName, useInputControl } from "@conform-to/react"
import { useId } from "react"
import { cn } from "~/utils"
import { Checkbox } from "~/components/ui/checkbox"

View File

@ -25,30 +25,20 @@ 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">
@ -103,6 +93,7 @@ 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">
@ -151,11 +142,7 @@ 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>
@ -265,7 +252,6 @@ 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">
@ -277,23 +263,12 @@ const UploadFileItem = ({
<PageIcon className="w-4 h-4" />
)}
</div>
<TooltipProvider>
<Tooltip delayDuration={500}>
<TooltipTrigger>
<p className="w-full flex justify-between items-center">
<span className="truncate text-ellipsis max-w-[20ch]">
<span className="truncate text-ellipsis max-w-[30ch]">
{file.name}
</span>{" "}
<span>({sizeInMb}MB)</span>
<span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
</p>
</TooltipTrigger>
<TooltipContent>
<p>
{file.name} ({sizeInMb}MB)
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Button
size={"icon"}

View File

@ -1,21 +1,14 @@
import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
import Uppy, {debugLogger, type State, 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";
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";
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";
const LISTENING_EVENTS = [
"upload",
@ -23,13 +16,13 @@ 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() {
@ -37,32 +30,32 @@ export function useUppy() {
const limit = await sdk.account!().uploadLimit();
setUploadLimit(limit);
} catch (err) {
console.log("Error occured while fetching upload limit", 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 {
@ -70,35 +63,35 @@ 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;
const file = uppyInstance.current?.getFile(fileID) as UppyFile
// @ts-ignore
if (file.uploader === "tus") {
const hashProgressCb = (event: HashProgressEvent) => {
@ -108,28 +101,21 @@ export function useUppy() {
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 },
);
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,
@ -142,25 +128,25 @@ export function useUppy() {
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.use(UppyFileUpload, { sdk: sdk as Sdk });
uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
let useTus = false;
@ -168,11 +154,11 @@ export function useUppy() {
if (file.size > uploadLimit) {
useTus = true;
}
});
})
if (useTus) {
uppy.use(Tus, { limit: 6, parallelUploads: 10 });
uppy.addPreProcessor(tusPreprocessor);
uppy.use(Tus, { limit: 6, parallelUploads: 10 })
uppy.addPreProcessor(tusPreprocessor)
}
// We clear the input after a file is selected, because otherwise
@ -183,52 +169,54 @@ 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,
@ -239,6 +227,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-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",
"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}

View File

@ -14,7 +14,7 @@ export function Toaster() {
return (
<ToastProvider>
{toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
{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}>

View File

@ -1,28 +0,0 @@
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="translate(50 0)"
tickTransform="translateX(50%)"
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 satisfies HttpError)
return Promise.reject(ret)
}
} else {
return Promise.reject();

View File

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

View File

@ -1,108 +1,28 @@
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";
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;
}
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);
}
import type { DataProvider } from "@refinedev/core";
import { SdkProvider } from "~/data/sdk-provider.js";
export const fileProvider = {
getList: () => {
console.log("Not implemented");
return {
data: items,
total: items.length,
};
data: [
{
name: "whirly-final-draft.psd",
cid: "0xB45165ED3CD437B",
size: "1.89 MB",
createdOn: " 03/02/2024 at 13:29 PM",
},
getOne() {
{
name: "whirly-final-draft.psd",
cid: "0xB45165ED3CD437B",
size: "1.89 MB",
createdOn: " 03/02/2024 at 13:29 PM",
},
],
total: 2
}
},
getOne: () => {
console.log("Not implemented");
return Promise.resolve({
data: {
@ -110,25 +30,23 @@ export const fileProvider: SdkProvider = {
},
});
},
update() {
update: () => {
console.log("Not implemented");
return Promise.resolve({
data: {},
});
},
create() {
create: () => {
console.log("Not implemented");
return Promise.resolve({
data: {},
});
},
deleteOne() {
deleteOne: () => {
console.log("Not implemented");
return Promise.resolve({
data: {},
});
},
getApiUrl() {
return "";
},
getApiUrl: () => "",
} satisfies SdkProvider;

View File

@ -1,62 +1,51 @@
import { useNotification } from "@refinedev/core";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useCallback, useContext } from "react";
import { useMutation } from "@tanstack/react-query";
import { useContext } from "react";
import { PinningProcess } from "~/data/pinning";
import { PinningContext } from "~/providers/PinningProvider";
export const usePinning = () => {
const queryClient = useQueryClient();
const context = useContext(PinningContext);
const { open } = useNotification();
// TODO: Adapt to real API
const { mutate: pinMutation } = useMutation({
mutationKey: ["pin-mutation"],
mutationFn: async (variables: { cid: string }) => {
const { cid } = variables;
export const usePinning = () => {
const context = useContext(PinningContext);
const { mutate } = useMutation({
mutationKey: ["pin-progress"],
mutationFn: async (variables: { cid: string, type: "pin" | "unpin" }) => {
const { cid, type } = variables;
switch (type) {
case "pin": {
const response = await PinningProcess.pin(cid);
if (!response.success) {
open?.({
type: "error",
message: `Error pinning ${cid}`,
type: "destructive",
message: "Erorr pinning " + cid,
description: response.message,
});
}
queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
},
});
const { mutate: unpinMutation } = useMutation({
mutationKey: ["unpin-mutation"],
mutationFn: async (variables: { cid: string }) => {
const { cid } = variables;
break;
}
case "unpin": {
const response = await PinningProcess.unpin(cid);
if (!response.success) {
open?.({
type: "error",
message: `Error removing ${cid}`,
type: "destructive",
message: "Erorr removing " + cid,
description: response.message,
});
}
queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
},
});
const bulkPin = useCallback(
(cids: string[]) => {
for (const cid of cids) {
pinMutation({ cid });
break;
}
},
[pinMutation],
);
}
context.queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
}
});
return {
...context.query,
pin: pinMutation,
unpin: unpinMutation,
bulkPin,
mutate
};
};

View File

@ -1,11 +1,11 @@
import {
type QueryClient,
type UseQueryResult,
QueryClient,
UseQueryResult,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { createContext, useContext } from "react";
import { PinningProcess, type PinningStatus } from "~/data/pinning";
import { PinningProcess, PinningStatus } from "~/data/pinning";
export interface IPinningData {
cid: string;

View File

@ -1,26 +1,19 @@
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
import stylesheet from "./tailwind.css?url";
import type {LinksFunction} from "@remix-run/node";
// Supports weights 200-800
import "@fontsource-variable/manrope";
import '@fontsource-variable/manrope';
import {Refine} from "@refinedev/core";
import routerProvider from "@refinedev/remix-router";
import { notificationProvider } from "~/data/notification-provider";
import { SdkContextProvider, useSdk } from "~/components/lib/sdk-context";
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";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useMemo } from "react";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
@ -37,7 +30,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Meta/>
<Links/>
</head>
<body className="overflow-hidden">
<body>
{children}
<Toaster />
<ScrollRestoration/>
@ -47,9 +40,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}
function App() {
const sdk = useSdk();
const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
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);
return (
<QueryClientProvider client={queryClient}>
<Refine
@ -58,25 +52,19 @@ function App() {
notificationProvider={notificationProvider}
dataProvider={{
default: providers.default,
files: providers.files,
files: providers.files
}}
resources={resources}
options={{ disableTelemetry: true }}>
options={{disableTelemetry: true}}
>
<SdkContextProvider sdk={sdk}>
<Outlet/>
</SdkContextProvider>
</Refine>
</QueryClientProvider>
);
}
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,12 +1,19 @@
import {Authenticated} from "@refinedev/core";
import {Navigate} from "@remix-run/react";
import { useGo, useIsAuthenticated } from "@refinedev/core";
export default function Index() {
return (
<Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
<>Checking Login Status</>
}>
<Navigate to="/dashboard" replace/>
</Authenticated>
)
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</>;
}

View File

@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import {
Authenticated,
type BaseKey,
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 type { UpdatePasswordFormRequest } from "~/data/auth-provider";
import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
export default function MyAccount() {
const { data: identity } = useGetIdentity<{ email: string }>();
@ -85,13 +85,9 @@ export default function MyAccount() {
<ManagementCard>
<ManagementCardAvatar
button={
<DialogTrigger
asChild
className="absolute bottom-0 right-0 z-50">
<DialogTrigger className="absolute bottom-0 right-0 z-50">
<Button
onClick={() =>
setModal({ ...openModal, changeAvatar: true })
}
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 />
@ -106,12 +102,10 @@ export default function MyAccount() {
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, changeEmail: true })
}>
onClick={() => setModal({ ...openModal, changeEmail: true })}>
<AddIcon />
Change Email Address
</Button>
@ -140,7 +134,7 @@ export default function MyAccount() {
<PasswordDots className="mt-6" />
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
@ -153,14 +147,12 @@ export default function MyAccount() {
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>
Two-Factor Authentication
</ManagementCardTitle>
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
<ManagementCardContent>
Improve security by enabling 2FA.
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
@ -321,8 +313,7 @@ const ChangePasswordSchema = z
});
const ChangePasswordForm = () => {
const { mutate: updatePassword } =
useUpdatePassword<UpdatePasswordFormRequest>();
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
const [form, fields] = useForm({
id: "login",
constraint: getZodConstraint(ChangePasswordSchema),
@ -336,7 +327,6 @@ const ChangePasswordForm = () => {
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
updatePassword({
currentPassword: data.currentPassword.toString(),
password: data.newPassword.toString(),
});
},
@ -479,7 +469,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 { TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef } from "@tanstack/react-table";
import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef, Row } from "@tanstack/react-table";
import { FileIcon, MoreIcon } from "~/components/icons";
import { Checkbox } from "~/components/ui/checkbox";
import {
@ -7,11 +7,12 @@ 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.
@ -22,7 +23,47 @@ export type File = {
createdOn: string;
};
export const columns: ColumnDef<FileItem>[] = [
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>[] = [
{
id: "select",
size: 20,
@ -65,34 +106,9 @@ export const columns: ColumnDef<FileItem>[] = [
header: "Size",
},
{
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>
),
accessorKey: "createdOn",
size: 200,
header: "Created On",
cell: ({ row }) => <CreatedOnCell row={row} />,
},
];

View File

@ -5,25 +5,10 @@ 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";
import { z } from "zod";
import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { usePinning } from "~/hooks/usePinning";
export default function FileManager() {
return (
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
<GeneralLayout>
<Dialog>
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
<FileCardList>
<FileCard
@ -63,68 +48,16 @@ export default function FileManager() {
<AddIcon />
Select All
</Button>
<DialogTrigger asChild>
<Button className="h-12 gap-x-2">
<AddIcon />
Pin Content
New Folder
</Button>
</DialogTrigger>
</div>
<DataTable
columns={columns}
resource="file"
dataProviderName="files"
/>
<DialogContent>
<PinFilesForm />
</DialogContent>
</Dialog>
</GeneralLayout>
</Authenticated>
);
}
const PinFilesSchema = z.object({
cids: z.string().transform((value) => value.split(",")),
});
const PinFilesForm = () => {
const { bulkPin } = usePinning();
const [form, fields] = useForm({
id: "pin-files",
constraint: getZodConstraint(PinFilesSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: PinFilesSchema });
},
shouldValidate: "onSubmit",
onSubmit(e, { submission }) {
if (submission?.status === "success") {
const value = submission.value;
bulkPin(value.cids);
}
},
});
return (
<>
<DialogHeader>
<DialogTitle>Pin Content</DialogTitle>
</DialogHeader>
<form {...getFormProps(form)} className="w-full flex flex-col gap-y-4">
<Field
inputProps={{
name: fields.cids.name,
placeholder: "Comma separated CIDs",
}}
labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
errors={fields.cids.errors}
/>
<Button type="submit" className="w-full">
Pin Content
</Button>
</form>
</>
);
};

View File

@ -1,69 +0,0 @@
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 } from "@remix-run/react";
import { Link, useLocation } from "@remix-run/react";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import logoPng from "~/images/lume-logo.png?url";
@ -11,6 +11,7 @@ import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import {
useGo,
useIsAuthenticated,
useLogin,
useParsed,
} from "@refinedev/core";
@ -24,11 +25,30 @@ export const meta: MetaFunction = () => {
];
};
export type LoginParams = {
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>
@ -42,7 +62,8 @@ export default function Login() {
/>
</div>
<LoginForm />
{hash === "" && <LoginForm />}
{hash === "#otp" && <OtpForm />}
<footer className="my-5">
<ul className="flex flex-row">
@ -75,12 +96,11 @@ export default function Login() {
const LoginSchema = z.object({
email: z.string().email(),
password: z.string(),
rememberMe: z.boolean().optional(),
rememberMe: z.boolean(),
});
const LoginForm = () => {
const login = useLogin<AuthFormRequest>();
const go = useGo();
const parsed = useParsed<LoginParams>();
const [form, fields] = useForm({
id: "login",
@ -89,27 +109,19 @@ const LoginForm = () => {
return parseWithZod(formData, { schema: LoginSchema });
},
shouldValidate: "onSubmit",
onSubmit(e, { submission }) {
onSubmit(e) {
e.preventDefault();
if (submission?.status === "success") {
const data = submission.value;
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
login.mutate({
email: data.email,
password: data.password,
rememberMe: data.rememberMe ?? false,
email: data.email.toString(),
password: data.password.toString(),
rememberMe: data.rememberMe.toString() === "on",
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"
@ -147,3 +159,56 @@ 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

@ -61,6 +61,20 @@ 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,
})
}
})
}
});

View File

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

View File

@ -16,21 +16,19 @@
"@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",
@ -47,7 +45,6 @@
"@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",