Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DPLT-999 feat: fetch activeTab from localstorage to persist-tabs #162

Merged
merged 2 commits into from
Aug 7, 2023
Merged

DPLT-999 feat: fetch activeTab from localstorage to persist-tabs #162

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91527d6
feat: fetch activeTab from localstorage to persist-tabs
roshaans Aug 2, 2023
3035d58
fix: pr feedback
roshaans Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 28 additions & 29 deletions frontend/widgets/src/QueryApi.Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ const EXTERNAL_APP_URL =
props.EXTERNAL_APP_URL || "https://queryapi-frontend-24ktefolwq-ew.a.run.app";

let appPath = props.isDev ? "dev-App" : "App";

State.init({
activeTab: activeTab,
activeTab: Storage.privateGet("queryapi:activeTab") || activeTab,
my_indexers: [],
all_indexers: [],
selected_indexer: undefined,
Expand Down Expand Up @@ -283,6 +284,20 @@ const ButtonLink = styled.a`
}}
`;

const previousSelectedTab = Storage.privateGet("queryapi:activeTab");
if (previousSelectedTab && previousSelectedTab !== state.activeTab) {
State.update({
activeTab: previousSelectedTab,
});
}

const selectTab = (tabName) => {
Storage.privateSet("queryapi:activeTab", tabName);
State.update({
activeTab: tabName,
});
};

const indexerView = (accountId, indexerName) => {
const editUrl = `https://near.org/#/${APP_OWNER}/widget/QueryApi.${appPath}?selectedIndexerPath=${accountId}/${indexerName}&view=editor-window`;
const statusUrl = `https://near.org/#/${APP_OWNER}/widget/QueryApi.${appPath}?selectedIndexerPath=${accountId}/${indexerName}&view=indexer-status`;
Expand Down Expand Up @@ -318,23 +333,10 @@ const indexerView = (accountId, indexerName) => {
</CardBody>

<CardFooter className="flex justify-center items-center">
<ButtonLink
onClick={() =>
State.update({
activeTab: "indexer-status",
})
}
>
<ButtonLink onClick={() => selectTab("indexer-status")}>
View Status
</ButtonLink>
<ButtonLink
primary
onClick={() =>
State.update({
activeTab: "editor-window",
})
}
>
<ButtonLink primary onClick={() => selectTab("editor-window")}>
{accountId === context.accountId ? "Edit Indexer" : "View Indexer"}
</ButtonLink>
<ButtonLink href={playgroundLink} target="_blank">
Expand All @@ -350,15 +352,15 @@ return (
<Tabs>
<TabsButton
type="button"
onClick={() => State.update({ activeTab: "indexers" })}
onClick={() => selectTab("indexers")}
selected={state.activeTab === "indexers"}
>
Indexers
</TabsButton>
{props.view === "create-new-indexer" && (
<TabsButton
type="button"
onClick={() => State.update({ activeTab: "create-new-indexer" })}
onClick={() => selectTab("create-new-indexer")}
selected={state.activeTab === "create-new-indexer"}
>
Create New Indexer
Expand All @@ -369,15 +371,15 @@ return (
<>
<TabsButton
type="button"
onClick={() => State.update({ activeTab: "editor-window" })}
onClick={() => selectTab("editor-window")}
selected={state.activeTab === "editor-window"}
>
Indexer Editor
</TabsButton>

<TabsButton
type="button"
onClick={() => State.update({ activeTab: "indexer-status" })}
onClick={() => selectTab("indexer-status")}
selected={state.activeTab === "indexer-status"}
>
Indexer Status
Expand All @@ -390,11 +392,7 @@ return (
<NavBarLogo
href={`https://near.org/#/${APP_OWNER}/widget/QueryApi.${appPath}`}
title="QueryApi"
onClick={() => {
State.update({
activeTab: "indexers",
});
}}
onClick={() => selectTab("indexers")}
>
<Widget
src="mob.near/widget/Image"
Expand All @@ -414,12 +412,13 @@ return (
<ButtonLink
href={`/#/${APP_OWNER}/widget/QueryApi.${appPath}/?view=create-new-indexer`}
style={{ "margin-top": "10px" }}
onClick={() =>
onClick={() => {
State.update({
activeTab: "create-new-indexer",
selected_indexer: "",
})
}
});
selectTab("create-new-indexer");
}}
>
Create New Indexer
</ButtonLink>
Expand Down Expand Up @@ -474,7 +473,7 @@ return (
))}
{indexerView(
selected_accountId ?? state.indexers[0].accountId,
selected_indexerName ?? state.indexers[0].indexerName,
selected_indexerName ?? state.indexers[0].indexerName
)}
<Widget
src={`${APP_OWNER}/widget/QueryApi.IndexerStatus`}
Expand Down