Skip to content

Commit

Permalink
Merge pull request #50 from incubyte/fix-LP-62-revamp-leaderboard
Browse files Browse the repository at this point in the history 
Fix lp 62 revamp leaderboard
  • Loading branch information
@Charvit123
Charvit123 committed Aug 10, 2023
2 parents 45ae27a + c7b8d30 commit bf3bf1f
Show file tree
Hide file tree
Showing 12 changed files with 143 additions and 203 deletions.
4 changes: 2 additions & 2 deletions admin/src/components/utilities/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const Footer = () => {
<footer data-testid="footer" className="mt-auto" role="footer">
<div className="FooterContainer">
<div className="FooterContent">
<span className="FooterContentText">
<div className="FooterContentText">
© 2023{" "}
<a href="https://www.incubyte.co/" data-testid="footerLink">
Incubyte
</a>
. All Rights Reserved.
</span>
</div>
<div className="FooterIconLinkSection">
<a
href="https://www.linkedin.com/company/incubyte"
Expand Down
2 changes: 1 addition & 1 deletion admin/src/css/utilities/Footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.FooterContentText {
@apply text-sm text-gray-500 sm:text-center;
@apply text-sm text-gray-500 xsm:text-center sm:text-center;
}

.FooterLink {
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/components/courses/CoursePageIndex.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ describe("Welcome Image", () => {
);

const indexImage = screen.getByRole("coursePageIndexImage");
expect(indexImage).toHaveAttribute("src", Symbol);
expect(indexImage).toHaveAttribute("alt", "Course Page Image");
expect(indexImage).toBeInTheDocument();
});
});
23 changes: 15 additions & 8 deletions frontend/src/components/courses/CoursePageIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,23 @@ import "../../css/courses/CoursePageIndex.css";
const CoursePageIndex = () => {
return (
<>
<img
className="coursePageIndexImage"
style={{ width: "100%" }}
src={Symbol}
alt="Course Page Image"
data-testid="indexPageImage"
<div
className="ImageContainer"
role="coursePageIndexImage"
/>
>
<div className="ContentContainer">
<h2 className="ContentHeading">
Lets Learn Something New, Today !!!
</h2>

<p className="ContentParagraph">
If you can learn 1% better each day for one year, you will end up 37
times better by the time you are done.
</p>
</div>
</div>
</>
);
};

export default CoursePageIndex;
export default CoursePageIndex;
21 changes: 0 additions & 21 deletions frontend/src/components/home/LeaderBoard.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,26 +162,6 @@ describe("should render the leaderBoard component", () => {
});
});

test("should render the container1 on the Leader Board page", async () => {
render(
<BrowserRouter>
<LeaderBoard />
</BrowserRouter>
);
await waitFor(() => {
const leaderBoardContainer1 = screen.getByTestId("container1");
const userImage = screen.getByTestId("container1 Image");
const userInfo = screen.getByTestId("container1 user Info");
expect(leaderBoardContainer1).toBeInTheDocument();
expect(userImage).toHaveAttribute("alt", "user image");
expect(userImage).toBeInTheDocument();
expect(userInfo).toBeInTheDocument();
expect(userInfo).toHaveTextContent("Email");
expect(userInfo).toHaveTextContent("Role");
expect(userInfo).toHaveTextContent("Credits");
});
});

