refactor: StatusContent component

src/api.ts

@@ -1,7 +1,7 @@
 import fetch from "node-fetch";
 import { OAuth, getPreferenceValues } from "@raycast/api";
 import { Credentials, Preference, Status ,StatusResponse} from "./types";
-import { authorize, client } from "./oauth";
+import { client } from "./oauth";
 
 export const fetchToken = async (params: URLSearchParams, errorMessage: string): Promise<OAuth.TokenResponse> => {
   const { instance } = getPreferenceValues<Preference>();

src/components/StatusContent.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { Form } from "@raycast/api";
 
-interface StatusContentProps {
+interface statusProps {
   isMarkdown: boolean;
+  draftStatus: string | undefined;
 }
 
-const StatusContent = ({ isMarkdown }: StatusContentProps) => {
-  const [statusContent, setStatusContent] = useState<string>("");
-  const [error, setError] = useState<string>("");
-
+const StatusContent = ({ isMarkdown, draftStatus }: statusProps) => {
+  const [error, setError] = useState<boolean>(false);
+  const [statusContent, setStatusContent] = useState<string>(draftStatus || "");
+  
   return (
     <>
       <Form.TextArea
@@ -18,10 +19,10 @@ const StatusContent = ({ isMarkdown }: StatusContentProps) => {
         enableMarkdown={isMarkdown}
         autoFocus={true}
         value={statusContent}
-        error={error}
+        error={error ? "Content should not be empty!" : ""}
         onChange={setStatusContent}
         onBlur={() => {
-          setError(!statusContent ? "content should't be empty!" : "");
+          setError(!statusContent.trim());
         }}
       />
     </>

src/simple-status.tsx

@@ -1,35 +1,29 @@
 import { useEffect, useState } from "react";
-import { Form, ActionPanel, Action, showToast, popToRoot, LaunchProps,Toast } from "@raycast/api";
+import { Form, ActionPanel, Action, showToast, popToRoot, LaunchProps, Toast } from "@raycast/api";
 import { postNewStatus } from "./api";
 import { Status } from "./types";
 import { authorize } from "./oauth";
 import VisibilityDropdown from "./components/VisibilityDropdown";
+import StatusContent from "./components/statusContent";
 
 export default function Command(props: LaunchProps<{ draftValues: Partial<Status> }>) {
   const { draftValues } = props;
-  const [statusContent, setStatusContent] = useState<string>(draftValues?.status || "");
   const [cw, setCw] = useState<string>(draftValues?.spoiler_text || "");
   const [isMarkdown, setIsMarkdown] = useState<boolean>(true);
-  const [error, setError] = useState<boolean>(false);
 
   useEffect(() => {
     authorize();
   }, []);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (values: Partial<Status>) => {
     try {
-      const newStatus: Partial<Status> = {
-        spoiler_text: cw,
-        status: statusContent,
+      await postNewStatus({
+        ...values,
         content_type: isMarkdown ? "text/markdown" : "text/plain",
-        visibility: "direct",
-      };
+      });
 
-      console.log(newStatus);
-      await postNewStatus(newStatus);
-      setCw('')
-      setStatusContent('')
-      showToast({ title: "Submitted form", message: "Status has been posted!" });
+      setCw("");
+      showToast({ title: "Success", message: "Status has been posted!" });
       popToRoot();
     } catch (error) {
       console.error(error);
@@ -47,22 +41,10 @@ export default function Command(props: LaunchProps<{ draftValues: Partial<Status
       }
     >
       <Form.TextField id="spoiler_text" title="CW" placeholder="content warning" value={cw} onChange={setCw} />
-      <Form.TextArea
-        id="status"
-        title="Content"
-        placeholder="Write something down"
-        enableMarkdown={isMarkdown}
-        autoFocus={true}
-        value={statusContent}
-        error={error ? "Content should not be empty!" : ""}
-        onChange={setStatusContent}
-        onBlur={() => {
-          setError(!statusContent);
-        }}
-      />
-      {/* <VisibilityDropdown/> */}
+      <StatusContent isMarkdown={isMarkdown} draftStatus={draftValues?.status} />
+      <VisibilityDropdown />
       <Form.Checkbox
-        id="content-type"
+        id="markdown"
         title="Markdown"
         label="Yes"
         value={isMarkdown}