Skip to content

Commit

Permalink
fin
Browse files Browse the repository at this point in the history 
al chnages and fixing the issue of listName being null
  • Loading branch information
@Hudamabkhoot
Hudamabkhoot committed Oct 12, 2024
1 parent a6acf6f commit 293f9bf
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 56 deletions.
2 changes: 1 addition & 1 deletion src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function App() {
null,
);

const listName = listPath.split('/').pop();
const listName = listPath ? listPath.split('/').pop() : null;

/**
* This custom hook holds info about the current signed in user.
Expand Down
68 changes: 34 additions & 34 deletions src/components/ListItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export function ListItem({
>
<label
htmlFor={`${id}`}
className="capitalize text-sm hover:font-bold sm:text-lg"
className="capitalize text-sm sm:text-base md:text-lg hover:font-bold text-gray-800 dark:text-gray-300"
>
{name}
</label>
Expand All @@ -105,76 +105,76 @@ export function ListItem({
</div>
)}
</div>
<div className="flex items-center gap-1 sm:gap-2">
<div className="flex items-center gap-3">
<div
className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
>
<p className="capitalize text-xs sm:text-sm text-black dark:text-gray-800">
{indicator}
</p>
</div>
<div className="flex items-center p-2">
<div className="flex gap-3 px-1">
<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
<DialogTrigger asChild>
<Button className="bg-transparent hover:bg-transparent p-0">
<Pencil className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit {name}</DialogTitle>
<DialogDescription className="text-md md:text-lg">
Modify the details of the item you&apos;d like to edit.
</DialogDescription>
</DialogHeader>
<EditItemForm
listPath={listPath}
name={name}
id={id}
quantity={quantity}
dateNextPurchased={dateNextPurchased}
handleOpenModal={handleOpenModal}
/>
<DialogFooter className="sm:justify-start"></DialogFooter>
</DialogContent>
</Dialog>
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
<AlertDialogTrigger asChild>
<Button
className="bg-transparent hover:bg-transparent"
className="bg-transparent hover:bg-transparent p-0"
type="button"
id={id}
onClick={() => setIsAlertOpen(true)}
>
<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 sm:w-6 sm:h-6 md:w-7 md:h-7" />
<Trash2 className="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent className="p-6 sm:p-10">
<AlertDialogHeader>
<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
<AlertDialogTitle className="text-sm text-slate-800 dark:text-slate-400 sm:text-lg">
Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription className="text-black">
<AlertDialogDescription className="text-slate-700">
This action cannot be undone. Do you really want to delete{' '}
{name}?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel
className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
className="bg-white text-slate-700 hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
onClick={() => setIsAlertOpen(false)}
>
Cancel
</AlertDialogCancel>
<AlertDialogAction
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
className="bg-primary-pink text-white hover:bg-opacity-75 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
onClick={handleDelete}
>
<Trash2 className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
<DialogTrigger asChild>
<Button className="bg-transparen hover:bg-transparen p-0">
<Pencil className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Edit {name}</DialogTitle>
<DialogDescription>
Modify the details of the item you&apos;d like to edit.
</DialogDescription>
</DialogHeader>
<EditItemForm
listPath={listPath}
name={name}
id={id}
quantity={quantity}
dateNextPurchased={dateNextPurchased}
handleOpenModal={handleOpenModal}
/>
<DialogFooter className="sm:justify-start"></DialogFooter>
</DialogContent>
</Dialog>
</div>
</div>
</li>
Expand Down
41 changes: 21 additions & 20 deletions src/components/ManageListForms/EditItemForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function EditItemForm({
itemQuantity: quantity,
daysUntilNextPurchase: dateNextPurchased,
});
}, [name]);
}, []);

const handleSubmit = async (event) => {
event.preventDefault();
Expand All @@ -45,31 +45,32 @@ export default function EditItemForm({
resetItemName();
return;
}

// check if any of the values have been edited
const hasChanged =
formattedItemName !== name ||
formQuantity !== quantity ||
newDateNextPurchased !== dateNextPurchased;

// if no changes were made exit early
if (!hasChanged) {
toast.error('No changes were made.');
handleOpenModal();
return;
}

try {
let updatedData = {
itemName: formattedItemName,
itemQuantity: formQuantity,
};
let updatedData = {
itemName: formattedItemName,
itemQuantity: formQuantity,
};
// check if dateNextPurchased have been edited to use getFutureDate if not use the same date
if (newDateNextPurchased !== dateNextPurchased) {
const futureDate = parseInt(newDateNextPurchased);
updatedData.dateNextPurchased = getFutureDate(futureDate);
} else {
updatedData.dateNextPurchased = dateNextPurchased;
}

if (newDateNextPurchased !== dateNextPurchased) {
const futureDate = parseInt(newDateNextPurchased);
const formattedFutureDate = getFutureDate(futureDate);
updatedData.dateNextPurchased = formattedFutureDate;
} else {
updatedData.dateNextPurchased = dateNextPurchased;
}
console.log();
try {
handleOpenModal();
await editItem(listPath, id, updatedData);
toast.success(`${formattedItemName} has been updated!`);
Expand Down Expand Up @@ -118,18 +119,18 @@ export default function EditItemForm({
className="flex my-2 items-center justify-center gap-4"
id="daysUntilNextPurchase"
>
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<RadioGroupItem
value="7"
id="soon"
name="timeFrame"
className="border border-soon text-soon"
className="border border-soon text-soon"
/>
<label htmlFor="soon" className="font-semibold text-sm">
Soon
</label>
</div>
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<RadioGroupItem
value="14"
id="kind-of-soon"
Expand All @@ -140,7 +141,7 @@ export default function EditItemForm({
Kind of soon
</label>
</div>
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-24 h-24 sm:w-28 sm:h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
<label htmlFor="not of soon" className="font-semibold text-sm">
Not soon
Expand Down Expand Up @@ -170,7 +171,7 @@ export default function EditItemForm({
type="submit"
className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
>
Edit Item
Apply Changes
</Button>
</div>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/dialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-xl',
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className,
)}
{...props}
Expand Down

0 comments on commit 293f9bf

Please sign in to comment.