From 93b79c5fbaaa80682de12a0978b9c49f0a117bfa Mon Sep 17 00:00:00 2001 From: Prayag Prajapati Date: Fri, 24 Feb 2023 20:49:43 +0530 Subject: [PATCH] Fix page reload breaking stuff and add few other things --- src/App.jsx | 3 +- src/components/avatar/avatar.jsx | 2 +- src/components/avatar/avatar.module.scss | 2 + src/routes/home/root.jsx | 114 +++++++++++++++-------- src/routes/login/login.module.scss | 2 + src/routes/login/root.jsx | 25 ++++- src/utils/store/servers.js | 2 +- 7 files changed, 106 insertions(+), 44 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 0ee9613a..f322a4a3 100644 --- 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 index ebcc84f2..7063c9f9 100644 --- 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 ( - +
{userImageAvailable ? (
{ 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 = () => { > {/*
@@ -216,39 +251,44 @@ export const Home = () => { {userLibraries.map((library, index) => { return ( - - - + - { - MediaCollectionTypeIconCollection[ - library - .CollectionType - ] - } - - - + + { + MediaCollectionTypeIconCollection[ + library + .CollectionType + ] + } + + + + ); })} diff --git a/src/routes/login/login.module.scss b/src/routes/login/login.module.scss index 9a00a305..99efa8ce 100644 --- 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 index 1817e6b2..01e0f6f1 100644 --- 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 index b8774e37..61ccb548 100644 --- 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");