feat: Created Pinning banner to show inprogress and completed PinningProcess

This commit is contained in:
Tania Gutierrez 2024-03-21 01:17:00 -04:00
parent 140a9d222f
commit b646fc4887
Signed by: riobuenoDevelops
GPG Key ID: 53133EB28EB7E801
6 changed files with 431 additions and 190 deletions

View File

@ -30,123 +30,129 @@ 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 "./pinnning-network-banner";
import { PinningProvider } from "~/providers/PinningProvider";
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
const location = useLocation();
const { data: identity } = useGetIdentity<Identity>();
const{ mutate: logout } = useLogout()
return (
<div className="h-full flex flex-row">
<header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
<img src={logoPng} alt="Lume logo" className="h-10 w-32" />
<PinningProvider>
<div className="h-full flex flex-row">
<header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
<img src={logoPng} alt="Lume logo" className="h-10 w-32" />
<nav className="my-10 flex-1">
<ul>
<li>
<Link to="/dashboard">
<NavigationButton
active={location.pathname.includes("dashboard")}>
<ClockIcon className="w-5 h-5 mr-2" />
Dashboard
</NavigationButton>
</Link>
</li>
<li>
<Link to="/file-manager">
<NavigationButton
active={location.pathname.includes("file-manager")}>
<DriveIcon className="w-5 h-5 mr-2" />
File Manager
</NavigationButton>
</Link>
</li>
<li>
<Link to="/account">
<NavigationButton
active={location.pathname.includes("account")}>
<CircleLockIcon className="w-5 h-5 mr-2" />
Account
</NavigationButton>
</Link>
</li>
</ul>
</nav>
<span className="text-primary-2 mb-3 -space-y-1 opacity-40">
<p>Freedom</p>
<p>Privacy</p>
<p>Ownership</p>
</span>
<Dialog>
<DialogTrigger asChild>
<Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
<CloudUploadIcon className="w-5 h-5 mr-2" />
Upload Files
</Button>
</DialogTrigger>
<DialogContent className="border rounded-lg p-8">
<UploadFileForm />
</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">
<ThemeIcon className="text-ring" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger>
<Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
<Avatar className="bg-ring h-7 w-7 rounded-full" />
{`${identity?.firstName} ${identity?.lastName}`}
<ChevronDownIcon />
<nav className="my-10 flex-1">
<ul>
<li>
<Link to="/dashboard">
<NavigationButton
active={location.pathname.includes("dashboard")}>
<ClockIcon className="w-5 h-5 mr-2" />
Dashboard
</NavigationButton>
</Link>
</li>
<li>
<Link to="/file-manager">
<NavigationButton
active={location.pathname.includes("file-manager")}>
<DriveIcon className="w-5 h-5 mr-2" />
File Manager
</NavigationButton>
</Link>
</li>
<li>
<Link to="/account">
<NavigationButton
active={location.pathname.includes("account")}>
<CircleLockIcon className="w-5 h-5 mr-2" />
Account
</NavigationButton>
</Link>
</li>
</ul>
</nav>
<span className="text-primary-2 mb-3 -space-y-1 opacity-40">
<p>Freedom</p>
<p>Privacy</p>
<p>Ownership</p>
</span>
<Dialog>
<DialogTrigger asChild>
<Button size={"lg"} className="w-[calc(100%-3rem)] font-semibold">
<CloudUploadIcon className="w-5 h-5 mr-2" />
Upload Files
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem onClick={() => logout()}>
<ExitIcon className="mr-2" />
Logout
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</DialogTrigger>
<DialogContent className="border rounded-lg p-8">
<UploadFileForm />
</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">
<ThemeIcon className="text-ring" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger>
<Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
<Avatar className="bg-ring h-7 w-7 rounded-full" />
{`${identity?.firstName} ${identity?.lastName}`}
<ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem onClick={() => logout()}>
<ExitIcon className="mr-2" />
Logout
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
{children}
<footer className="mt-5">
<ul className="flex flex-row">
<li>
<Link to="https://discord.lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder">
<img
className="h-5"
src={discordLogoPng}
alt="Discord Logo"
/>
Connect with us
</Button>
</Link>
</li>
<li>
<Link to="https://lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder">
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
Connect with us
</Button>
</Link>
</li>
</ul>
</footer>
</div>
{children}
<footer className="mt-5">
<ul className="flex flex-row">
<li>
<Link to="https://discord.lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder">
<img
className="h-5"
src={discordLogoPng}
alt="Discord Logo"
/>
Connect with us
</Button>
</Link>
</li>
<li>
<Link to="https://lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder">
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
Connect with us
</Button>
</Link>
</li>
</ul>
</footer>
</div>
</div>
<PinningNetworkBanner />
</PinningProvider>
);
};

View File

