Skip to content

Commit

Permalink
Fix error popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickbar01234
nickbar01234 committed Apr 9, 2024
1 parent 3611e61 commit 10acd54
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 89 deletions.
6 changes: 2 additions & 4 deletions src/components/container/Popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,12 @@ const Popup = (props: PopupProps) => {
return (
<div className="fixed left-0 top-0 z-50 h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
<div
className={`absolute left-1/2 top-1/2 h-48 w-[30rem] -translate-x-1/2 -translate-y-1/2 ${
className={`absolute left-1/2 top-1/2 flex h-48 w-[30rem] -translate-x-1/2 -translate-y-1/2 flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
props.className ?? ""
}`}
onClick={props.onClick}
>
<div className="overflow-y-scroll rounded-[16px] bg-dark-teal px-6 py-9 ">
{props.children}
</div>
{props.children}
</div>
</div>
);
Expand Down
158 changes: 73 additions & 85 deletions src/components/user/AddFile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,91 +129,79 @@ const AddFile = ({
}
};

return (
<>
{showAddFilePopUp && (
<Popup className="h-[32rem] w-full overflow-y-scroll sm:h-[44rem] sm:w-[36rem]">
{!error ? (
<div className="flex-col justify-between rounded-[16px] text-white">
<div className="mb-5 mt-4 text-3xl font-bold">
{" "}
Create New File
</div>
<div className="text-neutral-600 mb-3 h-[34px] w-full text-2xl font-thin">
Select Date
</div>
<div className="inline-bl w-full">
<div className="text-2xl text-[#22555A]">
<DatePicker
showIcon
icon={
<FontAwesomeIcon
icon={faCalendar}
className="text-dark-teal"
/>
}
wrapperClassName="w-full relative"
calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
selected={startDate}
onChange={(date) => date && setStartDate(date)}
dateFormat="dd MMMM yyyy"
excludeDates={excludeDates}
/>
{excludedDatesString.includes(startDate.toDateString()) ? (
<p className="text-center text-xs text-red-400">
***ERROR: Please pick a date that you have not created a
file for***
</p>
) : null}
</div>
</div>
<TagSelector
selectedTags={selectedTags}
setSelectedTags={setSelectedTags}
/>
<div className="flex w-full flex-row justify-center">
<button
className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] bg-white p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white"
onClick={handleCancel}
>
Cancel
</button>
<button
className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
disabled={
selectedTags.length == 0 ||
excludedDatesString.includes(startDate.toDateString())
}
onClick={callAddFile}
>
{!fetching ? "Create" : "Loading..."}
</button>
</div>
</div>
) : (
<>
{error && (
<div className="flex h-[250px] max-w-[35%] flex-col place-content-center gap-y-10 self-center rounded-lg bg-white p-10 text-center text-lg">
<span>
There was an error adding your file. Please reach out to
your club administrator for assistance.
</span>
<div className="flex w-full flex-row justify-center">
<button
className="bg-legacy-teal text-md disabled: mx-1 w-full max-w-[10rem] rounded p-3 font-serif font-normal text-white hover:bg-dark-teal"
onClick={() => setShowAddFilePopUp(false)}
>
Confirm
</button>
</div>
</div>
)}
</>
)}
</Popup>
)}
</>
if (!showAddFilePopUp) {
return null;
}

return !error ? (
<Popup className="h-[32rem] w-full overflow-y-scroll sm:h-[44rem] sm:w-[36rem]">
<div className="flex-col justify-between rounded-[16px] text-white">
<div className="mb-5 mt-4 text-3xl font-bold"> Create New File</div>
<div className="text-neutral-600 mb-3 h-[34px] w-full text-2xl font-thin">
Select Date
</div>
<div className="inline-bl w-full">
<div className="text-2xl text-[#22555A]">
<DatePicker
showIcon
icon={
<FontAwesomeIcon icon={faCalendar} className="text-dark-teal" />
}
wrapperClassName="w-full relative"
calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
selected={startDate}
onChange={(date) => date && setStartDate(date)}
dateFormat="dd MMMM yyyy"
excludeDates={excludeDates}
/>
{excludedDatesString.includes(startDate.toDateString()) ? (
<p className="text-center text-xs text-red-400">
***ERROR: Please pick a date that you have not created a file
for***
</p>
) : null}
</div>
</div>
<TagSelector
selectedTags={selectedTags}
setSelectedTags={setSelectedTags}
/>
<div className="flex w-full flex-row justify-center">
<button
className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] bg-white p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white"
onClick={handleCancel}
>
Cancel
</button>
<button
className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
disabled={
selectedTags.length == 0 ||
excludedDatesString.includes(startDate.toDateString())
}
onClick={callAddFile}
>
{!fetching ? "Create" : "Loading..."}
</button>
</div>
</div>
</Popup>
) : (
<Popup>
<div className="flex h-full flex-col items-center justify-between text-white">
<span className="text-lg">
There was an error adding your file. Please reach out to your club
administrator for assistance.
</span>
<button
className="w-full max-w-[10rem] rounded bg-white p-3 font-serif font-normal text-dark-teal"
onClick={() => setShowAddFilePopUp(false)}
>
Confirm
</button>
</div>
</Popup>
);
};

Expand Down

0 comments on commit 10acd54

Please sign in to comment.