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

feat: port input modals to new system

Browse source
This commit is contained in:
Paul Makles 2022-07-05 17:53:41 +01:00
parent 23dec32476
commit 79c90c1b00
19 changed files with 275 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -73,7 +73,7 @@
"@hcaptcha/react-hcaptcha": "^0.3.6",
"@insertish/vite-plugin-babel-macros": "^1.0.5",
"@preact/preset-vite": "^2.0.0",
"@revoltchat/ui": "1.0.58",
"@revoltchat/ui": "1.0.61",
"@rollup/plugin-replace": "^2.4.2",
"@styled-icons/boxicons-logos": "^10.38.0",
"@styled-icons/boxicons-regular": "^10.38.0",

4
src/components/navigation/left/HomeSidebar.tsx
View file

@ -25,6 +25,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
import placeholderSVG from "../items/placeholder.svg";
import { useClient } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
import ButtonItem, { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
@ -131,8 +132,7 @@ export default observer(() => {
<Text id="app.main.categories.conversations" />
<IconButton
onClick={() =>
openScreen({
id: "special_input",
modalController.push({
type: "create_group",
})
}>

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

@ -7,9 +7,8 @@ import { ServerList } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../controllers/client/ClientController";
import { modalController } from "../../../controllers/modals/ModalController";
/**
* Server list sidebar shim component
@ -17,13 +16,11 @@ import { useClient } from "../../../controllers/client/ClientController";
export default observer(() => {
const client = useClient();
const state = useApplicationState();
const { openScreen } = useIntermediate();
const { server: server_id } = useParams<{ server?: string }>();
const createServer = useCallback(
() =>
openScreen({
id: "special_input",
modalController.push({
type: "create_server",
}),
[],

16
src/components/settings/appearance/ChatOptions.tsx
View file

@ -8,7 +8,21 @@ import { useApplicationState } from "../../../mobx/State";
import { FONTS, Fonts, FONT_KEYS } from "../../../context/Theme";
import { ShimDisplayEmoji } from "../appearance_legacy/Shims";
import { EmojiSelector } from "./legacy/EmojiSelector";
/**
* ! LEGACY
* Component providing a way to change emoji pack.
*/
export const ShimDisplayEmoji = observer(() => {
const settings = useApplicationState().settings;
return (
<EmojiSelector
value={settings.get("appearance:emoji")}
setValue={(v) => settings.set("appearance:emoji", v)}
/>
);
});
export default observer(() => {
const settings = useApplicationState().settings;

90
src/context/intermediate/modals/Input.tsx
View file

@ -93,96 +93,6 @@ export function SpecialInputModal(props: SpecialProps) {
const { onClose } = props;
switch (props.type) {
case "create_group": {
return (
<InputModal
onClose={onClose}
question={<Text id="app.main.groups.create" />}
field={<Text id="app.main.groups.name" />}
callback={async (name) => {
const group = await client.channels.createGroup({
name,
users: [],
});
history.push(`/channel/${group._id}`);
}}
/>
);
}
case "create_server": {
return (
<InputModal
onClose={onClose}
question={<Text id="app.main.servers.create" />}
field={<Text id="app.main.servers.name" />}
description={
<div>
By creating this server, you agree to the{" "}
<a
href="https://revolt.chat/aup"
target="_blank"
rel="noreferrer">
Acceptable Use Policy.
</a>
</div>
}
callback={async (name) => {
const server = await client.servers.createServer({
name,
});
history.push(`/server/${server._id}`);
}}
/>
);
}
case "create_role": {
return (
<InputModal
onClose={onClose}
question={
<Text id="app.settings.permissions.create_role" />
}
field={<Text id="app.settings.permissions.role_name" />}
callback={async (name) => {
const role = await props.server.createRole(name);
props.callback(role.id);
}}
/>
);
}
case "set_custom_status": {
return (
<InputModal
onClose={onClose}
question={<Text id="app.context_menu.set_custom_status" />}
field={<Text id="app.context_menu.custom_status" />}
defaultValue={client.user?.status?.text ?? undefined}
callback={(text) =>
client.users.edit({
status: {
...client.user?.status,
text: text.trim().length > 0 ? text : undefined,
},
})
}
/>
);
}
case "add_friend": {
return (
<InputModal
onClose={onClose}
question={"Add Friend"}
callback={(username) =>
client.api
.post(`/users/friend`, { username })
.then(undefined)
}
/>
);
}
default:
return null;
}

5
src/context/revoltjs/util.tsx
View file

@ -27,6 +27,11 @@ export function takeError(error: any): string {
return "UnknownError";
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function mapError(error: any): never {
throw takeError(error);
}
export function getChannelName(
channel: Channel,
prefixType?: boolean,

10
src/controllers/modals/ModalController.tsx
View file

@ -16,9 +16,14 @@ import { getApplicationState } from "../../mobx/State";
import { history } from "../../context/history";
import { __thisIsAHack } from "../../context/intermediate/Intermediate";
import AddFriend from "./components/AddFriend";
import Changelog from "./components/Changelog";
import ChannelInfo from "./components/ChannelInfo";
import Clipboard from "./components/Clipboard";
import CreateGroup from "./components/CreateGroup";
import CreateRole from "./components/CreateRole";
import CreateServer from "./components/CreateServer";
import CustomStatus from "./components/CustomStatus";
import Error from "./components/Error";
import ImageViewer from "./components/ImageViewer";
import LinkWarning from "./components/LinkWarning";
@ -222,10 +227,15 @@ class ModalControllerExtended extends ModalController<Modal> {
}
export const modalController = new ModalControllerExtended({
add_friend: AddFriend,
changelog: Changelog,
channel_info: ChannelInfo,
clipboard: Clipboard,
create_group: CreateGroup,
create_role: CreateRole,
create_server: CreateServer,
create_bot: CreateBotModal,
custom_status: CustomStatus,
error: Error,
image_viewer: ImageViewer,
link_warning: LinkWarning,

31
src/controllers/modals/components/AddFriend.tsx Normal file
View file

@ -0,0 +1,31 @@
import { ModalForm } from "@revoltchat/ui";
import { noop } from "../../../lib/js";
import { useClient } from "../../client/ClientController";
import { ModalProps } from "../types";
/**
* Add friend modal
*/
export default function AddFriend({ ...props }: ModalProps<"add_friend">) {
const client = useClient();
return (
<ModalForm
{...props}
title="Add Friend"
schema={{
username: "text",
}}
data={{
username: {
field: "Username",
},
}}
callback={({ username }) =>
client.api.post(`/users/friend`, { username }).then(noop)
}
/>
);
}

45
src/controllers/modals/components/CreateGroup.tsx Normal file
View file

@ -0,0 +1,45 @@
import { useHistory } from "react-router-dom";
import { Text } from "preact-i18n";
import { ModalForm } from "@revoltchat/ui";
import { mapError } from "../../../context/revoltjs/util";
import { useClient } from "../../client/ClientController";
import { ModalProps } from "../types";
/**
* Group creation modal
*/
export default function CreateGroup({ ...props }: ModalProps<"create_group">) {
const history = useHistory();
const client = useClient();
return (
<ModalForm
{...props}
title={<Text id="app.main.groups.create" />}
schema={{
name: "text",
}}
data={{
name: {
field: (
<Text id="app.main.groups.name" />
) as React.ReactChild,
},
}}
callback={async ({ name }) => {
const group = await client.channels
.createGroup({
name,
users: [],
})
.catch(mapError);
history.push(`/channel/${group._id}`);
}}
/>
);
}

35
src/controllers/modals/components/CreateRole.tsx Normal file
View file

@ -0,0 +1,35 @@
import { Text } from "preact-i18n";
import { ModalForm } from "@revoltchat/ui";
import { ModalProps } from "../types";
/**
* Role creation modal
*/
export default function CreateRole({
server,
callback,
...props
}: ModalProps<"create_role">) {
return (
<ModalForm
{...props}
title={<Text id="app.settings.permissions.create_role" />}
schema={{
name: "text",
}}
data={{
name: {
field: (
<Text id="app.settings.permissions.role_name" />
) as React.ReactChild,
},
}}
callback={async ({ name }) => {
const role = await server.createRole(name);
callback(role.id);
}}
/>
);
}

57
src/controllers/modals/components/CreateServer.tsx Normal file
View file

@ -0,0 +1,57 @@
import { useHistory } from "react-router-dom";
import { Text } from "preact-i18n";
import { ModalForm } from "@revoltchat/ui";
import { mapError } from "../../../context/revoltjs/util";
import { useClient } from "../../client/ClientController";
import { ModalProps } from "../types";
/**
* Server creation modal
*/
export default function CreateServer({
...props
}: ModalProps<"create_server">) {
const history = useHistory();
const client = useClient();
return (
<ModalForm
{...props}
title={<Text id="app.main.servers.create" />}
description={
<div>
By creating this server, you agree to the{" "}
<a
href="https://revolt.chat/aup"
target="_blank"
rel="noreferrer">
Acceptable Use Policy.
</a>
</div>
}
schema={{
name: "text",
}}
data={{
name: {
field: (
<Text id="app.main.servers.name" />
) as React.ReactChild,
},
}}
callback={async ({ name }) => {
const server = await client.servers
.createServer({
name,
})
.catch(mapError);
history.push(`/server/${server._id}`);
}}
/>
);
}

43
src/controllers/modals/components/CustomStatus.tsx Normal file
View file

@ -0,0 +1,43 @@
import { Text } from "preact-i18n";
import { ModalForm } from "@revoltchat/ui";
import { useClient } from "../../client/ClientController";
import { ModalProps } from "../types";
/**
* Custom status modal
*/
export default function CustomStatus({
...props
}: ModalProps<"custom_status">) {
const client = useClient();
return (
<ModalForm
{...props}
title={<Text id="app.context_menu.set_custom_status" />}
schema={{
text: "text",
}}
defaults={{
text: client.user?.status?.text as string,
}}
data={{
text: {
field: (
<Text id="app.context_menu.custom_status" />
) as React.ReactChild,
},
}}
callback={({ text }) =>
client.users.edit({
status: {
...client.user?.status,
text: text.trim().length > 0 ? text : undefined,
},
})
}
/>
);
}

16
src/controllers/modals/types.ts
View file

@ -3,6 +3,14 @@ import { API, Client, User, Member, Channel, Server } from "revolt.js";
export type Modal = {
key?: string;
} & (
| {
type:
| "signed_out"
| "create_group"
| "create_server"
| "custom_status"
| "add_friend";
}
| ({
type: "mfa_flow";
} & (
@ -69,9 +77,6 @@ export type Modal = {
type: "server_identity";
member: Member;
}
| {
type: "signed_out";
}
| {
type: "channel_info";
channel: Channel;
@ -107,6 +112,11 @@ export type Modal = {
loginAfterSuccess?: true,
) => Promise<void>;
}
| {
type: "create_role";
server: Server;
callback: (id: string) => void;
}
);
export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

5
src/lib/ContextMenus.tsx
View file

@ -368,9 +368,8 @@ export default function ContextMenus() {
break;
case "set_status":
openScreen({
id: "special_input",
type: "set_custom_status",
modalController.push({
type: "custom_status",
});
break;

6
src/pages/friends/Friends.tsx
View file

@ -85,8 +85,7 @@ export default observer(() => {
<Tooltip content={"Create Group"} placement="bottom">
<IconButton
onClick={() =>
openScreen({
id: "special_input",
modalController.push({
type: "create_group",
})
}>
@ -96,8 +95,7 @@ export default observer(() => {
<Tooltip content={"Add Friend"} placement="bottom">
<IconButton
onClick={() =>
openScreen({
id: "special_input",
modalController.push({
type: "add_friend",
})
}>

4
src/pages/home/Home.tsx
View file

@ -29,6 +29,7 @@ import wideSVG from "/assets/wide.svg";
import { PageHeader } from "../../components/ui/Header";
import { useClient } from "../../controllers/client/ClientController";
import { modalController } from "../../controllers/modals/ModalController";
const Overlay = styled.div`
display: grid;
@ -98,8 +99,7 @@ export default observer(() => {
<div className={styles.actions}>
<a
onClick={() =>
openScreen({
id: "special_input",
modalController.push({
type: "create_group",
})
}>

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

@ -347,9 +347,8 @@ export default observer(() => {
<a
className="status"
onClick={() =>
openScreen({
id: "special_input",
type: "set_custom_status",
modalController.push({
type: "custom_status",
})
}>
Change your status...

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

@ -16,10 +16,9 @@ import {
Category,
} from "@revoltchat/ui";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { PermissionList } from "../../../components/settings/roles/PermissionList";
import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
import { modalController } from "../../../controllers/modals/ModalController";
interface Props {
server: Server;
@ -54,18 +53,14 @@ export const Roles = observer(({ server }: Props) => {
// Consolidate all permissions that we can change right now.
const currentRoles = useRoles(server);
// Pull in modal context.
const { openScreen } = useIntermediate();
return (
<PermissionsLayout
server={server}
rank={server.member?.ranking ?? Infinity}
onCreateRole={(callback) =>
openScreen({
id: "special_input",
modalController.push({
type: "create_role",
server: server as any,
server,
callback,
})
}

10
yarn.lock
View file

@ -2231,9 +2231,9 @@ __metadata:
languageName: node
linkType: hard
"@revoltchat/ui@npm:1.0.58":
version: 1.0.58
resolution: "@revoltchat/ui@npm:1.0.58"
"@revoltchat/ui@npm:1.0.61":
version: 1.0.61
resolution: "@revoltchat/ui@npm:1.0.61"
dependencies:
"@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0
@ -2247,7 +2247,7 @@ __metadata:
react-virtuoso: ^2.12.0
peerDependencies:
revolt.js: "*"
checksum: 1ebdb3963c77fbad11427963e27f1be1beb480e80360a59f06a3a2fd2d3f5e335ff33fbb8bf99f533549696848ae1d1db5072ff4d45e98d25c9b1b372f25d795
checksum: 678584f84cb3d43307507058eb434507cb1d201455f9da6618eb1731c6439240ddc16601dc636b5790a83393884770bf4e8fee75d235871f65ba5abcd8f685ac
languageName: node
linkType: hard
@ -3554,7 +3554,7 @@ __metadata:
"@hcaptcha/react-hcaptcha": ^0.3.6
"@insertish/vite-plugin-babel-macros": ^1.0.5
"@preact/preset-vite": ^2.0.0
"@revoltchat/ui": 1.0.58
"@revoltchat/ui": 1.0.61
"@rollup/plugin-replace": ^2.4.2
"@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0