Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev #27

Merged
merged 2 commits into from
Dec 16, 2024
Merged

Dev #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d0ce59
Mobile app - Fix resubscription
1aerostorm Dec 14, 2024
bb8e09b
Private groups - Tabs instead of checkboxes
1aerostorm Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 20 additions & 14 deletions src/components/elements/MarkNotificationRead.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,21 @@ class MarkNotificationRead extends React.Component {
};

shouldComponentUpdate(nextProps) {
if (this.props.interval !== nextProps.interval) {
if (this.props.interval !== nextProps.interval ||
this.props.fields !== nextProps.fields) {
return true
}
return false;
}

_markIt = () => {
const { account, update } = this.props
markNotificationRead(account, this.fields_array).then(nc => update(nc))
}

_activateInterval = (interval) => {
if (!this.interval) {
const { account, update } = this.props;
this.interval = setInterval(() => {
markNotificationRead(account, this.fields_array).then(nc => update(nc));
}, interval);
this.interval = setInterval(this._markIt, interval)
}
}

Expand All @@ -38,23 +41,26 @@ class MarkNotificationRead extends React.Component {
}

componentDidMount() {
const { account, fields, update, interval, delay } = this.props;
this.fields_array = fields.replace(/\s/g,'').split(',');
const firstMark = () => {
markNotificationRead(account, this.fields_array).then(nc => update(nc))
}
const { fields, interval, delay } = this.props;
this.fields_array = fields.replace(/\s/g,'').split(',')
if (delay) {
setTimeout(firstMark, delay)
setTimeout(this._markIt, delay)
}
if (interval) {
this._activateInterval(interval);
} else if (!delay) {
firstMark()
this._markIt()
}
}

componentDidUpdate() {
const { interval } = this.props
componentDidUpdate(prevProps) {
const { interval, delay, fields } = this.props
if (prevProps.fields !== fields) {
this.fields_array = fields.replace(/\s/g,'').split(',')
if (delay) {
setTimeout(this._markIt, delay)
}
}
if (interval) {
this._activateInterval(interval);
} else {
Expand Down
2 changes: 1 addition & 1 deletion src/components/modules/MessagesTopCenter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ class MessagesTopCenter extends React.Component {
btnType = 'join'
} else if (isModer) {
myStatus = tt('msgs_group_dropdown.moder')
btnType = 'retire'
//btnType = 'retire'
} else if (isMember) {
btnType = 'retire'
} else if (member_type === 'banned') {
Expand Down
141 changes: 60 additions & 81 deletions src/components/modules/groups/GroupMembers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ class GroupMembers extends React.Component {
constructor(props) {
super(props)
this.state = {
showModers: false,
showPendings: !!props.showPendings,
currentTab: props.current_tab || 'member',
}
}

Expand All @@ -47,28 +46,25 @@ class GroupMembers extends React.Component {
init = (force = false) => {
const { initialized } = this.state
if (!initialized || force) {
const { currentGroup } = this.props
const { currentGroup, username } = this.props
if (currentGroup) {
const group = currentGroup

const memberTypes = ['moder']
let { amModer } = getRoleInGroup(group, username)

const memberTypes = []
const sortConditions = []
const { showPendings, showBanneds, showModers } = this.state
if (!showModers) memberTypes.push('member')
if (showPendings) {
memberTypes.push('pending')
sortConditions.push({
member_type: 'pending',
direction: 'up'
})
}
if (showBanneds) {
memberTypes.push('banned')
sortConditions.push({
member_type: 'banned',
direction: 'up'
})
const { currentTab } = this.state
if (!amModer && currentTab === 'member') {
memberTypes.push('moder')
memberTypes.push('member')
} else if (currentTab) {
memberTypes.push(currentTab)
}
// sortConditions.push({
// member_type: 'banned',
// direction: 'up'
// })

this.props.fetchGroupMembers(group, memberTypes, sortConditions)
this.setState({
Expand All @@ -78,37 +74,12 @@ class GroupMembers extends React.Component {
}
}

toggleModers = (e) => {
this.setState({
showModers: !this.state.showModers
}, () => {
this.init(true)
})
}

togglePendings = (e) => {
const { checked } = e.target
this.setState({
showPendings: checked
}, () => {
this.init(true)
})
}

toggleBanneds = (e) => {
const { checked } = e.target
this.setState({
showBanneds: checked
}, () => {
this.init(true)
})
}

onAddAccount = (e) => {
try {
const { value } = e.target
const member = value
const member_type = 'member'
const { currentTab } = this.state
const member_type = currentTab

const { username, currentGroup } = this.props
const { creatingNew } = currentGroup
Expand All @@ -133,20 +104,39 @@ class GroupMembers extends React.Component {
}
}

_renderMemberTypeSwitch = () => {
_renderMemberTypeSwitch = (amModer, ownerRight) => {
const { currentGroup, } = this.props
const { moders, members, } = currentGroup
const { showModers } = this.state
const disabled = !moders
return <React.Fragment>
<div className={cn('label', { checked: !showModers, disabled })} onClick={!disabled && this.toggleModers}>
{tt('group_members_jsx.all') + ' (' + (moders + members) + ')'}
</div>
<span style={{ width: '0.5rem', display: 'inline-block' }}></span>
<div className={cn('label moders', { checked: showModers, disabled })} onClick={!disabled && this.toggleModers}>
{tt('group_members_jsx.moders') + ' (' + moders + ')'}
</div>
</React.Fragment>
const { currentTab } = this.state
const disabled = !amModer && !moders
let tabs = []

let memTypes = ['member', 'moder']
if (amModer) {
memTypes.unshift('pending')
memTypes.push('banned')
}
for (const key of memTypes) {
let title
if (!amModer && key === 'member') {
title = tt('group_members_jsx.all') + ' (' + (moders + members) + ')'
} else {
title = tt('group_members_jsx.' + key + 's') + ' (' + (currentGroup[key + 's']) + ')'
}
tabs.push(<div key={key} className={cn('label', { checked: (currentTab === key), disabled })} onClick={!disabled ? (e) => {
this.setState({
currentTab: key
}, () => {
this.init(true)
})
} : undefined}>
{title}
</div>)
}
return <div>
{tabs}
{ownerRight}
</div>
}

render() {
Expand Down Expand Up @@ -189,6 +179,7 @@ class GroupMembers extends React.Component {
/>)
}

const isEmpty = !mems.length
mems = <table>
<tbody>
{mems}
Expand All @@ -201,6 +192,8 @@ class GroupMembers extends React.Component {
filterAccs.add(m.account)
}

const { currentTab } = this.state

mems = <div>
{amModer ? <div className='row' style={{ marginTop: '0.5rem', }}>
<div className='column small-12'>
Expand All @@ -211,12 +204,14 @@ class GroupMembers extends React.Component {
onAccountsLoad={(accs) => {
this.props.receiveAccounts(accs)
}}
isDisabled={currentTab === 'pending'}
/>
</div>
</div> : null}
<div className='row' style={{ marginTop: '0.5rem', marginBottom: '2rem' }}>
<div className='column small-12'>
{mems}
{!isEmpty ? mems : <div style={{ textAlign: 'center', paddingTop: '1rem' }}>
{tt('group_members_jsx.empty')}</div>}
</div>
</div>
</div>
Expand All @@ -237,8 +232,6 @@ class GroupMembers extends React.Component {

title = tt('group_members_jsx.title') + title + tt('group_members_jsx.title2')

const { showPendings, showBanneds } = this.state

let ownerRight, ownerRow
let ownerBlock = <React.Fragment>
{tt('group_settings_jsx.owner') + ' - '}
Expand All @@ -264,25 +257,11 @@ class GroupMembers extends React.Component {
</div>
</div>
{ownerRow}
{amModer ? <div className='row' style={{ marginTop: '0rem' }}>
<div className='row' style={{ marginTop: '0rem', marginBottom: '0.5rem' }}>
<div className='column small-12'>
<label style={{fontSize: '100%', display: 'inline-block'}} title={tt('group_members_jsx.check_pending_hint')}>
<input type='checkbox' disabled={!pendings} checked={!!showPendings} onChange={this.togglePendings} />
{tt('group_members_jsx.check_pending') + ' (' + pendings + ')'}
</label>
<span style={{ width: '1rem', display: 'inline-block' }}></span>
<label style={{fontSize: '100%', display: 'inline-block'}}>
<input type='checkbox' disabled={!banneds} checked={!!showBanneds} onChange={this.toggleBanneds} />
{tt('group_members_jsx.check_banned') + ' (' + banneds + ')'}
</label>
{ownerRight}
{this._renderMemberTypeSwitch(amModer, ownerRight)}
</div>
</div> : <div className='row' style={{ marginTop: '0rem', marginBottom: '0.5rem' }}>
<div className='column small-12'>
{this._renderMemberTypeSwitch()}
{ownerRight}
</div>
</div>}
</div>
</div>
}

Expand All @@ -300,14 +279,14 @@ export default connect(
const username = currentUser && currentUser.get('username')

const { newGroup } = ownProps
let currentGroup, showPendings
let currentGroup, current_tab
if (newGroup) {
currentGroup = newGroup
} else {
const options = state.user.get('group_members_modal')
if (options) {
currentGroup = options.get('group')
showPendings = options.get('show_pendings')
current_tab = options.get('current_tab')
}
if (currentGroup) {
const [ path, name ] = currentGroup
Expand All @@ -325,7 +304,7 @@ export default connect(
username,
currentGroup,
group,
showPendings,
current_tab,
}
},
dispatch => ({
Expand Down
7 changes: 7 additions & 0 deletions src/components/modules/groups/GroupMembers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.GroupMembers {
h4 {
margin-bottom: 1rem;
}
.member-name {
margin-left: 0.5rem;
line-height: 40px;
Expand All @@ -7,9 +10,13 @@
@include themify($themes) {
.label {
padding: 0.5rem;

transition: all .1s ease-in;
user-select: none;

margin-right: 0.5rem;
margin-bottom: 0.5rem;

&:not(.disabled) {
cursor: pointer;
}
Expand Down
Loading
Loading