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 = () => {
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();
+
+ 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 (
@@ -29,17 +61,35 @@ const FAQCard = ({ faq }: { faq: FAQ }) => {
- Questions:
+ Question:
{faq.question}
- Answer:
+ Answer:
{faq.answer}
-
+ (
+
+ )}
+ name="question"
+ rules={{
+ required: 'Cannot submit form if empty'
+ }}
+ />
+ {errors.question && (
+
+
+
+ )}
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}
/>
-
+ {/* @ts-ignore */}
+