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} /> -