Various account fixes

front/packages/models/src/account-internal.ts

@@ -42,9 +42,9 @@ export const setAccountCookie = (account?: Account) => {
 	// A year
 	d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000);
 	const expires = value ? "expires=" + d.toUTCString() : "expires=Thu, 01 Jan 1970 00:00:01 GMT";
-	document.cookie = "account=" + value + ";" + expires + ";path=/";
+	document.cookie = "account=" + value + ";" + expires + ";path=/;samesite=strict";
 	return null;
-}
+};
 
 export const readAccountCookie = (cookies?: string) => {
 	if (!cookies) return null;
@@ -62,18 +62,18 @@ export const readAccountCookie = (cookies?: string) => {
 		}
 	}
 	return null;
-}
+};
 
 export const getCurrentAccount = () => {
 	const accounts = readAccounts();
-	return accounts.find(x => x.selected);
-}
+	return accounts.find((x) => x.selected);
+};
 
 export const addAccount = (account: Account) => {
 	const accounts = readAccounts();
 
 	// Prevent the user from adding the same account twice.
-	if (accounts.find(x => x.id == account.id)) {
+	if (accounts.find((x) => x.id == account.id)) {
 		updateAccount(account.id, account);
 		return;
 	}
@@ -85,7 +85,7 @@ export const addAccount = (account: Account) => {
 
 export const removeAccounts = (filter: (acc: Account) => boolean) => {
 	let accounts = readAccounts();
-	accounts = accounts.filter(filter);
+	accounts = accounts.filter((x) => !filter(x));
 	if (!accounts.find((x) => x.selected) && accounts.length > 0) {
 		accounts[0].selected = true;
 	}
@@ -99,10 +99,9 @@ export const updateAccount = (id: string, account: Account) => {
 
 	if (account.selected) {
 		for (const acc of accounts) acc.selected = false;
-	} else if(accounts[idx].selected) {
+	} else if (accounts[idx].selected) {
 		// we just unselected the current account, focus another one.
-		if (accounts.length > 0)
-			accounts[0].selected = true
+		if (accounts.length > 0) accounts[0].selected = true;
 	}
 
 	accounts[idx] = account;

front/packages/models/src/accounts.tsx

@@ -19,14 +19,14 @@
  */
 
 import { ReactNode, createContext, useContext, useEffect, useMemo, useRef } from "react";
-import { User, UserP } from "./resources";
+import { UserP } from "./resources";
 import { z } from "zod";
 import { zdate } from "./utils";
 import { removeAccounts, setAccountCookie, updateAccount } from "./account-internal";
 import { useMMKVString } from "react-native-mmkv";
 import { Platform } from "react-native";
-import { queryFn, useFetch } from "./query";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useFetch } from "./query";
+import { useQueryClient } from "@tanstack/react-query";
 import { KyooErrors } from "./kyoo-errors";
 
 export const TokenP = z.object({
@@ -82,7 +82,7 @@ export const AccountProvider = ({
 	}
 
 	const [accStr] = useMMKVString("accounts");
-	const acc = accStr ? z.array(AccountP).parse(accStr) : null;
+	const acc = accStr ? z.array(AccountP).parse(JSON.parse(accStr)) : null;
 	const accounts = useMemo(
 		() =>
 			acc?.map((account) => ({
@@ -104,6 +104,8 @@ export const AccountProvider = ({
 	});
 	useEffect(() => {
 		if (!selected || !user.isSuccess || user.isPlaceholderData) return;
+		// The id is different when user is stale data, we need to wait for the use effect to invalidate the query.
+		if (user.data.id !== selected.id) return;
 		const nUser = { ...selected, ...user.data };
 		if (!Object.is(selected, nUser)) updateAccount(nUser.id, nUser);
 	}, [selected, user]);

front/packages/models/src/login.ts

@@ -48,7 +48,7 @@ export const login = async (
 		const user = await queryFn(
 			{ path: ["auth", "me"], method: "GET", apiUrl },
 			UserP,
-			token.access_token,
+			`Bearer ${token.access_token}`,
 		);
 		const account: Account = { ...user, apiUrl: apiUrl ?? "/api", token, selected: true };
 		addAccount(account);

front/packages/primitives/src/menu.web.tsx

@@ -140,7 +140,7 @@ const MenuItem = ({
 		<Icon
 			icon={icon ?? Dot}
 			color={disabled ? theme.overlay0 : theme.paragraph}
-			size={ts(icon ? 2 : 1)}
+			size={icon ? 24 : ts(1)}
 			{...nCss({ paddingRight: ts(1) })}
 		/>
 	);
@@ -169,21 +169,17 @@ const MenuItem = ({
 			>
 				{left && left}
 				{!left && icn && icn}
-				{
-					<P
-						{...nCss([
-							{
-								paddingLeft: ts(icon || selected || left ? 0 : 2 + +!!icon),
-								flexGrow: 1,
-							},
-							disabled && {
-								color: theme.overlay0,
-							},
-						])}
-					>
-						{label}
-					</P>
-				}
+				<P
+					{...nCss([
+						{ paddingLeft: 8 * 2 + +!(icon || selected || left) * 24, flexGrow: 1 },
+						disabled && {
+							color: theme.overlay0,
+						},
+					])}
+				>
+					{label}
+				</P>
+
 				{left && icn && icn}
 			</Item>
 		</>