HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(mobx): refactor and remove (react-)redux

Browse Source
This commit is contained in:
Paul
2021-12-23 21:43:11 +00:00
parent 6e1bcab92b
commit cc0e45526c
55 changed files with 249 additions and 1522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/common/AgeGate.tsx
View File

@@ -6,7 +6,8 @@ import styled from "styled-components";
import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { dispatch, getState } from "../../redux";
import { useApplicationState } from "../../mobx/State";
import { SECTION_NSFW } from "../../mobx/stores/Layout";
import Button from "../ui/Button";
import Checkbox from "../ui/Checkbox";
@@ -49,9 +50,7 @@ type Props = {
export default observer((props: Props) => {
const history = useHistory();
const [consent, setConsent] = useState(
getState().sectionToggle["nsfw"] ?? false,
);
const layout = useApplicationState().layout;
const [ageGate, setAgeGate] = useState(false);
if (ageGate || !props.gated) {
@@ -81,26 +80,19 @@ export default observer((props: Props) => {
</span>
<Checkbox
checked={consent}
onChange={(v) => {
setConsent(v);
if (v) {
dispatch({
type: "SECTION_TOGGLE_SET",
id: "nsfw",
state: true,
});
} else {
dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
}
}}>
checked={layout.getSectionState(SECTION_NSFW, false)}
onChange={() => layout.toggleSectionState(SECTION_NSFW, false)}>
<Text id="app.main.channel.nsfw.confirm" />
</Checkbox>
<div className="actions">
<Button contrast onClick={() => history.goBack()}>
<Text id="app.special.modals.actions.back" />
</Button>
<Button contrast onClick={() => consent && setAgeGate(true)}>
<Button
contrast
onClick={() =>
layout.getSectionState(SECTION_NSFW) && setAgeGate(true)
}>
<Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
</Button>
</div>

2
src/components/common/messaging/Message.tsx
View File

@@ -7,7 +7,7 @@ import { useState } from "preact/hooks";
import { internalEmit } from "../../../lib/eventEmitter";
import { QueuedMessage } from "../../../redux/reducers/queue";
import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";

4
src/components/common/messaging/MessageBox.tsx
View File

@@ -21,7 +21,7 @@ import {
} from "../../../lib/renderer/Singleton";
import { useApplicationState } from "../../../mobx/State";
import { Reply } from "../../../redux/reducers/queue";
import { Reply } from "../../../mobx/stores/MessageQueue";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import {
@@ -111,7 +111,7 @@ const Action = styled.div`
const RE_SED = new RegExp("^s/([^])*/([^])*$");
// ! FIXME: add to app config and load from app config
export const CAN_UPLOAD_AT_ONCE = 4;
export const CAN_UPLOAD_AT_ONCE = 5;
export default observer(({ channel }: Props) => {
const state = useApplicationState();

16
src/components/common/messaging/bars/ReplyBar.tsx
View File

@@ -10,8 +10,9 @@ import { StateUpdater, useEffect } from "preact/hooks";
import { internalSubscribe } from "../../../../lib/eventEmitter";
import { dispatch, getState } from "../../../../redux";
import { Reply } from "../../../../redux/reducers/queue";
import { useApplicationState } from "../../../../mobx/State";
import { SECTION_MENTION } from "../../../../mobx/stores/Layout";
import { Reply } from "../../../../mobx/stores/MessageQueue";
import IconButton from "../../../ui/IconButton";
@@ -81,6 +82,7 @@ const Base = styled.div`
const MAX_REPLIES = 5;
export default observer(({ channel, replies, setReplies }: Props) => {
const client = channel.client;
const layout = useApplicationState().layout;
// Event listener for adding new messages to reply bar.
useEffect(() => {
@@ -99,7 +101,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
mention:
message.author_id === client.user!._id
? false
: getState().sectionToggle.mention ?? false,
: layout.getSectionState("SECTION_MENTION", false),
},
]);
});
@@ -181,11 +183,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
}),
);
dispatch({
type: "SECTION_TOGGLE_SET",
id: "mention",
layout.setSectionState(
SECTION_MENTION,
state,
});
false,
);
}}>
<span class="toggle">
<At size={15} />

29
src/components/common/messaging/embed/EmbedInvite.tsx
View File

@@ -10,8 +10,6 @@ import { useContext, useEffect, useState } from "preact/hooks";
import { defer } from "../../../../lib/defer";
import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../../redux";
import {
AppContext,
ClientStatus,
@@ -33,7 +31,7 @@ const EmbedInviteBase = styled.div`
align-items: center;
padding: 0 12px;
margin-top: 2px;
${() =>
${() =>
isTouchscreenDevice &&
css`
flex-wrap: wrap;
@@ -44,19 +42,17 @@ const EmbedInviteBase = styled.div`
> button {
width: 100%;
}
`
}
`}
`;
const EmbedInviteDetails = styled.div`
flex-grow: 1;
padding-left: 12px;
${() =>
${() =>
isTouchscreenDevice &&
css`
width: calc(100% - 55px);
`
}
`}
`;
const EmbedInviteName = styled.div`
@@ -74,11 +70,10 @@ type Props = {
code: string;
};
export function EmbedInvite(props: Props) {
export function EmbedInvite({ code }: Props) {
const history = useHistory();
const client = useContext(AppContext);
const status = useContext(StatusContext);
const code = props.code;
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | undefined>(undefined);
const [joinError, setJoinError] = useState<string | undefined>(undefined);
@@ -124,7 +119,8 @@ export function EmbedInvite(props: Props) {
<EmbedInviteDetails>
<EmbedInviteName>{invite.server_name}</EmbedInviteName>
<EmbedInviteMemberCount>
{invite.member_count.toLocaleString()} {invite.member_count === 1 ? "member" : "members"}
{invite.member_count.toLocaleString()}{" "}
{invite.member_count === 1 ? "member" : "members"}
</EmbedInviteMemberCount>
</EmbedInviteDetails>
{processing ? (
@@ -151,10 +147,9 @@ export function EmbedInvite(props: Props) {
defer(() => {
if (server) {
dispatch({
type: "UNREADS_MARK_MULTIPLE_READ",
channels: server.channel_ids,
});
client.unreads!.markMultipleRead(
server.channel_ids,
);
history.push(
`/server/${server._id}/channel/${invite.channel_id}`,
@@ -172,7 +167,9 @@ export function EmbedInvite(props: Props) {
setProcessing(false);
}
}}>
{client.servers.get(invite.server_id) ? "Joined" : "Join"}
{client.servers.get(invite.server_id)
? "Joined"
: "Join"}
</Button>
)}
</EmbedInviteBase>

8
src/components/navigation/LeftSidebar.tsx
View File

@@ -1,14 +1,16 @@
import { Route, Switch } from "react-router";
import { useApplicationState } from "../../mobx/State";
import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
import SidebarBase from "./SidebarBase";
import HomeSidebar from "./left/HomeSidebar";
import ServerListSidebar from "./left/ServerListSidebar";
import ServerSidebar from "./left/ServerSidebar";
import { useSelector } from "react-redux";
import { State } from "../../redux";
export default function LeftSidebar() {
const isOpen = useSelector((state: State) => state.sectionToggle['sidebar_channels'] ?? true)
const layout = useApplicationState().layout;
const isOpen = layout.getSectionState(SIDEBAR_CHANNELS, true);
return (
<SidebarBase>

1
src/components/navigation/left/ServerSidebar.tsx
View File

@@ -11,7 +11,6 @@ import { internalEmit } from "../../../lib/eventEmitter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State";
import { connectState } from "../../../redux/connector";
import { useClient } from "../../../context/revoltjs/RevoltClient";

79
src/components/navigation/left/common.ts
View File

@@ -1,79 +0,0 @@
import { reaction } from "mobx";
import { Channel } from "revolt.js/dist/maps/Channels";
import { useLayoutEffect } from "preact/hooks";
import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads";
type UnreadProps = {
channel: Channel;
unreads: Unreads;
};
export function useUnreads({ channel, unreads }: UnreadProps) {
// const firstLoad = useRef(true);
useLayoutEffect(() => {
function checkUnread(target: Channel) {
if (!target) return;
if (target._id !== channel._id) return;
if (
target.channel_type === "SavedMessages" ||
target.channel_type === "VoiceChannel"
)
return;
const unread = unreads[channel._id]?.last_id;
if (target.last_message_id) {
if (
!unread ||
(unread && target.last_message_id.localeCompare(unread) > 0)
) {
dispatch({
type: "UNREADS_MARK_READ",
channel: channel._id,
message: target.last_message_id,
});
channel.ack(target.last_message_id);
}
}
}
checkUnread(channel);
return reaction(
() => channel.last_message,
() => checkUnread(channel),
);
}, [channel, unreads]);
}
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
const last_message_id = channel.last_message_id;
let unread: "mention" | "unread" | undefined;
let alertCount: undefined | number;
if (last_message_id && unreads) {
const u = unreads[channel._id];
if (u) {
if (u.mentions && u.mentions.length > 0) {
alertCount = u.mentions.length;
unread = "mention";
} else if (
u.last_id &&
(last_message_id as string).localeCompare(u.last_id) > 0
) {
unread = "unread";
}
} else {
unread = "unread";
}
}
return {
channel,
timestamp: last_message_id ?? channel._id,
unread,
alertCount,
};
}

2
src/components/ui/Modal.tsx
View File

@@ -167,7 +167,7 @@ export default function Modal(props: Props) {
isModalClosing = animateClose;
const onClose = useCallback(() => {
setAnimateClose(true);
setTimeout(() => props.onClose?.(), 2e2);
setTimeout(() => props.onClose!(), 2e2);
}, [setAnimateClose, props]);
useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);