diff --git a/.env.development b/.env.development index 04bf676..265055a 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -BASE_URL=http://192.168.1.30:8080 \ No newline at end of file +BASE_URL=https://localhost:8443 \ No newline at end of file diff --git a/App.tsx b/App.tsx index 47046ef..75dcdcd 100644 --- a/App.tsx +++ b/App.tsx @@ -7,11 +7,10 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Provider } from 'react-redux'; import QRScannerScreen from './screens/QRScannerScreen'; import HistoryScreen from './screens/HistoryScreen'; -import SettingsScreen from './screens/SettingsScreen'; +import EmailScreen from './screens/EmailScreen'; // Import the Email screen import { QRCodeContext } from './types'; import CustomTabBar from './components/CustomTabBar'; import store from './store'; - import { withAuthenticator } from '@aws-amplify/ui-react-native'; import { Amplify } from 'aws-amplify'; import config from './src/aws-exports'; @@ -42,7 +41,7 @@ const App: React.FC = () => { {(props) => } - + @@ -50,4 +49,4 @@ const App: React.FC = () => { ); }; -export default withAuthenticator(App); \ No newline at end of file +export default withAuthenticator(App); diff --git a/api/qrCodeAPI.tsx b/api/qrCodeAPI.tsx index 550730e..2a19784 100644 --- a/api/qrCodeAPI.tsx +++ b/api/qrCodeAPI.tsx @@ -1,7 +1,7 @@ import axios from 'axios'; import Constants from 'expo-constants'; -const { API_BASE_URL } = Constants.expoConfig.extra; -//const API_BASE_URL = 'http://192.168.1.30:8080/v1/qrcodetypes'; +//const { API_BASE_URL } = Constants.expoConfig.extra; +const API_BASE_URL = 'https://localhost:8443'; const API_URL_DETECT = "/v1/qrcodetypes/detect"; const API_URL_VERIFY_URL = "/v1/qrcodetypes/verifyURL" diff --git a/components/CustomTabBar.tsx b/components/CustomTabBar.tsx index 576eeda..4f7cc9f 100644 --- a/components/CustomTabBar.tsx +++ b/components/CustomTabBar.tsx @@ -1,17 +1,15 @@ import React from 'react'; import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; import { BottomTabBarProps } from '@react-navigation/bottom-tabs'; -import { Ionicons } from '@expo/vector-icons'; - +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; // Define custom props for CustomTabBar interface CustomTabBarProps extends BottomTabBarProps { clearScanData: () => void; } - // Custom tab bar component with typings -const CustomTabBar: React.FC = ({ state, descriptors, navigation, clearScanData }) => { +const CustomTabBar: React.FC = ({ state, descriptors, navigation, clearScanData }) => { return ( {state.routes.map((route, index) => { @@ -25,13 +23,13 @@ const CustomTabBar: React.FC = ({ state, descriptors, naviga const isFocused = state.index === index; - // Event handler for tab press - const onPress = () => { - const event = navigation.emit({ - type: 'tabPress', - target: route.key, - canPreventDefault: true - }); + // Event handler for tab press + const onPress = () => { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); if (!isFocused && !event.defaultPrevented) { navigation.navigate(route.name); @@ -53,7 +51,9 @@ const CustomTabBar: React.FC = ({ state, descriptors, naviga }); }; - const iconName = route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings'; + // Define the icon for each tab + const iconName = + route.name === 'QRScanner' ? 'camera' : route.name === 'History' ? 'time' : 'settings'; return ( = ({ state, descriptors, naviga onLongPress={onLongPress} style={styles.tabButton} > - + {route.name === 'Email' ? ( + + ) : ( + + )} {/* Check if label is a string before rendering */} {typeof label === 'string' ? ( @@ -77,13 +81,15 @@ const CustomTabBar: React.FC = ({ state, descriptors, naviga ); })} - { - clearScanData(); - navigation.reset({ - index: 0, - routes: [{ name: 'QRScanner' }], - }); - }}> + { + clearScanData(); + navigation.reset({ + index: 0, + routes: [{ name: 'QRScanner' }], + }); + }} + > diff --git a/package-lock.json b/package-lock.json index 3becd1a..ebf015c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.17", + "@react-navigation/stack": "^6.4.1", "@reduxjs/toolkit": "^2.2.6", "aws-amplify": "^6.4.2", "axios": "^1.7.2", @@ -32,10 +33,10 @@ "react": "18.2.0", "react-native": "^0.74.3", "react-native-dotenv": "^3.4.11", - "react-native-gesture-handler": "~2.16.1", + "react-native-gesture-handler": "^2.17.1", "react-native-get-random-values": "^1.11.0", "react-native-qrcode-svg": "^6.3.1", - "react-native-reanimated": "~3.10.1", + "react-native-reanimated": "^3.14.0", "react-native-safe-area-context": "^4.10.4", "react-native-screens": "3.31.1", "react-native-svg": "15.2.0", @@ -3669,7 +3670,10 @@ "version": "2.0.17", "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", +<<<<<<< HEAD "license": "MIT", +======= +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "dependencies": { "@types/hammerjs": "^2.0.36" }, @@ -7340,7 +7344,10 @@ "version": "6.7.2", "resolved": "https://registry.npmjs.org/@react-navigation/drawer/-/drawer-6.7.2.tgz", "integrity": "sha512-o4g2zgTZa2+oLd+8V33etrSM38KIqu8S/zCBTsdsHUoQyVE7JNRiv3Qgq/jMvEb8PZCqWmm7jHItcgzrBuwyOQ==", +<<<<<<< HEAD "license": "MIT", +======= +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "dependencies": { "@react-navigation/elements": "^1.3.31", "color": "^4.2.3", @@ -7360,7 +7367,10 @@ "version": "1.3.31", "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.31.tgz", "integrity": "sha512-bUzP4Awlljx5RKEExw8WYtif8EuQni2glDaieYROKTnaxsu9kEIA515sXQgUDZU4Ob12VoL7+z70uO3qrlfXcQ==", +<<<<<<< HEAD "license": "MIT", +======= +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "peerDependencies": { "@react-navigation/native": "^6.0.0", "react": "*", @@ -7402,6 +7412,24 @@ "nanoid": "^3.1.23" } }, + "node_modules/@react-navigation/stack": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.4.1.tgz", + "integrity": "sha512-upMEHOKMtuMu4c9gmoPlO/JqI6mDlSqwXg1aXKOTQLXAF8H5koOLRfrmi7AkdiE9A7lDXWUAZoGuD9O88cYvDQ==", + "dependencies": { + "@react-navigation/elements": "^1.3.31", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-gesture-handler": ">= 1.0.0", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.2.6", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.6.tgz", @@ -8756,8 +8784,12 @@ "node_modules/@types/hammerjs": { "version": "2.0.45", "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz", +<<<<<<< HEAD "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==", "license": "MIT" +======= + "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==" +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", @@ -12229,7 +12261,10 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", +<<<<<<< HEAD "license": "BSD-3-Clause", +======= +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "dependencies": { "react-is": "^16.7.0" } @@ -16309,15 +16344,24 @@ } }, "node_modules/react-native-gesture-handler": { +<<<<<<< HEAD "version": "2.16.2", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz", "integrity": "sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==", "license": "MIT", +======= + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.17.1.tgz", + "integrity": "sha512-pWfniN6NuVKUq40KACuD3NCMe+bWNQCpD3cmxL6aLSCTwPKYmf7l4Lp0/E/almpjvxhybJZtFLU0w4tmxnIKaA==", +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4", +<<<<<<< HEAD "lodash": "^4.17.21", +======= +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "prop-types": "^15.7.2" }, "peerDependencies": { @@ -16352,10 +16396,16 @@ } }, "node_modules/react-native-reanimated": { +<<<<<<< HEAD "version": "3.10.1", "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.10.1.tgz", "integrity": "sha512-sfxg6vYphrDc/g4jf/7iJ7NRi+26z2+BszPmvmk0Vnrz6FL7HYljJqTf531F1x6tFmsf+FEAmuCtTUIXFLVo9w==", "license": "MIT", +======= + "version": "3.14.0", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.14.0.tgz", + "integrity": "sha512-TAxLtCfRyC/nOLeWoX/8MhdIF+Fi1e1NbLhIgEm5Kv9/gioAwSNaqLUYxjIClU1RaLwSTE8iaiHNVhTU4TS9DA==", +>>>>>>> 278f51e60650b96379aeb7a326d446d685b2a27f "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.0.0-0", "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0", diff --git a/package.json b/package.json index da41c64..e577ddb 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/drawer": "^6.7.2", "@react-navigation/native": "^6.1.17", + "@react-navigation/stack": "^6.4.1", "@reduxjs/toolkit": "^2.2.6", "aws-amplify": "^6.4.2", "axios": "^1.7.2", @@ -35,10 +36,10 @@ "react": "18.2.0", "react-native": "^0.74.3", "react-native-dotenv": "^3.4.11", - "react-native-gesture-handler": "~2.16.1", + "react-native-gesture-handler": "^2.17.1", "react-native-get-random-values": "^1.11.0", "react-native-qrcode-svg": "^6.3.1", - "react-native-reanimated": "~3.10.1", + "react-native-reanimated": "^3.14.0", "react-native-safe-area-context": "^4.10.4", "react-native-screens": "3.31.1", "react-native-svg": "15.2.0", diff --git a/screens/EmailScreen.tsx b/screens/EmailScreen.tsx new file mode 100644 index 0000000..bd5d192 --- /dev/null +++ b/screens/EmailScreen.tsx @@ -0,0 +1,346 @@ +import React, { useState } from 'react'; +import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native'; +const emailData = { + emailAddress: 'user@example.com', + messages: [ + { + messageId: '190f239a0b0ccd52', + subject: 'Fwd: Inaugural newsletter for EEE alumni, Singapore Polytechnic', + historyId: '29512', + date: 'Sat, 27 Jul 2024 11:25:44 +0800', + qrCodeByContentId: [ + { + cid: 'ii_190f2388c4123a1f8ce', + attachmentId: 'ANGjdJ_o4rREokfsZGp6r4aq9eZwPDCmatH7kcFkHsmKftrFGXBkPCvvdAgr8_oyYMcovpwJP8rzNvImcql0BAYOPCzdCBIeKoX7qddlA51CdsRfkRD7J56JMWbxiwb6qgZkDSDVp3zgEmiPhbk52Cm_QtlSZ8fsmMqAR_jDW9LbdxSSPY-mQJc3pMSgwHG69_BzBvBKXvW3-sJHHt1uL8J1cVo3yrTQ5X_SG3xkyv7eYKu9iFZ65mz70sW2PIooDmZroBRMfXgXnfK0vhp0kFb3vDcKDl8unN9YjRIrRdCov_7thsCIn_ahhFMCd4gPoLMnsva3czuVNbQz7Ze-Uihk3RLc6FuoVzV8BxmEjuYMApxPDm17ztm6FG9i_TADSQFE5e4ZxtJycCA3lYr0', + decodedContent: [ + 'https://icrm.sp.edu.sg/alumni/', + 'https://industry.sp.edu.sg/span/career-opportunities/' + ], + totalQRCodeFound: 2 + } + ] + }, + { + messageId: '190f2386f85c3a36', + subject: 'Fwd: Counting Down - ITE Alumni Association 25th Anniversary Beach Cleanup', + historyId: '29518', + date: 'Sat, 27 Jul 2024 11:24:26 +0800', + qrCodeByURL: [ + { + url: 'https://www.itealumni.org.sg/massemail/20221021/beach_clean_up_qrcode.png', + decodedContent: [ + 'https://me-qr.com/YHuVUWd' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f233d7ca4d8ac', + subject: 'Fwd: You’ve unlocked the Business Profile Rewards Programme!', + historyId: '29571', + date: 'Sat, 27 Jul 2024 11:19:25 +0800', + qrCodeByURL: [ + { + url: 'https://image.mkt.grab.com/lib/fe3a15707564067f751c78/m/55/8a4a3d09-136f-45df-b093-cc7ba5ae5a58.png', + decodedContent: [ + 'https://grab.onelink.me/2695613898?pid=EDM&c=ALL_NA_PAX_GFB_ALL_REG__BusinessRidesChallenge_NA&is_retargeting=true&af_dp=grab%3A%2F%2Fopen%3FscreenType%3DREWARDSWEB%26screen%3Dchallenge&af_force_deeplink=true&af_sub5=edm&af_ad=&af_web_dp=https%3A%2F%2Fwww.grab.com%2Fdownload%2F' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f232a1a55c1dd', + subject: 'Fwd: [UPDATE!] EEE Alumni Homecoming 2024 is now on 2 Aug, Friday', + historyId: '29574', + date: 'Sat, 27 Jul 2024 11:18:05 +0800', + qrCodeByURL: [ + { + url: 'https://file-au.clickdimensions.com/spedusg-a7v6v/files/eeealumnihomecoming2024on2aug.jpg', + decodedContent: [ + 'https://scanned.page/6645b492afa32' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f231cb59cb122', + subject: 'Fwd: Latest Job Opportunities (posted in Aug) with Attractive Salaries for ITE Graduates - follow us on IG, FB & TG!', + historyId: '29580', + date: 'Sat, 27 Jul 2024 11:17:11 +0800', + qrCodeByContentId: [ + { + cid: 'ii_190f2310981c2203e801', + attachmentId: 'ANGjdJ9da1OrxMtqkRbiPAvHbJIYMIBzHAbZlVSaSsJKbg3Q3HSSlO1xA5xb1Q8PAbzqh7QjIJ4gIdqo9vTiuQanpkcv7Suhj4KhPFbL2woGSy6w4G_Ihbqw-A2V06oPPO74AZWlDISzDH9bxbs2fjCcaGqFJykXNfYVy4Tfy7ZKbHIC1w12YAcK_xooDPEl48UU5Z0XHhlpWGTnAfMOUvGBkUF28MHFyPwhMYcaQgJ8GajQtm5LsXkiavj4JBU-27oPB9eupTMLzKZXKZY7kzaxLwfI_adCu7HxPQudQoPaVHL_sUHxohm8Tl3mJV0T4sVyzL4bemLEQBVXQfsp55mZspyk6ujOkKe7YHboI_EyNsvcRHKlezO6_uovYI-alBuLSJ2gEIXjViU_63tn', + decodedContent: [ + 'https://sites.google.com/view/itecareerservices/home', + 'https://www.instagram.com/itealumni/', + 'https://www.facebook.com/ITE-Alumni-Network-152816488099453' + ], + totalQRCodeFound: 3 + } + ] + }, + { + messageId: '190f2315e39caf67', + subject: 'Fwd: Invite to SEIT Security Summit 2021', + historyId: '29596', + date: 'Sat, 27 Jul 2024 11:16:44 +0800', + qrCodeByURL: [ + { + url: 'https://mcusercontent.com/75a08b98bc328a8dcf78d9606/images/09ba74eb-b05f-a564-df79-53e4cdc6f53c.jpg', + decodedContent: [ + 'https://form.gov.sg/6101fe896bd2f30011aaf4c6' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f2309ae35c6d2', + subject: 'Fwd: Many Exciting, Good Paying Job Opportunities in our Job Portal for ITE Graduates', + historyId: '29607', + date: 'Sat, 27 Jul 2024 11:15:53 +0800', + qrCodeByContentId: [ + { + cid: 'ii_190f22744b62d7326d2', + attachmentId: 'ANGjdJ-M5yXJcDRyejnSdcpr0JipKrq1PL1c2gpXiMd6jC6EI0oa4VKe9QJf_oArNRb4ae2IvhZO7OE7BOj_GqcLYS29qz4sUCTQvXA2Z4ydsLOgBkhMyHyFIL9KGLW4YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V', + decodedContent: [ + 'https://www.instagram.com/itealumni/', + 'https://www.facebook.com/ITEAlumni' + ], + totalQRCodeFound: 2 + }, + { + cid: 'ii_190f22744b62c91aec1', + attachmentId: 'ANGjdJ_2XGOHh1AS3Vtx02mFNCIKP-DpSz8sChaNxzeFaviwLe5zBsLpxJ8vv4WYrYElyy7S0xxjy5q3CWWlHGI8zgkZCF95zPlEvJ8f_bWswlQ6tIanXM3b_tk6Jh_e35X99t1PjfRQFDck3vWEfHtMuM3brPkaNP2Ely4bjGO9bthU58TRpcHq3sdnhlrK2If0xLygyS9mw22og17RVGd8vI39QzVSF7xY8JnI-OTJbiRRZ4es3lFLStf3DpjSHIRqeja8Ps2oEduCLl4MQZ7Mhy0df585QC-eJvk6UUX20q2JfQPX6Up7xuR9sxD0GLFeJhseF98Y4QN3K2v6YAhch-LFp3_p-StNQfLafI2bOfFAiv9J8FflTHEIPOICLkRvM_2lRYK4cQajgROp', + decodedContent: [ + 'https://uspur.e2i.com.sg/ITE', + 'https://sites.google.com/view/bookyourecg', + 'https://sites.google.com/view/ecg-ce/home', + 'https://sites.google.com/view/virtualchallenge/book-ecg-appointment' + ], + totalQRCodeFound: 4 + } + ] + }, + { + messageId: '190f2119dd09ee0e', + subject: 'Fwd: Exclusive insights for Risk and Compliance Managers - don\'t miss out!', + historyId: '29628', + date: 'Sat, 27 Jul 2024 10:42:27 +0800', + qrCodeByURL: [ + { + url: 'https://go.ibf.org.sg/l/892591/2023-10-09/g98t7/892591/1696907378NZU0nrZd/qr_code__21_.png', + decodedContent: [ + 'https://us02web.zoom.us/webinar/register/WN_qHoX3DXUS-y_qP3eWt2jXQ' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190e95f5626b2a39', + subject: 'Test Test', + historyId: '28144', + date: 'Thu, 25 Jul 2024 18:10:57 +0800', + qrCodeByContentId: [ + { + cid: '190e95f3d0096ff49b41', + attachmentId: 'ANGjdJ9dE5MqEQkNaX1ssbR9jTwRttD28jj5b3-A8iGS_v8QNm6s5HNqknpTeVQP75fCTrLdwbbvnCI120H1Boo_Qls42YqL470MHAw_d_QPXF10TWUNhpOVpTBPXntHwxD4tFoxHfvH47OdZVE-LuuYbJUsLu9BzYM6F3t2uBfsimbOhTkmgHHW8LOcnX1ZjM5Q53rsbD_K7UaBfKgWaaaDq4U4qg4ztLscRe00zLGkOPxgETTf2SRPm4x5fHVfoszj1xQRjSbTpdkbAnslWH5HYgDWP3854wBObQGfsyve6LfARBMNH7Xez0OAX8k', + decodedContent: [ + '0002010102111531260207020052044611190861600 26860011SG.COM.NETS01231198500065G99123123590002111119086160003089086160110012990891A6686851800007SG.SGQR01122007073092D9020701.00110306330029040201050242060400000708202307175204000053037025802SG5922BENDEMEER PRAWN NOODLE6009Singapore63040AEB' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f22775c9d2a35', + subject: 'Fwd: Monthly Update - Highlights from July', + historyId: '29700', + date: 'Sat, 27 Jul 2024 11:00:00 +0800', + qrCodeByContentId: [ + { + cid: 'ii_190f22664b8f23245d3', + attachmentId: 'ANGjdJ-5y7TR8dckE9jKe5o9xV7zLQ2Eq4U4LPcfhj29Nx8aR0N8bJqKm3OvSy0hP6cOvH9RbO1vR7Sf8Q3_G6QhsaB8Y1xYTQpv4QY8ZTloGOaBbhMyHyKGM9KHLW5YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V', + decodedContent: [ + 'https://www.example.com/newsletter/july', + 'https://www.example.com/events/upcoming' + ], + totalQRCodeFound: 2 + } + ] + }, + { + messageId: '190f22887e0d8b27', + subject: 'Fwd: Invitation to Join the Annual Tech Summit 2024', + historyId: '29702', + date: 'Sat, 27 Jul 2024 10:45:30 +0800', + qrCodeByURL: [ + { + url: 'https://example.com/images/tech_summit_invite.png', + decodedContent: [ + 'https://example.com/register/techsummit2024' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f229a4b1d2c89', + subject: 'Fwd: Important Updates on Your Account', + historyId: '29704', + date: 'Sat, 27 Jul 2024 10:30:15 +0800', + qrCodeByContentId: [ + { + cid: 'ii_190f229e89df3a5d0', + attachmentId: 'ANGjdJ9-M5yXJcDRyejnSdcpr0JipKrq1PL1c2gpXiMd6jC6EI0oa4VKe9QJf_oArNRb4ae2IvhZO7OE7BOj_GqcLYS29qz4sUCTQvXA2Z4ydsLOgBkhMyHyFIL9KGLW4YZ3eDVHDPifGnAeNZuRgLTsF7E8Td3sFvfcITcI1SEM04eqpALEHPJmpKh7Er5hJv4ciLlfd2yA0Z9-wRHT7174rjAIypjy606W5mdYdV9B7Y63IwUz8sckrs-BmMsWPooUKA2qrz_vDatb3EVQzmRZreAJaUwIhMUv30JB5x3SS9NrKyDmoj_oU04iVXUWAjUE1SOFbN2Bk2nALoSVgAHwXdvOPvp17iI8vgp0VXKyocHvkNOqpsdKbfsRDR9yVhImqs4s83lAOH9X1rp9V', + decodedContent: [ + 'https://www.example.com/account/updates' + ], + totalQRCodeFound: 1 + } + ] + }, + { + messageId: '190f230bb4a5e7d2', + subject: 'Fwd: Your Subscription is About to Expire!', + historyId: '29710', + date: 'Sat, 27 Jul 2024 10:15:45 +0800', + qrCodeByURL: [ + { + url: 'https://example.com/images/subscription_expire.png', + decodedContent: [ + 'https://example.com/renew/subscription' + ], + totalQRCodeFound: 1 + } + ] + } + ] +}; + + +const EmailScreen: React.FC = () => { + const [selectedMessage, setSelectedMessage] = useState(null); + + const handleSelectMessage = (message) => { + setSelectedMessage(selectedMessage === message ? null : message); + }; + + return ( + + {emailData.emailAddress} + --- + item.messageId} + renderItem={({ item }) => ( + handleSelectMessage(item)} style={styles.messageContainer}> + {item.subject} + {item.date} + {selectedMessage === item && ( + + {item.qrCodeByContentId && ( + + QR Codes by Content ID: + {item.qrCodeByContentId.map((qrCode, index) => ( + + {qrCode.decodedContent.map((url, i) => ( + {url} + ))} + + ))} + + )} + {item.qrCodeByURL && ( + + QR Codes by URL: + {item.qrCodeByURL.map((qrCode, index) => ( + + {qrCode.url} + {qrCode.decodedContent.map((url, i) => ( + {url} + ))} + + ))} + + )} + + )} + + )} + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#f8f0fc', + padding: 10, + paddingBottom: 90, // Add this line to give space for the nav bar + }, + header: { + fontSize: 24, + fontWeight: 'bold', + color: '#ff69b4', + marginBottom: 10, + textAlign: 'center', + }, + emailAddress: { + fontSize: 18, + color: '#ff69b4', + marginBottom: 10, + }, + emailContainer: { + paddingBottom: 120, // Add padding to prevent overlap with custom navbar + }, + messageContainer: { + backgroundColor: '#fff', + padding: 10, + borderRadius: 10, + marginBottom: 10, + shadowColor: '#000', + shadowOpacity: 0.1, + shadowOffset: { width: 0, height: 2 }, + shadowRadius: 5, + elevation: 2, + }, + subject: { + fontSize: 16, + fontWeight: 'bold', + color: '#000', + }, + date: { + fontSize: 14, + color: '#555', + marginBottom: 5, + }, + emailDetailContainer: { + backgroundColor: '#f8f0fc', + borderRadius: 10, + marginTop: 10, + padding: 10, + }, + qrCodeHeader: { + fontSize: 16, + fontWeight: 'bold', + color: '#ff69b4', + marginBottom: 5, + }, + qrCodeContainer: { + marginBottom: 5, + }, + qrCodeLink: { + fontSize: 14, + color: '#0000ff', + textDecorationLine: 'underline', + }, +}); + +export default EmailScreen; diff --git a/screens/QRScannerScreen.tsx b/screens/QRScannerScreen.tsx index 4ee5417..10cff52 100644 --- a/screens/QRScannerScreen.tsx +++ b/screens/QRScannerScreen.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext, useCallback } from 'react'; -import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Image } from 'react-native'; +import { View, Text, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, Modal } from 'react-native'; import { Camera, CameraView, scanFromURLAsync } from 'expo-camera'; import { QRCodeContext } from '../types'; import axios from 'axios'; // For URL calls @@ -11,8 +11,8 @@ import { useDispatch } from 'react-redux'; import { RootState, AppDispatch } from '../store'; import { addQRCode } from '../reducers/qrCodesReducer'; // Assuming you have actions defined for Redux import { detectQRCodeType, verifyURL, checkRedirects } from '../api/qrCodeAPI'; // Import utility functions +import SettingsScreen from './SettingsScreen'; // Import the Settings screen -// Main Function const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => { const navigation = useNavigation(); // call Navigation bar const dispatch = useDispatch(); // Use dispatch for Redux actions @@ -28,6 +28,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat const [enableTorch, setEnableTorch] = useState(false); // State for torch const [cameraVisible, setCameraVisible] = useState(true); // State to control camera visibility + // State to control the visibility of the modal + const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false); + // Add state variables for scan results const [secureConnection, setSecureConnection] = useState(null); const [virusTotalCheck, setVirusTotalCheck] = useState(null); @@ -53,7 +56,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat console.log("Scan data cleared"); }; - // Handle QR Code Payload const handlePayload = async (payload: string) => { setScanned(true); console.log("Scanning Completed. Payload is:", payload); @@ -85,7 +87,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat console.log("QR code data added to history"); }; - // Send QR Code Data to Backend Server const sendToAPIServer = async (payload: string): Promise => { console.log('Sending QR code data to backend:', payload); @@ -105,19 +106,16 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat } }; - // Toggle Torch (Flashlight) const toggleTorch = () => { setEnableTorch((prev) => !prev); console.log("Torch toggled:", enableTorch ? "off" : "on"); }; - // Handle Test Scan const handleTestScan = () => { handlePayload('TEST123'); console.log("Test scan executed"); }; - // Read QR Code from Image const readQRFromImage = async () => { clearScanDataInternal(); console.log("Reading QR code from image"); @@ -133,11 +131,9 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat const scannedResult = await scanFromURLAsync(result.assets[0].uri); if (scannedResult && scannedResult[0] && scannedResult[0].data) { handlePayload(scannedResult[0].data); - // Not sure why scannedResult.data is undefined but access as array work, KIV console.log('QR code data from image:', scannedResult[0].data); } else { setScannedData("No QR Code Found"); - //setTimeout(() => setScannedData(""), 4000); console.log("No QR code found in the selected image"); Alert.alert('No QR code found in the selected image.'); } @@ -148,7 +144,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat } }; - // Clear scan data when screen is focused useFocusEffect( useCallback(() => { setCameraVisible(true); @@ -180,9 +175,7 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat return ( - - SafeQR v0.89 - + SafeQR v0.89 Welcome to SafeQR code Scanner @@ -198,9 +191,6 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat - {/* - - */} @@ -220,6 +210,28 @@ const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanDat /> )} + + {/* Settings Icon */} + setIsSettingsModalVisible(true)} style={styles.settingsButton}> + + + + {/* Settings Modal */} + setIsSettingsModalVisible(false)} + > + + + + setIsSettingsModalVisible(false)} style={styles.closeButton}> + Close + + + + ); }; @@ -230,14 +242,12 @@ const styles = StyleSheet.create({ backgroundColor: '#f8f0fc', padding: 20, }, - banner: { - alignItems: 'center', - marginBottom: 20, - }, headerText: { fontSize: 24, fontWeight: 'bold', color: '#ff69b4', + textAlign: 'center', + marginBottom: 20, }, splashContainer: { flex: 1, @@ -269,14 +279,6 @@ const styles = StyleSheet.create({ backgroundColor: '#000', borderRadius: 25, }, - testButton: { - position: 'absolute', - bottom: 1, - alignSelf: 'stretch', - backgroundColor: '#000', - padding: 10, - borderRadius: 5, - }, galleryButton: { position: 'absolute', bottom: 20, @@ -301,6 +303,36 @@ const styles = StyleSheet.create({ marginVertical: 10, color: 'black', }, + settingsButton: { + position: 'absolute', + top: 40, + right: 20, + zIndex: 2, + }, + modalContainer: { + flex: 1, + justifyContent: 'center', + height: '90%', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalContent: { + width: '100%', // Adjust the width to cover more space + height: '90%', // Adjust the height to cover more space + backgroundColor: 'white', + padding: 20, // Reduce the padding + borderRadius: 10, + alignItems: 'center', + }, + closeButton: { + marginTop: 10, + padding: 10, + backgroundColor: '#ff69b4', + borderRadius: 5, + }, + closeButtonText: { + color: 'white', + fontWeight: 'bold', + }, }); - export default QRScannerScreen; diff --git a/screens/SettingsScreen.tsx b/screens/SettingsScreen.tsx index 8eb0819..f3963cf 100644 --- a/screens/SettingsScreen.tsx +++ b/screens/SettingsScreen.tsx @@ -140,20 +140,18 @@ const SettingsScreen: React.FC = () => { }; const styles = StyleSheet.create({ - userName: { - fontSize: 16, - marginBottom: 10, - }, container: { flex: 1, backgroundColor: '#f8f0fc', - padding: 20, + padding: 10, // Reduce padding + width: '100%', // Increase width to fill the modal }, header: { fontSize: 24, fontWeight: 'bold', color: '#ff69b4', marginBottom: 20, + textAlign: 'center', // Center the header text }, profileSection: { marginBottom: 20, @@ -198,4 +196,5 @@ const styles = StyleSheet.create({ }, }); + export default SettingsScreen;