feat: add the ability to delete servers

related: #26

src/Generic.tsx

@@ -6,7 +6,7 @@ import FastImage from 'react-native-fast-image';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import {API, Channel, Client, Server} from 'revolt.js';
+import {API, Channel, Client, Message, Server} from 'revolt.js';
 
 import {currentTheme, setTheme, themes, styles} from './Theme';
 import {
@@ -18,7 +18,12 @@ import {
  RE_BOT_INVITE,
  WIKI_URL,
 } from './lib/consts';
-import {ReplyingMessage, ReportedObject, Setting} from './lib/types';
+import {
+ DeletableObject,
+ ReplyingMessage,
+ ReportedObject,
+ Setting,
+} from './lib/types';
 const Image = FastImage;
 
 export const app = {
@@ -301,7 +306,8 @@ export const app = {
  `[FUNCTIONS] Tried to run uninitialised function openServerSettings (args: ${s})`,
  );
  },
- setMessageBoxInput: t => {},
+ setMessageBoxInput: (t: string | null) => {},
+ setEditingMessage: (message: Message) => {},
  setReplyingMessages: (m: ReplyingMessage[]) => {
  console.log(
  `[FUNCTIONS] Tried to run uninitialised function setReplyingMessages (args: ${m})`,
@@ -310,13 +316,17 @@ export const app = {
  getReplyingMessages: () => {
  return undefined as unknown as ReplyingMessage[];
  },
+ /**
+ * @deprecated Message queuing will be removed/reworked due to the switch of message views
+ */
  pushToQueue: m => {},
  joinInvite: async (i: API.InviteResponse) => {},
  logOut: () => {},
  openMemberList: (data: Channel | Server | null) => {},
  openChannelContextMenu: (c: Channel | null) => {},
  openStatusMenu: (state: boolean) => {},
  openReportMenu: (object: ReportedObject | null) => {},
+ openDeletionConfirmationModal: (object: DeletableObject | null) => {},
 };
 
 export function setFunction(name: string, func: any) {

src/Modals.tsx

@@ -8,8 +8,10 @@ import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIc
 import {API, Channel, Server, User} from 'revolt.js';
 
 import {app, client, openUrl, setFunction} from './Generic';
+import {DeletableObject} from './lib/types';
 import {currentTheme} from './Theme';
 import {GapView} from './components/layout';
+import {ConfirmDeletionModal} from './components/modals';
 import {
  BotInviteSheet,
  ChannelInfoSheet,
@@ -29,7 +31,9 @@ export const Modals = observer(() => {
  i: null as any,
  });
  const [settingsVisibility, setSettingsVisibility] = React.useState(false);
- const [serverSettingsServer, setServerSettingsServer] = React.useState(null as Server | null)
+ const [serverSettingsServer, setServerSettingsServer] = React.useState(
+ null as Server | null,
+ );
  const [inviteServer, setInviteServer] = React.useState({
  inviteServer: null,
  inviteServerCode: '',
@@ -38,6 +42,9 @@ export const Modals = observer(() => {
  inviteServerCode: string;
  });
  const [inviteBot, setInviteBot] = React.useState(null as User | null);
+ const [deletableObject, setDeletableObject] = React.useState(
+ null as DeletableObject | null,
+ );
 
  setFunction('openDirectMessage', async (dm: Channel) => {
  app.openProfile(null);
@@ -52,6 +59,12 @@ export const Modals = observer(() => {
  setFunction('openServerSettings', async (s: Server | null) => {
  setServerSettingsServer(s);
  });
+ setFunction(
+ 'openDeletionConfirmationModal',
+ async (o: DeletableObject | null) => {
+ setDeletableObject(o);
+ },
+ );
  setFunction('openInvite', async (i: string) => {
  try {
  let community = await client.fetchInvite(i);
@@ -172,7 +185,25 @@ export const Modals = observer(() => {
  transparent={true}
  animationType="slide"
  onRequestClose={() => setServerSettingsServer(null)}>
- <ServerSettingsSheet server={serverSettingsServer!} setState={() => setServerSettingsServer(null)} />
+ <ServerSettingsSheet
+ server={serverSettingsServer!}
+ setState={() => setServerSettingsServer(null)}
+ />
+ </Modal>
+ <Modal
+ visible={!!deletableObject}
+ transparent={true}
+ animationType="fade"
+ onRequestClose={() => setDeletableObject(null)}>
+ <View
+ style={{
+ flex: 1,
+ alignContent: 'center',
+ justifyContent: 'center',
+ backgroundColor: '#00000080',
+ }}>
+ <ConfirmDeletionModal target={deletableObject!} />
+ </View>
  </Modal>
  </>
  );

src/components/modals/ConfirmDeletionModal.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import {View} from 'react-native';
+import {observer} from 'mobx-react-lite';
+
+import {app} from '../../Generic';
+import {DeletableObject} from '../../lib/types';
+import {currentTheme} from '../../Theme';
+import {Button, Text} from '../common/atoms';
+import { set } from 'mobx';
+
+export const ConfirmDeletionModal = observer(
+ ({target}: {target: DeletableObject}) => {
+ return (
+ <View
+ style={{
+ marginHorizontal: 16,
+ borderRadius: 8,
+ padding: 20,
+ backgroundColor: currentTheme.backgroundPrimary,
+ justifyContent: 'center',
+ alignSelf: 'center',
+ }}>
+ <Text type={'h1'}>Delete {target.type}?</Text>
+ <Text>
+ Are you sure you want to delete{' '}
+ <Text style={{fontWeight: 'bold'}}>
+ {target.type === 'Server' ? target.object.name : 'this message'}
+ </Text>
+ ?
+ </Text>
+ <Text style={{fontWeight: 'bold'}}>This cannot be undone.</Text>
+ <View
+ style={{
+ flexDirection: 'column',
+ justifyContent: 'center',
+ marginTop: 10,
+ }}>
+ <Button
+ onPress={async () => {
+ switch (target.type) {
+ case 'Server':
+ app.openServerContextMenu(null);
+ app.openServer(undefined);
+ app.openServerSettings(null);
+ target.object.delete();
+ app.openDeletionConfirmationModal(null);
+ break;
+ case 'Message': 
+ await target.object.delete()
+ default:
+ break;
+ }
+ }}
+ backgroundColor={currentTheme.error}
+ style={{marginHorizontal: 0}}>
+ <Text>Delete</Text>
+ </Button>
+ <Button
+ onPress={() => {
+ app.openDeletionConfirmationModal(null);
+ }}
+ style={{marginHorizontal: 0}}>
+ <Text>Cancel</Text>
+ </Button>
+ </View>
+ </View>
+ );
+ },
+);

src/components/modals/index.ts

@@ -0,0 +1 @@
+export {ConfirmDeletionModal} from "./ConfirmDeletionModal";

src/components/sheets/ServerSettingsSheet.tsx

@@ -125,8 +125,7 @@ export const ServerSettingsSheet = observer(
  }}
  />
  ) : (
- <View
- style={styles.serverSettingsInitials}>
+ <View style={styles.serverSettingsInitials}>
  <Text
  key={`server-settings-${server._id}-initials`}
  style={{fontWeight: 'bold', fontSize: 20}}>
@@ -250,7 +249,10 @@ export const ServerSettingsSheet = observer(
  style={{flex: 1, marginBottom: 10}}
  backgroundColor={currentTheme.error}
  onPress={() => {
- console.log('sussy');
+ app.openDeletionConfirmationModal({
+ type: 'Server',
+ object: server,
+ });
  }}>
  <View style={styles.iconContainer}>
  <MaterialIcon
@@ -292,18 +294,18 @@ export const ServerSettingsSheet = observer(
  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>
+  <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..."

src/lib/types.ts

@@ -31,19 +31,21 @@ export type ReplyingMessage = {
  message: Message;
 };
 
-interface ReportedMessage {
+interface TypedMessage {
  type: 'Message';
  object: Message;
 }
 
-interface ReportedServer {
+interface TypedServer {
  type: 'Server';
  object: Server;
 }
 
-interface ReportedUser {
+interface TypedUser {
  type: 'User';
  object: User;
 }
 
-export type ReportedObject = ReportedMessage | ReportedServer | ReportedUser;
+export type ReportedObject = TypedMessage | TypedServer | TypedUser;
+
+export type DeletableObject = TypedMessage | TypedServer;