RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 19:14:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove unused components

Browse Source
This commit is contained in:
SrGooglo 2023-04-26 23:09:32 +00:00
parent d96ac7304f
commit cc543e865f
6 changed files with 11 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
packages/app/src/components/AdminTools/UserDataManager/index.jsx
View File

@ -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>
)
}
}

61
packages/app/src/components/AdminTools/UserDataManager/index.less
View File

@ -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)
}
}

140
packages/app/src/components/AdminTools/UserRolesManager/index.jsx
View File

@ -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>
}
}

19
packages/app/src/components/AdminTools/UserRolesManager/index.less
View File

@ -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;
}
}

41
packages/app/src/components/AdminTools/index.js
View File

@ -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()
}
})
})
}
}

20
packages/app/src/components/index.js
View File

@ -1,32 +1,33 @@
import * as Layout from "./Layout" import * as Layout from "./Layout"
export { default as Footer } from "./Footer" 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 // COMPLEX COMPONENTS
export { default as FormGenerator } from "./FormGenerator" 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 ActionsBar } from "./ActionsBar"
export { default as SelectableList } from "./SelectableList" export { default as SelectableList } from "./SelectableList"
export { default as ObjectInspector } from "./ObjectInspector" export { default as ObjectInspector } from "./ObjectInspector"
export { default as ModifierTag } from "./ModifierTag" 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 StepsForm } from "./StepsForm"
export { default as DraggableDrawer } from "./DraggableDrawer" export { default as DraggableDrawer } from "./DraggableDrawer"
export * as Crash from "./Crash"
export { default as SearchButton } from "./SearchButton" export { default as SearchButton } from "./SearchButton"
export { default as UserRegister } from "./UserRegister"
export { default as Skeleton } from "./Skeleton" export { default as Skeleton } from "./Skeleton"
export { default as Navigation } from "./Navigation" export { default as Navigation } from "./Navigation"
export { default as ImageUploader } from "./ImageUploader" export { default as ImageUploader } from "./ImageUploader"
export { default as ImageViewer } from "./ImageViewer" export { default as ImageViewer } from "./ImageViewer"
export { default as Login } from "./Login"
export { default as Image } from "./Image" export { default as Image } from "./Image"
export { default as LoadMore } from "./LoadMore" export { default as LoadMore } from "./LoadMore"
export { default as EmbbededMediaPlayer } from "./EmbbededMediaPlayer" export { default as EmbbededMediaPlayer } from "./EmbbededMediaPlayer"
export { default as HashtagTrendings } from "./HashtagTrendings" export { default as HashtagTrendings } from "./HashtagTrendings"
export { default as Searcher } from "./Searcher" export { default as Searcher } from "./Searcher"
export { default as UserPreview } from "./UserPreview"
export { default as FeaturedEventAnnouncement } from "./FeaturedEventAnnouncement" export { default as FeaturedEventAnnouncement } from "./FeaturedEventAnnouncement"
export { default as FeaturedEventsAnnouncements } from "./FeaturedEventsAnnouncements" 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 UserCard } from "./UserCard"
export { default as FollowersList } from "./FollowersList" export { default as FollowersList } from "./FollowersList"
export { default as ConnectedFriends } from "./ConnectedFriends" export { default as ConnectedFriends } from "./ConnectedFriends"
export { default as UserSelector } from "./UserSelector"
export { default as UserPreview } from "./UserPreview"
// OTHERS // OTHERS
export * as AdminTools from "./AdminTools"
export * as Window from "./RenderWindow" export * as Window from "./RenderWindow"
export { Layout } export { Layout }