michael/cordis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

guild root element

Browse Source
This commit is contained in:
Michael Peters 2021-12-27 21:55:33 -06:00
parent 71baabab46
commit 3620c758fd
12 changed files with 269 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/client/webapp/elements/lists/channel-list.tsx
View File

@ -1,52 +1,37 @@
import React, { FC, useEffect, useMemo, useState } from 'react'
import { Channel } from '../../data-types';
import React, { Dispatch, FC, SetStateAction, useMemo } from 'react'
import { Channel, Member } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import UI from '../../ui';
import Util from '../../util';
import GuildSubscriptions from '../require/guild-subscriptions';
import ReactHelper from '../require/react-helper';
import ChannelElement from './components/channel-element';
export interface ChannelListProps {
guild: CombinedGuild;
ui: UI; // TODO: Remove dependency on UI
selfMember: Member | null;
channels: Channel[] | null;
channelsFetchError: unknown | null;
activeChannel: Channel | null;
setActiveChannel: Dispatch<SetStateAction<Channel | null>>;
}
const ChannelList: FC<ChannelListProps> = (props: ChannelListProps) => {
const { guild, ui } = props;
// TODO: Retry button on error
// TODO: Load selfMember as a property so its state can be stored higher up and re-used
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
const [ fetchRetryCallable, channels, channelsFetchError ] = GuildSubscriptions.useChannelsSubscription(guild);
const [ activeChannel, setActiveChannel ] = useState<Channel | null>(ui.activeChannel);
// This chunk is aids but it'll be gotten rid of soon when we make the whole guild section one big component.
// DO NOT COPY THIS ANYWHERE ELSE
const isMounted = ReactHelper.useIsMountedRef();
useEffect(() => {
(async () => {
await Util.sleep(100);
if (!isMounted.current) return;
setActiveChannel(ui.activeChannel);
})();
}, [ ui ]);
const { guild, selfMember, channels, channelsFetchError, activeChannel, setActiveChannel } = props;
const channelElements = useMemo(() => {
if (!selfMember) return null; // TODO: Hopefully selfMember will be non-null in the future
if (!selfMember) return null;
if (channelsFetchError) {
// TODO: Try again
// TODO: Retry button on error (pass in retryChannels)
return <div className="channels-failed">Unable to load channels</div>
}
return channels?.map((channel: Channel) => {
return (
<ChannelElement
key={channel.id} guild={guild} channel={channel}
selfMember={selfMember} activeChannel={activeChannel} setActiveChannel={() => { ui.setActiveChannel(guild, channel); setActiveChannel(channel); }} />
);
});
}, [ selfMember, channelsFetchError, channels, guild, selfMember, activeChannel, ui ]);
if (!channels) {
return <div className="channels-loading">Loading channels...</div>
}
return channels.map((channel: Channel) => (
<ChannelElement
key={channel.id} guild={guild}
selfMember={selfMember}
channel={channel} activeChannel={activeChannel}
setActiveChannel={() => { setActiveChannel(channel); }} />
));
}, [ selfMember, channelsFetchError, channels, guild, selfMember, activeChannel ]);
return (
<div className="channel-list">

2
src/client/webapp/elements/lists/member-list.scss
View File

@ -1,6 +1,6 @@
@import "../../styles/theme.scss";
.member-list-anchor {
.member-list-wrapper {
box-sizing: border-box;
flex: none; /* >:| NOT GONNA SHINK BOI */
background-color: $background-secondary;

16
src/client/webapp/elements/lists/member-list.tsx
View File

@ -1,25 +1,27 @@
import React, { FC, useMemo } from 'react';
import { Member } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import GuildSubscriptions from '../require/guild-subscriptions';
import MemberElement from './components/member-element';
export interface MemberListProps {
guild: CombinedGuild
guild: CombinedGuild;
members: Member[] | null;
membersFetchError: unknown | null;
}
const MemberList: FC<MemberListProps> = (props: MemberListProps) => {
const { guild } = props;
const [ fetchRetryCallable, members, fetchError ] = GuildSubscriptions.useMembersSubscription(guild);
const { guild, members, membersFetchError } = props;
const memberElements = useMemo(() => {
if (fetchError) {
if (membersFetchError) {
// TODO: Try Again
return <div className="members-failed">Unable to load members</div>
}
if (!members) {
return <div className="members-loading">Loading members...</div>
}
return members?.map((member: Member) => <MemberElement key={member.id} guild={guild} member={member} />);
}, [ members, fetchError ]);
}, [ guild, members, membersFetchError ]);
return (
<div className="member-list">

53
src/client/webapp/elements/mounts.tsx
View File

@ -3,14 +3,8 @@ import { Channel } from "../data-types";
import CombinedGuild from "../guild-combined";
import Q from "../q-module";
import ElementsUtil from "./require/elements-util";
import MemberList from "./lists/member-list";
import MessageList from './lists/message-list';
import ChannelTitle from './sections/channel-title';
import ConnectionInfo from './sections/connection-info';
import GuildTitle from './sections/guild-title';
import UI from '../ui';
import ChannelList from './lists/channel-list';
import SendMessage from './sections/send-message';
import GuildElement from './sections/guild';
export function mountBaseComponents() {
// guild-list
@ -18,33 +12,36 @@ export function mountBaseComponents() {
}
export function mountGuildComponents(q: Q, ui: UI, guild: CombinedGuild) {
// guild title
ElementsUtil.unmountReactComponent(q.$('.guild-title-anchor'));
ElementsUtil.mountReactComponent(q.$('.guild-title-anchor'), <GuildTitle guild={guild} />);
ElementsUtil.unmountReactComponent(q.$('.guild-anchor'));
ElementsUtil.mountReactComponent(q.$('.guild-anchor'), <GuildElement guild={guild} />);
// connection info
ElementsUtil.unmountReactComponent(q.$('.connection-anchor'));
ElementsUtil.mountReactComponent(q.$('.connection-anchor'), <ConnectionInfo guild={guild} />);
// // guild title
// ElementsUtil.unmountReactComponent(q.$('.guild-title-anchor'));
// ElementsUtil.mountReactComponent(q.$('.guild-title-anchor'), <GuildTitle guild={guild} />);
// member-list
ElementsUtil.unmountReactComponent(q.$('.member-list-anchor'));
ElementsUtil.mountReactComponent(q.$('.member-list-anchor'), <MemberList guild={guild} />);
// // connection info
// ElementsUtil.unmountReactComponent(q.$('.connection-anchor'));
// ElementsUtil.mountReactComponent(q.$('.connection-anchor'), <ConnectionInfo guild={guild} />);
// channel-list
ElementsUtil.unmountReactComponent(q.$('.channel-list-anchor'));
ElementsUtil.mountReactComponent(q.$('.channel-list-anchor'), <ChannelList guild={guild} ui={ui} />);
// // member-list
// ElementsUtil.unmountReactComponent(q.$('.member-list-anchor'));
// ElementsUtil.mountReactComponent(q.$('.member-list-anchor'), <MemberList guild={guild} />);
// // channel-list
// ElementsUtil.unmountReactComponent(q.$('.channel-list-anchor'));
// ElementsUtil.mountReactComponent(q.$('.channel-list-anchor'), <ChannelList guild={guild} ui={ui} />);
}
export function mountGuildChannelComponents(q: Q, guild: CombinedGuild, channel: Channel) {
// channel-title pieces
ElementsUtil.unmountReactComponent(q.$('.channel-title-anchor'));
ElementsUtil.mountReactComponent(q.$('.channel-title-anchor'), <ChannelTitle channel={channel} />);
// // channel-title pieces
// ElementsUtil.unmountReactComponent(q.$('.channel-title-anchor'));
// ElementsUtil.mountReactComponent(q.$('.channel-title-anchor'), <ChannelTitle channel={channel} />);
// message-list
ElementsUtil.unmountReactComponent(q.$('.message-list-anchor'));
ElementsUtil.mountReactComponent(q.$('.message-list-anchor'), <MessageList guild={guild} channel={channel} />);
// // message-list
// ElementsUtil.unmountReactComponent(q.$('.message-list-anchor'));
// ElementsUtil.mountReactComponent(q.$('.message-list-anchor'), <MessageList guild={guild} channel={channel} />);
// send-message
ElementsUtil.unmountReactComponent(q.$('.send-message-input-wrapper-anchor'));
ElementsUtil.mountReactComponent(q.$('.send-message-input-wrapper-anchor'), <SendMessage guild={guild} channel={channel} />);
// // send-message
// ElementsUtil.unmountReactComponent(q.$('.send-message-input-wrapper-anchor'));
// ElementsUtil.mountReactComponent(q.$('.send-message-input-wrapper-anchor'), <SendMessage guild={guild} channel={channel} />);
}

8
src/client/webapp/elements/sections/channel-title.tsx
View File

@ -2,7 +2,7 @@ import React, { FC } from 'react';
import { Channel } from '../../data-types';
export interface ChannelTitleProps {
channel: Channel;
channel: Channel | null;
}
const ChannelTitle: FC<ChannelTitleProps> = (props: ChannelTitleProps) => {
@ -16,9 +16,9 @@ const ChannelTitle: FC<ChannelTitleProps> = (props: ChannelTitleProps) => {
d="M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z"></path>
</svg>
</div>
<div className="channel-name">{channel.name}</div>
<div className="channel-flavor-divider" style={{ visibility: channel.flavorText ? 'visible' : 'hidden' }}></div>
<div className="channel-flavor-text">{channel.flavorText}</div>
<div className="channel-name">{channel && channel.name}</div>
<div className="channel-flavor-divider" style={{ visibility: channel && channel.flavorText ? 'visible' : 'hidden' }}></div>
<div className="channel-flavor-text">{channel && channel.flavorText}</div>
</div>
);
}

6
src/client/webapp/elements/sections/connection-info.tsx
View File

@ -7,21 +7,19 @@ import React, { FC, useMemo, useRef } from 'react';
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 '../contexts/context-menu-connection-info';
import ReactHelper from '../require/react-helper';
export interface ConnectionInfoProps {
guild: CombinedGuild;
selfMember: Member | null;
}
const ConnectionInfo: FC<ConnectionInfoProps> = (props: ConnectionInfoProps) => {
const { guild } = props;
const { guild, selfMember } = props;
const rootRef = useRef<HTMLDivElement>(null);
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
const displayMember = useMemo((): Member | DummyMember => {
if (!selfMember) {
return {

10
src/client/webapp/elements/sections/guild-title.tsx
View File

@ -1,22 +1,20 @@
import React, { FC, useRef } from 'react';
import { GuildMetadata, Member } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import GuildTitleContextMenu from '../contexts/context-menu-guild-title';
import GuildSubscriptions from '../require/guild-subscriptions';
import ReactHelper from '../require/react-helper';
export interface GuildTitleProps {
guild: CombinedGuild;
guildMeta: GuildMetadata | null;
selfMember: Member | null;
}
const GuildTitle: FC<GuildTitleProps> = (props: GuildTitleProps) => {
const { guild } = props;
const { guild, guildMeta, selfMember } = props;
const rootRef = useRef<HTMLDivElement>(null);
// TODO: Handle fetch error
const [ guildMeta, fetchError ] = GuildSubscriptions.useGuildMetadataSubscription(guild);
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
const [ contextMenu, toggleContextMenu ] = ReactHelper.useContextMenu((close: () => void) => {
if (!guildMeta) return null;
if (!selfMember) return null;

64
src/client/webapp/elements/sections/guild.tsx Normal file
View File

@ -0,0 +1,64 @@
import React, { FC, useEffect, useState } from 'react';
import { Channel } from '../../data-types';
import CombinedGuild from '../../guild-combined';
import ChannelList from '../lists/channel-list';
import MemberList from '../lists/member-list';
import MessageList from '../lists/message-list';
import GuildSubscriptions from '../require/guild-subscriptions';
import ChannelTitle from './channel-title';
import ConnectionInfo from './connection-info';
import GuildTitle from './guild-title';
import SendMessage from './send-message';
export interface GuildElementProps {
guild: CombinedGuild;
}
const GuildElement: FC<GuildElementProps> = (props: GuildElementProps) => {
const { guild } = props;
// TODO: Handle fetch errors by allowing for retry
// TODO: Handle fetch errors in message list
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
const [ guildMeta, guildMetaFetchError ] = GuildSubscriptions.useGuildMetadataSubscription(guild);
const [ membersRetry, members, membersFetchError ] = GuildSubscriptions.useMembersSubscription(guild);
const [ channelsRetry, channels, channelsFetchError ] = GuildSubscriptions.useChannelsSubscription(guild);
const [ activeChannel, setActiveChannel ] = useState<Channel | null>(null);
useEffect(() => {
if (activeChannel === null) {
if (channels && channels.length > 0) {
setActiveChannel(channels[0] as Channel);
}
}
}, [ channels, activeChannel ]);
return (
<div className="guild-react">
<div className="guild-sidebar">
<GuildTitle guild={guild} selfMember={selfMember} guildMeta={guildMeta} />
<ChannelList
guild={guild} selfMember={selfMember}
channels={channels} channelsFetchError={channelsFetchError}
activeChannel={activeChannel} setActiveChannel={setActiveChannel} />
<ConnectionInfo guild={guild} selfMember={selfMember} />
</div>
<div className="guild-channel">
<ChannelTitle channel={activeChannel} />
<div className="guild-channel-content">
<div className="guild-channel-feed-wrapper">
{activeChannel && <MessageList guild={guild} channel={activeChannel} />}
{activeChannel && <SendMessage guild={guild} channel={activeChannel} />}
</div>
<div className="member-list-wrapper">
<MemberList guild={guild} members={members} membersFetchError={membersFetchError} />
</div>
</div>
</div>
</div>
);
}
export default GuildElement;

1
src/client/webapp/index.html
View File

@ -42,6 +42,7 @@
<img src="./img/add-guild-icon.png">
</div>
</div>
<div class="guild-anchor"></div>
<div id="guild">
<div id="guild-sidebar">
<div class="guild-title-anchor"></div>

214
src/client/webapp/styles/channel-feed.scss
View File

@ -3,115 +3,115 @@
$scrollbarBottom: 4px;
$borderRadius: 8px;
.send-message-input-wrapper {
position: relative;
height: 0;
.guild-channel-content {
flex: 1;
display: flex;
.send-message-input {
position: absolute;
left: 0;
bottom: 0;
margin: 0 16px 16px 16px;
box-sizing: border-box;
width: calc(100% - 32px);
.guild-channel-feed-wrapper {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
display: flex;
flex-flow: column;
align-items: flex-start;
color: $text-normal;
background-color: $channeltextarea-background;
border-radius: $borderRadius;
.attachment-preview {
position: relative;
margin: 16px 16px 0 16px;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
max-width: calc(100% - 32px);
background-color: $background-secondary;
img.preview {
max-width: 128px;
max-height: 128px;
border-radius: 4px;
object-fit: contain;
}
.name {
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.remove {
position: absolute;
right: -8px;
top: -8px;
border-radius: 8px;
cursor: pointer;
color: $background-button-negative;
&:hover {
color: $background-button-negative-hover;
}
svg {
width: 20px;
height: 20px;
}
}
}
.divider {
box-sizing: border-box;
width: 100%;
margin: 16px 0 0 0;
height: 1px;
background-color: $interactive-muted;
.send-message-input-wrapper {
position: relative;
height: 0;
.send-message-input {
position: absolute;
left: 0;
bottom: 0;
margin: 0 16px 16px 16px;
box-sizing: border-box;
width: calc(100% - 32px);
display: flex;
flex-flow: column;
align-items: flex-start;
color: $text-normal;
background-color: $channeltextarea-background;
border-radius: $borderRadius;
.attachment-preview {
position: relative;
margin: 16px 16px 0 16px;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
max-width: calc(100% - 32px);
background-color: $background-secondary;
img.preview {
max-width: 128px;
max-height: 128px;
border-radius: 4px;
object-fit: contain;
}
.name {
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.remove {
position: absolute;
right: -8px;
top: -8px;
border-radius: 8px;
cursor: pointer;
color: $background-button-negative;
&:hover {
color: $background-button-negative-hover;
}
svg {
width: 20px;
height: 20px;
}
}
}
.divider {
box-sizing: border-box;
width: 100%;
margin: 16px 0 0 0;
height: 1px;
background-color: $interactive-muted;
}
.send-message-input-row {
width: 100%;
display: flex;
align-items: flex-start;
.attachment-input-button {
cursor: pointer;
margin: 12px;
svg {
width: 24px;
height: 24px;
}
}
.text-input {
flex: 1;
padding: 12px 12px 12px 0;
max-height: 300px;
overflow-y: scroll;
overflow-wrap: anywhere;
white-space: pre;
&.disabled {
color: $text-sending;
}
}
}
}
}
.send-message-input-row {
width: 100%;
display: flex;
align-items: flex-start;
.attachment-input-button {
cursor: pointer;
margin: 12px;
svg {
width: 24px;
height: 24px;
}
}
.text-input {
flex: 1;
padding: 12px 12px 12px 0;
max-height: 300px;
overflow-y: scroll;
overflow-wrap: anywhere;
white-space: pre;
&.disabled {
color: $text-sending;
}
}
}
}
}
#channel-content {
flex: 1;
display: flex;
}
#channel-feed-wrapper {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
}

4
src/client/webapp/styles/channel.scss
View File

@ -1,12 +1,14 @@
@import "theme.scss";
#channel {
.guild-channel {
flex: 1;
background-color: $background-primary;
display: flex;
flex-direction: column;
}
// .channel-title is also used in the channel overlay
.channel-title:not(.preview) {
width: calc(100vw - 240px - 72px); /* for ellipsis overflow */
}

57
src/client/webapp/styles/guild.scss
View File

@ -1,38 +1,37 @@
@import "theme.scss";
// TODO: Remove #guild
#guild {
display: none;
}
.guild-react {
flex: 1;
display: flex;
}
#guild-sidebar {
flex: none; /* >:| NOT GONNA SHINK BOI */
width: 240px;
display: flex;
flex-direction: column;
background-color: $background-secondary;
border-top-left-radius: 8px;
}
.guild-sidebar {
flex: none; /* >:| NOT GONNA SHINK BOI */
width: 240px;
display: flex;
flex-direction: column;
background-color: $background-secondary;
border-top-left-radius: 8px;
// TODO: just do this with inline styles
.privilege-modify_profile .guild-name-container,
.privilege-modify_members .guild-name-container {
cursor: pointer;
}
.guild-name-container {
padding: 0 16px;
height: 48px;
font-weight: 600;
display: flex;
align-items: center;
color: $header-primary;
border-bottom: 1px solid $background-secondary-alt;
.guild-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.guild-name-container {
padding: 0 16px;
height: 48px;
font-weight: 600;
display: flex;
align-items: center;
color: $header-primary;
border-bottom: 1px solid $background-secondary-alt;
.guild-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}