YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: member manage section in setting dialog

Browse Source
This commit is contained in:
boojack
2022-05-16 22:19:39 +08:00
parent fbf4afff8e
commit c492317ffe
24 changed files with 421 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/SettingDialog.tsx
View File

@ -1,18 +1,23 @@
import { useState } from "react";
import { useContext, useState } from "react";
import appContext from "../stores/appContext";
import { showDialog } from "./Dialog";
import MyAccountSection from "./MyAccountSection";
import PreferencesSection from "./PreferencesSection";
import MyAccountSection from "./Settings/MyAccountSection";
import PreferencesSection from "./Settings/PreferencesSection";
import MemberSection from "./Settings/MemberSection";
import "../less/setting-dialog.less";
interface Props extends DialogProps {}
type SettingSection = "my-account" | "preferences";
type SettingSection = "my-account" | "preferences" | "member";
interface State {
selectedSection: SettingSection;
}
const SettingDialog: React.FC<Props> = (props: Props) => {
const {
userState: { user },
} = useContext(appContext);
const { destroy } = props;
const [state, setState] = useState<State>({
selectedSection: "my-account",
@ -30,6 +35,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
<img className="icon-img" src="/icons/close.svg" />
</button>
<div className="section-selector-container">
<span className="section-title">Basic</span>
<span
onClick={() => handleSectionSelectorItemClick("my-account")}
className={`section-item ${state.selectedSection === "my-account" ? "selected" : ""}`}
@ -42,12 +48,25 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
>
Preferences
</span>
{user?.role === "OWNER" ? (
<>
<span className="section-title">Admin</span>
<span
onClick={() => handleSectionSelectorItemClick("member")}
className={`section-item ${state.selectedSection === "member" ? "selected" : ""}`}
>
Member
</span>
</>
) : null}
</div>
<div className="section-content-container">
{state.selectedSection === "my-account" ? (
<MyAccountSection />
) : state.selectedSection === "preferences" ? (
<PreferencesSection />
) : state.selectedSection === "member" ? (
<MemberSection />
) : null}
</div>
</div>