refactor: detail-status command

src/detail-status.tsx

@@ -1,50 +1,18 @@
-import { useEffect,useState } from "react";
-import { Form, ActionPanel, Action, showToast } from "@raycast/api";
-import { postNewStatus } from "./api";
-import { Status } from "./types";
-import { authorize } from "./oauth";
+import { Form, LaunchProps } from "@raycast/api";
 import VisibilityDropdown from "./components/VisibilityDropdown";
-import StatusContent from "./components/statusContent";
+import SimpleCommand from "./simple-status";
+import { Status } from "./types";
 
-export default function Command() {
-  const [isMarkdown, setIsMarkdown] = useState<boolean>(true);
-  useEffect(() => {
-    authorize();
-  }, []);
-
-  const handleSubmit = async (values: Partial<Status>) => {
-    try {
-      await postNewStatus({ ...values });
-      showToast({ title: "Submitted form", message: "Status has been posted!" });
-    } catch (error) {
-      console.error(error);
-      showToast({ title: "Error", message: "Something went wrong!" });
-    }
-  };
+interface CommandProps extends LaunchProps<{ draftValues: Status }> {
+  children?: React.ReactNode;
+}
 
+export default function DetailCommand(props: CommandProps) {
   return (
-    <Form
-      actions={
-        <ActionPanel>
-          <Action.SubmitForm onSubmit={handleSubmit} />
-        </ActionPanel>
-      }
-    >
-      <Form.TextField id="textfield" title="Content Warning" placeholder="" />
-      <StatusContent isMarkdown={isMarkdown} />
-      <Form.Separator />
+    <SimpleCommand {...props}>
       <Form.DatePicker id="datepicker" title="Scheduled Time" />
       <VisibilityDropdown />
       <Form.FilePicker id="files" />
-      <Form.Checkbox
-        id="content-type"
-        title="Markdown"
-        label="Yes"
-        value={isMarkdown}
-        onChange={setIsMarkdown}
-        storeValue={true}
-      />
-      <Form.Checkbox id="sensitive" title="Sensitive" label="Sensitive" />
-    </Form>
+    </SimpleCommand>
   );
 }

src/simple-status.tsx

@@ -1,29 +1,34 @@
-import { useEffect, useState,useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import {
   Form,
   ActionPanel,
   Action,
   showToast,
   popToRoot,
-  LaunchProps,
   Toast,
   Cache,
   Icon,
   LocalStorage,
   getPreferenceValues,
+  LaunchProps,
 } from "@raycast/api";
+
 import { postNewStatus } from "./api";
-import { Status, AkkomaError, StatusResponse, Preference } from "./types";
+import { AkkomaError, StatusResponse, Preference, Status } from "./types";
 import { authorize } from "./oauth";
 
 import VisibilityDropdown from "./components/VisibilityDropdown";
-import StatusContent from "./components/statusContent";
+import StatusContent from "./components/StatusContent";
 
 const cache = new Cache();
 
 type SimpleStatus = Pick<Status, "content_type" | "status" | "spoiler_text" | "visibility">;
 
-export default function Command(props: LaunchProps<{ draftValues: SimpleStatus }>) {
+interface CommandProps extends LaunchProps<{ draftValues: SimpleStatus }> {
+  children?: React.ReactNode;
+}
+
+export default function SimpleCommand(props: CommandProps) {
   const { instance } = getPreferenceValues<Preference>();
   const { draftValues } = props;
   const [cw, setCw] = useState<string>(draftValues?.spoiler_text || "");
@@ -47,7 +52,7 @@ export default function Command(props: LaunchProps<{ draftValues: SimpleStatus }
     init();
   }, []);
 
-  const handleSubmit = async (values: SimpleStatus) => {
+  const handleSubmit = async (values: Status) => {
     try {
       if (!values.status) throw new Error("You might forget the content, right ? |･ω･)");
       showToast(Toast.Style.Animated, "Publishing to the Fediverse ... ᕕ( ᐛ )ᕗ");
@@ -71,11 +76,11 @@ export default function Command(props: LaunchProps<{ draftValues: SimpleStatus }
   };
 
   const handleCw = () => {
-    setShowCw(!showCw)
+    setShowCw(!showCw);
     if (cwRef.current) {
       cwRef.current.focus();
     }
-  }
+  };
 
   return (
     <Form
@@ -90,10 +95,18 @@ export default function Command(props: LaunchProps<{ draftValues: SimpleStatus }
     >
       {fqn && <Form.Description title="Account" text={fqn} />}
       {showCw && (
-        <Form.TextField id="spoiler_text" title="CW" placeholder={"content warning"} value={cw} onChange={setCw} ref={cwRef} />
+        <Form.TextField
+          id="spoiler_text"
+          title="CW"
+          placeholder={"content warning"}
+          value={cw}
+          onChange={setCw}
+          ref={cwRef}
+        />
       )}
       <StatusContent isMarkdown={isMarkdown} draftStatus={draftValues?.status} />
       <VisibilityDropdown />
+      {props.children}
       <Form.Checkbox id="markdown" title="Markdown" label="" value={isMarkdown} onChange={setIsMarkdown} storeValue />
       <Form.Checkbox id="showCw" title="Sensitive" label="" value={showCw} onChange={handleCw} storeValue />
     </Form>

src/types.ts

@@ -51,20 +51,19 @@ export interface Status {
   status: string;
   content_type: string;
   expires_in: number;
-  in_reply_to_conversation_id: string;
-  in_reply_to_id: string;
+  in_reply_to_conversation_id?: string;
+  in_reply_to_id?: string;
   language: string;
   media_ids: string[];
-  poll: Poll;
-  preview: boolean | string | number;
+  poll?: Poll;
+  preview?: boolean | string | number;
   scheduled_at: Date;
   sensitive: string | boolean | number;
-  to: string[];
+  to?: string[];
   visibility: VisibilityScope;
 }
 
 
-
 export interface StatusResponse {
   id: string;
   create_at: Date;