2021-04-29 21:56:37 -04:00
|
|
|
import React, { useEffect, useState, useContext, useCallback } from "react";
|
2021-01-27 00:24:13 -05:00
|
|
|
import { decode } from "@msgpack/msgpack";
|
2020-05-19 02:21:01 -04:00
|
|
|
|
2021-02-05 21:32:38 -05:00
|
|
|
import { useAuth } from "./AuthContext";
|
|
|
|
import { useDatabase } from "./DatabaseContext";
|
2020-05-19 02:21:01 -04:00
|
|
|
|
2021-05-25 01:47:52 -04:00
|
|
|
import { applyObservableChange } from "../helpers/dexie";
|
2021-06-08 19:29:32 -04:00
|
|
|
import { removeGroupsItems } from "../helpers/group";
|
2021-05-25 01:47:52 -04:00
|
|
|
|
2020-05-19 02:21:01 -04:00
|
|
|
const TokenDataContext = React.createContext();
|
|
|
|
|
|
|
|
export function TokenDataProvider({ children }) {
|
2021-03-19 00:32:17 -04:00
|
|
|
const { database, databaseStatus, worker } = useDatabase();
|
2021-02-05 21:32:38 -05:00
|
|
|
const { userId } = useAuth();
|
2020-05-19 02:21:01 -04:00
|
|
|
|
|
|
|
const [tokens, setTokens] = useState([]);
|
2020-11-26 00:29:10 -05:00
|
|
|
const [tokensLoading, setTokensLoading] = useState(true);
|
2021-05-08 22:04:31 -04:00
|
|
|
const [tokenGroups, setTokenGroups] = useState([]);
|
2020-05-19 02:21:01 -04:00
|
|
|
|
|
|
|
useEffect(() => {
|
2020-10-23 07:16:18 -04:00
|
|
|
if (!userId || !database || databaseStatus === "loading") {
|
2020-05-19 02:21:01 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-05-19 05:03:36 -04:00
|
|
|
async function loadTokens() {
|
2021-01-27 00:24:13 -05:00
|
|
|
let storedTokens = [];
|
|
|
|
// Try to load tokens with worker, fallback to database if failed
|
|
|
|
const packedTokens = await worker.loadData("tokens");
|
|
|
|
if (packedTokens) {
|
|
|
|
storedTokens = decode(packedTokens);
|
|
|
|
} else {
|
|
|
|
console.warn("Unable to load tokens with worker, loading may be slow");
|
2021-02-08 00:53:56 -05:00
|
|
|
await database.table("tokens").each((token) => {
|
2021-04-29 19:54:35 -04:00
|
|
|
storedTokens.push(token);
|
2021-02-08 00:53:56 -05:00
|
|
|
});
|
2021-01-27 00:24:13 -05:00
|
|
|
}
|
2021-05-08 22:04:31 -04:00
|
|
|
setTokens(storedTokens);
|
|
|
|
const group = await database.table("groups").get("tokens");
|
2021-05-14 04:02:50 -04:00
|
|
|
const storedGroups = group.items;
|
2021-05-08 22:04:31 -04:00
|
|
|
setTokenGroups(storedGroups);
|
2020-11-26 00:29:10 -05:00
|
|
|
setTokensLoading(false);
|
2020-05-19 05:03:36 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
loadTokens();
|
2021-03-19 00:32:17 -04:00
|
|
|
}, [userId, database, databaseStatus, worker]);
|
2020-05-19 05:03:36 -04:00
|
|
|
|
2021-04-29 21:56:37 -04:00
|
|
|
const getToken = useCallback(
|
2021-01-21 22:59:05 -05:00
|
|
|
async (tokenId) => {
|
|
|
|
let token = await database.table("tokens").get(tokenId);
|
|
|
|
return token;
|
|
|
|
},
|
|
|
|
[database]
|
|
|
|
);
|
2020-09-11 02:56:40 -04:00
|
|
|
|
2021-05-08 22:04:31 -04:00
|
|
|
// Add token and add it to the token group
|
2021-01-21 22:59:05 -05:00
|
|
|
const addToken = useCallback(
|
|
|
|
async (token) => {
|
|
|
|
await database.table("tokens").add(token);
|
2021-05-08 22:04:31 -04:00
|
|
|
const group = await database.table("groups").get("tokens");
|
2021-05-14 04:02:50 -04:00
|
|
|
await database.table("groups").update("tokens", {
|
|
|
|
items: [{ id: token.id, type: "item" }, ...group.items],
|
|
|
|
});
|
2021-01-21 22:59:05 -05:00
|
|
|
},
|
2021-04-29 21:56:37 -04:00
|
|
|
[database]
|
2021-01-21 22:59:05 -05:00
|
|
|
);
|
|
|
|
|
|
|
|
const removeTokens = useCallback(
|
|
|
|
async (ids) => {
|
2021-04-29 19:54:35 -04:00
|
|
|
const tokens = await database.table("tokens").bulkGet(ids);
|
|
|
|
let assetIds = [];
|
|
|
|
for (let token of tokens) {
|
|
|
|
if (token.type === "file") {
|
|
|
|
assetIds.push(token.file);
|
|
|
|
assetIds.push(token.thumbnail);
|
|
|
|
}
|
|
|
|
}
|
2021-06-08 19:29:32 -04:00
|
|
|
|
|
|
|
const group = await database.table("groups").get("tokens");
|
|
|
|
let items = removeGroupsItems(group.items, ids);
|
|
|
|
await database.table("groups").update("tokens", { items });
|
|
|
|
|
2021-01-21 22:59:05 -05:00
|
|
|
await database.table("tokens").bulkDelete(ids);
|
2021-04-29 19:54:35 -04:00
|
|
|
await database.table("assets").bulkDelete(assetIds);
|
2021-01-21 22:59:05 -05:00
|
|
|
},
|
|
|
|
[database]
|
|
|
|
);
|
|
|
|
|
|
|
|
const updateToken = useCallback(
|
|
|
|
async (id, update) => {
|
2021-06-04 23:34:17 -04:00
|
|
|
await database.table("tokens").update(id, update);
|
2021-01-21 22:59:05 -05:00
|
|
|
},
|
|
|
|
[database]
|
|
|
|
);
|
|
|
|
|
2021-06-04 23:34:17 -04:00
|
|
|
const updateTokensHidden = useCallback(
|
|
|
|
async (ids, hideInSidebar) => {
|
|
|
|
// Update immediately to avoid UI delay
|
|
|
|
setTokens((prevTokens) => {
|
|
|
|
let newTokens = [...prevTokens];
|
|
|
|
for (let id of ids) {
|
|
|
|
const tokenIndex = newTokens.findIndex((token) => token.id === id);
|
|
|
|
newTokens[tokenIndex].hideInSidebar = hideInSidebar;
|
|
|
|
}
|
|
|
|
return newTokens;
|
|
|
|
});
|
2021-01-21 22:59:05 -05:00
|
|
|
await Promise.all(
|
2021-06-04 23:34:17 -04:00
|
|
|
ids.map((id) => database.table("tokens").update(id, { hideInSidebar }))
|
2021-01-21 22:59:05 -05:00
|
|
|
);
|
|
|
|
},
|
|
|
|
[database]
|
|
|
|
);
|
|
|
|
|
2021-05-08 22:04:31 -04:00
|
|
|
const updateTokenGroups = useCallback(
|
|
|
|
async (groups) => {
|
|
|
|
// Update group state immediately to avoid animation delay
|
|
|
|
setTokenGroups(groups);
|
2021-05-14 04:02:50 -04:00
|
|
|
await database.table("groups").update("tokens", { items: groups });
|
2021-05-08 22:04:31 -04:00
|
|
|
},
|
|
|
|
[database]
|
|
|
|
);
|
|
|
|
|
2021-02-14 02:35:42 -05:00
|
|
|
// Create DB observable to sync creating and deleting
|
|
|
|
useEffect(() => {
|
|
|
|
if (!database || databaseStatus === "loading") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-02-16 02:31:24 -05:00
|
|
|
function handleTokenChanges(changes) {
|
2021-02-14 02:35:42 -05:00
|
|
|
for (let change of changes) {
|
|
|
|
if (change.table === "tokens") {
|
|
|
|
if (change.type === 1) {
|
|
|
|
// Created
|
|
|
|
const token = change.obj;
|
|
|
|
setTokens((prevTokens) => [token, ...prevTokens]);
|
2021-02-16 02:31:24 -05:00
|
|
|
} else if (change.type === 2) {
|
|
|
|
// Updated
|
|
|
|
const token = change.obj;
|
|
|
|
setTokens((prevTokens) => {
|
|
|
|
const newTokens = [...prevTokens];
|
|
|
|
const i = newTokens.findIndex((t) => t.id === token.id);
|
|
|
|
if (i > -1) {
|
|
|
|
newTokens[i] = token;
|
|
|
|
}
|
|
|
|
return newTokens;
|
|
|
|
});
|
2021-02-14 02:35:42 -05:00
|
|
|
} else if (change.type === 3) {
|
|
|
|
// Deleted
|
|
|
|
const id = change.key;
|
|
|
|
setTokens((prevTokens) => {
|
|
|
|
const filtered = prevTokens.filter((token) => token.id !== id);
|
|
|
|
return filtered;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2021-05-08 22:04:31 -04:00
|
|
|
if (change.table === "groups") {
|
|
|
|
if (change.type === 2 && change.key === "tokens") {
|
2021-05-25 01:47:52 -04:00
|
|
|
const group = applyObservableChange(change);
|
|
|
|
const groups = group.items.filter((item) => item !== null);
|
|
|
|
setTokenGroups(groups);
|
2021-05-08 22:04:31 -04:00
|
|
|
}
|
|
|
|
}
|
2021-02-14 02:35:42 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-16 02:31:24 -05:00
|
|
|
database.on("changes", handleTokenChanges);
|
2021-02-14 02:35:42 -05:00
|
|
|
|
|
|
|
return () => {
|
2021-02-16 02:31:24 -05:00
|
|
|
database.on("changes").unsubscribe(handleTokenChanges);
|
2021-02-14 02:35:42 -05:00
|
|
|
};
|
|
|
|
}, [database, databaseStatus]);
|
|
|
|
|
2020-05-22 06:43:07 -04:00
|
|
|
const tokensById = tokens.reduce((obj, token) => {
|
|
|
|
obj[token.id] = token;
|
|
|
|
return obj;
|
|
|
|
}, {});
|
|
|
|
|
2020-05-19 05:03:36 -04:00
|
|
|
const value = {
|
|
|
|
tokens,
|
|
|
|
addToken,
|
2021-05-08 22:04:31 -04:00
|
|
|
tokenGroups,
|
2020-10-01 08:32:21 -04:00
|
|
|
removeTokens,
|
2020-05-19 05:03:36 -04:00
|
|
|
updateToken,
|
2020-05-22 06:43:07 -04:00
|
|
|
tokensById,
|
2020-11-26 00:29:10 -05:00
|
|
|
tokensLoading,
|
2021-04-29 21:56:37 -04:00
|
|
|
getToken,
|
2021-05-08 22:04:31 -04:00
|
|
|
updateTokenGroups,
|
2021-06-04 23:34:17 -04:00
|
|
|
updateTokensHidden,
|
2020-05-19 05:03:36 -04:00
|
|
|
};
|
2020-05-19 02:21:01 -04:00
|
|
|
|
|
|
|
return (
|
|
|
|
<TokenDataContext.Provider value={value}>
|
|
|
|
{children}
|
|
|
|
</TokenDataContext.Provider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-02-05 21:32:38 -05:00
|
|
|
export function useTokenData() {
|
|
|
|
const context = useContext(TokenDataContext);
|
|
|
|
if (context === undefined) {
|
|
|
|
throw new Error("useTokenData must be used within a TokenDataProvider");
|
|
|
|
}
|
|
|
|
return context;
|
|
|
|
}
|
|
|
|
|
2020-05-19 02:21:01 -04:00
|
|
|
export default TokenDataContext;
|