cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 15:12:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Remove useServer and useServers.

Browse source
This commit is contained in:
Paul 2021-07-29 19:01:40 +01:00
parent bde9a2e8f7
commit 768c80b051
18 changed files with 136 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/common/ServerHeader.tsx
View file

@ -1,26 +1,30 @@
import { Cog } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Link } from "react-router-dom";
import { Server } from "revolt.js/dist/api/objects";
import { ServerPermission } from "revolt.js/dist/api/permissions";
import styled from "styled-components";
import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
import { Server } from "../../mobx";
import { useClient } from "../../context/revoltjs/RevoltClient";
import { useServerPermission } from "../../context/revoltjs/hooks";
import Header from "../ui/Header";
import IconButton from "../ui/IconButton";
interface Props {
server: Server;
ctx: HookContext;
}
const ServerName = styled.div`
flex-grow: 1;
`;
export default function ServerHeader({ server, ctx }: Props) {
const permissions = useServerPermission(server._id, ctx);
const bannerURL = ctx.client.servers.getBannerURL(
export default observer(({ server }: Props) => {
const permissions = useServerPermission(server._id);
const client = useClient();
const bannerURL = client.servers.getBannerURL(
server._id,
{ width: 480 },
true,
@ -46,4 +50,4 @@ export default function ServerHeader({ server, ctx }: Props) {
)}
</Header>
);
}
});

86
src/components/common/ServerIcon.tsx
View file

@ -1,8 +1,10 @@
import { Server } from "revolt.js/dist/api/objects";
import { observer } from "mobx-react-lite";
import styled from "styled-components";
import { useContext } from "preact/hooks";
import { Server } from "../../mobx";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { IconBaseProps, ImageIconBase } from "./IconBase";
@ -22,48 +24,50 @@ const ServerText = styled.div`
`;
const fallback = "/assets/group.png";
export default function ServerIcon(
props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) {
const client = useContext(AppContext);
export default observer(
(
props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
) => {
const client = useContext(AppContext);
const {
target,
attachment,
size,
animate,
server_name,
children,
as,
...imgProps
} = props;
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
const {
target,
attachment,
size,
animate,
server_name,
children,
as,
...imgProps
} = props;
const iconURL = client.generateFileURL(
target?.icon ?? attachment,
{ max_side: 256 },
animate,
);
if (typeof iconURL === "undefined") {
const name = target?.name ?? server_name ?? "";
if (typeof iconURL === "undefined") {
const name = target?.name ?? server_name ?? "";
return (
<ServerText style={{ width: size, height: size }}>
{name
.split(" ")
.map((x) => x[0])
.filter((x) => typeof x !== "undefined")}
</ServerText>
);
}
return (
<ServerText style={{ width: size, height: size }}>
{name
.split(" ")
.map((x) => x[0])
.filter((x) => typeof x !== "undefined")}
</ServerText>
<ImageIconBase
{...imgProps}
width={size}
height={size}
src={iconURL}
loading="lazy"
aria-hidden="true"
/>
);
}
return (
<ImageIconBase
{...imgProps}
width={size}
height={size}
src={iconURL}
loading="lazy"
aria-hidden="true"
/>
);
}
},
);

7
src/components/common/user/UserShort.tsx
View file

