From 32a8f5d30f3402562ca2c3a3da370930dd4c8201 Mon Sep 17 00:00:00 2001 From: Isky Date: Sun, 4 Aug 2024 16:56:35 +0800 Subject: [PATCH] Working on getEmails.Able to fetch email and load in Flatlist. Pending refresh featurea and to handle status 202 --- api/qrCodeAPI.tsx | 30 ++++ screens/EmailScreen.tsx | 384 +++++++++++----------------------------- 2 files changed, 135 insertions(+), 279 deletions(-) diff --git a/api/qrCodeAPI.tsx b/api/qrCodeAPI.tsx index 2681514..9a6d038 100644 --- a/api/qrCodeAPI.tsx +++ b/api/qrCodeAPI.tsx @@ -19,6 +19,8 @@ const API_URL_DELETE_BOOKMARK = "/v1/user/deleteBookmark"; const API_URL_GET_SCANNED_GMAILS = "/v1/gmail/getEmails"; const API_URL_GET_USER = "/v1/user/getUser"; // New endpoint + + // Create an Axios instance const apiClient = axios.create({ baseURL: API_BASE_URL, @@ -101,8 +103,36 @@ export const getQRCodeDetails = async (qrCodeId: string) => { }); }; +// Function to get scanned Gmail emails +export const getEmails = async (accessToken: string) => { + console.log("getEmails function called"); + try { + console.log("Making API request to get scanned emails with accessToken:", accessToken); + const response = await apiRequest({ + method: 'get', + url: `${API_BASE_URL}${API_URL_GET_SCANNED_GMAILS}`, + headers: { + 'accessToken': accessToken, + }, + }); + console.log("API Response:", response); + return response; + } catch (error) { + console.error("Error during getEmails API call:", error); + + if (error.response) { + console.error("Response error data:", error.response.data); + } else if (error.request) { + console.error("Request error, no response received:", error.request); + } else { + console.error("Error message:", error.message); + } + + throw error; + } +}; //----------- diff --git a/screens/EmailScreen.tsx b/screens/EmailScreen.tsx index bd5d192..f328627 100644 --- a/screens/EmailScreen.tsx +++ b/screens/EmailScreen.tsx @@ -1,289 +1,128 @@ -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 - } - ] - } - ] -}; +import React, { useState, useEffect } from 'react'; +import { View, Text, TouchableOpacity, FlatList, StyleSheet, ActivityIndicator, Alert } from 'react-native'; +import { getEmails } from '../api/qrCodeAPI'; const EmailScreen: React.FC = () => { const [selectedMessage, setSelectedMessage] = useState(null); + const [emailData, setEmailData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchEmails = async () => { + try { + const emails = await getEmails('access Token here!!!'); // Replace with actual token retrieval + setEmailData(emails); + } catch (error) { + setError('Error fetching emails.'); + } finally { + setLoading(false); + } + }; + + fetchEmails(); + }, []); const handleSelectMessage = (message) => { setSelectedMessage(selectedMessage === message ? null : message); }; + if (loading) { + return ( + + + Fetching emails... + + ); + } + + if (error) { + return ( + + {error} + + ); + } + return ( - {emailData.emailAddress} - --- - item.messageId} - renderItem={({ item }) => ( - handleSelectMessage(item)} style={styles.messageContainer}> - {item.subject} - {item.date} - {selectedMessage === item && ( - - {item.qrCodeByContentId && ( + {emailData && ( + <> + {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} + Alert.alert("Testing")}> + {url} + ))} ))} - )} - {item.qrCodeByURL && ( - - QR Codes by URL: - {item.qrCodeByURL.map((qrCode, index) => ( - - {qrCode.url} - {qrCode.decodedContent.map((url, i) => ( - {url} - ))} - - ))} - - )} - - )} + )} + {item.qrCodeByURL && ( + + QR Codes by URL: + {item.qrCodeByURL.map((qrCode, index) => ( + + {qrCode.decodedContent.map((url, i) => ( + Alert.alert("Testing")}> + {url} - )} - /> + ))} + + ))} + +)} + + )} + + )} + /> + + )} ); }; const styles = StyleSheet.create({ + // ... (rest of your styles) + loadingContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + errorContainer: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, container: { flex: 1, backgroundColor: '#f8f0fc', padding: 10, - paddingBottom: 90, // Add this line to give space for the nav bar + }, + loadingText: { + fontSize: 18, + color: '#ff69b4', + marginBottom: 10, + textAlign: 'center', + }, + emailListContainer: { + flex: 1, }, header: { fontSize: 24, @@ -292,14 +131,6 @@ const styles = StyleSheet.create({ 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, @@ -319,28 +150,23 @@ const styles = StyleSheet.create({ date: { fontSize: 14, color: '#555', - marginBottom: 5, }, - emailDetailContainer: { - backgroundColor: '#f8f0fc', - borderRadius: 10, - marginTop: 10, - padding: 10, + qrCodeContainer: { + marginBottom: 10, // Add more space between the QR codes + }, + qrCodeLink: { + fontSize: 14, + color: '#0000ff', + textDecorationLine: 'underline', + marginVertical: 5, // Add vertical margin for spacing }, qrCodeHeader: { fontSize: 16, fontWeight: 'bold', color: '#ff69b4', marginBottom: 5, - }, - qrCodeContainer: { - marginBottom: 5, - }, - qrCodeLink: { - fontSize: 14, - color: '#0000ff', - textDecorationLine: 'underline', - }, + marginTop: 10, // Add margin at the top for spacing from the previous element + } }); export default EmailScreen;