Implement scheduled deletion feature for servers in moderation pane

src/chat-api/RawData.ts

@@ -14,6 +14,9 @@ export interface RawServer {
   _count?: {
     welcomeQuestions: number;
   };
+  scheduledForDeletion: {
+    scheduledAt: number;
+  }
 }
 
 export interface RawVoice {

src/common/GlobalEvents.ts

@@ -31,8 +31,8 @@ export function useModerationShowMessages() {
   );
 }
 
-export function emitModerationServerDeleted() {
-  EE.emit("moderationServerDeleted", {});
+export function emitModerationServerDeleted(servers: any[]) {
+  EE.emit("moderationServerDeleted", servers);
 }
 export function emitModerationUserSuspended(payload: ModerationSuspension) {
   EE.emit("moderationUserSuspended", payload);
@@ -47,7 +47,7 @@ export function useModerationUserSuspendedListener() {
 }
 
 export function useModerationServerDeletedListener() {
-  return useEventListen<unknown>("moderationServerDeleted");
+  return useEventListen<any[]>("moderationServerDeleted");
 }
 
 export function useEventListen<TReturn>(

src/components/moderation-pane/DeleteServersModal.tsx

@@ -14,6 +14,7 @@ import Text from "../ui/Text";
 import useStore from "@/chat-api/store/useStore";
 import { useCustomPortal } from "../ui/custom-portal/CustomPortal";
 import Checkbox from "../ui/Checkbox";
+import { emitModerationServerDeleted } from "@/common/GlobalEvents";
 
 const Container = styled("div")`
   min-width: 260px;
@@ -70,7 +71,6 @@ export default function DeleteServersModal(props: Props) {
   };
 
   const onSuspendClicked = async () => {
-    console.log(constructedReason());
     if (!constructedReason().trim()) {
       setError({ message: "Please provide a reason." });
       return;
@@ -110,6 +110,7 @@ export default function DeleteServersModal(props: Props) {
         "Some servers could not be deleted due to an error. Please try again."
       );
     }
+    emitModerationServerDeleted(props.servers);
     props.done();
     props.close();
   };

src/components/moderation-pane/ModerationPane.tsx

@@ -274,7 +274,6 @@ function SelectedServerActions() {
   const { createPortal } = useCustomPortal();
 
   const onDeleted = () => {
-    emitModerationServerDeleted();
     setSelectedServers([]);
   };
 
@@ -450,11 +449,12 @@ function ServersPane() {
 
   const moderationServerDeletedListener = useModerationServerDeletedListener();
 
-  moderationServerDeletedListener(() => {
+  moderationServerDeletedListener((deletedServers) => {
     setServers(
-      servers().filter((u) => {
-        const wasSuspended = selectedServers().find((su) => su.id === u.id);
-        return !wasSuspended;
+      servers().map((u) => {
+        const wasSuspended = deletedServers.find((su) => su.id === u.id);
+        if (!wasSuspended) return u; 
+        return {...u, scheduledForDeletion: {scheduledAt: Date.now()}};
       })
     );
   });
@@ -695,6 +695,22 @@ export function Server(props: { server: any }) {
             </A>
           </Text>
         </FlexRow>
+        <Show when={props.server.scheduledForDeletion}>
+            <div  style={{
+                background: "var(--alert-color)",
+                "border-radius": "4px",
+                padding: "2px 8px",
+                "margin-top": "4px",
+                "display": "inline-block"
+              }}>
+            <Text
+              size={12}
+
+            >
+              Scheduled Deletion
+            </Text>
+            </div>
+          </Show>
       </ItemDetailContainer>
     </A>
   );

src/components/moderation-pane/ServerPage.tsx

@@ -21,6 +21,7 @@ import { FlexColumn, FlexRow } from "../ui/Flexbox";
 import { UsersPane } from "./UsersPane";
 import { UsersAuditLogsPane } from "./UsersAuditLogsPane";
 import DeleteServersModal from "./DeleteServersModal";
+import { formatTimestamp } from "@/common/date";
 
 export default function ServerPage() {
   const params = useParams<{ serverId: string }>();
@@ -117,6 +118,16 @@ export default function ServerPage() {
             />
           </div>
 
+          <Show when={!server()?.scheduledForDeletion}>
+            <DeleteServerBlock serverId={server()?.id!} />
+          </Show>
+
+          <Show when={server()?.scheduledForDeletion}>
+            <UndoDeleteServerBlock server={server()!} />
+          </Show>
+
+
+
           <SettingsBlock label="Server Name" icon="edit">
             <Input
               value={inputValues().name}
@@ -174,7 +185,6 @@ export default function ServerPage() {
               onClick={onSaveButtonClicked}
             />
           </Show>
-          <DeleteServerBlock serverId={server()?.id!} />
         </ServerPageInnerContainer>
       </ServerPageContainer>
     </Show>
@@ -223,7 +233,7 @@ const DeleteServerBlock = (props: { serverId: string }) => {
   };
 
   return (
-    <SettingsBlock icon="delete" label="Delete Server">
+    <SettingsBlock  class={css`&& {margin-bottom: 40px;}`} icon="delete" label="Delete Server">
       <Button
         onClick={showSuspendModal}
         label="Delete Server"
@@ -233,3 +243,34 @@ const DeleteServerBlock = (props: { serverId: string }) => {
     </SettingsBlock>
   );
 };
+
+
+const UndoDeleteServerBlock = (props: { server: RawServer }) => {
+  const { createPortal } = useCustomPortal();
+
+  const showSuspendModal = () => {
+    createPortal((close) => (
+      <DeleteServersModal
+        close={close}
+        servers={[{ id: props.serverId }]}
+        done={() => {}}
+      />
+    ));
+  };
+  const fiveDaysToMs = 5 * 24 * 60 * 60 * 1000;
+
+  const deletedMs = props.server.scheduledForDeletion.scheduledAt + fiveDaysToMs;
+  const deletionDate = () => formatTimestamp(deletedMs);
+
+  return (
+    <SettingsBlock  class={css`&& {margin-bottom: 40px;}`} icon="undo" label="Scheduled for Deletion"
+     description={`Server will be deleted ${deletionDate()}`}>
+      <Button
+        onClick={showSuspendModal}
+        label="Undo"
+        color="var(--alert-color)"
+        primary
+      />
+    </SettingsBlock>
+  );
+};