@ -1,16 +1,9 @@
import { observer } from "mobx-react-lite";
import { useParams } from "react-router-dom";
import { Text } from "preact-i18n";
import { User } from "../../../mobx";
import {
useForceUpdate,
useMember,
useServer,
} from "../../../context/revoltjs/hooks";
import UserIcon from "./UserIcon";
export const Username = observer(

28
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -17,7 +17,6 @@ import { Unreads } from "../../../redux/reducers/unreads";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
import logoSVG from "../../../assets/logo.svg";
import ServerIcon from "../../common/ServerIcon";
@ -180,8 +179,9 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
const client = useClient();
const self = store.users.get(client.user!._id);
const ctx = useForceUpdate();
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? store.servers.get(server_id) : undefined;
const activeServers = [...store.servers.values()];
const channels = [...store.channels.values()].map((x) =>
mapChannelWithUnread(x, unreads),
);
@ -200,7 +200,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
}
return {
...server,
server,
unread: (typeof server.channels.find((x) =>
unreadChannels.includes(x),
) !== "undefined"
@ -213,9 +213,6 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
});
const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>();
const server = servers.find((x) => x!._id == server_id);
const { openScreen } = useIntermediate();
let homeUnread: "mention" | "unread" | undefined;
@ -267,24 +264,29 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
</ConditionalLink>
<LineDivider />
{servers.map((entry) => {
const active = entry!._id === server?._id;
const id = lastOpened[entry!._id];
const active = entry.server._id === server?._id;
const id = lastOpened[entry.server._id];
return (
<ConditionalLink
active={active}
to={`/server/${entry!._id}${
to={`/server/${entry.server._id}${
id ? `/channel/${id}` : ""
}`}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu("Menu", {
server: entry!._id,
server: entry.server._id,
})}>
<Swoosh />
<Tooltip content={entry.name} placement="right">
<Tooltip
content={entry.server.name}
placement="right">
<Icon size={42} unread={entry.unread}>
<ServerIcon size={32} target={entry} />
<ServerIcon
size={32}
target={entry.server}
/>
</Icon>
</Tooltip>
</ServerEntry>

18
src/components/navigation/left/ServerSidebar.tsx
View file

@ -14,8 +14,6 @@ import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Unreads } from "../../../redux/reducers/unreads";
import { useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
import CollapsibleSection from "../../common/CollapsibleSection";
import ServerHeader from "../../common/ServerHeader";
import Category from "../../ui/Category";
@ -52,18 +50,16 @@ const ServerList = styled.div`
`;
const ServerSidebar = observer((props: Props) => {
const { server: server_id, channel: channel_id } =
useParams<{ server?: string; channel?: string }>();
const ctx = useForceUpdate();
const server = useServer(server_id, ctx);
if (!server) return <Redirect to="/" />;
const store = useData();
const { server: server_id, channel: channel_id } =
useParams<{ server: string; channel?: string }>();
const server = store.servers.get(server_id);
if (!server) return <Redirect to="/" />;
const channel = channel_id ? store.channels.get(channel_id) : undefined;
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
if (channel) useUnreads({ ...props, channel }, ctx);
if (channel) useUnreads({ ...props, channel });
useEffect(() => {
if (!channel_id) return;
@ -125,7 +121,7 @@ const ServerSidebar = observer((props: Props) => {
return (
<ServerBase>
<ServerHeader server={server} ctx={ctx} />
<ServerHeader server={server} />
<ConnectionStatus />
<ServerList
onContextMenu={attachContextMenu("Menu", {

15
src/components/navigation/left/common.ts
View file

@ -4,6 +4,7 @@ import { Channel } from "../../../mobx";
import { dispatch } from "../../../redux";
import { Unreads } from "../../../redux/reducers/unreads";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
type UnreadProps = {
@ -11,11 +12,8 @@ type UnreadProps = {
unreads: Unreads;
};
export function useUnreads(
{ channel, unreads }: UnreadProps,
context?: HookContext,
) {
const ctx = useForceUpdate(context);
export function useUnreads({ channel, unreads }: UnreadProps) {
const client = useClient();
useLayoutEffect(() => {
function checkUnread(target?: Channel) {
@ -40,7 +38,7 @@ export function useUnreads(
message,
});
ctx.client.req(
client.req(
"PUT",
`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
);
@ -50,9 +48,8 @@ export function useUnreads(
checkUnread(channel);
ctx.client.channels.addListener("mutation", checkUnread);
return () =>
ctx.client.channels.removeListener("mutation", checkUnread);
client.channels.addListener("mutation", checkUnread);
return () => client.channels.removeListener("mutation", checkUnread);
}, [channel, unreads]);
}

12
src/context/intermediate/Intermediate.tsx
View file

@ -13,7 +13,7 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
import { internalSubscribe } from "../../lib/eventEmitter";
import { Channel, User } from "../../mobx";
import { Channel, Server, User } from "../../mobx";
import { Action } from "../../components/ui/Modal";
@ -36,19 +36,19 @@ export type Screen =
| ({ id: "special_prompt" } & (
| { type: "leave_group"; target: Channel }
| { type: "close_dm"; target: Channel }
| { type: "leave_server"; target: Servers.Server }
| { type: "delete_server"; target: Servers.Server }
| { type: "leave_server"; target: Server }
| { type: "delete_server"; target: Server }
| { type: "delete_channel"; target: Channel }
| { type: "delete_message"; target: Channels.Message }
| {
type: "create_invite";
target: Channel;
}
| { type: "kick_member"; target: Servers.Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: User }
| { type: "kick_member"; target: Server; user: User }
| { type: "ban_member"; target: Server; user: User }
| { type: "unfriend_user"; target: User }
| { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server }
| { type: "create_channel"; target: Server }
))
| ({ id: "special_input" } & (
| {

12
src/context/intermediate/modals/Prompt.tsx
View file

@ -9,7 +9,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
import { TextReact } from "../../../lib/i18n";
import { Channel, User } from "../../../mobx";
import { Channel, Server, User } from "../../../mobx";
import { useData } from "../../../mobx/State";
import Message from "../../../components/common/messaging/Message";
@ -57,19 +57,19 @@ export function PromptModal({
type SpecialProps = { onClose: () => void } & (
| { type: "leave_group"; target: Channel }
| { type: "close_dm"; target: Channel }
| { type: "leave_server"; target: Servers.Server }
| { type: "delete_server"; target: Servers.Server }
| { type: "leave_server"; target: Server }
| { type: "delete_server"; target: Server }
| { type: "delete_channel"; target: Channel }
| { type: "delete_message"; target: Channels.Message }
| {
type: "create_invite";
target: Channel;
}
| { type: "kick_member"; target: Servers.Server; user: User }
| { type: "ban_member"; target: Servers.Server; user: User }
| { type: "kick_member"; target: Server; user: User }
| { type: "ban_member"; target: Server; user: User }
| { type: "unfriend_user"; target: User }
| { type: "block_user"; target: User }
| { type: "create_channel"; target: Servers.Server }
| { type: "create_channel"; target: Server }
);
export const SpecialPromptModal = observer((props: SpecialProps) => {

14
src/context/revoltjs/hooks.ts
View file

@ -77,20 +77,6 @@ function useObject(
: map.toArray();
}
export function useServer(id?: string, context?: HookContext) {
if (typeof id === "undefined") return;
return useObject("servers", id, context) as
| Readonly<Servers.Server>
| undefined;
}
export function useServers(ids?: string[], context?: HookContext) {
return useObject("servers", ids, context) as (
| Readonly<Servers.Server>
| undefined
)[];
}
export function useMember(id?: string, context?: HookContext) {
if (typeof id === "undefined") return;
return useObject("members", id, context) as

25
src/lib/ContextMenus.tsx
View file

@ -34,7 +34,7 @@ import {
import { Text } from "preact-i18n";
import { useContext } from "preact/hooks";
import { Channel, User } from "../mobx";
import { Channel, Server, User } from "../mobx";
import { useData } from "../mobx/State";
import { dispatch } from "../redux";
import { connectState } from "../redux/connector";
@ -55,7 +55,6 @@ import {
import {
useChannelPermission,
useForceUpdate,
useServer,
useServerPermission,
useUserPermission,
} from "../context/revoltjs/hooks";
@ -99,8 +98,8 @@ type Action =
| { action: "open_link"; link: string }
| { action: "copy_link"; link: string }
| { action: "remove_member"; channel: string; user: User }
| { action: "kick_member"; target: Servers.Server; user: User }
| { action: "ban_member"; target: Servers.Server; user: User }
| { action: "kick_member"; target: Server; user: User }
| { action: "ban_member"; target: Server; user: User }
| { action: "view_profile"; user: User }
| { action: "message_user"; user: User }
| { action: "block_user"; user: User }
@ -111,7 +110,7 @@ type Action =
| { action: "set_presence"; presence: Users.Presence }
| { action: "set_status" }
| { action: "clear_status" }
| { action: "create_channel"; target: Servers.Server }
| { action: "create_channel"; target: Server }
| {
action: "create_invite";
target: Channel;
@ -122,8 +121,8 @@ type Action =
target: Channel;
}
| { action: "close_dm"; target: Channel }
| { action: "leave_server"; target: Servers.Server }
| { action: "delete_server"; target: Servers.Server }
| { action: "leave_server"; target: Server }
| { action: "delete_server"; target: Server }
| { action: "open_notification_options"; channel: Channel }
| { action: "open_settings" }
| { action: "open_channel_settings"; id: string }
@ -139,7 +138,8 @@ type Props = {
notifications: Notifications;
};
// ! FIXME: no observers here!
// ! FIXME: I dare someone to re-write this
// Tip: This should just be split into separate context menus per logical area.
function ContextMenus(props: Props) {
const { openScreen, writeClipboard } = useIntermediate();
const client = useContext(AppContext);
@ -495,7 +495,7 @@ function ContextMenus(props: Props) {
}
if (server_list) {
const server = useServer(server_list, forceUpdate);
const server = store.servers.get(server_list);
const permissions = useServerPermission(
server_list,
forceUpdate,
@ -539,10 +539,9 @@ function ContextMenus(props: Props) {
targetChannel.channel_type === "VoiceChannel")
? targetChannel
: undefined;
const server = useServer(
serverChannel ? serverChannel.server! : sid,
forceUpdate,
);
const s = serverChannel ? serverChannel.server! : sid;
const server = s ? store.servers.get(s) : undefined;
const channelPermissions = targetChannel
? useChannelPermission(targetChannel._id, forceUpdate)

5
src/pages/settings/ServerSettings.tsx
View file

@ -5,7 +5,6 @@ import { Route, useHistory, useParams } from "react-router-dom";
import { Text } from "preact-i18n";
import RequiresOnline from "../../context/revoltjs/RequiresOnline";
import { useServer } from "../../context/revoltjs/hooks";
import Category from "../../components/ui/Category";
@ -16,10 +15,12 @@ import { Invites } from "./server/Invites";
import { Members } from "./server/Members";
import { Overview } from "./server/Overview";
import { Roles } from "./server/Roles";
import { useData } from "../../mobx/State";
export default function ServerSettings() {
const { server: sid } = useParams<{ server: string }>();
const server = useServer(sid);
const store = useData();
const server = store.servers.get(sid);
if (!server) return null;
const history = useHistory();

5
src/pages/settings/channel/Permissions.tsx
View file

@ -5,9 +5,9 @@ import { ChannelPermission } from "revolt.js/dist/api/permissions";
import { useContext, useEffect, useState } from "preact/hooks";
import { Channel } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { useServer } from "../../../context/revoltjs/hooks";
import Button from "../../../components/ui/Button";
import Checkbox from "../../../components/ui/Checkbox";
@ -31,11 +31,12 @@ interface Props {
export default observer(({ channel }: Props) => {
const [selected, setSelected] = useState("default");
const client = useContext(AppContext);
const store = useData();
type R = { name: string; permissions: number };
const roles: { [key: string]: R } = {};
if (channel.channel_type !== "Group") {
const server = useServer(channel.server!);
const server = store.servers.get(channel.server!);
const a = server?.roles ?? {};
for (const b of Object.keys(a)) {
roles[b] = {

9
src/pages/settings/server/Bans.tsx
View file

@ -1,4 +1,5 @@
import { XCircle } from "@styled-icons/boxicons-regular";
import { observer } from "mobx-react-lite";
import { Servers, Users } from "revolt.js/dist/api/objects";
import { Route } from "revolt.js/dist/api/routes";
@ -6,6 +7,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "../../../components/common/user/UserIcon";
@ -13,10 +16,10 @@ import IconButton from "../../../components/ui/IconButton";
import Preloader from "../../../components/ui/Preloader";
interface Props {
server: Servers.Server;
server: Server;
}
export function Bans({ server }: Props) {
export const Bans = observer(({ server }: Props) => {
const client = useContext(AppContext);
const [deleting, setDelete] = useState<string[]>([]);
const [data, setData] = useState<
@ -81,4 +84,4 @@ export function Bans({ server }: Props) {
})}
</div>
);
}
});

3
src/pages/settings/server/Categories.tsx
View file

@ -9,6 +9,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@ -23,7 +24,7 @@ import Preloader from "../../../components/ui/Preloader";
import Tip from "../../../components/ui/Tip";
interface Props {
server: Servers.Server;
server: Server;
}
// ! FIXME: really bad code

3
src/pages/settings/server/Invites.tsx
View file

@ -6,6 +6,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
@ -16,7 +17,7 @@ import IconButton from "../../../components/ui/IconButton";
import Preloader from "../../../components/ui/Preloader";
interface Props {
server: Servers.Server;
server: Server;
}
export const Invites = observer(({ server }: Props) => {

3
src/pages/settings/server/Members.tsx
View file

@ -7,6 +7,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { useClient } from "../../../context/revoltjs/RevoltClient";
@ -18,7 +19,7 @@ import IconButton from "../../../components/ui/IconButton";
import Overline from "../../../components/ui/Overline";
interface Props {
server: Servers.Server;
server: Server;
}
export const Members = observer(({ server }: Props) => {

7
src/pages/settings/server/Overview.tsx
View file

@ -1,6 +1,6 @@
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Servers, Server } from "revolt.js/dist/api/objects";
import { Servers } from "revolt.js/dist/api/objects";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
@ -8,6 +8,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
import { Server } from "../../../mobx";
import { useData } from "../../../mobx/State";
import { FileUploader } from "../../../context/revoltjs/FileUploads";
@ -19,7 +20,7 @@ import ComboBox from "../../../components/ui/ComboBox";
import InputBox from "../../../components/ui/InputBox";
interface Props {
server: Servers.Server;
server: Server;
}
export const Overview = observer(({ server }: Props) => {
@ -51,7 +52,7 @@ export const Overview = observer(({ server }: Props) => {
if (description !== server.description)
changes.description = description;
if (!isEqual(systemMessages, server.system_messages))
changes.system_messages = systemMessages;
changes.system_messages = systemMessages ?? undefined;
client.servers.edit(server._id, changes);
setChanged(false);

9
src/pages/settings/server/Roles.tsx
View file

@ -1,5 +1,6 @@
import { Plus } from "@styled-icons/boxicons-regular";
import isEqual from "lodash.isequal";
import { observer } from "mobx-react-lite";
import { Servers } from "revolt.js/dist/api/objects";
import {
ChannelPermission,
@ -10,6 +11,8 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
import { Server } from "../../../mobx";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
@ -24,13 +27,13 @@ import Tip from "../../../components/ui/Tip";
import ButtonItem from "../../../components/navigation/items/ButtonItem";
interface Props {
server: Servers.Server;
server: Server;
}
const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
// ! FIXME: bad code :)
export function Roles({ server }: Props) {
export const Roles = observer(({ server }: Props) => {
const [role, setRole] = useState("default");
const { openScreen } = useIntermediate();
const client = useContext(AppContext);
@ -227,4 +230,4 @@ export function Roles({ server }: Props) {
</div>
</div>
);
}
});