abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove useChannel

Browse Source
This commit is contained in:
Paul
2021-07-29 18:41:01 +01:00
parent 0571c065bd
commit 411fac2527
28 changed files with 259 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/channels/Channel.tsx
View File

@@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { useParams, useHistory } from "react-router-dom";
import { Channels } from "revolt.js/dist/api/objects";
import styled from "styled-components";
@@ -6,10 +7,10 @@ import { useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { Channel as MobXChannel } from "../../mobx";
import { useData } from "../../mobx/State";
import { dispatch, getState } from "../../redux";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import AgeGate from "../../components/common/AgeGate";
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
@@ -36,19 +37,19 @@ const ChannelContent = styled.div`
`;
export function Channel({ id }: { id: string }) {
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
const store = useData();
const channel = store.channels.get(id);
if (!channel) return null;
if (channel.channel_type === "VoiceChannel") {
return <VoiceChannel channel={channel} />;
}
return <TextChannel channel={channel} />;
}
const MEMBERS_SIDEBAR_KEY = "sidebar_members";
function TextChannel({ channel }: { channel: Channels.Channel }) {
const TextChannel = observer(({ channel }: { channel: MobXChannel }) => {
const [showMembers, setMembers] = useState(
getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
);
@@ -61,7 +62,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
gated={
(channel.channel_type === "TextChannel" ||
channel.channel_type === "Group") &&
channel.name.includes("nsfw")
channel.name?.includes("nsfw")
? true
: false
}>
<ChannelHeader
channel={channel}
@@ -96,9 +99,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
</ChannelMain>
</AgeGate>
);
}
});
function VoiceChannel({ channel }: { channel: Channels.Channel }) {
function VoiceChannel({ channel }: { channel: MobXChannel }) {
return (
<>
<ChannelHeader channel={channel} />

5
src/pages/channels/ChannelHeader.tsx
View File

@@ -2,14 +2,13 @@ import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { observable } from "mobx";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js";
import styled from "styled-components";
import { useContext } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { User } from "../../mobx";
import { Channel, User } from "../../mobx";
import { useData } from "../../mobx/State";
import { useIntermediate } from "../../context/intermediate/Intermediate";
@@ -131,7 +130,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
onClick={() =>
openScreen({
id: "channel_info",
channel_id: channel._id,
channel,
})
}>
<Markdown

2
src/pages/channels/actions/HeaderActions.tsx
View File

@@ -41,7 +41,7 @@ export default function HeaderActions({
onClick={() =>
openScreen({
id: "user_picker",
omit: channel.recipients,
omit: channel.recipients!,
callback: async (users) => {
for (const user of users) {
await client.channels.addMember(

16
src/pages/channels/messaging/ConversationStart.tsx
View File

@@ -1,8 +1,11 @@
import { observer } from "mobx-react-lite";
import styled from "styled-components";
import { Text } from "preact-i18n";
import { useChannel, useForceUpdate } from "../../../context/revoltjs/hooks";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util";
const StartBase = styled.div`
@@ -24,17 +27,18 @@ interface Props {
id: string;
}
export default function ConversationStart({ id }: Props) {
const ctx = useForceUpdate();
const channel = useChannel(id, ctx);
export default observer(({ id }: Props) => {
const store = useData();
const client = useClient();
const channel = store.channels.get(id);
if (!channel) return null;
return (
<StartBase>
<h1>{getChannelName(ctx.client, channel, true)}</h1>
<h1>{getChannelName(client, channel, true)}</h1>
<h4>
<Text id="app.main.channel.start.group" />
</h4>
</StartBase>
);
}
});

12
src/pages/settings/ChannelSettings.tsx
View File

@@ -3,7 +3,9 @@ import { Route, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n";
import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
import { useData } from "../../mobx/State";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../context/revoltjs/util";
import Category from "../../components/ui/Category";
@@ -14,8 +16,10 @@ import Permissions from "./channel/Permissions";
export default function ChannelSettings() {
const { channel: cid } = useParams<{ channel: string }>();
const ctx = useForceUpdate();
const channel = useChannel(cid, ctx);
const store = useData();
const client = useClient();
const channel = store.channels.get(cid);
if (!channel) return null;
if (
channel.channel_type === "SavedMessages" ||
@@ -49,7 +53,7 @@ export default function ChannelSettings() {
category: (
<Category
variant="uniform"
text={getChannelName(ctx.client, channel, true)}
text={getChannelName(client, channel, true)}
/>
),
id: "overview",

16
src/pages/settings/channel/Overview.tsx
View File

@@ -1,3 +1,4 @@
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import styled, { css } from "styled-components";
@@ -6,6 +7,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { Channel } from "../../../mobx";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -13,10 +16,7 @@ import Button from "../../../components/ui/Button";
import InputBox from "../../../components/ui/InputBox";
interface Props {
channel:
| Channels.GroupChannel
| Channels.TextChannel
| Channels.VoiceChannel;
channel: Channel;
}
const Row = styled.div`
@@ -32,13 +32,13 @@ const Row = styled.div`
}
`;
export default function Overview({ channel }: Props) {
export default observer(({ channel }: Props) => {
const client = useContext(AppContext);
const [name, setName] = useState(channel.name);
const [name, setName] = useState(channel.name ?? undefined);
const [description, setDescription] = useState(channel.description ?? "");
useEffect(() => setName(channel.name), [channel.name]);
useEffect(() => setName(channel.name ?? undefined), [channel.name]);
useEffect(
() => setDescription(channel.description ?? ""),
[channel.description],
@@ -127,4 +127,4 @@ export default function Overview({ channel }: Props) {
</p>
</div>
);
}
});

14
src/pages/settings/channel/Permissions.tsx
View File

@@ -1,8 +1,11 @@
import { observer } from "mobx-react-lite";
import { Channels } from "revolt.js/dist/api/objects";
import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { useContext, useEffect, useState } from "preact/hooks";
import { Channel } from "../../../mobx";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useServer } from "../../../context/revoltjs/hooks";
@@ -21,21 +24,18 @@ const DEFAULT_PERMISSION_DM =
ChannelPermission.UploadFiles;
interface Props {
channel:
| Channels.GroupChannel
| Channels.TextChannel
| Channels.VoiceChannel;
channel: Channel;
}
// ! FIXME: bad code :)
export default function Permissions({ channel }: Props) {
export default observer(({ channel }: Props) => {
const [selected, setSelected] = useState("default");
const client = useContext(AppContext);
type R = { name: string; permissions: number };
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = useServer(channel.server);
const server = useServer(channel.server!);
const a = server?.roles ?? {};
for (const b of Object.keys(a)) {
roles[b] = {
@@ -110,4 +110,4 @@ export default function Permissions({ channel }: Props) {
</Button>
</div>
);
}
});

16
src/pages/settings/server/Categories.tsx
View File

@@ -1,5 +1,6 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
import { Route } from "revolt.js/dist/api/routes";
import { ulid } from "ulid";
@@ -8,8 +9,9 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useChannels } from "../../../context/revoltjs/hooks";
import ChannelIcon from "../../../components/common/ChannelIcon";
import UserIcon from "../../../components/common/user/UserIcon";
@@ -25,12 +27,12 @@ interface Props {
}
// ! FIXME: really bad code
export function Categories({ server }: Props) {
export const Categories = observer(({ server }: Props) => {
const client = useContext(AppContext);
const channels = useChannels(server.channels) as (
| Channels.TextChannel
| Channels.VoiceChannel
)[];
const store = useData();
const channels = server.channels
.map((id) => store.channels.get(id)!)
.filter((x) => typeof x !== "undefined");
const [cats, setCats] = useState<Servers.Category[]>(
server.categories ?? [],
@@ -150,4 +152,4 @@ export function Categories({ server }: Props) {
})}
</div>
);
}
});

16
src/pages/settings/server/Invites.tsx
View File

@@ -9,7 +9,6 @@ import { useEffect, useState } from "preact/hooks";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useChannels, useForceUpdate } from "../../../context/revoltjs/hooks";
import { getChannelName } from "../../../context/revoltjs/util";
import UserIcon from "../../../components/common/user/UserIcon";
@@ -26,14 +25,15 @@ export const Invites = observer(({ server }: Props) => {
InvitesNS.ServerInvite[] | undefined
>(undefined);
const ctx = useForceUpdate();
const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
const store = useData();
const client = useClient();
const users = invites?.map((invite) => store.users.get(invite.creator));
const channels = invites?.map((invite) =>
store.channels.get(invite.channel),
);
useEffect(() => {
ctx.client.servers
client.servers
.fetchInvites(server._id)
.then((invites) => setInvites(invites));
}, []);
@@ -57,7 +57,7 @@ export const Invites = observer(({ server }: Props) => {
{typeof invites === "undefined" && <Preloader type="ring" />}
{invites?.map((invite, index) => {
const creator = users![index];
const channel = channels.find((x) => x?._id === invite.channel);
const channel = channels![index];
return (
<div
@@ -72,14 +72,14 @@ export const Invites = observer(({ server }: Props) => {
</span>
<span>
{channel && creator
? getChannelName(ctx.client, channel, true)
? getChannelName(client, channel, true)
: "#??"}
</span>
<IconButton
onClick={async () => {
setDelete([...deleting, invite._id]);
await ctx.client.deleteInvite(invite._id);
await client.deleteInvite(invite._id);
setInvites(
invites?.filter(

21
src/pages/settings/server/Overview.tsx
View File

@@ -1,4 +1,5 @@
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Servers, Server } from "revolt.js/dist/api/objects";
import styles from "./Panes.module.scss";
@@ -7,6 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { useData } from "../../../mobx/State";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { getChannelName } from "../../../context/revoltjs/util";
@@ -19,8 +22,9 @@ interface Props {
server: Servers.Server;
}
export function Overview({ server }: Props) {
export const Overview = observer(({ server }: Props) => {
const client = useContext(AppContext);
const store = useData();
const [name, setName] = useState(server.name);
const [description, setDescription] = useState(server.description ?? "");
@@ -170,15 +174,14 @@ export function Overview({ server }: Props) {
<option value="disabled">
<Text id="general.disabled" />
</option>
{server.channels.map((id) => {
const channel = client.channels.get(id);
if (!channel) return null;
return (
<option value={id}>
{server.channels
.map((id) => store.channels.get(id)!)
.filter((x) => typeof x !== "undefined")
.map((channel) => (
<option value={channel._id}>
{getChannelName(client, channel, true)}
</option>
);
})}
))}
</ComboBox>
</p>
))}
@@ -190,4 +193,4 @@ export function Overview({ server }: Props) {
</p>
</div>
);
}
});