mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
remove unused components
This commit is contained in:
parent
d96ac7304f
commit
cc543e865f
@ -1,204 +0,0 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
import debounce from "lodash/debounce"
|
||||
import { Translation } from "react-i18next"
|
||||
|
||||
import { ActionsBar } from "components"
|
||||
import { Icons } from "components/Icons"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
export const EditAccountField = ({ id, component, props, header, handleChange, delay, defaultValue, allowEmpty }) => {
|
||||
const [currentValue, setCurrentValue] = React.useState(defaultValue)
|
||||
const [emittedValue, setEmittedValue] = React.useState(null)
|
||||
|
||||
const debouncedHandleChange = React.useCallback(
|
||||
debounce((value) => handleChange({ id, value }), delay ?? 300),
|
||||
[],
|
||||
)
|
||||
|
||||
const handleDiscard = (event) => {
|
||||
if (typeof event !== "undefined") {
|
||||
event.target.blur()
|
||||
}
|
||||
|
||||
setCurrentValue(defaultValue)
|
||||
handleChange({ id, value: defaultValue })
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
debouncedHandleChange(currentValue)
|
||||
}, [emittedValue])
|
||||
|
||||
const onChange = (event) => {
|
||||
event.persist()
|
||||
let { value } = event.target
|
||||
|
||||
if (typeof value === "string") {
|
||||
if (value.length === 0) {
|
||||
// if is not allowed to be empty, discard modifications
|
||||
if (!allowEmpty) {
|
||||
return handleDiscard(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentValue(value)
|
||||
setEmittedValue(value)
|
||||
}
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.keyCode === 27) {
|
||||
// "escape" pressed, reset to default value
|
||||
handleDiscard(event)
|
||||
}
|
||||
}
|
||||
|
||||
const RenderComponent = component
|
||||
|
||||
return (
|
||||
<div key={id} className="edit_account_field">
|
||||
{header ? header : null}
|
||||
<RenderComponent {...props} value={currentValue} id={id} onChange={onChange} onKeyDown={handleKeyDown} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default class UserDataManager extends React.Component {
|
||||
state = {
|
||||
data: this.props.user,
|
||||
changes: [],
|
||||
loading: false,
|
||||
}
|
||||
|
||||
api = window.app.cores.api.withEndpoints()
|
||||
|
||||
componentDidMount = async () => {
|
||||
if (!this.props.user && this.props.userId) {
|
||||
// TODO: Fetch from API
|
||||
}
|
||||
}
|
||||
|
||||
handleSave = async () => {
|
||||
if (!Array.isArray(this.state.changes)) {
|
||||
antd.message.error("Something went wrong")
|
||||
console.error("Changes should be an array")
|
||||
return false
|
||||
}
|
||||
|
||||
await this.setState({ loading: true })
|
||||
const update = {}
|
||||
|
||||
this.state.changes.forEach((change) => {
|
||||
update[change.id] = change.value
|
||||
})
|
||||
|
||||
const result = await this.api.post.updateUser({ _id: this.state.data._id, update }).catch((err) => {
|
||||
antd.message.error(err.message)
|
||||
console.error(err)
|
||||
return false
|
||||
})
|
||||
|
||||
await this.setState({ changes: [], loading: false })
|
||||
|
||||
if (typeof this.props.onSave === "function") {
|
||||
await this.props.onSave(this.state.changes)
|
||||
}
|
||||
|
||||
if (result) {
|
||||
if (typeof this.props.handleDone === "function") {
|
||||
this.props.handleDone(result)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (event) => {
|
||||
const { id, value } = event
|
||||
let changes = [...this.state.changes]
|
||||
|
||||
changes = changes.filter((change) => change.id !== id)
|
||||
|
||||
if (this.state.data[id] !== value) {
|
||||
changes.push({ id, value })
|
||||
}
|
||||
|
||||
this.setState({ changes })
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="edit_account">
|
||||
<div className="edit_account_wrapper">
|
||||
<div className="edit_account_category">
|
||||
<h2>
|
||||
<Icons.User /> Account information
|
||||
</h2>
|
||||
<EditAccountField
|
||||
id="username"
|
||||
defaultValue={this.state.data.username}
|
||||
header={
|
||||
<div>
|
||||
<Icons.Tag /> Username
|
||||
</div>
|
||||
}
|
||||
component={antd.Input}
|
||||
props={{
|
||||
placeholder: "Username",
|
||||
disabled: true,
|
||||
}}
|
||||
handleChange={this.handleChange}
|
||||
/>
|
||||
<EditAccountField
|
||||
id="fullName"
|
||||
defaultValue={this.state.data.fullName}
|
||||
header={
|
||||
<div>
|
||||
<Icons.User /> Name
|
||||
</div>
|
||||
}
|
||||
component={antd.Input}
|
||||
props={{
|
||||
placeholder: "Your full name",
|
||||
}}
|
||||
handleChange={this.handleChange}
|
||||
/>
|
||||
<EditAccountField
|
||||
id="email"
|
||||
defaultValue={this.state.data.email}
|
||||
header={
|
||||
<div>
|
||||
<Icons.Mail /> Email
|
||||
</div>
|
||||
}
|
||||
component={antd.Input}
|
||||
props={{
|
||||
placeholder: "Your email address",
|
||||
type: "email",
|
||||
}}
|
||||
handleChange={this.handleChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ActionsBar spaced>
|
||||
<div>
|
||||
{this.state.changes.length} <Translation>
|
||||
{(t) => t("Changes")}
|
||||
</Translation>
|
||||
</div>
|
||||
<div>
|
||||
<antd.Button
|
||||
type="primary"
|
||||
loading={this.state.loading}
|
||||
disabled={this.state.loading}
|
||||
onClick={this.handleSave}
|
||||
>
|
||||
<Translation>
|
||||
{(t) => t("Save")}
|
||||
</Translation>
|
||||
</antd.Button>
|
||||
</div>
|
||||
</ActionsBar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
.edit_account{
|
||||
overflow: hidden!important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.edit_account_wrapper{
|
||||
overflow: scroll;
|
||||
> div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit_account_actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
padding: 20px 0 20px 0;
|
||||
background-color: rgba(221, 221, 221, 0.5);
|
||||
backdrop-filter: blur(2px);
|
||||
--webkit-backdrop-filter: blur(2px);
|
||||
border-radius: 18px 18px 0 0;
|
||||
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit_account_actions_indicator{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.edit_account_category{
|
||||
> div {
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.edit_account_field {
|
||||
input:not(:focus){
|
||||
color:rgba(105, 105, 105, 0.5)
|
||||
}
|
||||
}
|
||||
@ -1,140 +0,0 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
|
||||
import { ActionsBar, UserSelector, Skeleton } from "components"
|
||||
import { Icons } from "components/Icons"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
export default class UserRolesManager extends React.Component {
|
||||
state = {
|
||||
users: null,
|
||||
roles: null,
|
||||
}
|
||||
|
||||
api = window.app.cores.api.withEndpoints()
|
||||
|
||||
componentDidMount = async () => {
|
||||
await this.fetchRoles()
|
||||
|
||||
if (typeof this.props.id !== "undefined") {
|
||||
const ids = Array.isArray(this.props.id) ? this.props.id : [this.props.id]
|
||||
await this.fetchUsersData(ids)
|
||||
}
|
||||
}
|
||||
|
||||
fetchRoles = async () => {
|
||||
const result = await this.api.get.roles().catch((err) => {
|
||||
antd.message.error(err)
|
||||
console.error(err)
|
||||
return false
|
||||
})
|
||||
|
||||
if (result) {
|
||||
this.setState({ roles: result })
|
||||
}
|
||||
}
|
||||
|
||||
fetchUsersData = async (users) => {
|
||||
const result = await this.api.get.users(undefined, { _id: users }).catch((err) => {
|
||||
antd.message.error(err)
|
||||
console.error(err)
|
||||
return false
|
||||
})
|
||||
|
||||
if (result) {
|
||||
this.setState({
|
||||
users: result.map((data) => {
|
||||
return {
|
||||
_id: data._id,
|
||||
username: data.username,
|
||||
roles: data.roles,
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleSelectUser = async (users) => {
|
||||
this.fetchUsersData(users)
|
||||
}
|
||||
|
||||
handleRoleChange = (userId, role, to) => {
|
||||
let updatedUsers = this.state.users.map((user) => {
|
||||
if (user._id === userId) {
|
||||
if (to == true) {
|
||||
user.roles.push(role)
|
||||
} else {
|
||||
user.roles = user.roles.filter((r) => r !== role)
|
||||
}
|
||||
}
|
||||
|
||||
return user
|
||||
})
|
||||
|
||||
this.setState({ users: updatedUsers })
|
||||
}
|
||||
|
||||
handleSubmit = async () => {
|
||||
const update = this.state.users.map((data) => {
|
||||
return {
|
||||
_id: data._id,
|
||||
roles: data.roles,
|
||||
}
|
||||
})
|
||||
|
||||
const result = await this.api.post.updateUserRoles({ update }).catch((err) => {
|
||||
antd.message.error(err)
|
||||
console.error(err)
|
||||
return false
|
||||
})
|
||||
|
||||
if (result) {
|
||||
this.props.handleDone(result)
|
||||
if (typeof this.props.close === "function") {
|
||||
this.props.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderItem = (item) => {
|
||||
return <div className="grantRoles_user">
|
||||
<h2>
|
||||
<Icons.User /> {item.username}
|
||||
</h2>
|
||||
<div className="roles">
|
||||
{this.state.roles.map((role) => {
|
||||
return <antd.Checkbox
|
||||
key={role.name}
|
||||
checked={item.roles.includes(role.name)}
|
||||
onChange={(to) => this.handleRoleChange(item._id, role.name, to.target.checked)}
|
||||
>
|
||||
{role.name}
|
||||
</antd.Checkbox>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
render() {
|
||||
const { users } = this.state
|
||||
|
||||
if (!users) {
|
||||
return <UserSelector handleDone={this.handleSelectUser} />
|
||||
}
|
||||
|
||||
return <div>
|
||||
{users.map((data) => {
|
||||
return this.renderItem(data)
|
||||
})}
|
||||
|
||||
<ActionsBar>
|
||||
<div>
|
||||
<antd.Button icon={<Icons.Save />} onClick={() => this.handleSubmit()}>
|
||||
Submit
|
||||
</antd.Button>
|
||||
</div>
|
||||
</ActionsBar>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.grantRoles_user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.roles {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
import UserDataManager from "./UserDataManager"
|
||||
import UserRolesManager from "./UserRolesManager"
|
||||
|
||||
export { UserDataManager, UserRolesManager }
|
||||
|
||||
export const open = {
|
||||
dataManager: (user) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.app.DrawerController.open("UserDataManager", UserDataManager, {
|
||||
componentProps: {
|
||||
user: user,
|
||||
},
|
||||
onDone: (ctx, value) => {
|
||||
resolve(value)
|
||||
ctx.close()
|
||||
},
|
||||
onFail: (ctx, value) => {
|
||||
reject(value)
|
||||
ctx.close()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
rolesManager: (id) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
window.app.DrawerController.open("UserRolesManager", UserRolesManager, {
|
||||
componentProps: {
|
||||
id: id,
|
||||
},
|
||||
onDone: (ctx, value) => {
|
||||
resolve(value)
|
||||
ctx.close()
|
||||
},
|
||||
onFail: (ctx, value) => {
|
||||
reject(value)
|
||||
ctx.close()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,33 @@
|
||||
import * as Layout from "./Layout"
|
||||
export { default as Footer } from "./Footer"
|
||||
|
||||
export { default as Clock } from "./Clock"
|
||||
|
||||
export { default as RenderError } from "./RenderError"
|
||||
export { default as NotFound } from "./NotFound"
|
||||
export * as Crash from "./Crash"
|
||||
|
||||
export { default as UserRegister } from "./UserRegister"
|
||||
export { default as Login } from "./Login"
|
||||
|
||||
// COMPLEX COMPONENTS
|
||||
export { default as FormGenerator } from "./FormGenerator"
|
||||
export { default as NotFound } from "./NotFound"
|
||||
export { default as RenderError } from "./RenderError"
|
||||
export { default as ActionsBar } from "./ActionsBar"
|
||||
export { default as SelectableList } from "./SelectableList"
|
||||
export { default as ObjectInspector } from "./ObjectInspector"
|
||||
export { default as ModifierTag } from "./ModifierTag"
|
||||
export { default as UserSelector } from "./UserSelector"
|
||||
export { default as Clock } from "./Clock"
|
||||
export { default as StepsForm } from "./StepsForm"
|
||||
export { default as DraggableDrawer } from "./DraggableDrawer"
|
||||
export * as Crash from "./Crash"
|
||||
export { default as SearchButton } from "./SearchButton"
|
||||
export { default as UserRegister } from "./UserRegister"
|
||||
export { default as Skeleton } from "./Skeleton"
|
||||
export { default as Navigation } from "./Navigation"
|
||||
export { default as ImageUploader } from "./ImageUploader"
|
||||
export { default as ImageViewer } from "./ImageViewer"
|
||||
export { default as Login } from "./Login"
|
||||
export { default as Image } from "./Image"
|
||||
export { default as LoadMore } from "./LoadMore"
|
||||
export { default as EmbbededMediaPlayer } from "./EmbbededMediaPlayer"
|
||||
export { default as HashtagTrendings } from "./HashtagTrendings"
|
||||
export { default as Searcher } from "./Searcher"
|
||||
export { default as UserPreview } from "./UserPreview"
|
||||
|
||||
export { default as FeaturedEventAnnouncement } from "./FeaturedEventAnnouncement"
|
||||
export { default as FeaturedEventsAnnouncements } from "./FeaturedEventsAnnouncements"
|
||||
@ -55,9 +56,10 @@ export { default as UserBadges } from "./UserBadges"
|
||||
export { default as UserCard } from "./UserCard"
|
||||
export { default as FollowersList } from "./FollowersList"
|
||||
export { default as ConnectedFriends } from "./ConnectedFriends"
|
||||
export { default as UserSelector } from "./UserSelector"
|
||||
export { default as UserPreview } from "./UserPreview"
|
||||
|
||||
// OTHERS
|
||||
export * as AdminTools from "./AdminTools"
|
||||
export * as Window from "./RenderWindow"
|
||||
|
||||
export { Layout }
|
||||
Loading…
x
Reference in New Issue
Block a user