Fix: Add default for font combo box.

Don't pass dispatcher in, just provide it globally.
Fix: Allow clicking through to profile from server sidebar.

src/components/common/LocaleSelector.tsx

@@ -1,9 +1,9 @@
 import ComboBox from "../ui/ComboBox";
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { WithDispatcher } from "../../redux/reducers";
 import { LanguageEntry, Languages } from "../../context/Locale";
 
-type Props = WithDispatcher & {
+type Props = {
     locale: string;
 };
 
@@ -12,8 +12,7 @@ export function LocaleSelector(props: Props) {
         <ComboBox
             value={props.locale}
             onChange={e =>
-                props.dispatcher &&
-                props.dispatcher({
+                dispatch({
                     type: "SET_LOCALE",
                     locale: e.currentTarget.value as any
                 })
@@ -37,6 +36,5 @@ export default connectState(
         return {
             locale: state.locale
         };
-    },
-    true
+    }
 );

src/components/common/UpdateIndicator.tsx

@@ -15,7 +15,7 @@ export default function UpdateIndicator() {
         return internalSubscribe('PWA', 'update', () => setPending(true));
     });
 
-    if (!pending) return;
+    if (!pending) return null;
     const theme = useContext(ThemeContext);
 
     return (

src/components/common/messaging/MessageBox.tsx

@@ -1,11 +1,11 @@
 import { ulid } from "ulid";
 import { Text } from "preact-i18n";
-import Tooltip, { PermissionTooltip } from "../Tooltip";
 import { Channel } from "revolt.js";
 import styled from "styled-components";
+import { dispatch } from "../../../redux";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
-import { X } from '@styled-icons/boxicons-regular';
+import { PermissionTooltip } from "../Tooltip";
 import { Send } from '@styled-icons/boxicons-solid';
 import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
@@ -13,7 +13,6 @@ import { useTranslation } from "../../../lib/i18n";
 import { Reply } from "../../../redux/reducers/queue";
 import { connectState } from "../../../redux/connector";
 import { SoundContext } from "../../../context/Settings";
-import { WithDispatcher } from "../../../redux/reducers";
 import { takeError } from "../../../context/revoltjs/util";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
@@ -30,9 +29,8 @@ import { ShieldX } from "@styled-icons/boxicons-regular";
 
 import ReplyBar from "./bars/ReplyBar";
 import FilePreview from './bars/FilePreview';
-import { Styleshare } from "@styled-icons/simple-icons";
 
-type Props = WithDispatcher & {
+type Props = {
     channel: Channel;
     draft?: string;
 };
@@ -77,7 +75,7 @@ const Action = styled.div`
 // ! FIXME: add to app config and load from app config
 export const CAN_UPLOAD_AT_ONCE = 5;
 
-function MessageBox({ channel, draft, dispatcher }: Props) {
+function MessageBox({ channel, draft }: Props) {
     const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
     const [ typing, setTyping ] = useState<boolean | number>(false);
     const [ replies, setReplies ] = useState<Reply[]>([]);
@@ -102,13 +100,13 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
 
     function setMessage(content?: string) {
         if (content) {
-            dispatcher({
+            dispatch({
                 type: "SET_DRAFT",
                 channel: channel._id,
                 content
             });
         } else {
-            dispatcher({
+            dispatch({
                 type: "CLEAR_DRAFT",
                 channel: channel._id
             });
@@ -148,7 +146,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
         playSound('outbound');
 
         const nonce = ulid();
-        dispatcher({
+        dispatch({
             type: "QUEUE_ADD",
             nonce,
             channel: channel._id,
@@ -171,7 +169,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
                 replies
             });
         } catch (error) {
-            dispatcher({
+            dispatch({
                 type: "QUEUE_FAIL",
                 error: takeError(error),
                 nonce
@@ -383,7 +381,7 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
     )
 }
 
-export default connectState<Omit<Props, "dispatcher" | "draft">>(MessageBox, (state, { channel }) => {
+export default connectState<Omit<Props, "dispatch" | "draft">>(MessageBox, (state, { channel }) => {
     return {
         draft: state.drafts[channel._id]
     }

src/components/navigation/left/HomeSidebar.tsx

@@ -3,12 +3,12 @@ import { useContext, useEffect } from "preact/hooks";
 import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
 
 import Category from '../../ui/Category';
+import { dispatch } from "../../../redux";
 import PaintCounter from "../../../lib/PaintCounter";
 import UserHeader from "../../common/user/UserHeader";
 import { Channels } from "revolt.js/dist/api/objects";
 import { connectState } from "../../../redux/connector";
 import ConnectionStatus from '../items/ConnectionStatus';
-import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import { mapChannelWithUnread, useUnreads } from "./common";
@@ -23,7 +23,7 @@ import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hook
 
 import placeholderSVG from "../items/placeholder.svg";
 
-type Props = WithDispatcher & {
+type Props = {
     unreads: Unreads;
 }
 
@@ -43,7 +43,7 @@ function HomeSidebar(props: Props) {
     useEffect(() => {
         if (!channel) return;
 
-        props.dispatcher({
+        dispatch({
             type: 'LAST_OPENED_SET',
             parent: 'home',
             child: channel
@@ -148,6 +148,5 @@ export default connectState(
             unreads: state.unreads
         };
     },
-    true,
     true
 );

src/components/navigation/left/ServerSidebar.tsx

@@ -2,7 +2,6 @@ import { Redirect, useParams } from "react-router";
 import { ChannelButton } from "../items/ButtonItem";
 import { Channels } from "revolt.js/dist/api/objects";
 import { Unreads } from "../../../redux/reducers/unreads";
-import { WithDispatcher } from "../../../redux/reducers";
 import { useChannels, useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
 import { mapChannelWithUnread, useUnreads } from "./common";
 import ConnectionStatus from '../items/ConnectionStatus';
@@ -13,6 +12,7 @@ import { attachContextMenu } from 'preact-context-menu';
 import ServerHeader from "../../common/ServerHeader";
 import { useEffect } from "preact/hooks";
 import Category from "../../ui/Category";
+import { dispatch } from "../../../redux";
 import ConditionalLink from "../../../lib/ConditionalLink";
 import CollapsibleSection from "../../common/CollapsibleSection";
 
@@ -43,7 +43,7 @@ const ServerList = styled.div`
     }
 `;
 
-function ServerSidebar(props: Props & WithDispatcher) {
+function ServerSidebar(props: Props) {
     const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
     const ctx = useForceUpdate();
 
@@ -61,7 +61,7 @@ function ServerSidebar(props: Props & WithDispatcher) {
     useEffect(() => {
         if (!channel_id) return;
 
-        props.dispatcher({
+        dispatch({
             type: 'LAST_OPENED_SET',
             parent: server_id!,
             child: channel_id!
@@ -130,6 +130,5 @@ export default connectState(
         return {
             unreads: state.unreads
         };
-    },
-    true
+    }
 );

src/components/navigation/left/common.ts

@@ -1,15 +1,15 @@
 import { Channel } from "revolt.js";
+import { dispatch } from "../../../redux";
 import { useLayoutEffect } from "preact/hooks";
-import { WithDispatcher } from "../../../redux/reducers";
 import { Unreads } from "../../../redux/reducers/unreads";
 import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
-type UnreadProps = WithDispatcher & {
+type UnreadProps = {
     channel: Channel;
     unreads: Unreads;
 }
 
-export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, context?: HookContext) {
+export function useUnreads({ channel, unreads }: UnreadProps, context?: HookContext) {
     const ctx = useForceUpdate(context);
 
     useLayoutEffect(() => {
@@ -23,7 +23,7 @@ export function useUnreads({ channel, unreads, dispatcher }: UnreadProps, contex
             if (target.last_message) {
                 const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
                 if (!unread || (unread && message.localeCompare(unread) > 0)) {
-                    dispatcher({
+                    dispatch({
                         type: "UNREADS_MARK_READ",
                         channel: channel._id,
                         message

src/components/navigation/right/MemberSidebar.tsx

@@ -2,7 +2,6 @@ import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
 import { User } from "revolt.js";
-import Details from "../../../components/ui/Details";
 import Category from "../../ui/Category";
 import { useParams } from "react-router";
 import { UserButton } from "../items/ButtonItem";
@@ -15,6 +14,7 @@ import { AppContext, ClientStatus, StatusContext } from "../../../context/revolt
 import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 import placeholderSVG from "../items/placeholder.svg";
+import Preloader from "../../ui/Preloader";
 
 interface Props {
     ctx: HookContext
@@ -130,6 +130,7 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
 export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
     const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
     const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
+    const { openScreen } = useIntermediate();
     const status = useContext(StatusContext);
     const client = useContext(AppContext);
 
@@ -188,17 +189,16 @@ export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channel
                         </span>
                     }
                 />
-                {users.length === 0 && <img src={placeholderSVG} />}
+                {!members && <Preloader type="ring" />}
+                {members && users.length === 0 && <img src={placeholderSVG} />}
                 {users.map(
                     user =>
                         user && (
-                            // <LinkProfile user_id={user._id}>
-                                <UserButton
-                                    key={user._id}
-                                    user={user}
-                                    context={channel}
-                                />
-                            // </LinkProfile>
+                            <UserButton
+                                key={user._id}
+                                user={user}
+                                context={channel}
+                                onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
                         )
                 )}
             </GenericSidebarList>