From 03e177f86544393ae1c5b1b3dc05cda101369a6a Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sat, 18 Jun 2022 15:54:17 +0100 Subject: [PATCH] feat(modal): implement new server identity modal closes #172 --- package.json | 2 +- src/context/intermediate/Intermediate.tsx | 11 +- src/context/intermediate/Popovers.tsx | 6 - .../popovers/ServerIdentityModal.module.scss | 17 --- .../popovers/ServerIdentityModal.tsx | 106 -------------- .../modals/components/ServerIdentity.tsx | 138 ++++++++++++++++++ src/context/modals/index.tsx | 2 + src/context/modals/types.ts | 6 +- src/context/revoltjs/FileUploads.tsx | 4 +- src/lib/ContextMenus.tsx | 14 +- yarn.lock | 10 +- 11 files changed, 171 insertions(+), 145 deletions(-) delete mode 100644 src/context/intermediate/popovers/ServerIdentityModal.module.scss delete mode 100644 src/context/intermediate/popovers/ServerIdentityModal.tsx create mode 100644 src/context/modals/components/ServerIdentity.tsx diff --git a/package.json b/package.json index 21f82367..3e24f4d0 100644 --- a/package.json +++ b/package.json @@ -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.43", + "@revoltchat/ui": "1.0.45", "@rollup/plugin-replace": "^2.4.2", "@styled-icons/boxicons-logos": "^10.38.0", "@styled-icons/boxicons-regular": "^10.38.0", diff --git a/src/context/intermediate/Intermediate.tsx b/src/context/intermediate/Intermediate.tsx index bfc96235..3b20ff0c 100644 --- a/src/context/intermediate/Intermediate.tsx +++ b/src/context/intermediate/Intermediate.tsx @@ -3,7 +3,13 @@ import { useHistory } from "react-router-dom"; import { API, Channel, Message, Server, User } from "revolt.js"; import { createContext } from "preact"; -import { useContext, useEffect, useMemo, useState } from "preact/hooks"; +import { + StateUpdater, + useContext, + useEffect, + useMemo, + useState, +} from "preact/hooks"; import type { Action } from "@revoltchat/ui/esm/components/design/atoms/display/Modal"; @@ -128,12 +134,11 @@ interface Props { children: Children; } -export let __thisIsAHack; +export let __thisIsAHack: StateUpdater; export default function Intermediate(props: Props) { const [screen, openScreen] = useState({ id: "none" }); __thisIsAHack = openScreen; - const settings = useApplicationState().settings; const history = useHistory(); const value = { diff --git a/src/context/intermediate/Popovers.tsx b/src/context/intermediate/Popovers.tsx index 4d6dc501..f5d8f347 100644 --- a/src/context/intermediate/Popovers.tsx +++ b/src/context/intermediate/Popovers.tsx @@ -1,14 +1,11 @@ import { useContext } from "preact/hooks"; -import { internalEmit } from "../../lib/eventEmitter"; - import { IntermediateContext, useIntermediate } from "./Intermediate"; import { SpecialInputModal } from "./modals/Input"; import { SpecialPromptModal } from "./modals/Prompt"; import { ChannelInfo } from "./popovers/ChannelInfo"; import { CreateBotModal } from "./popovers/CreateBot"; import { ImageViewer } from "./popovers/ImageViewer"; -import { ServerIdentityModal } from "./popovers/ServerIdentityModal"; import { UserPicker } from "./popovers/UserPicker"; import { UserProfile } from "./popovers/UserProfile"; @@ -42,9 +39,6 @@ export default function Popovers() { case "special_input": // @ts-expect-error someone figure this out :) return ; - case "server_identity": - // @ts-expect-error someone figure this out :) - return ; } return null; diff --git a/src/context/intermediate/popovers/ServerIdentityModal.module.scss b/src/context/intermediate/popovers/ServerIdentityModal.module.scss deleted file mode 100644 index f88aed03..00000000 --- a/src/context/intermediate/popovers/ServerIdentityModal.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -.identityMain { - display: flex; - flex-direction: row; - gap: 10px; - - > div { - display: flex; - flex-direction: column; - gap: 10px; - } - - .buttons { - display: flex; - flex-direction: row; - gap: 10px; - } -} diff --git a/src/context/intermediate/popovers/ServerIdentityModal.tsx b/src/context/intermediate/popovers/ServerIdentityModal.tsx deleted file mode 100644 index 1ec953d9..00000000 --- a/src/context/intermediate/popovers/ServerIdentityModal.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { observer } from "mobx-react-lite"; -import { Server } from "revolt.js"; - -import styles from "./ServerIdentityModal.module.scss"; -import { Text } from "preact-i18n"; -import { useEffect, useState } from "preact/hooks"; - -import { Button, Category, InputBox, Modal } from "@revoltchat/ui"; - -import { noop } from "../../../lib/js"; - -import { FileUploader } from "../../revoltjs/FileUploads"; -import { useClient } from "../../revoltjs/RevoltClient"; - -interface Props { - server: Server; - onClose: () => void; -} - -export const ServerIdentityModal = observer(({ server, onClose }: Props) => { - const client = useClient(); - const member = client.members.getKey({ - server: server._id, - user: client.user!._id, - }); - - if (!member) return null; - - const [nickname, setNickname] = useState(""); - const [currentNickname, setCurrentNickname] = useState(""); - useEffect(() => { - setNickname(member.nickname ?? ""); - setCurrentNickname(member.nickname ?? ""); - }, [member.nickname]); - - return ( - - } - onClose={onClose}> -
-
- - - - - member.edit({ avatar }).then(noop) - } - remove={() => - member.edit({ remove: ["Avatar"] }).then(noop) - } - defaultPreview={client.user?.generateAvatarURL( - { - max_side: 256, - }, - false, - )} - previewURL={client.generateFileURL( - member.avatar ?? undefined, - { max_side: 256 }, - true, - )} - desaturateDefault - /> -
-
- - - - setNickname(e.currentTarget.value)} - /> -
- - {currentNickname !== "" && ( - - )} -
-
-
- - ); -}); diff --git a/src/context/modals/components/ServerIdentity.tsx b/src/context/modals/components/ServerIdentity.tsx new file mode 100644 index 00000000..50c923ce --- /dev/null +++ b/src/context/modals/components/ServerIdentity.tsx @@ -0,0 +1,138 @@ +import { X } from "@styled-icons/boxicons-regular"; +import { Save } from "@styled-icons/boxicons-solid"; +import { observer } from "mobx-react-lite"; +import styled from "styled-components"; + +import { Text } from "preact-i18n"; +import { useMemo, useState } from "preact/hooks"; + +import { + Button, + Category, + Centred, + Column, + InputBox, + Modal, + Row, + Message, +} from "@revoltchat/ui"; + +import { noop } from "../../../lib/js"; + +import { FileUploader } from "../../revoltjs/FileUploads"; +import { ModalProps } from "../types"; + +const Preview = styled(Centred)` + flex-grow: 1; + border-radius: var(--border-radius); + background: var(--secondary-background); + + > div { + padding: 0; + } +`; + +export default observer( + ({ member, ...props }: ModalProps<"server_identity">) => { + const [nickname, setNickname] = useState(member.nickname ?? ""); + + const message: any = useMemo(() => { + return { + author: member.user!, + member: { + ...member, + nickname, + }, + }; + }, []); + + return ( + + }> + + + + + + + + setNickname(e.currentTarget.value) + } + /> + + + + + + + + + + + member.edit({ avatar }).then(noop) + } + remove={() => + member + .edit({ remove: ["Avatar"] }) + .then(noop) + } + defaultPreview={member.user?.generateAvatarURL( + { + max_side: 256, + }, + false, + )} + previewURL={member.client.generateFileURL( + member.avatar ?? undefined, + { max_side: 256 }, + true, + )} + desaturateDefault + /> + + + Preview + + + + + + + + ); + }, +); diff --git a/src/context/modals/index.tsx b/src/context/modals/index.tsx index 6f9c06a8..c2c062d0 100644 --- a/src/context/modals/index.tsx +++ b/src/context/modals/index.tsx @@ -25,6 +25,7 @@ import MFARecovery from "./components/MFARecovery"; import ModifyAccount from "./components/ModifyAccount"; import OutOfDate from "./components/OutOfDate"; import PendingFriendRequests from "./components/PendingFriendRequests"; +import ServerIdentity from "./components/ServerIdentity"; import ShowToken from "./components/ShowToken"; import SignOutSessions from "./components/SignOutSessions"; import SignedOut from "./components/SignedOut"; @@ -211,6 +212,7 @@ export const modalController = new ModalControllerExtended({ modify_account: ModifyAccount, out_of_date: OutOfDate, pending_friend_requests: PendingFriendRequests, + server_identity: ServerIdentity, show_token: ShowToken, signed_out: SignedOut, sign_out_sessions: SignOutSessions, diff --git a/src/context/modals/types.ts b/src/context/modals/types.ts index d9ca14b0..d95297ac 100644 --- a/src/context/modals/types.ts +++ b/src/context/modals/types.ts @@ -1,4 +1,4 @@ -import { API, Client, User } from "revolt.js"; +import { API, Client, User, Member } from "revolt.js"; export type Modal = { key?: string; @@ -65,6 +65,10 @@ export type Modal = { client: Client; field: "username" | "email" | "password"; } + | { + type: "server_identity"; + member: Member; + } | { type: "signed_out"; } diff --git a/src/context/revoltjs/FileUploads.tsx b/src/context/revoltjs/FileUploads.tsx index 16ec2792..63c24928 100644 --- a/src/context/revoltjs/FileUploads.tsx +++ b/src/context/revoltjs/FileUploads.tsx @@ -11,6 +11,8 @@ import { IconButton, Preloader } from "@revoltchat/ui"; import { determineFileSize } from "../../lib/fileSize"; +import { useApplicationState } from "../../mobx/State"; + import { useIntermediate } from "../intermediate/Intermediate"; import { modalController } from "../modals"; import { AppContext } from "./RevoltClient"; @@ -113,7 +115,7 @@ export function grabFiles( export function FileUploader(props: Props) { const { fileType, maxFileSize, remove } = props; const { openScreen } = useIntermediate(); - const client = useContext(AppContext); + const client = useApplicationState().client!; const [uploading, setUploading] = useState(false); diff --git a/src/lib/ContextMenus.tsx b/src/lib/ContextMenus.tsx index 7ca44ae7..5028bddd 100644 --- a/src/lib/ContextMenus.tsx +++ b/src/lib/ContextMenus.tsx @@ -10,6 +10,7 @@ import { API, Permission, UserPermission, + Member, } from "revolt.js"; import { @@ -101,7 +102,7 @@ type Action = | { action: "close_dm"; target: Channel } | { action: "leave_server"; target: Server } | { action: "delete_server"; target: Server } - | { action: "edit_identity"; target: Server } + | { action: "edit_identity"; target: Member } | { action: "open_notification_options"; channel?: Channel; @@ -399,9 +400,9 @@ export default function ContextMenus() { break; case "edit_identity": - openScreen({ - id: "server_identity", - server: data.target, + modalController.push({ + type: "server_identity", + member: data.target, }); break; @@ -952,7 +953,10 @@ export default function ContextMenus() { serverPermissions & Permission.ChangeAvatar ) generateAction( - { action: "edit_identity", target: server }, + { + action: "edit_identity", + target: server.member!, + }, "edit_identity", ); diff --git a/yarn.lock b/yarn.lock index 5a43c7b5..e99ce654 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2231,9 +2231,9 @@ __metadata: languageName: node linkType: hard -"@revoltchat/ui@npm:1.0.43": - version: 1.0.43 - resolution: "@revoltchat/ui@npm:1.0.43" +"@revoltchat/ui@npm:1.0.45": + version: 1.0.45 + resolution: "@revoltchat/ui@npm:1.0.45" dependencies: "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0 @@ -2246,7 +2246,7 @@ __metadata: react-device-detect: "*" react-virtuoso: "*" revolt.js: "*" - checksum: d6a6d0cb4a2f08fea45a4d61e5599894012fbb591472ef95d34ee8ddc9e66cfdc7626e94360b7c104e59d3c64a7d0bd674d6a42f5c3cefc723574db8c1aee64e + checksum: 3a4eef546b1ad941dfd47381705b5121b06e8f6781699813fd3ac9a4d559470e2a720af6123cbea7ad4d5d24a7805ebd9c1f384f7a09d2eb73ff83daf69e6a1c languageName: node linkType: hard @@ -3539,7 +3539,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.43 + "@revoltchat/ui": 1.0.45 "@rollup/plugin-replace": ^2.4.2 "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0