Merge pull request #135 from EnigmaVSSUT/dev-v2

style: responsive teams page
EnigmaVSSUT · Mar 8, 2024 · 6942fa6 · 6942fa6
2 parents 0a83923 + 0cf7961
commit 6942fa6
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 47 deletions.
diff --git a/src/app/events/Events.jsx b/src/app/events/Events.jsx
@@ -3,8 +3,10 @@ import AnimatePage from "../../ui/AnimatePage";
 import eventStyles from "./events.module.css";
 import EventList from "./components/EventList";
 import Calender from "./components/Calender";
+import { useResponsive } from "../../hooks/useResponsive";
 
 export default function Events() {
+	const { isLaptop, isTablet } = useResponsive();
 	return (
 		<AnimatePage>
 			<Stack
@@ -13,14 +15,18 @@ export default function Events() {
 				position="relative"
 				paddingBottom={"2rem"}
 			>
-				<Typography variant="h2" paddingY="20px">
+				<Typography variant={isTablet ? "h4" : "h2"} paddingY="20px">
 					Events
 				</Typography>
-				<Stack paddingY={3} direction={"row"} gap={20}>
+				<Stack
+					paddingY={3}
+					direction={isLaptop ? "column-reverse" : "row"}
+					gap={isTablet ? 10 : 20}
+				>
 					<Stack className={eventStyles.eventsList}>
 						<EventList />
 					</Stack>
-					<Stack className={eventStyles.calender}>
+					<Stack className={eventStyles.calender} padding={3}>
 						<Calender />
 					</Stack>
 				</Stack>

diff --git a/src/app/events/components/Calender.jsx b/src/app/events/components/Calender.jsx
@@ -4,25 +4,42 @@ import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
 import { DemoContainer, DemoItem } from "@mui/x-date-pickers/internals/demo";
 import useDatePicker from "../../../shared/store/useDatePicker";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function Calendar() {
 	const [setPickedDate] = useDatePicker((state) => [state.setPickedDate]);
-	const [value, setValue] = useState(dayjs());
+	const [value, setValue] = useState();
+	const pickedDate = useDatePicker((state) => state.pickedDate);
+	const { isLaptop, isTablet } = useResponsive();
 
 	return (
-		<LocalizationProvider dateAdapter={AdapterDayjs}>
-			<DemoContainer components={["DateCalendar", "DateCalendar"]}>
-				<DemoItem>
-					<DateCalendar
-						value={value}
-						onChange={(newValue) => {
-							setPickedDate(newValue.format("dddd, MMMM DD"));
-							setValue(newValue);
-						}}
-					/>
-				</DemoItem>
-			</DemoContainer>
-		</LocalizationProvider>
+		<Stack
+			direction={isTablet ? "column" : "row"}
+			gap={isTablet ? 2 : 10}
+			justifyContent={"center"}
+			alignItems={"center"}
+		>
+			<LocalizationProvider dateAdapter={AdapterDayjs}>
+				<DemoContainer components={["DateCalendar", "DateCalendar"]}>
+					<DemoItem>
+						<DateCalendar
+							value={value}
+							onChange={(newValue) => {
+								setPickedDate(newValue.format("dddd, MMMM DD"));
+								setValue(newValue);
+							}}
+						/>
+					</DemoItem>
+				</DemoContainer>
+			</LocalizationProvider>
+			{isLaptop && (
+				<Stack>
+					<Typography variant={isTablet ? "h6" : "h4"}>{pickedDate}</Typography>
+				</Stack>
+			)}
+		</Stack>
 	);
 }
diff --git a/src/app/events/components/EventCard.jsx b/src/app/events/components/EventCard.jsx
@@ -1,11 +1,13 @@
 import { Stack, Divider, Typography } from "@mui/material";
 import eventStyles from "../events.module.css";
+import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function EventCard({ key, date, title, info }) {
+	const { isTablet } = useResponsive();
 	return (
 		<Stack
 			className={eventStyles.eventcard}
-			width={"650px"}
+			width={isTablet ? "350px" : "650px"}
 			key={key}
 			padding={4}
 			borderRadius={2}

diff --git a/src/app/events/components/EventList.jsx b/src/app/events/components/EventList.jsx
@@ -8,8 +8,10 @@ import {
 import EventCard from "./EventCard";
 import useDatePicker from "../../../shared/store/useDatePicker";
 import { useEffect, useState } from "react";
+import dayjs from "dayjs";
 import { HighlightOff } from "@mui/icons-material";
 import { useDebounce } from "../../../hooks/useDebounce";
+import { useResponsive } from "../../../hooks/useResponsive";
 
 const datalist1 = [
 	{
@@ -38,6 +40,7 @@ export default function EventList() {
 	const [result, setResult] = useState([]);
 	const [value, setValue] = useState("");
 	const pickedDate = useDatePicker((state) => state.pickedDate);
+	const { isLaptop, isTablet, isMobile } = useResponsive();
 	const debouncedQuery = useDebounce(value, 100);
 
 	useEffect(() => {
@@ -55,11 +58,8 @@ export default function EventList() {
 		if (debouncedQuery === "" && pickedDate === "") {
 			setResult(totalData);
 		} else if (pickedDate !== "" && debouncedQuery === "") {
-			setResult([])
-			const filtered = totalData.filter(
-				(item) =>
-					item.date === pickedDate
-			);
+			setResult([]);
+			const filtered = totalData.filter((item) => item.date === pickedDate);
 			setResult(filtered);
 		} else {
 			const filtered = totalData.filter(
@@ -72,19 +72,19 @@ export default function EventList() {
 	};
 
 	useEffect(() => {
-			filterDataList(debouncedQuery);
+		filterDataList(debouncedQuery);
 	}, [debouncedQuery]);
 
 	return (
 		<Stack
 			gap={3}
 			justifyContent={"start"}
 			alignItems={"start"}
-			width={"650px"}
+			width={isMobile ? "300px" : isTablet ? "400px" : "650px"}
 		>
 			<Stack
 				className="search-box"
-				width={"70%"}
+				width={isLaptop ? "100%" : "70%"}
 				position={"relative"}
 				left={30}
 				direction={"row"}
@@ -110,15 +110,15 @@ export default function EventList() {
 											(data) => data.date === pickedDate
 										);
 										setResult(filteredByDate);
-									}else {
+									} else {
 										setResult(totalData);
 									}
 									setValue("");
 								}}
 								sx={{
 									display: value.length > 0 ? "flex" : "none",
 									justifyContent: "center",
-									alignItems: "center"
+									alignItems: "center",
 								}}
 							>
 								<HighlightOff />

diff --git a/src/app/team/components/AllTeams.jsx b/src/app/team/components/AllTeams.jsx
@@ -5,22 +5,33 @@ import MemberCard from "./MemberCard";
 import baseAPIMethods from "../../../lib/axios/base";
 import AnimatePage from "../../../ui/AnimatePage";
 import { useResponsive } from "../../../hooks/useResponsive";
+import useLoading from "../../../shared/store/useLoading";
 
 export default function AllTeam() {
 	const [member, setMember] = useState([]);
 	const { isTablet, fontSize, fontWeight } = useResponsive();
-
+	const [loading, setLoading] = useLoading((state) => [
+		state.loading,
+		state.setLoading,
+	]);
+	const shimmerSize = localStorage.getItem("teamSize");
+	console.log("local", shimmerSize);
 	useEffect(() => {
+		setLoading(true);
 		const getTeam = async () => {
 			const res = await baseAPIMethods.members.getAllMembers();
 			setMember(res.data);
 			console.log("members", res.data);
+			return res.data;
 		};
-		getTeam();
+		getTeam().then((res) => {
+			console.log("test", res);
+			localStorage.setItem("teamSize", res.length);
+		}).then(()=>{
+			setLoading(false);
+		})
 	}, []);
 
-	console.log("fontSize", fontSize);
-
 	return (
 		<AnimatePage>
 			<Stack justifyContent={"center"} alignItems={"center"} gap={10}>
@@ -43,14 +54,33 @@ export default function AllTeam() {
 					alignItems={"center"}
 					flexWrap={"wrap"}
 				>
-					{member.map((member, idx) => (
-						<MemberCard
-							key={idx}
-							memberName={member.profile.name}
-							memberImage={member.profile.avatar}
-							memberUsername={member.profile.username}
-						/>
-					))}
+					{loading ? (
+						<>
+							{[
+								...Array(shimmerSize).map((_, i) => {
+									<>
+									{console.log('cnt',i)}
+									<MemberCard key={i}
+									memberImage="loadingShimmer"
+									memberName="loadingShimmer"
+									memberUsername="loadingShimmer"
+									/>;
+									</>
+								}),
+							]}
+						</>
+					) : (
+						<>
+							{member.map((member, idx) => (
+								<MemberCard
+									key={idx}
+									memberName={member.profile.name}
+									memberImage={member.profile.avatar}
+									memberUsername={member.profile.username}
+								/>
+							))}
+						</>
+					)}
 				</Stack>
 			</Stack>
 		</AnimatePage>

diff --git a/src/app/team/components/MemberCard.jsx b/src/app/team/components/MemberCard.jsx
@@ -13,9 +13,10 @@ import SmartToyIcon from "@mui/icons-material/SmartToy";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import style from "../team.module.css";
 import Link from '@mui/material/Link';
+import Skeleton from "@mui/material/Skeleton";
 import { useResponsive } from "../../../hooks/useResponsive";
 
-export default function MemberCard({ memberImage, memberName, memberUsername }) {
+export default function MemberCard({ memberImage='loadingShimmer', memberName='loadingShimmer', memberUsername='loadingShimmer' }) {
 	const profileRedirect = () => {
 		const newPageUrl = "/profile/" + memberUsername;
 		window.open(newPageUrl, "_blank");
@@ -30,18 +31,29 @@ export default function MemberCard({ memberImage, memberName, memberUsername })
 				<Stack gap={2} paddingBottom={2}>
 					<div className={style.mobileTeams}>
 
-					<Avatar
+					{
+						(memberImage=='loadingShimmer') ?
+						<Skeleton variant="circular" width={100} height={100} />
+						:
+						<Avatar
 						alt={memberName}
 						sx={{ width: 100, height: 100 }}
 						src={memberImage}
 						/>
+					}
+
+					{
+						(memberName=='loadingShimmer')?
+						<Skeleton variant="rectangular" width={210} height={60} />
+						:
 						<Typography 
 						component={Button}
 						padding={0}
 						onClick={profileRedirect}
 						 variant="caption">
 							{memberName}
 						</Typography>
+					}
 						</div>
 				</Stack>
 			):(
@@ -74,11 +86,16 @@ export default function MemberCard({ memberImage, memberName, memberUsername })
 					justifyContent={"center"}
 					alignItems={"center"}
 				>
-					<Avatar
+					{
+						(memberImage=='loadingShimmer') ?
+						<Skeleton variant="circular" width={100} height={100} />
+						:
+						<Avatar
 						alt={memberName}
 						sx={{ width: 100, height: 100 }}
 						src={memberImage}
-					/>
+						/>
+					}
 
 					<Stack
 						className={cardStyles.overlay}

diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.js
@@ -2,8 +2,8 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useEffect, useState } from "react";
 
 export const useResponsive = () => {
-	const isLaptop = useMediaQuery("(max-width:900px)");
-	const isTablet = useMediaQuery("(max-width:650px)");
+	const isLaptop = useMediaQuery("(max-width:1100px)");
+	const isTablet = useMediaQuery("(max-width:700px)");
 	const isMobile = useMediaQuery("(max-width:500px)");
 
 	let fontSize, lineHeight, fontWeight;