From f7433c23be5cc974ff1a205c7631ee066c503e7a Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Sun, 26 Dec 2021 13:41:17 -0600 Subject: [PATCH] split off context-menu into sub-functional component --- src/client/webapp/actions.ts | 23 ---- src/client/webapp/elements/channel.tsx | 54 -------- .../context-menus/components/context-menu.tsx | 42 ------ .../contexts/components/context-menu.tsx | 31 +++++ .../elements/contexts/components/context.tsx | 28 ++++ .../context-menu-connection-info.tsx | 2 +- .../context-menu-guild-title.tsx | 0 .../context-menu-image.tsx | 0 .../webapp/elements/guild-list-guild.tsx | 5 - .../lists/components/message-element.tsx | 2 +- .../elements/overlays/overlay-image.tsx | 2 +- .../webapp/elements/require/react-helper.ts | 27 ++++ .../elements/sections/connection-info.tsx | 2 +- .../webapp/elements/sections/guild-title.tsx | 2 +- src/client/webapp/preload.ts | 29 +--- src/client/webapp/styles/channel-list.scss | 4 - src/client/webapp/ui.ts | 125 +----------------- 17 files changed, 94 insertions(+), 284 deletions(-) delete mode 100644 src/client/webapp/elements/channel.tsx delete mode 100644 src/client/webapp/elements/context-menus/components/context-menu.tsx create mode 100644 src/client/webapp/elements/contexts/components/context-menu.tsx create mode 100644 src/client/webapp/elements/contexts/components/context.tsx rename src/client/webapp/elements/{context-menus => contexts}/context-menu-connection-info.tsx (97%) rename src/client/webapp/elements/{context-menus => contexts}/context-menu-guild-title.tsx (100%) rename src/client/webapp/elements/{context-menus => contexts}/context-menu-image.tsx (100%) diff --git a/src/client/webapp/actions.ts b/src/client/webapp/actions.ts index d157933..f2cc076 100644 --- a/src/client/webapp/actions.ts +++ b/src/client/webapp/actions.ts @@ -20,27 +20,4 @@ export default class Actions { ui.setActiveConnection(guild, { id: null, avatarResourceId: null, displayName: 'Error', status: 'Error', privileges: [], roleName: null, roleColor: null, rolePriority: null }); } } - - static async fetchAndUpdateChannels(q: Q, ui: UI, guild: CombinedGuild) { - await Util.withPotentialErrorWarnOnCancel(q, { - taskFunc: async () => { - if (ui.activeGuild === null || ui.activeGuild.id !== guild.id) return; - const channels = await guild.fetchChannels(); - await ui.setChannels(guild, channels); - if (ui.activeGuild === null || ui.activeGuild.id !== guild.id) return; - if (ui.activeChannel === null) { - // click on the first channel in the list if no channel is active yet - const element = q.$_('#channel-list .channel'); - if (element) { - element.click(); - } - } - }, - errorIndicatorAddFunc: async (errorIndicatorElement) => { - await ui.setChannelsErrorIndicator(guild, errorIndicatorElement); - }, - errorContainer: q.$('#channel-list'), - errorMessage: 'Error fetching channels' - }); - } } diff --git a/src/client/webapp/elements/channel.tsx b/src/client/webapp/elements/channel.tsx deleted file mode 100644 index a1ab02b..0000000 --- a/src/client/webapp/elements/channel.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import ReactHelper from './require/react-helper'; - -import ElementsUtil from './require/elements-util'; -import BaseElements from './require/base-elements'; -import { Channel } from '../data-types'; -import UI from '../ui'; -import Q from '../q-module'; -import CombinedGuild from '../guild-combined'; -import ChannelOverlay from './overlays/overlay-channel'; - -export default function createChannel(document: Document, q: Q, ui: UI, guild: CombinedGuild, channel: Channel) { - const element = ReactHelper.createElementFromJSX( -
-
{BaseElements.TEXT_CHANNEL_ICON}
-
{channel.name}
-
{BaseElements.COG}
-
- ); - - element.addEventListener('click', async () => { - if (element.classList.contains('active')) return; - await ui.setActiveChannel(guild, channel); - q.$('#text-input').focus(); - }); - - const modifyContextElement = q.create({ class: 'context', content: { - class: 'above', content: [ - { class: 'content text', content: 'Modify Channel' }, - { class: 'tab', content: BaseElements.Q_TAB_BELOW } - ] - }}) as HTMLElement; - - q.$$$(element, '.modify').addEventListener('click', async (e) => { - e.stopPropagation(); - if (modifyContextElement.parentElement) { - modifyContextElement.parentElement.removeChild(modifyContextElement); - } - ElementsUtil.presentReactOverlay(document, ); - }); - - q.$$$(element, '.modify').addEventListener('mouseenter', () => { - document.body.appendChild(modifyContextElement); - ElementsUtil.alignContextElement(modifyContextElement, q.$$$(element, '.modify'), { bottom: 'top', centerX: 'centerX' }); - }); - - q.$$$(element, '.modify').addEventListener('mouseleave', () => { - if (modifyContextElement.parentElement) { - modifyContextElement.parentElement.removeChild(modifyContextElement); - } - }); - - return element; -} diff --git a/src/client/webapp/elements/context-menus/components/context-menu.tsx b/src/client/webapp/elements/context-menus/components/context-menu.tsx deleted file mode 100644 index cece528..0000000 --- a/src/client/webapp/elements/context-menus/components/context-menu.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { FC, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react'; -import { ShouldNeverHappenError } from '../../../data-types'; -import ElementsUtil, { IAlignment } from '../../require/elements-util'; -import ReactHelper from '../../require/react-helper'; - -export interface ContextMenuProps { - relativeToRef?: RefObject; - relativeToPos?: { x: number, y: number }; - alignment: IAlignment; - children: ReactNode; - close: () => void; -} - -const ContextMenu: FC = (props: ContextMenuProps) => { - const { relativeToRef, relativeToPos, alignment, children, close } = props; - - const rootRef = useRef(null); - - const [ aligned, setAligned ] = useState(false); - - ReactHelper.useCloseWhenClickedOutsideEffect(rootRef, close); - - useEffect(() => { - if (!rootRef.current) return; - const relativeTo = (relativeToRef && relativeToRef.current) ?? relativeToPos ?? null; - if (!relativeTo) throw new ShouldNeverHappenError('invalid context menu props'); - ElementsUtil.alignContextElement(rootRef.current, relativeTo, alignment); - setAligned(true); - }, [ rootRef, relativeToRef, relativeToPos ]); - - const contextClass = useMemo(() => { - return 'context react' + (aligned ? ' aligned' : ''); - }, [ aligned ]); - - return ( -
-
{children}
-
- ); -} - -export default ContextMenu; diff --git a/src/client/webapp/elements/contexts/components/context-menu.tsx b/src/client/webapp/elements/contexts/components/context-menu.tsx new file mode 100644 index 0000000..3cfc238 --- /dev/null +++ b/src/client/webapp/elements/contexts/components/context-menu.tsx @@ -0,0 +1,31 @@ +import React, { FC, ReactNode, RefObject, useRef } from 'react' +import { IAlignment } from '../../require/elements-util'; +import ReactHelper from '../../require/react-helper'; +import Context from './context'; + +export interface ContextMenuProps { + relativeToRef?: RefObject; + relativeToPos?: { x: number, y: number }; + alignment: IAlignment; + children: ReactNode; + close: () => void; +} + +// Automatically closes when clicked outside of and includes a
subelement +const ContextMenu: FC = (props: ContextMenuProps) => { + const { relativeToRef, relativeToPos, alignment, children, close } = props; + + const rootRef = useRef(null); + + ReactHelper.useCloseWhenClickedOutsideEffect(rootRef, close); + + return ( + +
+ {children} +
+ + ); +} + +export default ContextMenu; diff --git a/src/client/webapp/elements/contexts/components/context.tsx b/src/client/webapp/elements/contexts/components/context.tsx new file mode 100644 index 0000000..50a9400 --- /dev/null +++ b/src/client/webapp/elements/contexts/components/context.tsx @@ -0,0 +1,28 @@ +import React, { FC, ReactNode, RefObject } from 'react'; +import { IAlignment } from '../../require/elements-util'; +import ReactHelper from '../../require/react-helper'; + +export interface ContextProps { + rootRef: RefObject; + relativeToRef?: RefObject; + relativeToPos?: { x: number, y: number }; + alignment: IAlignment; + children: ReactNode; +} + +// You should create a component like context-menu.tsx instead of using this class directly. +const Context: FC = (props: ContextProps) => { + const { rootRef, relativeToRef, relativeToPos, alignment, children } = props; + + const [ className ] = ReactHelper.useAlignment( + rootRef, relativeToRef ?? null, relativeToPos ?? null, alignment, 'context react' + ); + + return ( +
+ {children} +
+ ); +} + +export default Context; diff --git a/src/client/webapp/elements/context-menus/context-menu-connection-info.tsx b/src/client/webapp/elements/contexts/context-menu-connection-info.tsx similarity index 97% rename from src/client/webapp/elements/context-menus/context-menu-connection-info.tsx rename to src/client/webapp/elements/contexts/context-menu-connection-info.tsx index 7980bf4..ac16044 100644 --- a/src/client/webapp/elements/context-menus/context-menu-connection-info.tsx +++ b/src/client/webapp/elements/contexts/context-menu-connection-info.tsx @@ -8,7 +8,7 @@ import ContextMenu from './components/context-menu'; export interface ConnectionInfoContextMenuProps { guild: CombinedGuild; selfMember: Member; - relativeToRef: RefObject; + relativeToRef: RefObject; close: () => void; } diff --git a/src/client/webapp/elements/context-menus/context-menu-guild-title.tsx b/src/client/webapp/elements/contexts/context-menu-guild-title.tsx similarity index 100% rename from src/client/webapp/elements/context-menus/context-menu-guild-title.tsx rename to src/client/webapp/elements/contexts/context-menu-guild-title.tsx diff --git a/src/client/webapp/elements/context-menus/context-menu-image.tsx b/src/client/webapp/elements/contexts/context-menu-image.tsx similarity index 100% rename from src/client/webapp/elements/context-menus/context-menu-image.tsx rename to src/client/webapp/elements/contexts/context-menu-image.tsx diff --git a/src/client/webapp/elements/guild-list-guild.tsx b/src/client/webapp/elements/guild-list-guild.tsx index 543231f..4ade26f 100644 --- a/src/client/webapp/elements/guild-list-guild.tsx +++ b/src/client/webapp/elements/guild-list-guild.tsx @@ -95,11 +95,6 @@ export default function createGuildListGuild(document: Document, q: Q, ui: UI, g ui.updateGuildName(guild, 'ERROR'); } })(); - - // Guild Channel List - (async () => { - await Actions.fetchAndUpdateChannels(q, ui, guild); - })(); }); element.addEventListener('contextmenu', (e) => { diff --git a/src/client/webapp/elements/lists/components/message-element.tsx b/src/client/webapp/elements/lists/components/message-element.tsx index 10f49dd..5125dfd 100644 --- a/src/client/webapp/elements/lists/components/message-element.tsx +++ b/src/client/webapp/elements/lists/components/message-element.tsx @@ -2,7 +2,7 @@ import moment from 'moment'; import React, { FC, MouseEvent, useCallback, useMemo, useState } from 'react'; import { Member, Message } from '../../../data-types'; import CombinedGuild from '../../../guild-combined'; -import ImageContextMenu from '../../context-menus/context-menu-image'; +import ImageContextMenu from '../../contexts/context-menu-image'; import ImageOverlay from '../../overlays/overlay-image'; import ElementsUtil from '../../require/elements-util'; import GuildSubscriptions from '../../require/guild-subscriptions'; diff --git a/src/client/webapp/elements/overlays/overlay-image.tsx b/src/client/webapp/elements/overlays/overlay-image.tsx index 413528a..d28dc4e 100644 --- a/src/client/webapp/elements/overlays/overlay-image.tsx +++ b/src/client/webapp/elements/overlays/overlay-image.tsx @@ -9,7 +9,7 @@ import ElementsUtil from '../require/elements-util'; import DownloadButton from '../components/button-download'; import ReactHelper from '../require/react-helper'; import GuildSubscriptions from '../require/guild-subscriptions'; -import ImageContextMenu from '../context-menus/context-menu-image'; +import ImageContextMenu from '../contexts/context-menu-image'; import Overlay from '../components/overlay'; export interface ImageOverlayProps { diff --git a/src/client/webapp/elements/require/react-helper.ts b/src/client/webapp/elements/require/react-helper.ts index 15088bc..2623062 100644 --- a/src/client/webapp/elements/require/react-helper.ts +++ b/src/client/webapp/elements/require/react-helper.ts @@ -12,6 +12,7 @@ import Globals from '../../globals'; import path from 'path'; import fs from 'fs/promises'; import electron from 'electron'; +import ElementsUtil, { IAlignment } from './elements-util'; // Helper function so we can use JSX before fully committing to React @@ -396,6 +397,32 @@ export default class ReactHelper { }, [ handleMouseUp ]); } + static useAlignment( + rootRef: RefObject, + relativeToRef: RefObject | null, + relativeToPos: { x: number, y: number } | null, + alignment: IAlignment, + baseClassName: string + ): [ + className: string + ] { + const [ aligned, setAligned ] = useState(false); + + useEffect(() => { + if (!rootRef.current) return; + const relativeTo = (relativeToRef && relativeToRef.current) ?? relativeToPos ?? null; + if (!relativeTo) throw new ShouldNeverHappenError('invalid alignment props'); + ElementsUtil.alignContextElement(rootRef.current, relativeTo, alignment); + setAligned(true); + }, [ rootRef, relativeToRef, relativeToPos ]); + + const className = useMemo(() => { + return baseClassName + (aligned ? ' aligned' : ''); + }, [ baseClassName, aligned ]); + + return [ className ]; + } + static useContextMenu( createContextMenu: (close: () => void) => ReactNode, createContextMenuDeps: DependencyList diff --git a/src/client/webapp/elements/sections/connection-info.tsx b/src/client/webapp/elements/sections/connection-info.tsx index 1416a0b..d38f6e1 100644 --- a/src/client/webapp/elements/sections/connection-info.tsx +++ b/src/client/webapp/elements/sections/connection-info.tsx @@ -8,7 +8,7 @@ import { Member } from '../../data-types'; import CombinedGuild from '../../guild-combined'; import MemberElement, { DummyMember } from '../lists/components/member-element'; import GuildSubscriptions from '../require/guild-subscriptions'; -import ConnectionInfoContextMenu from '../context-menus/context-menu-connection-info'; +import ConnectionInfoContextMenu from '../contexts/context-menu-connection-info'; import ReactHelper from '../require/react-helper'; export interface ConnectionInfoProps { diff --git a/src/client/webapp/elements/sections/guild-title.tsx b/src/client/webapp/elements/sections/guild-title.tsx index 79d335b..0e6544e 100644 --- a/src/client/webapp/elements/sections/guild-title.tsx +++ b/src/client/webapp/elements/sections/guild-title.tsx @@ -1,6 +1,6 @@ import React, { FC, useRef } from 'react'; import CombinedGuild from '../../guild-combined'; -import GuildTitleContextMenu from '../context-menus/context-menu-guild-title'; +import GuildTitleContextMenu from '../contexts/context-menu-guild-title'; import GuildSubscriptions from '../require/guild-subscriptions'; import ReactHelper from '../require/react-helper'; diff --git a/src/client/webapp/preload.ts b/src/client/webapp/preload.ts index c00f415..4fd27ef 100644 --- a/src/client/webapp/preload.ts +++ b/src/client/webapp/preload.ts @@ -14,7 +14,7 @@ import Globals from './globals'; import UI from './ui'; import Actions from './actions'; -import { Changes, Channel, ConnectionInfo, GuildMetadata, Member, Resource, Token } from './data-types'; +import { Changes, ConnectionInfo, GuildMetadata, Member, Resource, Token } from './data-types'; import Q from './q-module'; import bindWindowButtonEvents from './elements/events-window-buttons'; import bindTextInputEvents from './elements/events-text-input'; @@ -90,10 +90,7 @@ window.addEventListener('DOMContentLoaded', () => { (async () => { // update connection info await Actions.fetchAndUpdateConnection(ui, guild); })(); - (async () => { // refresh channels list - await Actions.fetchAndUpdateChannels(q, ui, guild); - })(); - // TODO: React set hasMessagesAbove and hasMessagesBelow when re-verified + // TODO: React set hasMessagesAbove and hasMessagesBelow when re-verified? }); guildsManager.on('disconnect', (guild: CombinedGuild) => { @@ -132,21 +129,6 @@ window.addEventListener('DOMContentLoaded', () => { } }); - guildsManager.on('remove-channels', async (guild: CombinedGuild, channels: Channel[]) => { - LOG.debug(channels.length + ' removed channels'); - await ui.deleteChannels(guild, channels); - }); - - guildsManager.on('update-channels', async (guild: CombinedGuild, updatedChannels: Channel[]) => { - LOG.debug(updatedChannels.length + ' updated channels'); - await ui.updateChannels(guild, updatedChannels); - }); - - guildsManager.on('new-channels', async (guild: CombinedGuild, channels: Channel[]) => { - LOG.debug(channels.length + ' added channels'); - await ui.addChannels(guild, channels); - }); - // TODO: React jump messages to bottom when the current user sent a message // Conflict Events @@ -160,13 +142,6 @@ window.addEventListener('DOMContentLoaded', () => { })(); }); - guildsManager.on('conflict-channels', async (guild: CombinedGuild, changesType: AutoVerifierChangesType, changes: Changes) => { - LOG.debug('channels conflict', { changes }); - if (changes.deleted.length > 0) await ui.deleteChannels(guild, changes.deleted); - if (changes.added.length > 0) await ui.addChannels(guild, changes.added); - if (changes.updated.length > 0) await ui.updateChannels(guild, changes.updated.map(pair => pair.newDataPoint)); - }); - guildsManager.on('conflict-members', async (guild: CombinedGuild, changesType: AutoVerifierChangesType, changes: Changes) => { //LOG.debug('members conflict', { changes }); if (changes.updated.length > 0) { diff --git a/src/client/webapp/styles/channel-list.scss b/src/client/webapp/styles/channel-list.scss index 588ea15..47f16ea 100644 --- a/src/client/webapp/styles/channel-list.scss +++ b/src/client/webapp/styles/channel-list.scss @@ -1,9 +1,5 @@ @import "theme.scss"; -#channel-list { - display: none; -} - .channel-list { box-sizing: border-box; padding-top: 8px; diff --git a/src/client/webapp/ui.ts b/src/client/webapp/ui.ts index 9870f7c..a6e1d6d 100644 --- a/src/client/webapp/ui.ts +++ b/src/client/webapp/ui.ts @@ -11,7 +11,6 @@ import CombinedGuild from './guild-combined'; import { Message, Channel, ConnectionInfo, ShouldNeverHappenError } from './data-types'; import Q from './q-module'; import createGuildListGuild from './elements/guild-list-guild'; -import createChannel from './elements/channel'; import GuildsManager from './guilds-manager'; import { mountGuildChannelComponents, mountGuildComponents } from './elements/mounts'; @@ -114,22 +113,11 @@ export default class UI { public async setActiveChannel(guild: CombinedGuild, channel: Channel): Promise { await this.lockChannels(guild, () => { - // Channel List Highlight - if (this.activeChannel !== null) { - const prev = this.q.$_('#channel-list .channel[data-id="' + this.activeChannel.id + '"]'); - if (prev) { - prev.classList.remove('active'); - } - } - const next = this.q.$('#channel-list .channel[data-id="' + channel.id + '"]'); - next.classList.add('active'); - // Channel Name + Flavor Text Header + Text Input Placeholder this.q.$('#text-input').setAttribute('data-placeholder', 'Message #' + channel.name); - mountGuildChannelComponents(this.q, guild, channel); - this.activeChannel = channel; + mountGuildChannelComponents(this.q, guild, channel); }); } @@ -184,115 +172,4 @@ export default class UI { baseElement.setAttribute('meta-name', name); }); } - - private _updatePosition(element: Element, guildCacheMap: Map, getDirection: ((prevData: T, data: T) => number)) { - const data = guildCacheMap.get(element.getAttribute('data-id')); - if (!data) { - LOG.debug('cache map: ', { guildCacheMap, elementHtml: element.outerHTML }) - throw new ShouldNeverHappenError('unable to get data from cache map'); - } - // TODO: do-while may be a bit cleaner? - let prev = Q.previousElement(element); - while (prev != null) { - const prevData = guildCacheMap.get(prev.getAttribute('data-id')); - if (!prevData) throw new ShouldNeverHappenError('unable to get prevData from cache map'); - if (getDirection(prevData, data) > 0) { // this element comes before previous element - prev.parentElement?.insertBefore(element, prev); - } else { - break; - } - prev = Q.previousElement(element); - } - let next = Q.nextElement(element); - while (next != null) { - const nextData = guildCacheMap.get(next.getAttribute('data-id')); - if (!nextData) throw new ShouldNeverHappenError('unable to get nextData from cache map'); - if (getDirection(data, nextData) > 0) { // this element comes after next element - next.parentElement?.insertBefore(next, element); - } else { - break; - } - next = Q.nextElement(element); - } - } - - public async updateChannelPosition(guild: CombinedGuild, channelElement: Element): Promise { - this._updatePosition(channelElement, await guild.grabRAMChannelsMap(), (a, b) => { - return a.index - b.index; - }); - } - - public async addChannels(guild: CombinedGuild, channels: Channel[], options?: { clear: boolean }): Promise { - await this.lockChannels(guild, async () => { - if (options?.clear) { - Q.clearChildren(this.q.$('#channel-list')); - } - for (const channel of channels) { - const element = createChannel(this.document, this.q, this, guild, channel); - this.q.$('#channel-list').appendChild(element); - await this.updateChannelPosition(guild, element); - } - }); - } - - public async deleteChannels(guild: CombinedGuild, channels: Channel[]): Promise { - await this.lockChannels(guild, () => { - for (const channel of channels) { - const element = this.q.$_('#channel-list .channel[data-id="' + channel.id + '"]'); - element?.parentElement?.removeChild(element); - if (this.activeChannel !== null && this.activeChannel.id == channel.id) { - this.activeChannel = null; - } - } - }); - } - - public async updateChannels(guild: CombinedGuild, updatedChannels: Channel[]): Promise { - await this.lockChannels(guild, async () => { - for (const channel of updatedChannels) { - const oldElement = this.q.$('#channel-list .channel[data-id="' + channel.id + '"]'); - const newElement = createChannel(this.document, this.q, this, guild, channel); - oldElement.parentElement?.replaceChild(newElement, oldElement); - await this.updateChannelPosition(guild, newElement); - - if (this.activeChannel !== null && this.activeChannel.id === channel.id) { - newElement.classList.add('active'); - - // See also setActiveChannel - this.q.$('#text-input').setAttribute('placeholder', 'Message #' + channel.name); - } - } - }); - } - - public async setChannels(guild: CombinedGuild, channels: Channel[]): Promise { - // check if an element with the same channel and guild exists before adding the new channels - // this is nescessary to make sure that if two guilds have channels with the same id, the channel list is still - // properly refreshed and the active channel is not improperly set. - let oldMatchingElement: HTMLElement | null = null; - if (this.activeGuild !== null && this.activeChannel !== null) { - oldMatchingElement = this.q.$_('#channel-list .channel[data-id="' + this.activeChannel.id + '"][data-guild-id="' + this.activeGuild.id + '"]'); - } - - await this.addChannels(guild, channels, { clear: true }); - - if (this.activeGuild !== null && this.activeGuild.id === guild.id && this.activeChannel !== null) { - const newActiveElement = this.q.$_('#channel-list .channel[data-id="' + this.activeChannel.id + '"][data-guild-id="' + this.activeGuild.id + '"]'); - if (newActiveElement && oldMatchingElement) { - const activeChannelId = this.activeChannel.id; - const channel = channels.find(channel => channel.id === activeChannelId); - if (channel === undefined) throw new ShouldNeverHappenError('current channel does not exist in channels list') - this.setActiveChannel(guild, channel); - } else { - this.activeChannel = null; // the active channel was removed - } - } - } - - public async setChannelsErrorIndicator(guild: CombinedGuild, errorIndicatorElement: Element): Promise { - await this.lockChannels(guild, () => { - Q.clearChildren(this.q.$('#channel-list')); - this.q.$('#channel-list').appendChild(errorIndicatorElement); - }); - } }