Function ThreadMaker

components/ThreadMaker.tsx:34–82

()

};

export const ThreadMaker = () => {
    const [url, setUrl] = useState<string>("");
    const [tweetCount, setTweetCount] = useState<number>(6);

    const {
        data: twitterThread,
        isLoading,
        mutateAsync,
    } = useMutation(createTwitterThread);

    async function makeThread(event: React.FormEvent) {
        event.preventDefault();

        if (url) {
            await mutateAsync({ url, tweetCount });
        }
    }

    return (
        <>
            <form onSubmit={makeThread}>
                <h2>Turn article into Twitter thread</h2>
                <Label>Article URL:</Label>
                <Input
                    name="url"
                    value={url}
                    onChange={(e) => setUrl(e.currentTarget.value)}
                />
                <Label>How many tweets?</Label>
                <Input
                    name="tweetCount"
                    type="number"
                    value={tweetCount}
                    onChange={(e) =>
                        setTweetCount(Number(e.currentTarget.value))
                    }
                    sx={{ width: 60 }}
                />
                {isLoading ? (
                    <Spinner />
                ) : (
                    <Button type="submit">Make Thread</Button>
                )}
            </form>

            {twitterThread ? <Thread text={twitterThread} /> : null}
        </>
    );
};