From 6c25695c0150e76b8785dbb89ef053124a829a3a Mon Sep 17 00:00:00 2001
From: mai <thisismainguyen@gmail.com>
Date: Sun, 24 Mar 2024 14:33:21 -0400
Subject: [PATCH] fix: faq card with question submission

---
 frontend/sac-mobile/app/(auth)/welcome.tsx  |  3 +-
 frontend/sac-mobile/components/faq-card.tsx | 68 ++++++++++++++++++---
 frontend/sac-mobile/components/input.tsx    |  6 +-
 3 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/frontend/sac-mobile/app/(auth)/welcome.tsx b/frontend/sac-mobile/app/(auth)/welcome.tsx
index 97c4bcc19..62654c1d0 100644
--- a/frontend/sac-mobile/app/(auth)/welcome.tsx
+++ b/frontend/sac-mobile/app/(auth)/welcome.tsx
@@ -22,7 +22,8 @@ const Welcome = () => {
                 <Button
                     size="lg"
                     variant="default"
-                    onPress={() => router.push('/(auth)/login')}
+                    // onPress={() => router.push('/(auth)/login')}
+                    onPress={() => router.push('/(app)/')}
                 >
                     Get Started
                 </Button>
diff --git a/frontend/sac-mobile/components/faq-card.tsx b/frontend/sac-mobile/components/faq-card.tsx
index 00c1d54da..a5331fd93 100644
--- a/frontend/sac-mobile/components/faq-card.tsx
+++ b/frontend/sac-mobile/components/faq-card.tsx
@@ -1,8 +1,18 @@
-import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
-
+import React, {useState} from 'react';
+import {Alert, Text, TouchableOpacity, View } from 'react-native';
+import { ZodError, z } from 'zod';
 import Input from '@/components/input';
 import { FAQ } from '@/types/item';
+import { Controller, useForm } from 'react-hook-form';
+import Error from '@/components/error';
+
+type FAQData = {
+    question: string,
+}
+
+const FAQSchema = z.object({
+    question: z.string(),
+});
 
 const FAQCard = ({ faq }: { faq: FAQ }) => {
     const length = () => {
@@ -12,6 +22,28 @@ const FAQCard = ({ faq }: { faq: FAQ }) => {
             return faq.clubName;
         }
     };
+
+    const {
+        control,
+        handleSubmit,
+        formState: { errors },
+        reset
+    } = useForm<FAQData>();
+
+    const onSubmit = ({question}: FAQData) => {
+        try {
+            FAQSchema.parse({question});
+            Alert.alert('Form Submitted', JSON.stringify(question));
+            reset()
+        } catch (error) {
+            if (error instanceof ZodError) {
+                Alert.alert('Validation Error', error.errors[0].message);
+            } else {
+                console.error('An unexpected error occurred:', error);
+            }
+        }
+    };
+
     return (
         <TouchableOpacity className="bg-gray-200 rounded-2xl my-[2%] p-[5%]">
             <View className="flex-row">
@@ -29,17 +61,35 @@ const FAQCard = ({ faq }: { faq: FAQ }) => {
                 </View>
             </View>
             <View className="mt-[7%]">
-                <Text className="text-sm font-bold">Questions:</Text>
+                <Text className="text-base font-bold">Question:</Text>
                 <Text>{faq.question}</Text>
-                <Text className="text-sm font-bold mt-[4%]">Answer:</Text>
+                <Text className="text-base font-bold mt-[4%]">Answer:</Text>
                 <Text numberOfLines={2} ellipsizeMode="tail">
                     {faq.answer}
                 </Text>
                 <View className="mt-[6%] mb-[1.5%]">
-                    <Input
-                        variant="faq"
-                        placeholder={'Submit a question for ' + length()}
-                    />
+                <Controller
+                    control={control}
+                    render={({ field: { onChange, value } }) => (
+                        <Input
+                            variant="faq"
+                            placeholder={'Submit a question for ' + length()}
+                            onSubmitEditing={handleSubmit(onSubmit)}
+                            autoCorrect={false}
+                            onChangeText={onChange}
+                            value={value}
+                        />
+                    )}
+                    name="question"
+                    rules={{
+                        required: 'Cannot submit form if empty'
+                    }}
+                />
+                {errors.question && (
+                    <View className="mt-[2%]">
+                        <Error message={errors.question.message} />
+                    </View>
+                )}
                 </View>
             </View>
         </TouchableOpacity>
diff --git a/frontend/sac-mobile/components/input.tsx b/frontend/sac-mobile/components/input.tsx
index d97c35d9d..fddfa4e07 100644
--- a/frontend/sac-mobile/components/input.tsx
+++ b/frontend/sac-mobile/components/input.tsx
@@ -1,4 +1,4 @@
-import { Text, TextInput, TextInputProps, View } from 'react-native';
+import { GestureResponderEvent, Text, TextInput, TextInputProps, TouchableOpacity, View } from 'react-native';
 
 import { VariantProps, cva } from 'class-variance-authority';
 
@@ -52,9 +52,9 @@ const Input = ({ title, error, variant, ...props }: InputProps) => {
                     onChangeText={props.onChangeText}
                     value={props.value}
                     secureTextEntry={props.secureTextEntry || false}
-                    onSubmitEditing={props.onSubmitEditing}
                 />
-                <Button size="faq" variant="faq" />
+                {/* @ts-ignore */}
+                <Button size="faq" variant="faq" onPress={(e: GestureResponderEvent) => props.onSubmitEditing!(e)} />
             </View>
         );
     } else {