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';