test("should render the container2 on the Leader Board page", async () => {
render(
<BrowserRouter>
Expand All @@ -194,7 +174,6 @@ describe("should render the leaderBoard component", () => {
expect(leaderBoardContainer2).toBeInTheDocument();
expect(table).toBeInTheDocument();
expect(table).toHaveTextContent("Email");
expect(table).toHaveTextContent("Rank");
expect(table).toHaveTextContent("Role");
expect(table).toHaveTextContent("Credits");
});
Expand Down
201 changes: 81 additions & 120 deletions frontend/src/components/home/LeaderBoard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
import { useIsAuthenticated } from "@azure/msal-react";
import React, { useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "../../css/home/LeaderBoard.css";
import { courseType } from "../courses/Courses";
import { userType } from "../user/user";
import Carousel from "../utilities/Carousel";
import { LeaderBoardType } from "./LeaderBoardType";
import HomePage from "../../assets/HomePage.png";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

const LeaderBoard = () => {
const [activeCourses, setActiveCourses] = useState<courseType[]>([]);
const [completeCourses, setCompleteCourses] = useState<courseType[]>([]);
const [leaderBoardUsers, setLeaderBoardUsers] = useState<LeaderBoardType[]>(
[]
);
const isAuthenticated = useIsAuthenticated();
const [currentUserCredit, setCurrentUserCredit] = useState<number>(0);
const [currentUser, setCurrentUser] = useState<userType>();
const [isLoading, setIsLoading] = useState(true);

const fetchCurrentUserCredit = async () => {
const authToken = localStorage.getItem("authToken");
try {
Expand Down Expand Up @@ -157,127 +154,91 @@ const LeaderBoard = () => {

return (
<>
<div className="LeaderBoardContainer " role="leaderBoard">
<div className="w-full text-center mb-8">
<h2
className="LeaderBoardTitleContainer"
data-testid="leaderBoardTitle"
>
Leader Board
</h2>
</div>
<div className="LeaderBoardContainers" data-testid="container1">
{isLoading ? (
<Skeleton className="lg:max-w-[580px] h-[450px]" />
) : (
<>
<div className="LeaderBoardInnerContainer">
<div>
<img
className="LeaderBoardInnerFirstImageContainer"
src={currentUser?.profilePhoto}
alt="user image"
data-testid="container1 Image"
/>
</div>
<div
className="LeaderBoardUserInfoContainer"
data-testid="container1 user Info"
>
<div className="LeaderBoardUserInnerInfoContainer">
<p className="LeaderBoardUserInnerInfo">
Email: {currentUser?.email}
</p>
<p className="LeaderBoardUserInnerInfo">
Credits: {currentUserCredit}
</p>
<p className="LeaderBoardUserInnerInfo">
Role: {currentUser?.role}
</p>
</div>
</div>
</div>
</>
)}
<div className="leaderBoard">
<div className="HomePageImageBgSection">
<div className="HomePageQuateContainer">
<p className="HomePageQuate">
Learning is a never-ending journey, and the more you explore, the
more you discover.
</p>
</div>
</div>
<div className="LeaderBoardContainers" data-testid="container2">
<h1 data-testid="leaderBoardTitle" className="LeaderBoardTableHeading">
Leader Board
</h1>
<div
className="LeaderBoardTableContainer"
data-testid="container2"
role="leaderBoard"
>
{isLoading ? (
<Skeleton className="lg:max-w-[480px] h-[450px]" />
<Skeleton height={360} />
) : (
<>
<div className="LeaderBoardContainerTwoTableContainer">
<div className="LeaderBoardInnerContainerScrollbar">
<table
className="LeaderBoardContainerTwoTable"
data-testid="container2 table"
>
<thead>
<tr role="row">
<th className="rounded-tl LeaderBoardContainerTwoTableBorder">
Rank
</th>
<th className="LeaderBoardContainerTwoTableBorder">
Email
</th>
<th className="LeaderBoardContainerTwoTableBorder">
Role
</th>
<th className="LeaderBoardContainerTwoTableBorder">
Credits
</th>
</tr>
</thead>
<tbody>
{leaderBoardUsers.map((leaderBoardUser, index) => {
return (
<React.Fragment key={index}>
{
<tr
className={`${
index % 2 === 0 ? "bg-gray-100" : "bg-white"
}`}
role="row"
>
<td className="LeaderBoardContainerTwoTableBorder">
{index + 1}
</td>
<td className="LeaderBoardContainerTwoTableBorder">
{leaderBoardUser?.user?.email}
</td>
<td className="LeaderBoardContainerTwoTableBorder">
{leaderBoardUser?.user?.role}
</td>
<td className="LeaderBoardContainerTwoTableBorder">
{leaderBoardUser?.CompletedCourseCount * 10}
</td>
</tr>
}
</React.Fragment>
);
})}
</tbody>
</table>
</div>
</div>
</>
<table data-testid="container2 table" className="LeaderBoardTable">
<thead
className="LeaderBoardTableHead"
data-testid="tableHeading"
>
<tr>
<th scope="col" className="LeaderBoardTableHeadCols">
Sr No.
</th>
<th scope="col" className="LeaderBoardTableHeadCols">
Email
</th>
<th scope="col" className="LeaderBoardTableHeadCols">
Role
</th>
<th scope="col" className="LeaderBoardTableHeadCols">
Credits
</th>
</tr>
</thead>
<tbody>
{leaderBoardUsers?.map((leaderBoardUser, index) => {
return (
<tr
key={index}
className={`${
index % 2 === 1 ? "bg-gray-100" : "bg-white"
}`}
role="row"
>
<td className="LeaderBoardTableRows">{index + 1}</td>
<td className="LeaderBoardTableRows">
{leaderBoardUser?.user?.email}
</td>
<td className="LeaderBoardTableRows">
{leaderBoardUser?.user?.role}
</td>
<td className="LeaderBoardTableRows">
{leaderBoardUser?.CompletedCourseCount * 10}
</td>
</tr>
);
})}
</tbody>
</table>
)}
</div>
<br />
<hr className="mt-10" />
<Carousel
titleName="Active Courses"
contentId={"activeContent"}
courses={activeCourses}
isLoading={isLoading}
/>
<hr className="mt-10" />
<Carousel
titleName="Completed Courses"
contentId={"completeContent"}
courses={completeCourses}
isLoading={isLoading}
/>

<ToastContainer />
</div>
<br />
<Carousel
titleName="Active Courses"
contentId={"activeContent"}
courses={activeCourses}
isLoading={isLoading}
/>
<hr className="mt-10" />
<Carousel
titleName="Completed Courses"
contentId={"completeContent"}
courses={completeCourses}
isLoading={isLoading}
/>
<ToastContainer />
</>
);
};
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/utilities/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const Footer = () => {
<footer data-testid="footer" role="footer">
<div className="FooterContainer">
<div className="FooterContent">
<span className="FooterContentText">
<div className="FooterContentText">
© 2023{" "}
<a href="https://www.incubyte.co/" data-testid="footerLink">
Incubyte
</a>
. All Rights Reserved.
</span>
</div>
<div className="FooterIconLinkSection">
<a
href="https://www.linkedin.com/company/incubyte"
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/css/courseDetails/courseDetails.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@apply container grid justify-items-center content-center object-contain bg-slate-100 rounded-lg max-w-full;
}
.courseImage {
@apply rounded-full lg:h-40 md:h-36 sm:h-24 xsm:h-24 lg:w-40 md:w-36 sm:w-24 xsm:w-24 block object-cover;
@apply rounded-full lg:h-40 md:h-36 sm:h-24 xsm:h-24 lg:w-40 md:w-36 sm:w-24 xsm:w-24 block;
}
.courseImageDiv {
@apply relative mt-5;
Expand All @@ -29,7 +29,7 @@
@apply flex flex-col items-center gap-7 content-center;
}
.courseResources {
@apply container grid justify-items-center content-center relative lg:h-96 md:h-80 sm:h-72 h-60 sm:w-10/12 xsm:w-10/12 max-w-full overflow-hidden;
@apply container grid justify-items-center content-center mb-5 relative lg:h-96 md:h-80 sm:h-72 h-60 sm:w-10/12 xsm:w-10/12 max-w-full overflow-hidden;
}
.resourceFrame {
@apply rounded-xl border-none absolute h-full max-w-full;
Expand Down
18 changes: 15 additions & 3 deletions frontend/src/css/courses/CoursePageIndex.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
.coursePageIndexImage{
@apply h-auto border-solid border-black
}
.ImageContainer {
@apply flex mx-3 sm:mx-10 my-1 sm:my-2 shadow-md rounded-lg bg-course-page bg-[length:100%_25vh] h-[25vh] lg:bg-[length:100%_50vh] md:bg-[length:100%_30vh] lg:h-[50vh] md:h-[30vh] justify-center;
}

.ContentContainer {
@apply flex flex-col justify-evenly items-center text-white text-center p-4;
}

.ContentHeading {
@apply text-sm xsm:text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mt-4 mb-2;
}

.ContentParagraph {
@apply text-xs xsm:text-base sm:text-lg md:text-xl lg:text-2xl mb-4;
}
Loading

0 comments on commit bf3bf1f

Please sign in to comment.