filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 01:52:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(Upload/Jumper): store ExtensionBar state in localStorage

Browse Source
This commit is contained in:
Aminejv 2021-12-07 17:57:01 +01:00
parent 40d2f2253b
commit 2b0d81713d
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
common/hooks.js
View File

@ -511,3 +511,9 @@ export const useCheckIfExtensionIsInstalled = () => {
return { isExtensionDownloaded };
};
export const useLocalStorage = (key) => ({
setItem: (value) => localStorage?.setItem(key, value),
getItem: () => localStorage?.getItem(key),
removeItem: () => localStorage?.removeItem(key),
});

14
components/core/Upload/Jumper.js
View File

@ -15,7 +15,7 @@ import { useUploadStore } from "~/components/core/Upload/store";
import { useUploadOnboardingContext } from "~/components/core/Onboarding/Upload";
import DownloadExtensionButton from "~/components/core/Extension/DownloadExtensionButton";
import { useCheckIfExtensionIsInstalled } from "~/common/hooks";
import { useCheckIfExtensionIsInstalled, useLocalStorage } from "~/common/hooks";
const STYLES_EXTENSION_BAR = (theme) => css`
${Styles.HORIZONTAL_CONTAINER_CENTERED};
@ -30,11 +30,12 @@ const STYLES_EXTENSION_BAR = (theme) => css`
`;
function ExtensionBar() {
const localStorage = useLocalStorage("upload-jumper-extension-bar");
const [isVisible, setVisibility] = React.useState(JSON.parse(localStorage.getItem() || true));
const hideExtensionBar = () => (setVisibility(false), localStorage.setItem(false));
const { isExtensionDownloaded } = useCheckIfExtensionIsInstalled();
const [isVisible, setVisibility] = React.useState(true);
const hideExtensionBar = () => setVisibility(false);
if (isExtensionDownloaded || !isVisible) return null;
return (
@ -157,7 +158,6 @@ export function UploadJumper({ data }) {
const [{ isUploadJumperVisible }, { hideUploadJumper }] = useUploadContext();
const onboardingContext = useUploadOnboardingContext();
const isOnboarding = onboardingContext.currentStep === onboardingContext.steps.jumper;
const { handleUpload } = useFileUpload({ data, onUpload: onboardingContext?.goToNextStep });
@ -169,7 +169,7 @@ export function UploadJumper({ data }) {
<System.H5 color="textBlack">Upload</System.H5>
</Jumper.Header>
<Jumper.Divider />
{isOnboarding && <ExtensionBar />}
<ExtensionBar />
<Jumper.Item css={STYLES_LINK_UPLOAD_WRAPPER}>
<LinkForm data={data} />
</Jumper.Item>