@ -0,0 +1,107 @@
import { useEffect, useMemo } from "react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "./ui/accordion";
import { Progress } from "./ui/progress";
import { usePinning } from "~/hooks/usePinnning";
import { IPinningData } from "~/providers/PinningProvider";
import { Tabs, TabsTrigger, TabsList, TabsContent } from "./ui/tabs";
import { Button } from "./ui/button";
import { Cross2Icon } from "@radix-ui/react-icons";
export const PinningNetworkBanner = () => {
const { cidList } = usePinning();
const itemsLeft = useMemo(
() => cidList.filter((item) => item.progress < 100),
[cidList],
);
const completedItems = useMemo(
() => cidList.filter((item) => item.progress === 100),
[cidList],
);
return (
<div
className={`border border-border rounded-lg absolute w-1/3 bottom-4 right-4 ${
!cidList.length ? "hidden" : "block"
}`}>
<Accordion type="single" defaultValue="item-1" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="font-bold bg-primary px-4 rounded-tr-lg rounded-tl-lg">
{itemsLeft.length > 0 ? `${itemsLeft.length} left` : "Completed"}
</AccordionTrigger>
<AccordionContent>
<Tabs className="w-full" defaultValue="inProgress">
<TabsList className="rounded-none">
<TabsTrigger value="inProgress">In Progress</TabsTrigger>
<TabsTrigger value="completed">Completed</TabsTrigger>
</TabsList>
<TabsContent value="inProgress">
{itemsLeft.length ? (
itemsLeft.map((cid) => (
<PinCidItem key={cid.cid} item={cid} />
))
) : (
<div className="text-primary-2 text-sm flex justify-center items-center h-10">
Nothing yet.
</div>
)}
</TabsContent>
<TabsContent value="completed">
{completedItems.length ? (
completedItems.map((cid) => (
<PinCidItem key={cid.cid} item={cid} />
))
) : (
<div className="text-muted text-sm flex justify-center items-center h-10">
Nothing yet.
</div>
)}
</TabsContent>
</Tabs>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
);
};
const PinCidItem = ({ item }: { item: IPinningData }) => {
const { getProgress, onRemoveCidFromList } = usePinning();
useEffect(() => {
if (item.progress < 100) {
const intervalId = setInterval(() => {
getProgress(item.cid);
}, 1000); // Adjust the interval time (1000ms = 1 second) as needed
return () => clearInterval(intervalId); // Clear interval on component unmount
}
}, [getProgress, item]); // Add dependencies to ensure the effect runs correctly
return (
<div className="px-4 mb-4">
<div className="flex justify-between items-center rounded-lg h-10 py-2 px-4 hover:bg-primary/50 group">
<span className="font-semibold">{item.cid}</span>
<span className="group-hover:hidden">{item.progress}%</span>
<div className="gap-x-2 hidden group-hover:flex">
<Button
variant="ghost"
className="p-2 rounded-full h-6"
onClick={() => onRemoveCidFromList(item.cid)}>
<Cross2Icon />
</Button>
</div>
</div>
<Progress
value={item.progress}
className="h-2 w-[calc(100%-1rem)] ml-2"
/>
</div>
);
};

View File

@ -0,0 +1,58 @@
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { cn } from "~/utils";
const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}>
{children}
<ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
};

View File

@ -0,0 +1,53 @@
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "~/utils";
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-primary-dark p-1 text-muted-foreground",
className,
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-primary-1 data-[state=active]:shadow",
className,
)}
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className,
)}
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export { Tabs, TabsList, TabsTrigger, TabsContent };

View File

@ -1,96 +1,111 @@
import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
import type { ColumnDef, RowData } from "@tanstack/react-table";
import type { ColumnDef, Row } 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 {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { usePinning } from "~/hooks/usePinnning";
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.
export type File = {
name: string;
cid: string;
size: string;
createdOn: string;
name: string;
cid: string;
size: string;
createdOn: string;
};
declare module '@tanstack/table-core' {
interface TableMeta<TData extends RowData> {
hoveredRowId: string,
}
}
const CreatedOnCell = ({ row }: { row: Row<File> }) => {
// const { open } = useNotification();
const { onPin } = 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...`);
onPin(row.getValue("cid"));
}}>
<DrawingPinIcon className="mr-2" />
Ping 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,
header: ({ table }) => (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "name",
header: "Name",
cell: ({ row }) => (
<div className="flex items-center gap-x-2">
<FileIcon />
{row.getValue("name")}
</div>
)
},
{
accessorKey: "cid",
header: "CID",
},
{
accessorKey: "size",
header: "Size",
},
{
accessorKey: "createdOn",
size: 200,
header: "Created On",
cell: ({ row }) => (
<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>
<DrawingPinIcon className="mr-2" />
Ping CID
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<TrashIcon className="mr-2" />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}
{
id: "select",
size: 20,
header: ({ table }) => (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && "indeterminate")
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
aria-label="Select all"
/>
),
cell: ({ row }) => (
<Checkbox
checked={row.getIsSelected()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
aria-label="Select row"
/>
),
enableSorting: false,
enableHiding: false,
},
{
accessorKey: "name",
header: "Name",
cell: ({ row }) => (
<div className="flex items-center gap-x-2">
<FileIcon />
{row.getValue("name")}
</div>
),
},
{
accessorKey: "cid",
header: "CID",
},
{
accessorKey: "size",
header: "Size",
},
{
accessorKey: "createdOn",
size: 200,
header: "Created On",
cell: ({ row }) => <CreatedOnCell row={row} />,
},
];

View File

@ -17,6 +17,7 @@
"@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",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
@ -26,6 +27,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",
"@refinedev/cli": "^2.16.1",
"@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",