update api, add loading states
This commit is contained in:
parent
6ff45b81bf
commit
63e99885a4
4 changed files with 52 additions and 21 deletions
|
|
@ -32,33 +32,45 @@ const auth: AuthType = {
|
|||
}
|
||||
|
||||
const apiError: {
|
||||
current: "serverError" | null;
|
||||
current: "serverError" | "networkError" | null;
|
||||
} = {
|
||||
current: null,
|
||||
}
|
||||
|
||||
const loading: {
|
||||
doors: boolean;
|
||||
auth: boolean;
|
||||
} = {
|
||||
doors: false,
|
||||
auth: false,
|
||||
}
|
||||
|
||||
|
||||
const doors: Array<DoorType> = []
|
||||
|
||||
function loadAuthFromLocalStorage() {
|
||||
const localAuth = JSON.parse(localStorage.getItem("auth") ?? "")
|
||||
auth.recentLogout = localAuth.recentLogout // set recentLogout true, if user was logged in before
|
||||
auth.authenticated = localAuth.authenticated
|
||||
auth.authorized = localAuth.authorized
|
||||
auth.until = localAuth.until ? new Date(localAuth.until) : null
|
||||
auth.username = localAuth.username
|
||||
if (localStorage.getItem("auth")) {
|
||||
const localAuth = JSON.parse(localStorage.getItem("auth")!)
|
||||
auth.recentLogout = localAuth.recentLogout // set recentLogout true, if user was logged in before
|
||||
auth.authenticated = localAuth.authenticated
|
||||
auth.authorized = localAuth.authorized
|
||||
auth.until = localAuth.until ? new Date(localAuth.until) : null
|
||||
auth.username = localAuth.username
|
||||
}
|
||||
}
|
||||
|
||||
async function checkUser() {
|
||||
loading.auth = true
|
||||
const getUserInfo = fetcher.path("/api/user-info/").method("get").create()
|
||||
|
||||
try {
|
||||
const {status, data: userInfo} = await getUserInfo({})
|
||||
const {data: userInfo} = await getUserInfo({})
|
||||
|
||||
apiError.current = null
|
||||
auth.authenticated = userInfo.is_logged_in
|
||||
auth.authorized = true
|
||||
auth.authorized = userInfo.is_authorized
|
||||
auth.until = userInfo.guaranteed_session_until ? new Date(userInfo.guaranteed_session_until) : null
|
||||
auth.username = userInfo.user_info?.username ?? ""
|
||||
auth.username = userInfo.username ?? ""
|
||||
auth.recentLogout = false
|
||||
} catch (e) {
|
||||
// check which operation threw the exception
|
||||
|
|
@ -80,15 +92,18 @@ async function checkUser() {
|
|||
}
|
||||
} finally {
|
||||
localStorage.setItem("auth", JSON.stringify(auth))
|
||||
loading.auth = false
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDoors() {
|
||||
loading.doors = true
|
||||
refresh()
|
||||
const getDoors = fetcher.path("/api/locks/").method("get").create()
|
||||
|
||||
try {
|
||||
const {status, data: doorInfo} = await getDoors({})
|
||||
const {data: doorInfo} = await getDoors({})
|
||||
|
||||
apiError.current = null
|
||||
while (doors.length) {
|
||||
|
|
@ -129,7 +144,15 @@ async function fetchDoors() {
|
|||
console.error("unknown error:", error)
|
||||
}
|
||||
}
|
||||
|
||||
if (e instanceof Error) {
|
||||
switch (e.name) {
|
||||
case "TypeError":
|
||||
apiError.current = "networkError"
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.doors = false
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
|
@ -190,21 +213,27 @@ function refresh() {
|
|||
const alertUnauthorized: HTMLDivElement = document.querySelector("#alert-unauthorized")!
|
||||
const alertLoggedout: HTMLDivElement = document.querySelector("#alert-loggedout")!
|
||||
const alertServerError: HTMLDivElement = document.querySelector("#alert-serverError")!
|
||||
const alertNetworkError: HTMLDivElement = document.querySelector("#alert-networkError")!
|
||||
const alertDivider: HTMLDivElement = document.querySelector("#alert-divider")!
|
||||
const badgeUsername: HTMLDivElement = document.querySelector("#badge-username")!
|
||||
const buttonLogin: HTMLDivElement = document.querySelector("#button-login")!
|
||||
const usernameElement: HTMLSpanElement = badgeUsername.querySelector("#username")!
|
||||
const loadingDoors: HTMLDivElement = document.querySelector("#loading-doors")!
|
||||
|
||||
alertUnauthenticated.classList.toggle("hidden", auth.authenticated)
|
||||
alertUnauthenticated.classList.toggle("hidden", auth.authenticated || auth.recentLogout)
|
||||
alertUnauthorized.classList.toggle("hidden", !auth.authenticated || auth.authorized)
|
||||
alertLoggedout.classList.toggle("hidden", !auth.recentLogout)
|
||||
alertServerError.classList.toggle("hidden", apiError.current !== "serverError")
|
||||
alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized && !auth.recentLogout && apiError.current === null)
|
||||
alertNetworkError.classList.toggle("hidden", apiError.current !== "networkError")
|
||||
alertDivider.classList.toggle("hidden", auth.authenticated && auth.authorized && !auth.recentLogout && apiError.current === null || doors.length === 0)
|
||||
badgeUsername.classList.toggle("hidden", !auth.authenticated)
|
||||
usernameElement.innerHTML = auth.username
|
||||
buttonLogin.classList.toggle("hidden", auth.authenticated)
|
||||
loadingDoors.classList.toggle("hidden", !loading.doors)
|
||||
}
|
||||
|
||||
|
||||
|
||||
loadAuthFromLocalStorage()
|
||||
fetchDoors()
|
||||
checkUser()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue