Browse Source

Create ban dialog component, refactor forms

main
GreatBearShark 2 years ago
parent
commit
d239cf882f
  1. 1
      package.json
  2. 90
      src/components/Dialog.tsx
  3. 140
      src/components/user.tsx
  4. 27
      src/custom.css
  5. 51
      yarn.lock

1
package.json

@ -17,6 +17,7 @@
"@pika/react": "^16.13.1",
"@pika/react-dom": "^16.13.1",
"@reach/combobox": "^0.10.5",
"@reach/dialog": "^0.11.2",
"@reach/menu-button": "^0.10.5",
"@reach/portal": "^0.11.2",
"@reach/tabs": "^0.11.2",

90
src/components/Dialog.tsx

@ -0,0 +1,90 @@
import React, { useState } from 'react';
import {
Dialog as ReachDialog,
DialogOverlay as ReachDialogOverlay,
DialogContent as ReachDialogContent,
} from '@reach/dialog';
// import '@reach/dialog/styles.css';
import { Box, Flex, Input, useThemeUI } from 'theme-ui';
import Button from './elements/Button';
import Block from './elements/Block';
export const Dialog = props => {
const { theme } = useThemeUI();
return (
<Block
as={ReachDialog}
bg={theme.colors.background}
borderRadius="6px"
{...props}
/>
);
};
export const DialogOverlay = props => (
<Box as={ReachDialogOverlay} {...props} />
);
export const DialogContent = props => {
const { theme } = useThemeUI();
return (
<Box
css={{ background: theme.colors.background, borderRadius: '6px' }}
bg="background"
as={ReachDialogContent}
{...props}
/>
);
};
export enum BanDialogActions {
Ban = 'Ban',
Unban = 'Unban',
}
interface BanDialogProps {
onSubmit: (string) => void;
// value: string;
// onChange: (any) => void;
isOpen: boolean;
onClose: () => void;
action: BanDialogActions;
}
export const BanDialog = React.memo(
({ isOpen, onSubmit, onClose, action }: BanDialogProps) => {
const [value, setValue] = useState('');
console.log({ isOpen, action });
function handleChange(e) {
setValue(e.target.value);
}
return (
<Dialog isOpen={isOpen} onDismiss={onClose}>
<Block
as="form"
display="flex"
flexDirection={['column', 'column', 'row']}
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
onSubmit(value);
}}
>
<Input
value={value}
// onChange={onChange}
onChange={handleChange}
placeholder="Ban Reason"
autoFocus
/>
<Button ml={[0, 0, 2]} mt={[2, 2, 0]} px={4} type="submit">
{BanDialogActions[action]}
</Button>
</Block>
</Dialog>
);
}
);

140
src/components/user.tsx

@ -57,6 +57,7 @@ import { Tabs } from '@reach/tabs';
import { Tab, TabList, TabPanel, TabPanels } from './Tabs';
import Header, { Separator } from './Header';
import { Menu, MenuList, MenuButton, MenuItem, MenuLink } from './MenuButton';
import { BanDialog, BanDialogActions } from './Dialog';
// import { Button } from 'theme-ui';
// import { changeTheme } from './ThemeSystemProvider';
@ -306,9 +307,34 @@ class BaseUser extends Component<any, UserState> {
<Icon name="more" />
</MenuButton>
<MenuList>
<MenuItem>Ban From Site</MenuItem>
<MenuItem>Ban From My Communities</MenuItem>
<MenuItem>Unban From My Communities</MenuItem>
{(this.canAdmin || this.canSitemod) &&
this.state.user.banned && (
<MenuItem
onClick={linkEvent(this, this.handleSiteBanUserShow)}
>
Unban From Site
</MenuItem>
)}
{(this.canAdmin || this.canSitemod) &&
!this.state.user.banned && (
<MenuItem
onClick={linkEvent(this, this.handleSiteBanUserShow)}
>
Ban From Site
</MenuItem>
)}
{this.isModerator() && (
<MenuItem
onClick={linkEvent(this, this.handleBanUserShow)}
>
{i18n.t('ban_from_my_communities')}
</MenuItem>
)}
{this.isModerator() && (
<MenuItem onClick={linkEvent(this, this.handleUnban)}>
Unban from my communities
</MenuItem>
)}
</MenuList>
</Menu>
)}
@ -1001,7 +1027,13 @@ class BaseUser extends Component<any, UserState> {
Unban from my communities
</Button>
)}
{this.state.banUserShow && (
<BanDialog
isOpen={this.state.banUserShow}
onSubmit={this.handleBan}
onClose={this.handleCloseBanDialog}
action={BanDialogActions.Ban}
/>
{/* {this.state.banUserShow && (
<form onSubmit={linkEvent(this, this.handleBan)}>
<div
style={{
@ -1018,8 +1050,22 @@ class BaseUser extends Component<any, UserState> {
</Button>
</div>
</form>
)}
{this.state.siteBanUserShow && (
)} */}
<BanDialog
isOpen={this.state.siteBanUserShow}
onSubmit={banReason =>
this.state.user.banned
? this.handleSiteUnban(banReason)
: this.handleSiteBan(banReason)
}
onClose={this.handleCloseBanDialog}
action={
this.state.user.banned
? BanDialogActions.Unban
: BanDialogActions.Ban
}
/>
{/* {this.state.siteBanUserShow && (
<form
onSubmit={linkEvent(
this,
@ -1046,7 +1092,7 @@ class BaseUser extends Component<any, UserState> {
</Button>
</div>
</form>
)}
)} */}
</Flex>
</Card>
</div>
@ -1357,70 +1403,82 @@ class BaseUser extends Component<any, UserState> {
i.setState(i.state);
}
handleBanReasonChange(i: BaseUser, event: any) {
i.state.banReason = event.target.value;
i.setState(i.state);
}
handleCloseBanDialog = () => {
this.setState({ siteBanUserShow: false, banUserShow: false });
};
handleSiteUnban(i: BaseUser, event: any) {
handleBanReasonChange = (event: any) => {
this.setState({ banReason: event.target.value });
};
handleSiteUnban = banReason => {
event.preventDefault();
if (i.canAdmin || i.canSitemod) {
if (this.canAdmin || this.canSitemod) {
const form: BanUserForm = {
user_id: i.state.user.id,
user_id: this.state.user.id,
ban: false,
reason: i.state.banReason,
reason: banReason,
};
WebSocketService.Instance.banUser(form);
}
i.state.banReason = null;
i.state.siteBanUserShow = false;
i.state.user.banned = false;
i.setState(i.state);
}
this.setState({
banReason: null,
siteBanUserShow: false,
user: {
...this.state.user,
banned: false,
},
});
};
handleSiteBan(i: BaseUser, event: any) {
handleSiteBan = banReason => {
event.preventDefault();
if (i.canAdmin || i.canSitemod) {
if (this.canAdmin || this.canSitemod) {
const form: BanUserForm = {
user_id: i.state.user.id,
user_id: this.state.user.id,
ban: true,
reason: i.state.banReason,
reason: banReason,
};
WebSocketService.Instance.banUser(form);
}
i.state.banReason = null;
i.state.siteBanUserShow = false;
i.state.user.banned = true;
// this.state.banReason = null;
// this.state.siteBanUserShow = false;
// this.state.user.banned = true;
i.setState(i.state);
}
this.setState({
banReason: null,
siteBanUserShow: false,
user: {
...this.state.user,
banned: true,
},
});
};
handleBan(i: BaseUser, event: any) {
event.preventDefault();
if (i.isModerator()) {
handleBan = banReason => {
if (this.isModerator()) {
const communityIds = getAllUserModeratedCommunities({
siteModerators: i.state.siteModerators,
siteModerators: this.state.siteModerators,
moderatorId: UserService.Instance.user.id,
});
communityIds.forEach(communityId => {
WebSocketService.Instance.banFromCommunity({
community_id: communityId,
user_id: i.state.user.id,
user_id: this.state.user.id,
ban: true,
reason: i.state.banReason,
reason: banReason,
});
});
}
i.state.banReason = null;
i.state.banUserShow = false;
i.setState(i.state);
}
this.setState({
banReason: null,
banUserShow: false,
});
};
handleUnban(i: BaseUser, event: any) {
event.preventDefault();

27
src/custom.css

@ -977,4 +977,29 @@ a:hover {
.icon-emoji {
width: 2em;
height: auto;
}
}
/* This code is subject to LICENSE in root of this repository */
/* Used to detect in JavaScript if apps have loaded styles or not. */
:root {
--reach-dialog: 1;
}
[data-reach-dialog-overlay] {
background: hsla(0, 0%, 0%, 0.33);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
[data-reach-dialog-content] {
max-width: 500px;
margin: 10vh auto;
/* background: white; */
padding: 2rem;
outline: none;
}

51
yarn.lock

@ -1784,6 +1784,18 @@
"@reach/utils" "0.11.2"
tslib "^2.0.0"
"@reach/[email protected]^0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.11.2.tgz#44d99b4918cb211d4458f7cce3bee01c27c9c8ed"
integrity sha512-S3o+FbaiWDgjo6vrHWOGlHSnJRsnmLvh6u8auLu+/g4LBDcxW89zJFITLIvZxMHKHBuBG7q7bd7aSecSoKtcjA==
dependencies:
"@reach/portal" "0.11.2"
"@reach/utils" "0.11.2"
prop-types "^15.7.2"
react-focus-lock "^2.3.1"
react-remove-scroll "^2.3.0"
tslib "^2.0.0"
"@reach/[email protected]^0.10.5":
version "0.10.5"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.10.5.tgz#b023044fa199bc256572830740049a50fea1d690"
@ -7836,6 +7848,11 @@ [email protected]^2.0.1:
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
[email protected]^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
[email protected]^3.0.0:
version "3.0.2"
resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@ -12379,7 +12396,7 @@ [email protected]^3.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
[email protected]^2.1.0:
[email protected]^2.1.0, [email protected]^2.3.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f"
integrity sha512-c5ZP56KSpj9EAxzScTqQO7bQQNPltf/W1ZEBDqNDOV1XOIwvAyHX0O7db9ekiAtxyKgnqZjQlLppVg94fUeL9w==
@ -12453,6 +12470,25 @@ [email protected]^0.8.2:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
[email protected]^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9"
integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g==
dependencies:
react-style-singleton "^2.1.0"
tslib "^1.0.0"
[email protected]^2.3.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.0.tgz#190c16eb508c5927595935499e8f5dd9ab0e75cf"
integrity sha512-BZIO3GaEs0Or1OhA5C//n1ibUP1HdjJmqUVUsOCMxwoIpaCocbB9TFKwHOkBa/nyYy3slirqXeiPYGwdSDiseA==
dependencies:
react-remove-scroll-bar "^2.1.0"
react-style-singleton "^2.1.0"
tslib "^1.0.0"
use-callback-ref "^1.2.3"
use-sidecar "^1.0.1"
[email protected]^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@ -12492,6 +12528,15 @@ [email protected]^2.6.7:
shallowequal "^1.1.0"
throttle-debounce "^2.1.0"
[email protected]^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"
integrity sha512-DH4ED+YABC1dhvSDYGGreAHmfuTXj6+ezT3CmHoqIEfxNgEYfIMoOtmbRp42JsUst3IPqBTDL+8r4TF7EWhIHw==
dependencies:
get-nonce "^1.0.0"
invariant "^2.2.4"
tslib "^1.0.0"
[email protected]^11.0.2:
version "11.0.2"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
@ -14420,7 +14465,7 @@ [email protected]^3.9.0:
minimist "^1.2.0"
strip-bom "^3.0.0"
[email protected]^1.10.0, [email protected]^1.8.1, [email protected]^1.9.0, [email protected]^1.9.3:
[email protected]^1.0.0, [email protected]^1.10.0, [email protected]^1.8.1, [email protected]^1.9.0, [email protected]^1.9.3:
version "1.13.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
@ -14682,7 +14727,7 @@ [email protected]^0.11.0:
punycode "1.3.2"
querystring "0.2.0"
[email protected]^1.2.1:
[email protected]^1.2.1, [email protected]^1.2.3:
version "1.2.4"
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c"
integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ==

Loading…
Cancel
Save