refactor Setting (#265)

This commit is contained in:
BlowaterNostr 2023-10-26 12:42:24 +08:00 committed by GitHub
parent 851fd70c04
commit e65a078c5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 42 deletions

View File

@ -411,23 +411,6 @@ export function AppComponent(props: {
const app = model.app;
const myAccountCtx = model.app.ctx;
let settingNode;
if (model.navigationModel.activeNav == "Setting") {
settingNode = (
<div
class={tw`flex-1 overflow-hidden overflow-y-auto`}
>
{Setting({
logout: app.logout,
relayConfig: app.relayConfig,
myAccountContext: myAccountCtx,
relayPool: props.pool,
emit: props.eventBus.emit,
})}
</div>
);
}
let appList;
if (model.navigationModel.activeNav == "AppList") {
appList = (
@ -511,8 +494,14 @@ export function AppComponent(props: {
</div>
{dmVNode}
{aboutNode}
{settingNode}
{/* {socialPostsPanel} */}
{Setting({
show: model.navigationModel.activeNav == "Setting",
logout: app.logout,
relayConfig: app.relayConfig,
myAccountContext: myAccountCtx,
relayPool: props.pool,
emit: props.eventBus.emit,
})}
{appList}
<Popover
inputChan={props.popOverInputChan}

View File

@ -34,6 +34,7 @@ export interface SettingProps {
relayPool: ConnectionPool;
myAccountContext: NostrAccountContext;
emit: emitFunc<RelayConfigChange>;
show: boolean;
}
const colors = {
@ -50,32 +51,39 @@ export const Setting = (props: SettingProps) => {
if (ctx instanceof InMemoryAccountContext) {
priKey = ctx.privateKey;
}
if (props.show == false) {
return undefined;
}
return (
<div class={tw`min-w-full min-h-full px-2 bg-[${SecondaryBackgroundColor}]`}>
<div class={tw`max-w-[41rem] m-auto py-[1.5rem]`}>
<div class={tw`px-[1rem] py-[1.5rem] ${inputBorderClass} rounded-lg mt-[1.5rem]`}>
<RelaySetting
emit={props.emit}
relayConfig={props.relayConfig}
relayPool={props.relayPool}
>
</RelaySetting>
</div>
<div
class={tw`flex-1 overflow-hidden overflow-y-auto`}
>
<div class={tw`min-w-full min-h-full px-2 bg-[${SecondaryBackgroundColor}]`}>
<div class={tw`max-w-[41rem] m-auto py-[1.5rem]`}>
<div class={tw`px-[1rem] py-[1.5rem] ${inputBorderClass} rounded-lg mt-[1.5rem]`}>
<RelaySetting
emit={props.emit}
relayConfig={props.relayConfig}
relayPool={props.relayPool}
>
</RelaySetting>
</div>
<div
class={tw`px-[1rem] py-[0.5rem] ${inputBorderClass} rounded-lg mt-[1.5rem] text-[${PrimaryTextColor}]`}
>
<KeyView
privateKey={priKey}
publicKey={props.myAccountContext.publicKey}
/>
<div
class={tw`px-[1rem] py-[0.5rem] ${inputBorderClass} rounded-lg mt-[1.5rem] text-[${PrimaryTextColor}]`}
>
<KeyView
privateKey={priKey}
publicKey={props.myAccountContext.publicKey}
/>
</div>
<button
class={tw`w-full p-[0.75rem] mt-[1.5rem] rounded-lg ${NoOutlineClass} ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l text-[${PrimaryTextColor}]`}
onClick={props.logout}
>
Logout
</button>
</div>
<button
class={tw`w-full p-[0.75rem] mt-[1.5rem] rounded-lg ${NoOutlineClass} ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l text-[${PrimaryTextColor}]`}
onClick={props.logout}
>
Logout
</button>
</div>
</div>
);
@ -105,6 +113,7 @@ export class RelaySetting extends Component<RelaySettingProp, RelaySettingState>
};
async componentDidMount() {
console.log(`${RelaySetting.name}::componentDidMount`);
const err = await this.props.relayConfig.syncWithPool(this.props.relayPool);
if (err != undefined) {
this.setState({