Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed nits and styling bugs #148

Merged
merged 3 commits into from
Apr 9, 2024
Merged

fixed nits and styling bugs #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3611e61
fixed nits and styling bugs
nathan-j-edwards Apr 8, 2024
10acd54
Fix error popup
nickbar01234 Apr 9, 2024
2ad6bfb
Remove log
nickbar01234 Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions src/app/private/[uid]/user/seniors/SeniorsHomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
"use client";

import { UserTile } from "@components/TileGrid";
import { Senior, User } from "@prisma/client";
import { Prisma, Senior, User } from "@prisma/client";
import SearchableContainer from "@components/SearchableContainer";
import { seniorFullName } from "@utils";

type UserWithSeniors = Prisma.UserGetPayload<{ include: { Seniors: true } }>;

type SeniorsHomePageProps = {
seniors: Senior[];
user: User;
user: UserWithSeniors;
};

const SeniorsHomePage = ({ seniors, user }: SeniorsHomePageProps) => {
const displaySeniors = (elem: Senior, index: number) => (
const SeniorsHomePage = ({ user }: SeniorsHomePageProps) => {
const displaySeniors = (elem: Senior) => (
<UserTile
key={elem.id}
senior={elem}
Expand All @@ -22,11 +23,11 @@ const SeniorsHomePage = ({ seniors, user }: SeniorsHomePageProps) => {
return (
<>
<h1 className="font-merriweather pb-6 text-3xl">
{`My Assigned Seniors (${seniors.length})`}
{`My Assigned Seniors (${user.Seniors.length})`}
</h1>
<SearchableContainer
display={displaySeniors}
elements={seniors}
elements={user.Seniors}
emptyNode={
<h1 className="text-2xl font-light">
{"You haven't been assigned a Senior yet."}
Expand Down
4 changes: 1 addition & 3 deletions src/app/private/[uid]/user/seniors/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ const UserSeniorsPage = async ({ params }: { params: { uid: string } }) => {
},
});

const seniors = user.Seniors;

return <SeniorsHomePage seniors={seniors} user={user} />;
return <SeniorsHomePage user={user} />;
};

export default UserSeniorsPage;
4 changes: 2 additions & 2 deletions src/components/container/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ interface PopupProps {

const Popup = (props: PopupProps) => {
return (
<div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center backdrop-blur-[2px] backdrop-brightness-75">
<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={`flex h-48 w-[30rem] flex-col gap-y-6 rounded-[16px] bg-dark-teal px-6 py-9 ${
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}
Expand Down
5 changes: 3 additions & 2 deletions src/components/senior/DisplaySenior.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const DisplaySenior = (props: DisplayProps) => {
students.filter((student) => senior.StudentIDs.includes(student.id));

const [assigned, setAssigned] = React.useState(() => getAssignments());
console.log(assigned);
const onSave = async () => {
await patchSenior({
body: {
Expand Down Expand Up @@ -62,7 +61,9 @@ const DisplaySenior = (props: DisplayProps) => {
/>
<SearchableContainer
display={(file) => <File key={file.id} file={file} />}
elements={senior.Files}
elements={senior.Files.sort(
(fileA, fileB) => fileA.date.getTime() - fileB.date.getTime()
)}
search={(file, filter) => formatFileDate(file.date).includes(filter)}
addElementComponent={
canAddFile ? (
Expand Down
213 changes: 97 additions & 116 deletions src/components/user/AddFile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { File as PrismaFile } from "@prisma/client";
import { Popup } from "@components/container";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
import { useRouter } from "next/navigation";

type AddFileProps = {
showAddFilePopUp: boolean;
Expand All @@ -32,7 +33,7 @@ const TagOptions = ({
<input
type="checkbox"
id={tag.name}
className="size-40 peer my-5 hidden"
className="size-40 my-5 hidden"
onClick={() => {
if (!selectedTags.includes(tag) && selectedTags.length < 3) {
setSelectedTags([...selectedTags, tag]);
Expand All @@ -41,22 +42,17 @@ const TagOptions = ({
}
}}
/>
{!selectedTags.includes(tag) && (
<label
htmlFor={tag.name}
className="m-2 ml-[-2px] inline-block rounded-full border-2 p-2 hover:bg-white hover:text-[#22555A]"
>
{tag.name}
</label>
)}
{selectedTags.includes(tag) && (
<label
htmlFor={tag.name}
className="m-2 ml-[-2px] inline-block rounded-full border-2 bg-white p-2 text-[#22555A]"
>
{tag.name}
</label>
)}
<label
htmlFor={tag.name}
className={`${
selectedTags.includes(tag)
? "bg-white text-[#22555A]"
: "hover:bg-white hover:text-[#22555A]"
} m-2 ml-[-2px] inline-block rounded-full border-2
p-2`}
>
{tag.name}
</label>
</div>
))}
</div>
Expand Down Expand Up @@ -91,23 +87,17 @@ const AddFile = ({
setShowAddFilePopUp,
seniorId,
files,
folder,
}: AddFileProps) => {
const currFiles = Object.values(files);
const excludeDates = currFiles.map((fileObj) => fileObj.date);
const excludedDatesString = excludeDates.map((dateObj) =>
dateObj.toDateString()
);

const startDate_ = new Date();
const [startDate, setStartDate] = useState(new Date());

while (excludedDatesString.includes(startDate_.toDateString())) {
startDate_.setDate(startDate_.getDate() + 1);
}

const [startDate, setStartDate] = useState(startDate_);

const [confirm, setConfirm] = useState<boolean>(false);
const router = useRouter();
const [fetching, setFetching] = React.useState(false);
const [error, setError] = useState<boolean>(false);
const [selectedTags, setSelectedTags] = useState<TagProps[]>([]);

Expand All @@ -116,6 +106,11 @@ const AddFile = ({
};

const callAddFile = async () => {
if (fetching) {
return;
}

setFetching(true);
const response = await createFile({
body: {
date: startDate,
Expand All @@ -125,102 +120,88 @@ const AddFile = ({
seniorId: seniorId,
},
});
setFetching(false);

if (response.code == "SUCCESS") {
setConfirm(true);
if (response.code === "SUCCESS") {
router.refresh();
} else {
setError(true);
}
};

return (
<>
{showAddFilePopUp && (
<Popup className="h-fit w-[36rem]">
{!confirm && !error ? (
<div className="flex 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}
/>
</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}
onClick={callAddFile}
>
Create
</button>
</div>
</div>
) : (
<>
{confirm ? (
<div className="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>File added successfully!</span>
<div className="flex w-full flex-row justify-center">
<button
className="bg-legacy-teal text-md 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>
) : (
<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