import React, {useEffect, useState} from 'react'; import {viewport} from '@airtable/blocks'; import {initializeBlock, Box, useRecords, useSettingsButton, Text} from '@airtable/blocks/ui'; import FlashcardContainer from './FlashcardContainer'; import {useSettings} from './settings'; import SettingsForm from './SettingsForm'; // Determines the maximum size of the app in fullscreen mode. viewport.addMaxFullscreenSize({ height: 620, width: 840, }); viewport.addMinSize({ height: 260, width: 400, }); /** * A simple flashcard app that displays records from a chosen view. * Supports choosing a question field which is displayed by default and an optional answer field that * is hidden until shown by the user. */ function FlashcardApp() { const {isValid, message, settings} = useSettings(); const [isSettingsVisible, setIsSettingsVisible] = useState(false); useSettingsButton(() => { if (!isSettingsVisible) { viewport.enterFullscreenIfPossible(); } setIsSettingsVisible(!isSettingsVisible); }); // Open the SettingsForm whenever the settings are not valid useEffect(() => { if (!isValid) { setIsSettingsVisible(true); } }, [isValid]); const records = useRecords(settings.view); return ( <Box position="absolute" top="0" left="0" bottom="0" right="0" display="flex"> <Box display="flex" flexDirection="column" flex="auto"> {isValid ? ( <FlashcardContainer records={records} settings={settings} /> ) : ( <Box display="flex" flex="auto" alignItems="center" justifyContent="center"> <Text textColor="light">{message}</Text> </Box> )} </Box> {isSettingsVisible && ( <SettingsForm setIsSettingsVisible={setIsSettingsVisible} settings={settings} /> )} </Box> ); } initializeBlock(() => <FlashcardApp />);