refactor: StatusContent component

This commit is contained in:
sevichecc 2023-04-14 22:20:38 +08:00
parent 44599de9b2
commit bca2f2e23a
Signed by untrusted user who does not match committer: SevicheCC
GPG key ID: C577000000000000
3 changed files with 20 additions and 37 deletions

View file

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

View file

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

View file

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