diff --git a/frontend/Components/MenuItems/index.tsx b/frontend/Components/MenuItems/index.tsx index 71520fb..ced0298 100644 --- a/frontend/Components/MenuItems/index.tsx +++ b/frontend/Components/MenuItems/index.tsx @@ -55,6 +55,8 @@ export const MenuItems: React.FC = () => { navigate('Feed', { page: 'ProfileConfig' }) } else if (key === 'about') { navigate('About') + } else if (key === 'faq') { + navigate('Faq') } else if (key === 'config') { navigate('Config') } else if (key === 'contacts') { @@ -167,8 +169,14 @@ export const MenuItems: React.FC = () => { onPress={() => onPressItem('about', 2)} onTouchEnd={() => setDrawerItemIndex(-1)} /> - - + onPressItem('faq', 2)} + onTouchEnd={() => setDrawerItemIndex(-1)} + /> void }> = ({ faq, expanded, onPress }) => { + const theme = useTheme(); + + return ( + + + {faq.answer} + + + ); +}; + +const FAQList: React.FC<{ faqs: FAQItem[]; search: string }> = ({ faqs, search }) => { + const [expandedId, setExpandedId] = React.useState(null); + + const handlePress = (id: number) => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setExpandedId(expandedId === id ? null : id); + }; + + const filteredFaqs = faqs.filter((faq) => faq.question.toLowerCase().includes(search.toLowerCase())); + const groupedFaqs = filteredFaqs.reduce<{ [key: string]: FAQItem[] }>((groups, faq) => { + const firstLetter = faq.question[0].toUpperCase(); + if (!groups[firstLetter]) { + groups[firstLetter] = []; + } + groups[firstLetter].push(faq); + return groups; + }, {}); + + return ( + + {Object.entries(groupedFaqs).map(([letter, faqs]) => ( + + {letter} + {faqs.map((faq) => ( + handlePress(faq.id)} /> + ))} + + + ))} + + ); +}; + + +interface FaqPageProps {} + +const FaqPage: React.FC = () => { + const [search, setSearch] = React.useState(''); + const { t } = useTranslation('common'); + const theme = useTheme(); + + const faqs: FAQItem[] = [ + { id: 1, question: t('faq.note_broadcasting.question'), answer: t('faq.note_broadcasting.answer') }, + { id: 2, question: t('faq.notes_colouring.question'), answer: t('faq.notes_colouring.answer') }, + { id: 3, question: t('faq.resilient_login.question'), answer: t('faq.resilient_login.answer') }, + ]; + + return ( + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + padding: 16, + }, +}); + +export default FaqPage; diff --git a/frontend/Pages/FeedNavigator/index.tsx b/frontend/Pages/FeedNavigator/index.tsx index 5492390..44a9017 100644 --- a/frontend/Pages/FeedNavigator/index.tsx +++ b/frontend/Pages/FeedNavigator/index.tsx @@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next' import HomePage from '../HomePage' import RelaysPage from '../RelaysPage' import AboutPage from '../AboutPage' +import FaqPage from '../FaqPage' import ProfileConfigPage from '../ProfileConfigPage' import ProfilePage from '../ProfilePage' import ProfileCard from '../../Components/ProfileCard' @@ -189,6 +190,7 @@ export const HomeNavigator: React.FC = () => { +