refactor: ♻️ Rewrite state system to use Pinia for composer and auth

app/stores/composer.ts

@@ -0,0 +1,260 @@
+import type { Attachment, Status, StatusSource } from "@versia/client/schemas";
+import { defineStore } from "pinia";
+import type { z } from "zod";
+
+export interface ComposerFile {
+    id: string;
+    apiId?: string;
+    file?: File;
+    alt?: string;
+    uploading: boolean;
+    updating: boolean;
+}
+
+export interface ComposerState {
+    relation?: {
+        type: "reply" | "quote" | "edit";
+        note: z.infer<typeof Status>;
+        source?: z.infer<typeof StatusSource>;
+    };
+    content: string;
+    rawContent: string;
+    sensitive: boolean;
+    contentWarning: string;
+    contentType: "text/html" | "text/plain";
+    visibility: z.infer<typeof Status.shape.visibility>;
+    files: ComposerFile[];
+    sending: boolean;
+}
+
+export type ComposerStateKey =
+    | "blank"
+    | `${NonNullable<ComposerState["relation"]>["type"]}-${string}`;
+
+export const calculateMentionsFromReply = (
+    note: z.infer<typeof Status>,
+): string => {
+    const authStore = useAuthStore();
+
+    const peopleToMention = note.mentions
+        .concat(note.account)
+        // Deduplicate mentions
+        .filter((men, i, a) => a.indexOf(men) === i)
+        // Remove self
+        .filter((men) => men.id !== authStore.identity?.account.id);
+
+    if (peopleToMention.length === 0) {
+        return "";
+    }
+
+    const mentions = peopleToMention.map((me) => `@${me.acct}`).join(" ");
+
+    return `${mentions} `;
+};
+
+export const useComposerStore = (key: ComposerStateKey) =>
+    defineStore(`composer-${key}`, {
+        state: (): ComposerState => ({
+            relation: undefined,
+            content: "",
+            rawContent: "",
+            sensitive: false,
+            contentWarning: "",
+            contentType: "text/html",
+            visibility: "public",
+            files: [],
+            sending: false,
+        }),
+        getters: {
+            characterCount: (state) => {
+                return state.rawContent.length;
+            },
+            isOverCharacterLimit(): boolean {
+                const authStore = useAuthStore();
+                const characterLimit =
+                    authStore.identity?.instance.configuration.statuses
+                        .max_characters ?? 0;
+
+                return this.characterCount > characterLimit;
+            },
+            /* Cannot send if content is empty or over character limit, unless media is attached */
+            canSend(state): boolean {
+                if (state.sending) {
+                    return false;
+                }
+
+                if (this.isOverCharacterLimit) {
+                    return false;
+                }
+
+                return this.characterCount > 0 || state.files.length > 0;
+            },
+        },
+        actions: {
+            async stateFromRelation(
+                relationType: "reply" | "quote" | "edit",
+                note: z.infer<typeof Status>,
+                source?: z.infer<typeof StatusSource>,
+            ): Promise<ComposerStateKey> {
+                const key = `${relationType}-${note.id}` as const;
+
+                this.$patch({
+                    relation: {
+                        type: relationType,
+                        note,
+                        source,
+                    },
+                    content: calculateMentionsFromReply(note),
+                    contentWarning: source?.spoiler_text || note.spoiler_text,
+                    sensitive: note.sensitive,
+                    files: [],
+                    sending: false,
+                    contentType: "text/html",
+                    visibility: note.visibility,
+                });
+
+                if (relationType === "edit") {
+                    this.content = source?.text || note.content;
+                    this.rawContent = source?.text || "";
+                    console.log(note.media_attachments);
+                    this.files = await Promise.all(
+                        note.media_attachments.map(async (file) => ({
+                            id: crypto.randomUUID(),
+                            apiId: file.id,
+                            alt: file.description ?? undefined,
+                            uploading: false,
+                            updating: false,
+                        })),
+                    );
+                }
+
+                return key;
+            },
+            async uploadFile(file: File): Promise<void> {
+                const index =
+                    this.files.push({
+                        file,
+                        uploading: true,
+                        updating: false,
+                        id: crypto.randomUUID(),
+                    }) - 1;
+
+                const authStore = useAuthStore();
+
+                return authStore.client
+                    .uploadMedia(file)
+                    .then((media) => {
+                        if (!this.files[index]) {
+                            throw new Error("File not found");
+                        }
+
+                        this.files[index].uploading = false;
+                        this.files[index].apiId = (
+                            media.data as z.infer<typeof Attachment>
+                        ).id;
+                    })
+                    .catch(() => {
+                        this.files.splice(index, 1);
+                    });
+            },
+            async updateFileDescription(
+                id: string,
+                description: string,
+            ): Promise<void> {
+                const index = this.files.findIndex((f) => f.id === id);
+                if (index === -1 || !this.files[index]) {
+                    throw new Error("File not found");
+                }
+
+                this.files[index].updating = true;
+
+                const authStore = useAuthStore();
+
+                try {
+                    await authStore.client.updateMedia(
+                        this.files[index].apiId ?? "",
+                        {
+                            description: description,
+                        },
+                    );
+                } finally {
+                    if (this.files[index]) {
+                        this.files[index].updating = false;
+                        this.files[index].alt = description;
+                    }
+                }
+            },
+            async sendEdit(): Promise<z.infer<typeof Status> | null> {
+                if (!this.canSend || this.relation?.type !== "edit") {
+                    return null;
+                }
+
+                const authStore = useAuthStore();
+
+                this.sending = true;
+
+                try {
+                    const { data } = await authStore.client.editStatus(
+                        this.relation.note.id,
+                        {
+                            status: this.content,
+                            content_type: this.contentType,
+                            sensitive: this.sensitive,
+                            spoiler_text: this.sensitive
+                                ? this.contentWarning
+                                : undefined,
+                            media_ids: this.files
+                                .map((f) => f.apiId)
+                                .filter((f) => f !== undefined),
+                        },
+                    );
+
+                    this.sending = false;
+                    return data;
+                } catch (error) {
+                    this.sending = false;
+                    throw error;
+                }
+            },
+            async send(): Promise<z.infer<typeof Status> | null> {
+                if (!this.canSend) {
+                    return null;
+                }
+
+                const authStore = useAuthStore();
+
+                this.sending = true;
+
+                try {
+                    const { data } = await authStore.client.postStatus(
+                        this.content,
+                        {
+                            content_type: this.contentType,
+                            sensitive: this.sensitive,
+                            spoiler_text: this.sensitive
+                                ? this.contentWarning
+                                : undefined,
+                            media_ids: this.files
+                                .map((f) => f.apiId)
+                                .filter((f) => f !== undefined),
+                            quote_id:
+                                this.relation?.type === "quote"
+                                    ? this.relation.note.id
+                                    : undefined,
+                            in_reply_to_id:
+                                this.relation?.type === "reply"
+                                    ? this.relation.note.id
+                                    : undefined,
+                            visibility: this.visibility,
+                        },
+                    );
+
+                    this.sending = false;
+                    return data as z.infer<typeof Status>;
+                } catch (error) {
+                    this.sending = false;
+                    throw error;
+                }
+            },
+        },
+    });