Skip to content

Commit fe100fd

Browse files
boojackboojack
committed
chore: update clear data modal in setting
1 parent 332bf9e commit fe100fd

2 files changed

Lines changed: 45 additions & 48 deletions

File tree

‎components/ClearDataButton.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useState } from "react";
2+
import { createPortal } from "react-dom";
3+
import ClearDataConfirmModal from "./ClearDataConfirmModal";
4+
5+
const ClearDataButton = () => {
6+
const [showClearDataConfirmModal, setShowClearDataConfirmModal] = useState(false);
7+
8+
return (
9+
<>
10+
<button className="btn btn-sm btn-error" onClick={() => setShowClearDataConfirmModal(true)}>
11+
Clear
12+
</button>
13+
14+
{showClearDataConfirmModal &&
15+
createPortal(<ClearDataConfirmModal close={() => setShowClearDataConfirmModal(false)} />, document.body)}
16+
</>
17+
);
18+
};
19+
20+
export default ClearDataButton;

‎components/SettingModal.tsx‎

Lines changed: 25 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,45 @@
1-
import { useState } from "react";
2-
import { createPortal } from "react-dom";
31
import Icon from "./Icon";
42
import WeChatQRCodeView from "./WeChatQRCodeView";
5-
import ClearDataConfirmModal from "./ClearDataConfirmModal";
3+
import ClearDataButton from "./ClearDataButton";
64

75
interface Props {
86
show: boolean;
97
close: () => void;
108
}
119

12-
interface State {
13-
showClearDataConfirmModal: boolean;
14-
}
15-
1610
const SettingModal = (props: Props) => {
1711
const { show, close } = props;
18-
const [state, setState] = useState<State>({
19-
showClearDataConfirmModal: false,
20-
});
21-
22-
const toggleClearDataConfirmModal = (show = true) => {
23-
setState({
24-
...state,
25-
showClearDataConfirmModal: show,
26-
});
27-
};
2812

2913
return (
30-
<>
31-
<div className={`modal modal-middle ${show && "modal-open"}`}>
32-
<div className="modal-box relative">
33-
<h3 className="font-bold text-lg">Setting</h3>
34-
<button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
35-
<Icon.IoMdClose className="w-5 h-auto" />
36-
</button>
37-
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
38-
<div className="w-full flex flex-row justify-start items-start flex-wrap">
39-
<a
40-
href="https://discord.gg/6R3qb32h"
41-
className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center mr-2 mb-2 hover:underline hover:shadow"
42-
target="_blank"
43-
>
44-
<Icon.BsDiscord className="w-4 h-auto mr-1" />
45-
Join Discord Channel
46-
</a>
47-
<WeChatQRCodeView />
48-
</div>
14+
<div className={`modal modal-middle ${show && "modal-open"}`}>
15+
<div className="modal-box relative">
16+
<h3 className="font-bold text-lg">Setting</h3>
17+
<button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
18+
<Icon.IoMdClose className="w-5 h-auto" />
19+
</button>
20+
<div className="w-full flex flex-col justify-start items-start space-y-3 pt-4">
21+
<div className="w-full flex flex-row justify-start items-start flex-wrap">
22+
<a
23+
href="https://discord.gg/6R3qb32h"
24+
className="w-auto px-4 py-2 rounded-full bg-indigo-600 text-white text-sm font-medium flex flex-row justify-center items-center mr-2 mb-2 hover:underline hover:shadow"
25+
target="_blank"
26+
>
27+
<Icon.BsDiscord className="w-4 h-auto mr-1" />
28+
Join Discord Channel
29+
</a>
30+
<WeChatQRCodeView />
31+
</div>
4932

50-
<h3>Danger Zone</h3>
51-
<div className="w-full border border-red-200 p-4 rounded-lg">
52-
<div className="w-full flex flex-row justify-between items-center gap-2">
53-
<span>Clear all data</span>
54-
<button className="btn btn-sm btn-error" onClick={() => toggleClearDataConfirmModal(true)}>
55-
Clear
56-
</button>
57-
</div>
33+
<h3>Danger Zone</h3>
34+
<div className="w-full border border-red-200 p-4 rounded-lg">
35+
<div className="w-full flex flex-row justify-between items-center gap-2">
36+
<span>Clear all data</span>
37+
<ClearDataButton />
5838
</div>
5939
</div>
6040
</div>
6141
</div>
62-
63-
{state.showClearDataConfirmModal &&
64-
createPortal(<ClearDataConfirmModal close={() => toggleClearDataConfirmModal(false)} />, document.body)}
65-
</>
42+
</div>
6643
);
6744
};
6845

0 commit comments

Comments
 (0)