feat: pass input text through post action (#201)

coinbase · Feb 29, 2024 · 8165896 · 8165896
1 parent 1d5dba0
commit 8165896
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
@@ -1,7 +1,7 @@
 import { postFrame } from '@/utils/postFrame';
 import { frameResultsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
-import { PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import { ChangeEvent, PropsWithChildren, useCallback, useMemo, useState } from 'react';
 import { ArrowTopRightIcon } from '@radix-ui/react-icons';
 import { useRedirectModal } from '@/components/RedirectModalContext/RedirectModalContext';
 
@@ -22,6 +22,7 @@ export function Frame() {
 }
 
 function ValidFrame({ tags }: { tags: Record<string, string> }) {
+  const [inputText, setInputText] = useState('');
   const { image, imageAspectRatioClassname, input, buttons } = useMemo(() => {
     const image = tags['fc:frame:image'];
     const imageAspectRatioClassname =
@@ -48,6 +49,11 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
     };
   }, [tags]);
 
+  const handleInputChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => setInputText(e.target.value),
+    [],
+  );
+
   return (
     <div>
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -62,12 +68,13 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
             className="bg-input-light border-light rounded-lg border p-2 text-black"
             type="text"
             placeholder={input}
+            onChange={handleInputChange}
           />
         )}
         <div className="flex flex-wrap gap-4">
           {buttons.map((button) =>
             button ? (
-              <FrameButton key={button.key} button={button}>
+              <FrameButton inputText={inputText} key={button.key} button={button}>
                 {button.value}
               </FrameButton>
             ) : null,
@@ -90,7 +97,7 @@ function PlaceholderFrame() {
     <div className="flex flex-col">
       <div className="bg-farcaster flex aspect-[1.91/1] w-full rounded-t-xl"></div>
       <div className="bg-button-gutter-light dark:bg-content-light flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
-        <FrameButton>Get Started</FrameButton>
+        <FrameButton inputText="">Get Started</FrameButton>
       </div>
     </div>
   );
@@ -99,9 +106,11 @@ function PlaceholderFrame() {
 function FrameButton({
   children,
   button,
+  inputText,
 }: PropsWithChildren<{
   // TODO: this type should probably be extracted
   button?: { key: string; value: string; action: string; target: string; index: number };
+  inputText: string;
 }>) {
   const { openModal } = useRedirectModal();
   const [isLoading, setIsLoading] = useState(false);
@@ -119,13 +128,16 @@ function FrameButton({
             fid: 0,
             hash: '0xthisisnotreal',
           },
-          inputText: '',
+          inputText,
           fid: 0,
           messageHash: '0xthisisnotreal',
           network: 0,
           timestamp: 0,
         });
-        setResults((prev) => [...prev, result]);
+        // TODO: handle when result is not defined
+        if (result) {
+          setResults((prev) => [...prev, result]);
+        }
       };
       setIsLoading(true);
       if (button?.action === 'post_redirect') {
@@ -140,7 +152,7 @@ function FrameButton({
       openModal(onConfirm);
     }
     // TODO: implement other actions (mint, etc.)
-  }, [button, setResults]);
+  }, [button?.action, button?.index, button?.target, inputText, openModal, setResults]);
   return (
     <button
       className="border-button w-[45%] grow rounded-lg border bg-white px-4 py-2 text-black"