Skip to content

Commit

Permalink
add date picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@remicolin
remicolin committed Jul 17, 2024
1 parent 3669e7c commit c5a8d2d
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 11 deletions.
3 changes: 2 additions & 1 deletion app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"react": "18.2.0",
"react-native": "0.72.3",
"react-native-canvas": "^0.1.39",
"react-native-date-picker": "^5.0.4",
"react-native-dialog": "^9.3.0",
"react-native-fs": "^2.20.0",
"react-native-get-random-values": "^1.11.0",
Expand Down Expand Up @@ -76,4 +77,4 @@
"engines": {
"node": ">=16"
}
}
}
113 changes: 103 additions & 10 deletions app/src/screens/MainScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Dialog from "react-native-dialog";
import { ethers } from 'ethers';
// import ressources
import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4, H3 } from 'tamagui'
import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser } from '@tamagui/lucide-icons';
import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ChevronLeft, Share, Eraser, CalendarSearch } from '@tamagui/lucide-icons';
import X from '../images/x.png'
import Telegram from '../images/telegram.png'
import Github from '../images/github.png'
Expand All @@ -17,7 +17,7 @@ import { ToastMessage } from '../components/ToastMessage';
import useUserStore from '../stores/userStore';
import useNavigationStore from '../stores/navigationStore';
// import utils
import { bgColor, blueColorLight, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
import { bgColor, blueColorLight, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors';
import { ModalProofSteps, Steps } from '../utils/utils';
import { scan } from '../utils/nfcScanner';
import { CircuitName, fetchZkey } from '../utils/zkeyDownload';
Expand All @@ -40,6 +40,7 @@ import AppScreen from './AppScreen';
import { RPC_URL, SignatureAlgorithm } from '../../../common/src/constants/constants';
import { mock_csca_sha256_rsa_4096, mock_dsc_sha256_rsa_4096 } from '../../../common/src/constants/mockCertificates';

import DatePicker from 'react-native-date-picker'

const MainScreen: React.FC = () => {
const [NFCScanIsOpen, setNFCScanIsOpen] = useState(false);
Expand All @@ -50,6 +51,10 @@ const MainScreen: React.FC = () => {
const [HelpIsOpen, setHelpIsOpen] = useState(false);
const [sheetIsOpen, setSheetIsOpen] = useState(false);
const [modalProofStep, setModalProofStep] = useState(0);
const [dateOfBirthDatePicker, setDateOfBirthDatePicker] = useState(new Date())
const [dateOfExpiryDatePicker, setDateOfExpiryDatePicker] = useState(new Date())
const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false)
const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false)

const {
passportNumber,
Expand Down Expand Up @@ -120,7 +125,6 @@ const MainScreen: React.FC = () => {
useUserStore.getState().setDscSecret(secret);
}


const inputs_csca = getCSCAInputs(
secret,
dscCert,
Expand All @@ -136,6 +140,10 @@ const MainScreen: React.FC = () => {
toast.show("Using mock passport data!", { type: "info" })
}

const castDate = (date: Date) => {
return (date.toISOString().slice(2, 4) + date.toISOString().slice(5, 7) + date.toISOString().slice(8, 10)).toString();
}

const decrementStep = () => {
if (selectedTab === "nfc") {
setStep(Steps.MRZ_SCAN);
Expand Down Expand Up @@ -505,7 +513,7 @@ const MainScreen: React.FC = () => {
<Sheet.Overlay />
<Sheet.Frame bg={bgColor} borderRadius="$9" pt="$2">
<YStack p="$4" f={1} gap="$3">
<Text fontSize="$6" mb="$4" color={textColor1}>Enter your the information manually</Text>
<Text fontSize="$6" mb="$4" color={textColor1}>Please provide the following information</Text>
<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Passport Number
Expand All @@ -524,11 +532,37 @@ const MainScreen: React.FC = () => {
keyboardType="default"
/>
</Fieldset>


<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Date of birth (yymmdd)
Date of birth
</Text>
<Input
<Text color={textColor1}>
{dateOfBirthDatePicker.toISOString().slice(0, 10)}
</Text>
<Button bg="white" onPress={() => setDateOfBirthDatePickerIsOpen(true)}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}>
<CalendarSearch />
</Button>
<DatePicker
modal
mode='date'
open={dateOfBirthDatePickerIsOpen}
date={dateOfBirthDatePicker}
onConfirm={(date) => {
setDateOfBirthDatePickerIsOpen(false)
setDateOfBirthDatePicker(date)
update({ dateOfBirth: castDate(date) })
}}
onCancel={() => {
setDateOfBirthDatePickerIsOpen(false)
}}
/>
{/* <Input
bg={componentBgColor}
color={textColor1}
h="$3.5"
Expand All @@ -540,13 +574,37 @@ const MainScreen: React.FC = () => {
}}
value={dateOfBirth}
keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
/>
/> */}
</Fieldset>
<Fieldset gap="$4" horizontal>
<Text color={textColor1} width={160} justifyContent="flex-end" fontSize="$4">
Date of expiry (yymmdd)
Date of expiry
</Text>
<Input
<Text color={textColor1}>
{dateOfExpiryDatePicker.toISOString().slice(0, 10)}
</Text>
<Button bg="white" onPress={() => setDateOfExpiryDatePickerIsOpen(true)}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}>
<CalendarSearch />
</Button>
<DatePicker
modal
mode='date'
open={dateOfExpiryDatePickerIsOpen}
date={dateOfExpiryDatePicker}
onConfirm={(date) => {
setDateOfExpiryDatePickerIsOpen(false)
setDateOfExpiryDatePicker(date)
update({ dateOfExpiry: castDate(date) })
}}
onCancel={() => {
setDateOfExpiryDatePickerIsOpen(false)
}}
/>
{/* <Input
bg={componentBgColor}
color={textColor1}
h="$3.5"
Expand All @@ -558,8 +616,43 @@ const MainScreen: React.FC = () => {
}}
value={dateOfExpiry}
keyboardType={Platform.OS === "ios" ? "default" : "number-pad"}
/>
/> */}
</Fieldset>
<XStack f={1} />
<YStack mb="$6" gap="$2">
<Button
bg={textColor1}
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}
onPress={() => {
setSheetIsOpen(false)
setStep(Steps.MRZ_SCAN_COMPLETED)
}}
>
<Text
fontSize="$6"
color={bgColor}
>Submit</Text>
</Button>
<Button
bg="gray"
pressStyle={{
bg: componentBgColor2,
borderColor: componentBgColor2,
}}
onPress={() => {
setSheetIsOpen(false)
}}
>
<Text
fontSize="$6"
color={bgColor}
>Cancel</Text>
</Button>
</YStack>

</YStack>
</Sheet.Frame>
</Sheet>
Expand Down

0 comments on commit c5a8d2d

Please sign in to comment.