mirror of
https://github.com/usememos/memos.git
synced 2024-09-22 01:07:12 +03:00
chore: allow skip version (#411)
* chore: allow skip version * chore: opacity * chore: polish Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
parent
b43bfce254
commit
37bb3bc546
@ -1,40 +1,70 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import * as api from "../helpers/api";
|
import * as api from "../helpers/api";
|
||||||
|
import * as storage from "../helpers/storage";
|
||||||
import Icon from "./Icon";
|
import Icon from "./Icon";
|
||||||
import "../less/about-site-dialog.less";
|
import "../less/about-site-dialog.less";
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
latestVersion: string;
|
latestVersion: string;
|
||||||
|
show: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const UpdateVersionBanner: React.FC = () => {
|
const UpdateVersionBanner: React.FC = () => {
|
||||||
const [state, setState] = useState<State>({
|
const [state, setState] = useState<State>({
|
||||||
latestVersion: "",
|
latestVersion: "",
|
||||||
|
show: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
try {
|
Promise.all([api.getRepoLatestTag(), api.getSystemStatus()])
|
||||||
api.getRepoLatestTag().then((latestTag) => {
|
.then(
|
||||||
setState({
|
([
|
||||||
latestVersion: latestTag,
|
latestTag,
|
||||||
});
|
{
|
||||||
|
data: {
|
||||||
|
data: { profile },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]) => {
|
||||||
|
const { skippedVersion } = storage.get(["skippedVersion"]);
|
||||||
|
const latestVersion = latestTag.slice(1) || "0.0.0";
|
||||||
|
const currentVersion = profile.version;
|
||||||
|
const skipped = skippedVersion ? skippedVersion === latestVersion : false;
|
||||||
|
setState({
|
||||||
|
latestVersion,
|
||||||
|
show: !skipped && currentVersion !== latestVersion,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.catch(() => {
|
||||||
|
// do nth
|
||||||
});
|
});
|
||||||
} catch (error) {
|
|
||||||
// do nth
|
|
||||||
}
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const onSkip = () => {
|
||||||
|
storage.set({ skippedVersion: state.latestVersion });
|
||||||
|
setState((s) => ({
|
||||||
|
...s,
|
||||||
|
show: false,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!state.show) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full flex flex-row justify-center items-center text-white bg-green-600 py-2">
|
<div className="flex flex-row items-center justify-center w-full py-2 text-white bg-green-600">
|
||||||
<a
|
<a
|
||||||
className="flex flex-row justify-center items-center hover:underline"
|
className="flex flex-row items-center justify-center hover:underline"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
href="https://github.com/usememos/memos/releases"
|
href="https://github.com/usememos/memos/releases"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
>
|
>
|
||||||
<Icon.ArrowUpCircle className="w-5 h-auto mr-2" />
|
<Icon.ArrowUpCircle className="w-5 h-auto mr-2" />
|
||||||
New Update <span className="font-bold ml-1">{state.latestVersion}</span>
|
New Update <span className="ml-1 font-bold">{state.latestVersion}</span>
|
||||||
</a>
|
</a>
|
||||||
|
<button className="absolute opacity-20 right-4 btn" title="Skip this version" onClick={onSkip}>
|
||||||
|
<Icon.X />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -8,6 +8,8 @@ interface StorageData {
|
|||||||
editingMemoIdCache: MemoId;
|
editingMemoIdCache: MemoId;
|
||||||
// locale
|
// locale
|
||||||
locale: Locale;
|
locale: Locale;
|
||||||
|
// skipped version
|
||||||
|
skippedVersion: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
type StorageKey = keyof StorageData;
|
type StorageKey = keyof StorageData;
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation } from "react-router-dom";
|
||||||
import * as api from "../helpers/api";
|
|
||||||
import { globalService, userService } from "../services";
|
import { globalService, userService } from "../services";
|
||||||
import { useAppSelector } from "../store";
|
import { useAppSelector } from "../store";
|
||||||
import toastHelper from "../components/Toast";
|
import toastHelper from "../components/Toast";
|
||||||
@ -13,42 +12,10 @@ import MemoList from "../components/MemoList";
|
|||||||
import UpdateVersionBanner from "../components/UpdateVersionBanner";
|
import UpdateVersionBanner from "../components/UpdateVersionBanner";
|
||||||
import "../less/home.less";
|
import "../less/home.less";
|
||||||
|
|
||||||
interface State {
|
|
||||||
shouldShowUpdateVersionBanner: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const user = useAppSelector((state) => state.user.user);
|
const user = useAppSelector((state) => state.user.user);
|
||||||
const [state, setState] = useState<State>({
|
|
||||||
shouldShowUpdateVersionBanner: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
Promise.all([api.getRepoLatestTag(), api.getSystemStatus()])
|
|
||||||
.then(
|
|
||||||
([
|
|
||||||
latestTag,
|
|
||||||
{
|
|
||||||
data: {
|
|
||||||
data: { profile },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]) => {
|
|
||||||
const latestVersion = latestTag.slice(1) || "0.0.0";
|
|
||||||
const currentVersion = profile.version;
|
|
||||||
if (latestVersion > currentVersion) {
|
|
||||||
setState({
|
|
||||||
shouldShowUpdateVersionBanner: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.catch(() => {
|
|
||||||
// do nth
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { owner } = userService.getState();
|
const { owner } = userService.getState();
|
||||||
@ -68,7 +35,9 @@ function Home() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="page-wrapper home">
|
<section className="page-wrapper home">
|
||||||
<div className="banner-wrapper">{state.shouldShowUpdateVersionBanner && <UpdateVersionBanner />}</div>
|
<div className="banner-wrapper">
|
||||||
|
<UpdateVersionBanner />
|
||||||
|
</div>
|
||||||
<div className="page-container">
|
<div className="page-container">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<main className="memos-wrapper">
|
<main className="memos-wrapper">
|
||||||
|
Loading…
Reference in New Issue
Block a user