Fix page reload breaking stuff and add few other things

prayag17 · Feb 24, 2023 · 93b79c5 · 93b79c5
1 parent 899fcb0
commit 93b79c5
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 44 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -117,7 +117,7 @@ function App() {
 	const navigate = useNavigate();
 
 	const [serverReachable, setServerReachable] = useState(true);
-	const [checkingServer, setChecking] = useState(true);
+	const [checkingServer, setChecking] = useState(false);
 
 	const serverAvailable = async () => {
 		const server = await getServer();
@@ -154,6 +154,7 @@ function App() {
 	};
 
 	const pingServer = () => {
+		setChecking(true);
 		let data;
 		fetch(`${window.api.basePath}/System/Ping`, {
 			body: JSON.stringify(data),

diff --git a/src/components/avatar/avatar.jsx b/src/components/avatar/avatar.jsx
@@ -10,7 +10,7 @@ import "./avatar.module.scss";
 
 export const AvatarCard = ({ userName, userId, userImageAvailable }) => {
 	return (
-		<ButtonBase className="card square">
+		<ButtonBase className="card square" sx={{ borderRadius: "10px" }}>
 			<div className="card-image-container">
 				{userImageAvailable ? (
 					<div

diff --git a/src/components/avatar/avatar.module.scss b/src/components/avatar/avatar.module.scss
@@ -12,11 +12,13 @@
 	flex-direction: column;
 	gap: 0.5em;
 	margin-bottom: 0.5em;
+	overflow: hidden;
 	.card-image {
 		position: absolute;
 		inset: 0;
 		&-container {
 			font-size: 5em;
+			z-index: 0;
 		}
 		&-icon {
 			font-size: 1.5em !important;

diff --git a/src/routes/home/root.jsx b/src/routes/home/root.jsx
@@ -2,6 +2,10 @@
 
 import { useState, useEffect } from "react";
 
+import { EventEmitter as event } from "../../eventEmitter";
+import { getServer } from "../../utils/store/servers";
+import { getUser } from "../../utils/store/user";
+
 import { theme } from "../../theme";
 import "./home.module.scss";
 
@@ -22,6 +26,7 @@ import Divider from "@mui/material/Divider";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
 import useScrollTrigger from "@mui/material/useScrollTrigger";
+import Tooltip from "@mui/material/Tooltip";
 
 import Carousel from "react-material-ui-carousel";
 
@@ -135,18 +140,48 @@ export const Home = () => {
 		return userviews;
 	};
 
+	const authUser = async () => {
+		const server = await getServer();
+		const user = await getUser();
+		event.emit("create-jellyfin-api", server.Ip);
+		const auth = await api.authenticateUserByName(
+			user.Name,
+			user.Password,
+		);
+		sessionStorage.setItem("accessToken", auth.data.AccessToken);
+		event.emit("set-api-accessToken", window.api.basePath);
+	};
+
 	useEffect(() => {
-		currentUser().then((usr) => {
-			setUser(usr.data);
-			userLibs().then((libs) => {
-				setUserLibraries(libs.data.Items);
-				setSkeletonStateSideMenu(true);
+		// TODO Implement a better way to check and create api object when page reloaded. Hint: Maybe use session api or something (*route - home*)
+		if (!window.api) {
+			authUser().then(() => {
+				currentUser().then((usr) => {
+					setUser(usr.data);
+					userLibs().then((libs) => {
+						setUserLibraries(libs.data.Items);
+						setSkeletonStateSideMenu(true);
+					});
+					getLatestMedia(usr.data).then((media) => {
+						console.log("Using this");
+						setLatestMedia(media.data);
+						setSkeletonStateCarousel(true);
+					});
+				});
 			});
-			getLatestMedia(usr.data).then((media) => {
-				setLatestMedia(media.data);
-				setSkeletonStateCarousel(true);
+		} else {
+			currentUser().then((usr) => {
+				setUser(usr.data);
+				userLibs().then((libs) => {
+					setUserLibraries(libs.data.Items);
+					setSkeletonStateSideMenu(true);
+				});
+				getLatestMedia(usr.data).then((media) => {
+					setLatestMedia(media.data);
+					setSkeletonStateCarousel(true);
+				});
 			});
-		});
+		}
 	}, []);
 
 	return (
@@ -191,7 +226,7 @@ export const Home = () => {
 				>
 					<DrawerHeader
 						className="Mui-DrawerHeader"
-						sx={{ position: "relative", height: "20vh" }}
+						sx={{ position: "relative" }}
 					>
 						{/* <div>
 						<Avatar src={""}/>
@@ -216,39 +251,44 @@ export const Home = () => {
 						<List sx={{ border: "none" }}>
 							{userLibraries.map((library, index) => {
 								return (
-									<ListItem
-										disablePadding
+									<Tooltip
+										title={library.Name}
+										placement="right"
+										arrow
+										followCursor
 										key={index}
 									>
-										<ListItemButton
-											sx={{
-												minHeight: 48,
-												justifyContent:
-													drawerState
-														? "initial"
-														: "center",
-												px: 2.5,
-											}}
-										>
-											<ListItemIcon
+										<ListItem disablePadding>
+											<ListItemButton
 												sx={{
-													minWidth: 0,
-													mr: drawerState
-														? 3
-														: "auto",
+													minHeight: 48,
 													justifyContent:
-														"center",
+														drawerState
+															? "initial"
+															: "center",
+													px: 2.5,
 												}}
 											>
-												{
-													MediaCollectionTypeIconCollection[
-														library
-															.CollectionType
-													]
-												}
-											</ListItemIcon>
-										</ListItemButton>
-									</ListItem>
+												<ListItemIcon
+													sx={{
+														minWidth: 0,
+														mr: drawerState
+															? 3
+															: "auto",
+														justifyContent:
+															"center",
+													}}
+												>
+													{
+														MediaCollectionTypeIconCollection[
+															library
+																.CollectionType
+														]
+													}
+												</ListItemIcon>
+											</ListItemButton>
+										</ListItem>
+									</Tooltip>
 								);
 							})}
 						</List>

diff --git a/src/routes/login/login.module.scss b/src/routes/login/login.module.scss
@@ -7,9 +7,11 @@
 		width: min(60vw, 45em);
 	}
 	&Card {
+		border-radius: $border-radius-default;
 		display: flex;
 		flex-flow: column;
 		flex: 1 1 0px;
+		overflow: hidden;
 	}
 	&Icon {
 		font-size: 5em;

diff --git a/src/routes/login/root.jsx b/src/routes/login/root.jsx
@@ -5,6 +5,7 @@ import { Cookies, useCookies } from "react-cookie";
 import { useNavigate, useParams, Link } from "react-router-dom";
 import { EventEmitter as event } from "../../eventEmitter.js";
 
+import { getServer } from "../../utils/store/servers.js";
 import { saveUser } from "../../utils/store/user.js";
 
 // import Icon from "mdi-material-ui";
@@ -220,11 +221,27 @@ export const UserLogin = () => {
 		return users;
 		// return {};
 	};
+
+	const createApi = async () => {
+		const server = await getServer();
+		event.emit("create-jellyfin-api", server.Ip);
+	};
+
 	useMemo(() => {
-		getUsers().then((users) => {
-			setUsers(users.data);
-			console.log(userList);
-		});
+		// TODO Implement a better way to check and create api object when page reloaded. Hint: Maybe use session api or something (*route - login*)
+		if (!window.api) {
+			createApi().then(() => {
+				getUsers().then((users) => {
+					setUsers(users.data);
+					console.log(userList);
+				});
+			});
+		} else {
+			getUsers().then((users) => {
+				setUsers(users.data);
+				console.log(userList);
+			});
+		}
 	}, []);
 
 	return (

diff --git a/src/utils/store/servers.js b/src/utils/store/servers.js
@@ -14,7 +14,7 @@ const setServer = (data) => {
 
 /**
  * Get Server list
- * @returns {object}
+ * @returns {object} server
  */
 const getServer = async () => {
 	let server = await servers.get("server");