Skip to content

Commit

Permalink
updated confirm message, fixed ghost toast when sharing, added unshar…
Browse files Browse the repository at this point in the history 
…e toast
  • Loading branch information
@eonflower
eonflower committed Apr 4, 2024
1 parent dee91a0 commit c9ec674
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 74 deletions.
2 changes: 1 addition & 1 deletion src/components/AddList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function AddList({ setListPath }) {
setListPath(listPath);
setTimeout(() => {
navigate('/list');
}, 2000);
}, 3000);
} else {
addToast({
id: 'problemCreatingList',
Expand Down
41 changes: 19 additions & 22 deletions src/components/ConfirmToast.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const ConfirmToast = ({
onCancel,
}) => {
return (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div className="fixed inset-0 flex items-center justify-center z-50 backdrop-brightness-50">
<div
id={id}
className={`w-full max-w-xs p-4 mb-3 text-gray-500 bg-white rounded-lg shadow-xl border border-gray-100`}
className={`w-full max-w-md my-2 py-8 px-4 mb-3 text-gray-500 bg-white rounded-lg shadow-xl border border-gray-100`}
role="alert"
>
<div className="flex items-center">
Expand All @@ -23,29 +23,26 @@ const ConfirmToast = ({
<span className="sr-only">{iconName} icon</span>
</div>
<div className="ms-3 text-sm font-normal">
<span className="mb-1 text-sm font-semibold text-gray-900">
<span className="text-sm font-semibold text-gray-900">
{message}
</span>
<div className="mb-2 text-sm font-normal">
Are you sure? This action is forever-eva-eva.
<div className="my-2 text-sm font-normal">
This action is forever-eva-eva.
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<button
onClick={onConfirm}
className={`inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300`}
>
Delete
</button>
</div>
<div>
<button
onClick={onCancel}
className={`inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200`}
>
Cancel
</button>
</div>
<div className="mt-[20px] flex w-full">
<button
type="button"
onClick={onCancel}
className="mr-[10px] w-full border-1 border-gray-200 rounded-md px-4 py-[12px]"
>
Cancel
</button>
<button
onClick={onConfirm}
className="rounded-md w-full px-4 py-[12px] text-white bg-red-700"
>
Delete
</button>
</div>
</div>
</div>
Expand Down
20 changes: 16 additions & 4 deletions src/components/InviteForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,25 @@ const InviteForm = ({ lists, closeModal, setUsersSharedWith, sharedWith }) => {
iconName: 'check',
color: 'blue',
});
// alert(message);
setInput('');

setInput({
recipientName: '',
recipientEmail: '',
});
setSelectedLists({
listsToShare: [],
});

// Wait for the sharing operation to complete successfully
const updatedSharedWith = [...sharedWith, input];
setUsersSharedWith(updatedSharedWith);
closeModal();
window.location.reload();

// Close modal after 3 seconds
setTimeout(() => {
window.location.reload();
closeModal();
}, 3000);

return;
}
} catch (err) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavigationBarAddList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function AddList({ setListPath }) {
setListPath(listPath);
setTimeout(() => {
navigate('/list');
}, 2000);
}, 3000);
} else {
setMessage(`Your list, ${listName} was not created. Please try again.`);
}
Expand Down
99 changes: 57 additions & 42 deletions src/components/SharedWithList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,80 @@
import { FaRegCircleUser } from 'react-icons/fa6';
import { VscTrash } from 'react-icons/vsc';
import { unshareList } from '../api';
import { useToast } from '../utils';
import Toast from './Toast';
import ConfirmToast from './ConfirmToast';
import capitalizeFirstLetterOfEachWord from '../utils/capitalize';

const SharedWithList = ({
listPath,
sharedWith,
closeModal,
setUsersSharedWith,
}) => {
const { toasts, addConfirmToast, cancelConfirmToast } = useToast();

const handleUnshare = async (email, name) => {
try {
if (
window.confirm(
`Are you sure you want to unshare this list with ${name}?`,
)
) {
await unshareList(listPath, email, name);

// Remove the unshared user from the sharedWith array
const updatedSharedWith = sharedWith.filter(
(shared) => shared.email !== email,
);
setUsersSharedWith(updatedSharedWith);
const confirmationId = 'unshareListConfirm';
addConfirmToast({
id: confirmationId,
message: `Are you sure you want to unshare your list with ${capitalizeFirstLetterOfEachWord(name)}?`,
iconName: 'warning',
color: 'orange',
onConfirm: async () => {
await unshareList(listPath, email, name);
// Remove the unshared user from the sharedWith array
const updatedSharedWith = sharedWith.filter(
(shared) => shared.email !== email,
);
setUsersSharedWith(updatedSharedWith);

if (updatedSharedWith.length < 1) {
closeModal();
}
} else {
return;
}
if (updatedSharedWith.length < 1) {
closeModal();
}
},
onCancel: () => {
cancelConfirmToast(confirmationId);
},
});
} catch (err) {
console.error('Error unsharing list', err);
}
};
return (
<div className="flex flex-col items-center">
<h2 className="text-lg font-bold mt-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
Shared with:
</h2>
<div className="flex items-center">
<div>
<ul>
{sharedWith?.map((shared, index) => (
<li
key={index}
className="flex items-center gap-28 justify-between px-2 mb-4 h-16 bg-gray-50 rounded-lg shadow-md"
>
<span className="flex items-center xsm:text-xs sm:text-md">
<FaRegCircleUser className="text-lg mr-2 text-gray-600" />
{`${shared.name} (${shared.email})`}
</span>
<VscTrash
onClick={() => handleUnshare(shared.email, shared.name)}
className="text-xl ml-2 text-gray-600 cursor-pointer hover:text-gray-800 transition-colors duration-100 ease-in-out"
/>
</li>
))}
</ul>
<>
{toasts.map((toast) => (
<ConfirmToast key={toast.id} {...toast} />
))}

<div className="flex flex-col items-center max-h-[350px] overflow-scroll">
<h2 className="text-lg font-bold mt-6 mb-4 border-b-1 border-gray-200 pb-[20px] w-full">
Shared with:
</h2>
<div className="flex items-center">
<div>
<ul>
{sharedWith?.map((shared, index) => (
<li
key={index}
className="flex items-center gap-28 justify-between px-2 mb-4 h-16 bg-gray-50 rounded-lg shadow-md"
>
<span className="flex items-center xsm:text-xs sm:text-md">
<FaRegCircleUser className="text-lg mr-2 text-gray-600" />
{`${shared.name} (${shared.email})`}
</span>
<VscTrash
onClick={() => handleUnshare(shared.email, shared.name)}
className="text-xl ml-2 text-gray-600 cursor-pointer hover:text-gray-800 transition-colors duration-100 ease-in-out"
/>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
</>
);
};

Expand Down
9 changes: 5 additions & 4 deletions src/components/SingleList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { VscTrash } from 'react-icons/vsc';
import { useToast } from '../utils/hooks';
import Toast from './Toast';
import ConfirmToast from './ConfirmToast.jsx';
import capitalizeFirstLetterOfEachWord from '../utils/capitalize.js';

export function SingleList({ name, path, setListPath, setLoading }) {
const navigate = useNavigate();
Expand All @@ -24,7 +25,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
const confirmationId = 'deleteSharedListConfirm';
addConfirmToast({
id: confirmationId,
message: `The ${name} list has been shared with you. By pressing delete, you loose access until it's shared with you again.`,
message: `The ${capitalizeFirstLetterOfEachWord(name)} list has been shared with you. By pressing delete, you lose access until it's shared with you again.`,
iconName: 'warning',
color: 'orange',
onConfirm: async () => {
Expand All @@ -38,7 +39,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
const confirmationId = 'deleteListConfirm';
addConfirmToast({
id: confirmationId,
message: `By pressing delete, your ${name} list will be removed from your lists, and everyone's who has access to it.`,
message: `By pressing delete, your ${capitalizeFirstLetterOfEachWord(name)} list will be removed from your lists, and everyone who has access to it.`,
iconName: 'warning',
color: 'orange',
onConfirm: async () => {
Expand All @@ -53,7 +54,7 @@ export function SingleList({ name, path, setListPath, setLoading }) {
console.error(err.message);
addToast({
id: 'toastItemDeleteErr',
message: `An error occurred while deleting your ${name} list: ${err.message}`,
message: `An error occurred while deleting your ${capitalizeFirstLetterOfEachWord(name)} list: ${err.message}`,
iconName: 'error',
color: 'red',
});
Expand Down Expand Up @@ -90,4 +91,4 @@ export function SingleList({ name, path, setListPath, setLoading }) {
</li>
</>
);
}
}

0 comments on commit c9ec674

Please sign in to comment.