From df6539b581f751d927bbd1c3c20082632443226c Mon Sep 17 00:00:00 2001 From: turnoffthiscomputer Date: Wed, 30 Oct 2024 16:54:54 +0100 Subject: [PATCH] use tamagui sheet instead of select component --- app/src/screens/MainScreen.tsx | 102 +++++++++++++++- app/src/screens/MockDataScreen.tsx | 188 ++++++----------------------- 2 files changed, 139 insertions(+), 151 deletions(-) diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx index 7bc15b57..bf2ec212 100644 --- a/app/src/screens/MainScreen.tsx +++ b/app/src/screens/MainScreen.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { NativeEventEmitter, NativeModules, Linking, Modal, Platform, Pressable } from 'react-native'; +import { NativeEventEmitter, NativeModules, Linking, Modal, Platform, Pressable, TouchableOpacity, ScrollView } from 'react-native'; import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3, View, Separator } from 'tamagui' import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, ArrowRight, UserPlus, CalendarSearch, X, ShieldCheck } from '@tamagui/lucide-icons'; import Telegram from '../images/telegram.png' @@ -36,6 +36,9 @@ import ValidProofScreen from './ValidProofScreen'; import WrongProofScreen from './WrongProofScreen'; import MockDataScreen from './MockDataScreen'; import OPENPASSPORT_LOGO from '../images/openpassport.png' +import { countryCodes } from '../../../common/src/constants/constants'; +import getCountryISO2 from "country-iso-3-to-2"; +import { flag } from 'country-emoji'; const emitter = (Platform.OS === 'android') ? new NativeEventEmitter(NativeModules.nativeModule) @@ -57,6 +60,10 @@ const MainScreen: React.FC = () => { const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false) const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false) const [isFormComplete, setIsFormComplete] = useState(false); + const [countrySheetOpen, setCountrySheetOpen] = useState(false); + const [algorithmSheetOpen, setAlgorithmSheetOpen] = useState(false); + const [selectedCountry, setSelectedCountry] = useState('USA'); + const [selectedAlgorithm, setSelectedAlgorithm] = useState('rsa_sha256'); const { passportNumber, @@ -206,6 +213,16 @@ const MainScreen: React.FC = () => { const { height } = useWindowDimensions(); + const handleCountrySelect = (countryCode: string) => { + setSelectedCountry(countryCode); + setCountrySheetOpen(false); + }; + + const handleAlgorithmSelect = (algorithm: string) => { + setSelectedAlgorithm(algorithm); + setAlgorithmSheetOpen(false); + }; + return ( @@ -773,6 +790,82 @@ const MainScreen: React.FC = () => { + + + + + + Select a country + setCountrySheetOpen(false)} p="$2"> + + + + + + {Object.keys(countryCodes).map((countryCode) => ( + { + handleCountrySelect(countryCode); + setCountrySheetOpen(false); + }} + > + + + {countryCodes[countryCode as keyof typeof countryCodes]} {flag(getCountryISO2(countryCode))} + + + + ))} + + + + + + + + + + + Select an algorithm + setAlgorithmSheetOpen(false)} p="$2"> + + + + + + {["rsa_sha1", "rsa_sha256", "rsapss_sha256"].map((algorithm) => ( + { + handleAlgorithmSelect(algorithm); + setAlgorithmSheetOpen(false); + }} + > + + {algorithm} + + + ))} + + + + + { /> - + setCountrySheetOpen(true)} + onAlgorithmPress={() => setAlgorithmSheetOpen(true)} + selectedCountry={selectedCountry} + selectedAlgorithm={selectedAlgorithm} + /> { - const [signatureAlgorithm, setSignatureAlgorithm] = useState("rsa_sha256"); - const listOfSignatureAlgorithms = ["rsa_sha1", "rsa_sha256", "rsapss_sha256"]; - +import { StyleSheet, TouchableOpacity, View } from 'react-native'; + +interface MockDataScreenProps { + onCountryPress: () => void; + onAlgorithmPress: () => void; + selectedCountry: string; + selectedAlgorithm: string; +} + +const MockDataScreen: React.FC = ({ + onCountryPress, + onAlgorithmPress, + selectedCountry, + selectedAlgorithm, +}) => { const [age, setAge] = useState(24); const [expiryYears, setExpiryYears] = useState(5); - const [nationality, setNationality] = useState("FRA"); const [isGenerating, setIsGenerating] = useState(false); const [isInOfacList, setIsInOfacList] = useState(false); const castDate = (yearsOffset: number) => { @@ -34,8 +43,8 @@ const MockDataScreen: React.FC = () => { let mockPassportData; if (isInOfacList) { mockPassportData = genMockPassportData( - signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", - nationality as keyof typeof countryCodes, + selectedAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", + selectedCountry as keyof typeof countryCodes, castDate(-age), castDate(expiryYears), randomPassportNumber, @@ -44,8 +53,8 @@ const MockDataScreen: React.FC = () => { ); } else { mockPassportData = genMockPassportData( - signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", - nationality as keyof typeof countryCodes, + selectedAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", + selectedCountry as keyof typeof countryCodes, castDate(-age), castDate(expiryYears), randomPassportNumber, @@ -65,149 +74,30 @@ const MockDataScreen: React.FC = () => { await new Promise(resolve => setTimeout(resolve, 1000)); useNavigationStore.getState().setSelectedTab("next"); - }, [signatureAlgorithm, nationality, age, expiryYears, isInOfacList]); - const countryOptions = useMemo(() => { - return Object.keys(countryCodes).map((countryCode, index) => ({ - countryCode, - countryName: countryCodes[countryCode as keyof typeof countryCodes], - flagEmoji: flag(getCountryISO2(countryCode)), - index, - })); - }, []); + }, [selectedAlgorithm, selectedCountry, age, expiryYears, isInOfacList]); + return ( Generate passport data - - - Encryption - - + + Encryption + - - - - - Nationality - - + + Nationality + - -
Age (🎂)