Skip to content

Commit 3220f21

Browse files
HudamabkhootHudamabkhoot
authored
Merge pull request #54 from the-collab-lab/hm-edit-listItem
Edit individual list items.
2 parents 6dcc2cf + b8d5d5c commit 3220f21

File tree

10 files changed

+418
-89
lines changed

10 files changed

+418
-89
lines changed

‎src/App.jsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import Login from './views/Login';
88

99
export function App() {
1010
const [isModalOpen, setIsModalOpen] = useState(false);
11+
const [isLoading, setIsLoading] = useState(false);
12+
1113
/**
1214
* This custom hook takes the path of a shopping list
1315
* in our database and syncs it with localStorage for later use.
@@ -21,7 +23,7 @@ export function App() {
2123
null,
2224
);
2325

24-
const listName = listPath.split('/').pop();
26+
const listName = listPath ? listPath.split('/').pop() : null;
2527

2628
/**
2729
* This custom hook holds info about the current signed in user.
@@ -63,13 +65,20 @@ export function App() {
6365
setListPath={setListPath}
6466
isModalOpen={isModalOpen}
6567
handleShareModalClick={handleShareModalClick}
68+
setIsLoading={setIsLoading}
6669
/>
6770
}
6871
/>
6972
<Route
7073
path="/list"
7174
element={
72-
<List data={data} listPath={listPath} listName={listName} />
75+
<List
76+
data={data}
77+
listPath={listPath}
78+
listName={listName}
79+
isLoading={isLoading}
80+
setIsLoading={setIsLoading}
81+
/>
7382
}
7483
/>
7584
</Route>

‎src/api/firebase.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,25 @@ export async function updateItem(listPath, checked, itemData) {
231231
}
232232
}
233233

234+
export async function editItem(
235+
listPath,
236+
id,
237+
{ itemName, itemQuantity, dateNextPurchased },
238+
) {
239+
const listCollectionRef = collection(db, listPath, 'items');
240+
const itemRef = doc(listCollectionRef, id);
241+
242+
try {
243+
await updateDoc(itemRef, {
244+
name: itemName,
245+
quantity: itemQuantity,
246+
dateNextPurchased: dateNextPurchased,
247+
});
248+
} catch (error) {
249+
console.error('There was an error editing the item state: ', error);
250+
}
251+
}
252+
234253
export async function deleteItem(listPath, id) {
235254
const listCollectionRef = collection(db, listPath, 'items');
236255
const itemRef = doc(listCollectionRef, id);

‎src/components/ListItem.jsx

Lines changed: 78 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
33
import { ONE_DAY_IN_MILLISECONDS } from '../utils/dates';
44
import toast from 'react-hot-toast';
55
import { Button } from './ui/button';
6-
import { Trash2 } from 'lucide-react';
6+
import { Trash2, Pencil } from 'lucide-react';
77
import { getIndicatorColor } from '../utils/helpers';
88
import {
99
AlertDialog,
@@ -16,6 +16,16 @@ import {
1616
AlertDialogTitle,
1717
AlertDialogTrigger,
1818
} from './ui/alert-dialog';
19+
import {
20+
Dialog,
21+
DialogContent,
22+
DialogDescription,
23+
DialogFooter,
24+
DialogHeader,
25+
DialogTitle,
26+
DialogTrigger,
27+
} from '@/components/ui/dialog';
28+
import EditItemForm from './ManageListForms/EditItemForm';
1929

2030
export function ListItem({
2131
listPath,
@@ -28,6 +38,9 @@ export function ListItem({
2838
dayInterval,
2939
dateCreated,
3040
indicator,
41+
isOpen,
42+
handleOpenModal,
43+
dateNextPurchased,
3144
}) {
3245
const [isAlertOpen, setIsAlertOpen] = useState(false);
3346

@@ -81,7 +94,7 @@ export function ListItem({
8194
>
8295
<label
8396
htmlFor={`${id}`}
84-
className="capitalize text-sm hover:font-bold sm:text-lg"
97+
className="capitalize text-sm sm:text-base md:text-lg hover:font-bold text-gray-800 dark:text-gray-300"
8598
>
8699
{name}
87100
</label>
@@ -92,51 +105,77 @@ export function ListItem({
92105
</div>
93106
)}
94107
</div>
95-
<div className="flex items-center gap-1 sm:gap-2">
108+
<div className="flex items-center gap-3">
96109
<div
97110
className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
98111
>
99112
<p className="capitalize text-xs sm:text-sm text-black dark:text-gray-800">
100113
{indicator}
101114
</p>
102115
</div>
103-
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
104-
<AlertDialogTrigger asChild>
105-
<Button
106-
className="bg-transparent hover:bg-transparent"
107-
type="button"
108-
id={id}
109-
onClick={() => setIsAlertOpen(true)}
110-
>
111-
<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" />
112-
</Button>
113-
</AlertDialogTrigger>
114-
<AlertDialogContent className="p-6 sm:p-10">
115-
<AlertDialogHeader>
116-
<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
117-
Are you absolutely sure?
118-
</AlertDialogTitle>
119-
<AlertDialogDescription className="text-black">
120-
This action cannot be undone. Do you really want to delete{' '}
121-
{name}?
122-
</AlertDialogDescription>
123-
</AlertDialogHeader>
124-
<AlertDialogFooter>
125-
<AlertDialogCancel
126-
className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
127-
onClick={() => setIsAlertOpen(false)}
128-
>
129-
Cancel
130-
</AlertDialogCancel>
131-
<AlertDialogAction
132-
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
133-
onClick={handleDelete}
116+
<div className="flex gap-3 px-1">
117+
<Dialog open={isOpen} onOpenChange={() => handleOpenModal(id)}>
118+
<DialogTrigger asChild>
119+
<Button className="bg-transparent hover:bg-transparent p-0">
120+
<Pencil className="w-5 h-5 md:w-6 md:h-6 text-light-grey hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 transform hover:scale-110 transition-transform duration-150 sm:hover:scale-125" />
121+
</Button>
122+
</DialogTrigger>
123+
<DialogContent>
124+
<DialogHeader>
125+
<DialogTitle>Edit {name}</DialogTitle>
126+
<DialogDescription className="text-md md:text-lg">
127+
Modify the details of the item you&apos;d like to edit.
128+
</DialogDescription>
129+
</DialogHeader>
130+
<EditItemForm
131+
listPath={listPath}
132+
name={name}
133+
id={id}
134+
quantity={quantity}
135+
dateNextPurchased={dateNextPurchased}
136+
handleOpenModal={handleOpenModal}
137+
/>
138+
<DialogFooter className="sm:justify-start"></DialogFooter>
139+
</DialogContent>
140+
</Dialog>
141+
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
142+
<AlertDialogTrigger asChild>
143+
<Button
144+
className="bg-transparent hover:bg-transparent p-0"
145+
type="button"
146+
id={id}
147+
onClick={() => setIsAlertOpen(true)}
134148
>
135-
Continue
136-
</AlertDialogAction>
137-
</AlertDialogFooter>
138-
</AlertDialogContent>
139-
</AlertDialog>
149+
<Trash2 className="w-5 h-5 md:w-6 md:h-6 text-gray-600 hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 transform hover:scale-110 transition-transform duration-150 sm:hover:scale-125" />
150+
</Button>
151+
</AlertDialogTrigger>
152+
<AlertDialogContent className="p-6 sm:p-10">
153+
<AlertDialogHeader>
154+
<AlertDialogTitle className="text-sm text-slate-800 dark:text-slate-400 sm:text-lg">
155+
Are you absolutely sure?
156+
</AlertDialogTitle>
157+
<AlertDialogDescription className="text-slate-700">
158+
This action cannot be undone. Do you really want to delete{' '}
159+
{name}?
160+
</AlertDialogDescription>
161+
</AlertDialogHeader>
162+
<AlertDialogFooter>
163+
<AlertDialogCancel
164+
className="bg-white text-slate-700 hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
165+
onClick={() => setIsAlertOpen(false)}
166+
>
167+
Cancel
168+
</AlertDialogCancel>
169+
<AlertDialogAction
170+
className="bg-primary-pink text-white hover:bg-opacity-90 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
171+
onClick={handleDelete}
172+
>
173+
Delete
174+
</AlertDialogAction>
175+
</AlertDialogFooter>
176+
</AlertDialogContent>
177+
</AlertDialog>
178+
</div>
140179
</div>
141180
</li>
142181
);

‎src/components/ManageListForms/AddItemForm.jsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,10 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
9898
name="timeFrame"
9999
className="border border-soon text-soon"
100100
/>
101-
<label htmlFor="soon" className="font-semibold text-sm">
101+
<label
102+
htmlFor="soon"
103+
className="font-semibold text-sm cursor-pointer"
104+
>
102105
Soon
103106
</label>
104107
</div>
@@ -109,13 +112,19 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
109112
name="timeFrame"
110113
className="border border-kind-of-soon text-kind-of-soon"
111114
/>
112-
<label htmlFor="kind-of-soon" className="font-semibold text-sm">
115+
<label
116+
htmlFor="kind-of-soon"
117+
className="font-semibold text-sm cursor-pointer"
118+
>
113119
Kind of soon
114120
</label>
115121
</div>
116122
<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">
117-
<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
118-
<label htmlFor="not of soon" className="font-semibold text-sm">
123+
<RadioGroupItem value="30" id="not-soon" name="timeFrame" />
124+
<label
125+
htmlFor="not-soon"
126+
className="font-semibold text-sm cursor-pointer"
127+
>
119128
Not soon
120129
</label>
121130
</div>
@@ -141,7 +150,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
141150
<div className="flex w-full">
142151
<Button
143152
type="submit"
144-
className="bg-primary-pink text-black rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-80 text-sm p-6"
153+
className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-90 text-sm p-6"
145154
>
146155
Add Item
147156
</Button>

0 commit comments

Comments
 (0)