Skip to content

Commit

Permalink
chore: add expiryselect component
Browse files Browse the repository at this point in the history
  • Loading branch information
@im-adithya
im-adithya committed Jul 11, 2024
1 parent f7caaae commit d4974cf
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 144 deletions.
97 changes: 97 additions & 0 deletions frontend/src/components/ExpirySelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";
import React from "react";
import { Calendar } from "src/components/ui/calendar";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "src/components/ui/popover";
import { cn } from "src/lib/utils";
import { expiryOptions } from "src/types";

const daysFromNow = (date?: Date) => {
if (!date) {
return 0;
}
return Math.ceil(
(new Date(date).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
);
};

interface ExpiryProps {
value?: Date | undefined;
onChange: (expiryDays: number) => void;
}

const ExpirySelect: React.FC<ExpiryProps> = ({ value, onChange }) => {
const [expiryDays, setExpiryDays] = React.useState(daysFromNow(value));
const [customExpiry, setCustomExpiry] = React.useState(
daysFromNow(value)
? !Object.values(expiryOptions).includes(daysFromNow(value))
: false
);
return (
<div className="mb-6">
<p className="font-medium text-sm mb-2">Connection expiration</p>
<div className="grid grid-cols-2 md:grid-cols-6 gap-2 text-xs mb-4">
{Object.keys(expiryOptions).map((expiry) => {
return (
<div
key={expiry}
onClick={() => {
setCustomExpiry(false);
onChange(expiryOptions[expiry]);
setExpiryDays(expiryOptions[expiry]);
}}
className={cn(
"cursor-pointer rounded text-nowrap border-2 text-center p-4 dark:text-white",
!customExpiry && expiryDays == expiryOptions[expiry]
? "border-primary"
: "border-muted"
)}
>
{expiry}
</div>
);
})}
<Popover>
<PopoverTrigger asChild>
<div
onClick={() => {}}
className={cn(
"flex items-center justify-center md:col-span-2 cursor-pointer rounded text-nowrap border-2 text-center px-3 py-4 dark:text-white",
customExpiry ? "border-primary" : "border-muted"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
<span className="truncate">
{customExpiry && value ? format(value, "PPP") : "Custom..."}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
disabled={{
before: new Date(),
}}
selected={value}
onSelect={(date?: Date) => {
if (!date) {
return;
}
setCustomExpiry(true);
onChange(daysFromNow(date));
setExpiryDays(daysFromNow(date));
}}
initialFocus
/>
</PopoverContent>
</Popover>
</div>
</div>
);
};

export default ExpirySelect;
154 changes: 10 additions & 144 deletions frontend/src/components/Permissions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,21 @@
import { format } from "date-fns";
import { CalendarIcon, PlusCircle } from "lucide-react";
import { PlusCircle } from "lucide-react";
import React, { useState } from "react";
import BudgetAmountSelect from "src/components/BudgetAmountSelect";
import BudgetRenewalSelect from "src/components/BudgetRenewalSelect";
import ExpirySelect from "src/components/ExpirySelect";
import Scopes from "src/components/Scopes";
import { Button } from "src/components/ui/button";
import { Calendar } from "src/components/ui/calendar";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "src/components/ui/popover";
import { cn } from "src/lib/utils";
import {
AppPermissions,
BudgetRenewalType,
NIP_47_PAY_INVOICE_METHOD,
Scope,
WalletCapabilities,
expiryOptions,
iconMap,
scopeDescriptions,
} from "src/types";

const getTimeZoneDirection = () => {
const offset = new Date().getTimezoneOffset();

return offset <= 0 ? +1 : -1;
};

const daysFromNow = (date?: Date) => {
if (!date) {
return 0;
}
const utcDate = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate(),
23,
59,
59,
0
)
);
return Math.ceil(
(new Date(utcDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24)
);
};

interface PermissionsProps {
capabilities: WalletCapabilities;
initialPermissions: AppPermissions;
Expand All @@ -67,44 +34,15 @@ const Permissions: React.FC<PermissionsProps> = ({
budgetUsage,
}) => {
const [permissions, setPermissions] = React.useState(initialPermissions);
const [expiryDays, setExpiryDays] = useState(
daysFromNow(permissions.expiresAt)
);
const [budgetOption, setBudgetOption] = useState(
isNewConnection ? !!permissions.maxAmount : true
);
// const [customBudget, setCustomBudget] = useState(
// permissions.maxAmount
// ? !Object.values(budgetOptions).includes(permissions.maxAmount)
// : false
// );
const [expireOption, setExpireOption] = useState(
isNewConnection ? !!permissions.expiresAt : true
);
const [customExpiry, setCustomExpiry] = useState(
daysFromNow(permissions.expiresAt)
? !Object.values(expiryOptions).includes(
daysFromNow(permissions.expiresAt)
)
: false
);

// this is triggered when edit mode is cancelled in show app
React.useEffect(() => {
setPermissions(initialPermissions);
setExpiryDays(daysFromNow(initialPermissions.expiresAt));
// setCustomBudget(
// initialPermissions.maxAmount
// ? !Object.values(budgetOptions).includes(initialPermissions.maxAmount)
// : false
// );
setCustomExpiry(
daysFromNow(initialPermissions.expiresAt)
? !Object.values(expiryOptions).includes(
daysFromNow(initialPermissions.expiresAt)
)
: false
);
}, [initialPermissions]);

const handlePermissionsChange = (
Expand All @@ -128,24 +66,14 @@ const Permissions: React.FC<PermissionsProps> = ({
};

const handleExpiryDaysChange = (expiryDays: number) => {
setExpiryDays(expiryDays + getTimeZoneDirection());
if (!expiryDays) {
handlePermissionsChange({ expiresAt: undefined });
return;
}
const currentDate = new Date();
const expiryDate = new Date(
Date.UTC(
currentDate.getUTCFullYear(),
currentDate.getUTCMonth(),
currentDate.getUTCDate() + expiryDays,
23,
59,
59,
0
)
);
handlePermissionsChange({ expiresAt: expiryDate });
currentDate.setDate(currentDate.getUTCDate() + expiryDays);
currentDate.setHours(23, 59, 59);
handlePermissionsChange({ expiresAt: currentDate });
};

return !canEditPermissions ? (
Expand Down Expand Up @@ -188,8 +116,7 @@ const Permissions: React.FC<PermissionsProps> = ({
<div className="mt-4">
<p className="text-sm font-medium mb-2">Connection expiry</p>
<p className="text-muted-foreground text-sm">
{expiryDays &&
permissions.expiresAt &&
{permissions.expiresAt &&
new Date(permissions.expiresAt).getFullYear() !== 1
? new Date(permissions.expiresAt).toString()
: "This app will never expire"}
Expand Down Expand Up @@ -250,71 +177,10 @@ const Permissions: React.FC<PermissionsProps> = ({
)}

{expireOption && (
<div className="mb-6">
<p className="font-medium text-sm mb-2">Connection expiration</p>
<div className="grid grid-cols-2 md:grid-cols-6 gap-2 text-xs mb-4">
{Object.keys(expiryOptions).map((expiry) => {
return (
<div
key={expiry}
onClick={() => {
setCustomExpiry(false);
handleExpiryDaysChange(
expiryOptions[expiry] - getTimeZoneDirection()
);
}}
className={cn(
"cursor-pointer rounded text-nowrap border-2 text-center p-4 dark:text-white",
!customExpiry && expiryDays == expiryOptions[expiry]
? "border-primary"
: "border-muted"
)}
>
{expiry}
</div>
);
})}
<Popover>
<PopoverTrigger asChild>
<div
onClick={() => {}}
className={cn(
"flex items-center justify-center md:col-span-2 cursor-pointer rounded text-nowrap border-2 text-center px-3 py-4 dark:text-white",
customExpiry ? "border-primary" : "border-muted"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
<span className="truncate">
{customExpiry && permissions.expiresAt
? format(permissions.expiresAt, "PPP")
: "Custom..."}
</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
disabled={{
before: new Date(),
}}
selected={permissions.expiresAt}
onSelect={(date?: Date) => {
if (!date) {
return;
}
const dateBefore = new Date(date);
dateBefore.setDate(
dateBefore.getDate() - getTimeZoneDirection()
);
setCustomExpiry(true);
handleExpiryDaysChange(daysFromNow(dateBefore));
}}
initialFocus
/>
</PopoverContent>
</Popover>
</div>
</div>
<ExpirySelect
value={permissions.expiresAt}
onChange={handleExpiryDaysChange}
/>
)}
</div>
);
Expand Down

0 comments on commit d4974cf

Please sign in to comment.