feat: refactor, list roles/invites

related: #26
revoltchat · Nov 9, 2023 · d096edf · d096edf
1 parent c4627a9
commit d096edf
Show file tree

Hide file tree

Showing 5 changed files with 307 additions and 81 deletions.
diff --git a/src/components/common/settings/sections/server/InviteSettingsSection.tsx b/src/components/common/settings/sections/server/InviteSettingsSection.tsx
@@ -0,0 +1,74 @@
+import React, {useEffect, useState} from 'react';
+import {Pressable, View} from 'react-native';
+import {observer} from 'mobx-react-lite';
+
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+
+import {API, Server} from 'revolt.js';
+
+import {currentTheme, styles} from '../../../../../Theme';
+import {Text} from '../../../atoms';
+
+export const InviteSettingsSection = observer(({server}: {server: Server}) => {
+ const [reload, triggerReload] = useState(0);
+ const [invites, setInvites] = useState(null as API.Invite[] | null);
+ useEffect(() => {
+ async function fetchInvites() {
+ const i = await server.fetchInvites();
+ setInvites(i);
+ }
+
+ fetchInvites();
+ }, [server, reload]);
+
+ return (
+ <>
+ <Text type={'h1'}>Invites</Text>
+ {invites ? (
+ invites.length ? (
+ invites.map(i => (
+ <View
+ style={styles.settingsEntry}
+ key={`invite-settings-entry-${i._id}`}>
+ <View style={{flex: 1, flexDirection: 'column'}}>
+ <Text
+ key={`invite-settings-entry-${i._id}-id`}
+ style={{fontWeight: 'bold'}}>
+ {i._id}
+ </Text>
+ <Text colour={currentTheme.foregroundSecondary}>
+ @{i.creator} - #{i.channel}
+ </Text>
+ </View>
+ {i._id.length === 8 ? (
+ <Pressable
+ style={{
+ width: 30,
+ height: 20,
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ onPress={() => {
+ server.client.deleteInvite(i._id);
+ triggerReload(reload + 1);
+ }}>
+ <View style={styles.iconContainer}>
+ <MaterialIcon
+ name={'delete'}
+ size={20}
+ color={currentTheme.foregroundPrimary}
+ />
+ </View>
+ </Pressable>
+ ) : null}
+ </View>
+ ))
+ ) : (
+ <Text>No invites</Text>
+ )
+ ) : (
+ <Text>Fetching invites...</Text>
+ )}
+ </>
+ );
+});
diff --git a/src/components/common/settings/sections/server/OverviewSettingsSection.tsx b/src/components/common/settings/sections/server/OverviewSettingsSection.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import {View} from 'react-native';
+import {observer} from 'mobx-react-lite';
+
+import {Server} from 'revolt.js';
+
+import {currentTheme} from '../../../../../Theme';
+import {GapView} from '../../../../layout';
+import {InputWithButton, Link, Text} from '../../../atoms';
+
+export const OverviewSettingsSection = observer(
+ ({server}: {server: Server}) => {
+ return (
+ <>
+ <Text type={'h1'}>Overview</Text>
+ <Text key={'server-name-label'} type={'h2'}>
+ Server name
+ </Text>
+ <InputWithButton
+ placeholder="Server name"
+ defaultValue={server.name}
+ onPress={(v: string) => {
+ server.edit({
+ name: v,
+ });
+ }}
+ buttonContents={{
+ type: 'icon',
+ name: 'save',
+ pack: 'regular',
+ }}
+ backgroundColor={currentTheme.backgroundSecondary}
+ skipIfSame
+ cannotBeEmpty
+ emptyError={'Server names cannot be empty!'}
+ />
+ <GapView size={4} />
+ <Text key={'server-desc-label'} type={'h2'}>
+ Server description
+ </Text>
+ <View>
+ <Text
+ style={{
+ color: currentTheme.foregroundSecondary,
+ }}>
+ Server descriptions support Markdown formatting.
+ </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..."
+ defaultValue={server.description ?? undefined}
+ onPress={(v: string) => {
+ server.edit({
+ description: v,
+ });
+ }}
+ buttonContents={{type: 'string', content: 'Set description'}}
+ backgroundColor={currentTheme.backgroundSecondary}
+ skipIfSame
+ // @ts-expect-error this is passed down to the TextInput
+ multiline
+ extraStyles={{
+ container: {
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ },
+ input: {width: '100%'},
+ button: {marginHorizontal: 0},
+ }}
+ />
+ <GapView size={2} />
+ <Text type={'h2'}>System messages</Text>
+ <Text>
+ When members join/leave or are kicked/banned, you can receive
+ messages. (not final copy)
+ </Text>
+ <Text>
+ new {server.system_messages?.user_joined} leave{' '}
+ {server.system_messages?.user_left} kick{' '}
+ {server.system_messages?.user_kicked} ban{' '}
+ {server.system_messages?.user_banned}
+ </Text>
+ </>
+ );
+ },
+);
diff --git a/src/components/common/settings/sections/server/RoleSettingsSection.tsx b/src/components/common/settings/sections/server/RoleSettingsSection.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import {Pressable, View} from 'react-native';
+import {observer} from 'mobx-react-lite';
+
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+
+import {Server} from 'revolt.js';
+
+import {SettingsSection} from '../../../../../lib/types';
+import {currentTheme, styles} from '../../../../../Theme';
+import {GapView} from '../../../../layout';
+import {Text} from '../../../atoms';
+
+export const RoleSettingsSection = observer(
+ ({server, callback}: {server: Server; callback: Function}) => {
+ const [subsection, setSubsection] = React.useState(null as SettingsSection);
+
+ return (
+ <>
+ <Pressable
+ style={{
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginBottom: 10,
+ }}
+ onPress={() => {
+ subsection ? setSubsection(null) : callback();
+ }}>
+ <MaterialIcon
+ name="arrow-back"
+ size={24}
+ color={currentTheme.foregroundSecondary}
+ />
+ <Text
+ style={{
+ color: currentTheme.foregroundSecondary,
+ fontSize: 20,
+ marginLeft: 5,
+ }}>
+ Back
+ </Text>
+ </Pressable>
+ {subsection ? (
+ <>
+ <Text
+ type={'h1'}
+ colour={
+ server.roles![subsection].colour ??
+ currentTheme.foregroundPrimary
+ }>
+ {server.roles![subsection].name}
+ </Text>
+ <Text colour={currentTheme.foregroundSecondary}>{subsection}</Text>
+ <GapView size={2} />
+ <Text type={'h2'}>Rank</Text>
+ {/* <TextInput
+ style={{
+ fontFamily: 'Open Sans',
+ minWidth: '100%',
+ borderRadius: 8,
+ backgroundColor: currentTheme.backgroundSecondary,
+ padding: 6,
+ paddingLeft: 10,
+ paddingRight: 10,
+ color: currentTheme.foregroundPrimary,
+ }}
+ value={rankValue as string}
+ keyboardType={'decimal-pad'}
+ onChangeText={v => {
+ setRankValue(v);
+ }}
+ /> */}
+ <Text>{server.roles![subsection].rank}</Text>
+ <GapView size={2} />
+ <Text type={'h2'}>Permissions</Text>
+ <Text>{server.roles![subsection].permissions.a}</Text>
+ <GapView size={2} />
+ <Text type={'h2'}>Colour</Text>
+ <Text>{server.roles![subsection].colour}</Text>
+ </>
+ ) : (
+ <>
+ <Text type={'h1'}>Roles</Text>
+ {server.orderedRoles.map(r => (
+ <View
+ style={styles.settingsEntry}
+ key={`role-settings-entry-${r.id}`}>
+ <View style={{flex: 1, flexDirection: 'column'}}>
+ <Text
+ key={`role-settings-entry-${r.id}-name`}
+ colour={r.colour ?? currentTheme.foregroundPrimary}
+ style={{fontWeight: 'bold'}}>
+ {r.name}
+ </Text>
+ <Text colour={currentTheme.foregroundSecondary}>{r.id}</Text>
+ </View>
+ <Pressable
+ style={{
+ width: 30,
+ height: 20,
+ alignItems: 'center',
+ justifyContent: 'center',
+ }}
+ onPress={() => {
+ setSubsection(r.id);
+ }}>
+ <View style={styles.iconContainer}>
+ <MaterialIcon
+ name={'arrow-forward'}
+ size={20}
+ color={currentTheme.foregroundPrimary}
+ />
+ </View>
+ </Pressable>
+ </View>
+ ))}
+ </>
+ )}
+ </>
+ );
+ },
+);
diff --git a/src/components/common/settings/sections/server/index.ts b/src/components/common/settings/sections/server/index.ts
@@ -0,0 +1,3 @@
+export {InviteSettingsSection} from './InviteSettingsSection';
+export {OverviewSettingsSection} from './OverviewSettingsSection';
+export {RoleSettingsSection} from './RoleSettingsSection';