// api/clip.ts
import { route } from "next-ts-routes";

const { handler, get, post } = route("api/clip", {
  ctx: async () => {
    const Redis = (await import("@upstash/redis")).Redis;

    const redis = new Redis();

    return { redis };
  },
  GET: async ({}, { ctx }) => {
    return ctx.redis.get("clip") as Promise<string | undefined>;
  },
  POST: async ({ input }: { input: { text: string } }, { ctx }) => {
    return ctx.redis.set("clip", input.text);
  },
});

export const getClip = get;
export const postClip = post;

export default handler;

// pages/index.tsx
import { getClip, postClip } from '../api/clip';

export default function Home() {
  const [clip, setClip] = useState<string | undefined>(undefined);

  useEffect(() => {
    getClip().then(setClip);
  }, []);

  return (
    <div>
      <h1>Clip</h1>
      <p>{clip}</p>
      <form
        onSubmit={async (e) => {
          e.preventDefault();
          const text = e.currentTarget.elements[0].value;
          await postClip({ text });
          setClip(text);
        }}
      >
        <input type="text" />
        <button type="submit">Set</button>
      </form>
    </div>
  );
}