Skip to content

Commit

Permalink
feat(serversettings): add ban settings/i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
Rexogamer committed Nov 21, 2023
1 parent f196baa commit 8124370
Show file tree
Hide file tree
Showing 7 changed files with 195 additions and 42 deletions.
53 changes: 51 additions & 2 deletions i18n/strings/en.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"app": {
"actions": {
"delete": "Delete",
"cancel": "Cancel"
"back": "Back",
"cancel": "Cancel",
"close": "Close",
"delete": "Delete"
},
"loading": {
"generic": "Loading…",
Expand All @@ -25,6 +27,53 @@
"warning": "This cannot be undone."
}
},
"servers": {
"settings": {
"general": "General",
"customisation": "Customisation",
"user_management": "User Management",
"delete_server": "Delete Server",
"overview": {
"title": "Overview",
"name": "Server name",
"description": "Server description",
"markdown_tip": "Server descriptions support Markdown formatting.",
"markdown_tip_link": "Learn more.",
"description_placeholder": "Add a description…",
"set_description": "Set description",
"system_messages": "System messages",
"errors": {
"empty_server_name": "Server names cannot be empty!"
}
},
"channels": {
"title": "Channels"
},
"roles": {
"title": "Roles",
"rank": "Rank",
"permissions": "Permissions",
"colour": "Colour"
},
"emoji": {
"title": "Emoji"
},
"members": {
"title": "Members"
},
"invites": {
"title": "Invites",
"loading": "Fetching invites…",
"empty": "No invites"
},
"bans": {
"title": "Bans",
"loading": "Fetching bans…",
"empty": "No bans",
"no_reason": "No reason provided"
}
}
},
"settings": {
"app": {
"language": "Select your language",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, {useEffect, useState} from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {observer} from 'mobx-react-lite';

import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

import {API, Server} from 'revolt.js';

import {currentTheme, styles} from '@rvmob/Theme';
import {Text} from '@rvmob/components/common/atoms';

export const BanSettingsSection = observer(({server}: {server: Server}) => {
const {t} = useTranslation();

const [reload, triggerReload] = useState(0);
const [bans, setBans] = useState(null as API.BanListResult | null);
useEffect(() => {
async function fetchInvites() {
const b = await server.fetchBans();
setBans(b);
}

fetchInvites();
}, [server, reload]);

return (
<>
<Text type={'h1'}>{t('app.servers.settings.bans.title')}</Text>
{bans ? (
bans.bans.length ? (
bans.bans.map(b => (
<View
style={styles.settingsEntry}
key={`invite-settings-entry-${b._id.user}`}>
<View style={{flex: 1, flexDirection: 'column'}}>
<Text
key={`invite-settings-entry-${b._id.user}-id`}
style={{fontWeight: 'bold'}}>
{bans.users.find(u => u._id === b._id.user)?.username ??
b._id.user}
</Text>
<Text colour={currentTheme.foregroundSecondary}>
{b.reason ?? t('app.servers.settings.bans.no_reason')}
</Text>
</View>
<Pressable
style={{
width: 30,
height: 20,
alignItems: 'center',
justifyContent: 'center',
}}
onPress={() => {
server.unbanUser(b._id.user);
triggerReload(reload + 1);
}}>
<View style={styles.iconContainer}>
<MaterialIcon
name={'delete'}
size={20}
color={currentTheme.foregroundPrimary}
/>
</View>
</Pressable>
</View>
))
) : (
<Text>{t('app.servers.settings.bans.empty')}</Text>
)
) : (
<Text>{t('app.servers.settings.bans.loading')}</Text>
)}
</>
);
});
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {useEffect, useState} from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {observer} from 'mobx-react-lite';

import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
Expand All @@ -10,6 +11,8 @@ import {currentTheme, styles} from '../../../../../Theme';
import {Text} from '../../../atoms';

export const InviteSettingsSection = observer(({server}: {server: Server}) => {
const {t} = useTranslation();

const [reload, triggerReload] = useState(0);
const [invites, setInvites] = useState(null as API.Invite[] | null);
useEffect(() => {
Expand All @@ -23,7 +26,7 @@ export const InviteSettingsSection = observer(({server}: {server: Server}) => {

return (
<>
<Text type={'h1'}>Invites</Text>
<Text type={'h1'}>{t('app.servers.settings.invites.title')}</Text>
{invites ? (
invites.length ? (
invites.map(i => (
Expand Down Expand Up @@ -64,10 +67,10 @@ export const InviteSettingsSection = observer(({server}: {server: Server}) => {
</View>
))
) : (
<Text>No invites</Text>
<Text>{t('app.servers.settings.invites.empty')}</Text>
)
) : (
<Text>Fetching invites...</Text>
<Text>{t('app.servers.settings.invites.empty')}</Text>
)}
</>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {observer} from 'mobx-react-lite';

import {Server} from 'revolt.js';
Expand All @@ -10,14 +11,16 @@ import {InputWithButton, Link, Text} from '../../../atoms';

export const OverviewSettingsSection = observer(
({server}: {server: Server}) => {
const {t} = useTranslation();

return (
<>
<Text type={'h1'}>Overview</Text>
<Text type={'h1'}>{t('app.servers.settings.overview.title')}</Text>
<Text key={'server-name-label'} type={'h2'}>
Server name
{t('app.servers.settings.overview.name')}
</Text>
<InputWithButton
placeholder="Server name"
placeholder={t('app.servers.settings.overview.name')}
defaultValue={server.name}
onPress={(v: string) => {
server.edit({
Expand All @@ -32,35 +35,42 @@ export const OverviewSettingsSection = observer(
backgroundColor={currentTheme.backgroundSecondary}
skipIfSame
cannotBeEmpty
emptyError={'Server names cannot be empty!'}
emptyError={t(
'app.servers.settings.overview.errors.empty_server_name',
)}
/>
<GapView size={4} />
<Text key={'server-desc-label'} type={'h2'}>
Server description
{t('app.servers.settings.overview.description')}
</Text>
<View>
<Text
style={{
color: currentTheme.foregroundSecondary,
}}>
Server descriptions support Markdown formatting.
{t('app.servers.settings.overview.markdown_tip')}
<Link
link={'https://support.revolt.chat/kb/account/badges'}
label={t('app.servers.settings.overview.markdown_tip_link')}
style={{fontWeight: 'bold'}}
/>
</Text>
<Link
link={'https://support.revolt.chat/kb/account/badges'}
label={'Learn more.'}
style={{fontWeight: 'bold'}}
/>
</View>
<GapView size={2} />
<InputWithButton
placeholder="Add a description..."
placeholder={t(
'app.servers.settings.overview.description_placeholder',
)}
defaultValue={server.description ?? undefined}
onPress={(v: string) => {
server.edit({
description: v,
});
}}
buttonContents={{type: 'string', content: 'Set description'}}
buttonContents={{
type: 'string',
content: t('app.servers.settings.overview.set_description'),
}}
backgroundColor={currentTheme.backgroundSecondary}
skipIfSame
// @ts-expect-error this is passed down to the TextInput
Expand All @@ -75,7 +85,9 @@ export const OverviewSettingsSection = observer(
}}
/>
<GapView size={2} />
<Text type={'h2'}>System messages</Text>
<Text type={'h2'}>
{t('app.servers.settings.overview.system_messages')}
</Text>
<Text>
When members join/leave or are kicked/banned, you can receive
messages. (not final copy)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {observer} from 'mobx-react-lite';

import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
Expand All @@ -13,6 +14,8 @@ import {Text} from '../../../atoms';

export const RoleSettingsSection = observer(
({server, callback}: {server: Server; callback: Function}) => {
const {t} = useTranslation();

const [subsection, setSubsection] = React.useState(null as SettingsSection);

return (
Expand All @@ -37,7 +40,7 @@ export const RoleSettingsSection = observer(
fontSize: 20,
marginLeft: 5,
}}>
Back
{t('app.actions.back')}
</Text>
</Pressable>
{subsection ? (
Expand All @@ -52,7 +55,7 @@ export const RoleSettingsSection = observer(
</Text>
<Text colour={currentTheme.foregroundSecondary}>{subsection}</Text>
<GapView size={2} />
<Text type={'h2'}>Rank</Text>
<Text type={'h2'}>{t('app.servers.settings.roles.rank')}</Text>
{/* <TextInput
style={{
fontFamily: 'Open Sans',
Expand All @@ -72,15 +75,17 @@ export const RoleSettingsSection = observer(
/> */}
<Text>{server.roles![subsection].rank}</Text>
<GapView size={2} />
<Text type={'h2'}>Permissions</Text>
<Text type={'h2'}>
{t('app.servers.settings.roles.permissions')}
</Text>
<Text>{server.roles![subsection].permissions.a}</Text>
<GapView size={2} />
<Text type={'h2'}>Colour</Text>
<Text type={'h2'}>{t('app.servers.settings.roles.colour')}</Text>
<Text>{server.roles![subsection].colour}</Text>
</>
) : (
<>
<Text type={'h1'}>Roles</Text>
<Text type={'h1'}>{t('app.servers.settings.roles.title')}</Text>
{server.orderedRoles.map(r => (
<View
style={styles.settingsEntry}
Expand Down
1 change: 1 addition & 0 deletions src/components/common/settings/sections/server/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export {BanSettingsSection} from './BanSettingsSection';
export {InviteSettingsSection} from './InviteSettingsSection';
export {OverviewSettingsSection} from './OverviewSettingsSection';
export {RoleSettingsSection} from './RoleSettingsSection';
Loading

0 comments on commit 8124370

Please sign in to comment.