Add clear cache btn in loading screen

This commit is contained in:
Ajay Bura 2022-09-17 15:48:45 +05:30
parent 4848bef0dd
commit c1be57b205
6 changed files with 45 additions and 37 deletions

View file

@ -9,7 +9,6 @@ import {
toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents, toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents,
toggleNotifications, toggleNotificationSounds, toggleNotifications, toggleNotificationSounds,
} from '../../../client/action/settings'; } from '../../../client/action/settings';
import logout from '../../../client/action/logout';
import { usePermission } from '../../hooks/usePermission'; import { usePermission } from '../../hooks/usePermission';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
@ -239,7 +238,7 @@ function AboutSection() {
<div className="settings-about__btns"> <div className="settings-about__btns">
<Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button> <Button onClick={() => window.open('https://github.com/ajbura/cinny')}>Source code</Button>
<Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button> <Button onClick={() => window.open('https://cinny.in/#sponsor')}>Support</Button>
<Button onClick={() => settings.clearCacheAndReload()} variant="danger">Clear cache & reload</Button> <Button onClick={() => initMatrix.clearCacheAndReload()} variant="danger">Clear cache & reload</Button>
</div> </div>
</div> </div>
</div> </div>
@ -328,7 +327,7 @@ function Settings() {
const handleTabChange = (tabItem) => setSelectedTab(tabItem); const handleTabChange = (tabItem) => setSelectedTab(tabItem);
const handleLogout = async () => { const handleLogout = async () => {
if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) { if (await confirmDialog('Logout', 'Are you sure that you want to logout your session?', 'Logout', 'danger')) {
logout(); initMatrix.logout();
} }
}; };

View file

@ -7,18 +7,21 @@ import { initRoomListListener } from '../../../client/event/roomList';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Spinner from '../../atoms/spinner/Spinner'; import Spinner from '../../atoms/spinner/Spinner';
import Navigation from '../../organisms/navigation/Navigation'; import Navigation from '../../organisms/navigation/Navigation';
import ContextMenu, { MenuItem } from '../../atoms/context-menu/ContextMenu';
import IconButton from '../../atoms/button/IconButton';
import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu'; import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
import Room from '../../organisms/room/Room'; import Room from '../../organisms/room/Room';
import Windows from '../../organisms/pw/Windows'; import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs'; import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener'; import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import logout from '../../../client/action/logout';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import DragDrop from '../../organisms/drag-drop/DragDrop'; import DragDrop from '../../organisms/drag-drop/DragDrop';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
function Client() { function Client() {
const [isLoading, changeLoading] = useState(true); const [isLoading, changeLoading] = useState(true);
const [loadingMsg, setLoadingMsg] = useState('Heating up'); const [loadingMsg, setLoadingMsg] = useState('Heating up');
@ -74,9 +77,20 @@ function Client() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="loading-display"> <div className="loading-display">
<button className="loading__logout" onClick={logout} type="button"> <div className="loading__menu">
<Text variant="b3">Logout</Text> <ContextMenu
</button> placement="bottom"
content={(
<>
<MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
Clear cache & reload
</MenuItem>
<MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
</>
)}
render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
/>
</div>
<Spinner /> <Spinner />
<Text className="loading__message" variant="b2">{loadingMsg}</Text> <Text className="loading__message" variant="b2">{loadingMsg}</Text>

View file

@ -45,12 +45,12 @@
position: absolute; position: absolute;
bottom: var(--sp-normal); bottom: var(--sp-normal);
} }
.loading__logout { .loading__menu {
position: absolute; position: absolute;
bottom: var(--sp-extra-tight); top: var(--sp-extra-tight);
right: var(--sp-extra-tight); right: var(--sp-extra-tight);
cursor: pointer; cursor: pointer;
.text { .context-menu__item .text {
color: var(--tc-link); margin: 0 !important;
} }
} }

View file

@ -1,16 +0,0 @@
import initMatrix from '../initMatrix';
async function logout() {
const mx = initMatrix.matrixClient;
mx.stopClient();
try {
await mx.logout();
} catch {
// ignore if failed to logout
}
mx.clearStores();
window.localStorage.clear();
window.location.reload();
}
export default logout;

View file

@ -98,13 +98,32 @@ class InitMatrix extends EventEmitter {
} }
listenEvents() { listenEvents() {
this.matrixClient.on('Session.logged_out', () => { this.matrixClient.on('Session.logged_out', async () => {
this.matrixClient.stopClient(); this.matrixClient.stopClient();
this.matrixClient.clearStores(); await this.matrixClient.clearStores();
window.localStorage.clear(); window.localStorage.clear();
window.location.reload(); window.location.reload();
}); });
} }
async logout() {
this.matrixClient.stopClient();
try {
await this.matrixClient.logout();
} catch {
// ignore if failed to logout
}
await this.matrixClient.clearStores();
window.localStorage.clear();
window.location.reload();
}
clearCacheAndReload() {
this.matrixClient.stopClient();
this.matrixClient.store.deleteAllData().then(() => {
window.location.reload();
});
}
} }
const initMatrix = new InitMatrix(); const initMatrix = new InitMatrix();

View file

@ -147,14 +147,6 @@ class Settings extends EventEmitter {
return settings.isNotificationSounds; return settings.isNotificationSounds;
} }
clearCacheAndReload() {
const mx = initMatrix.matrixClient;
mx.stopClient()
mx.store.deleteAllData().then(() => {
window.location.reload();
});
}
setter(action) { setter(action) {
const actions = { const actions = {
[cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => { [cons.actions.settings.TOGGLE_SYSTEM_THEME]: () => {