From e0e0082a28215f24531d0355b3695533c3e778d0 Mon Sep 17 00:00:00 2001 From: DysonBreakstone <121531791+DysonBreakstone@users.noreply.github.com> Date: Tue, 21 Jan 2025 14:32:15 -0700 Subject: [PATCH 1/3] add solution to live coding exercise --- src/components/BillingStatement.tsx | 33 +++++++++++++++++++++++++++-- src/screens/BillingHistory.tsx | 20 ++++++++++++----- tsconfig.json | 1 + 3 files changed, 47 insertions(+), 7 deletions(-) diff --git a/src/components/BillingStatement.tsx b/src/components/BillingStatement.tsx index ae87ebb..441cd4c 100644 --- a/src/components/BillingStatement.tsx +++ b/src/components/BillingStatement.tsx @@ -1,4 +1,7 @@ import React from "react"; +import { StyleSheet, View, Text } from 'react-native' +import { BillingStatementProps } from '../screens/BillingHistory' + { /* This component renders each individual billing statement. Some requirements to note: 1. Display product name, date and amount. @@ -8,6 +11,32 @@ import React from "react"; 5. If price is above 100, add another line of text that says "Big Savings!". */ } -type BillingStatementProps = {}; +// type BillingStatementProps = {}; + +export const BillingStatement = ({productName, date, amount}: BillingStatementProps) => { + return ( + + + {productName} + + + {date || ""} + + + {`$${amount}`} + {amount > 100.00 ? Big Savings! : null } + + + + ); +}; + -export const BillingStatement = ({}: BillingStatementProps) => {}; +const styles = StyleSheet.create({ + primary: { + flex: 1, + height: 80, + justifyContent: "center", + alignItems: 'center' + } +}) \ No newline at end of file diff --git a/src/screens/BillingHistory.tsx b/src/screens/BillingHistory.tsx index 73e079b..667123d 100644 --- a/src/screens/BillingHistory.tsx +++ b/src/screens/BillingHistory.tsx @@ -1,8 +1,8 @@ import React from "react"; -import { StyleSheet, View, Text } from "react-native"; +import { StyleSheet, View, Text, FlatList } from "react-native"; import { BillingStatement } from "../components/BillingStatement"; -type BillingStatement = { +export type BillingStatementProps = { id: number; productName?: string; date?: string; @@ -14,7 +14,7 @@ type BillingStatement = { However, for this task it is simplified and all data is stored inside array called billingStatements. */} export const BillingHistoryScreen = () => { - const billingStatements: BillingStatement[] = [ + const billingStatements: BillingStatementProps[] = [ { id: 1, productName: "Jeans", @@ -35,11 +35,21 @@ export const BillingHistoryScreen = () => { }, ]; + const billingStatementsComponents = (statement) => { + return ( + + ) + }; + return ( Billing History - - {/* Show Billing Statements here */} + billingStatementsComponents(item)} + keyExtractor={ item => item.id as unknown as string } + > + ); }; diff --git a/tsconfig.json b/tsconfig.json index 909e901..b1e3214 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "expo/tsconfig.base", "compilerOptions": { + "jsx": "react", "strict": true, "paths": { "@/*": [ From 4ca74fbce77e3c985f3af6421862905ea17e763f Mon Sep 17 00:00:00 2001 From: DysonBreakstone <121531791+DysonBreakstone@users.noreply.github.com> Date: Tue, 21 Jan 2025 14:34:04 -0700 Subject: [PATCH 2/3] add solution to initialization.tsx --- src/screens/Initialization.tsx | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/src/screens/Initialization.tsx b/src/screens/Initialization.tsx index 941ac17..276913f 100644 --- a/src/screens/Initialization.tsx +++ b/src/screens/Initialization.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { ActivityIndicator, View } from "react-native"; +import { ActivityIndicator, View, Text } from "react-native"; /* When user first opens the app, this screen is displayed. @@ -19,6 +19,9 @@ type UserDetails = { }; export const Initialization = () => { + const [loading, setLoading] = useState(true) + const [user, setUser] = useState({ name: "", email: "" }) + const getUserDetails = async () => { // pretends to get user details from AsyncStorage return new Promise((resolve) => { @@ -31,5 +34,26 @@ export const Initialization = () => { }); }; - return ; + useEffect(() => { + getUserDetails().then((deets) => { + setUser(deets); + }).catch((e) => { + throw `Error loading user details: ${e.message}` + }).finally(() => { + setLoading(false); + }) + }, []); + + return ( + loading ? + + : + + + {user.name} + {user.email} + + + + ); }; From 626e092e650976394364ea22bc1034c73265c768 Mon Sep 17 00:00:00 2001 From: DysonBreakstone <121531791+DysonBreakstone@users.noreply.github.com> Date: Tue, 21 Jan 2025 15:43:21 -0700 Subject: [PATCH 3/3] solution to functions.ts with accompanying ReadMe --- src/screens/BillingHistory.tsx | 2 +- src/utils/dysonsExplanation.md | 33 +++++++++++++++++++++++++++++ src/utils/functions.ts | 38 ++++++++++++++++++++++++++++++++-- 3 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 src/utils/dysonsExplanation.md diff --git a/src/screens/BillingHistory.tsx b/src/screens/BillingHistory.tsx index 667123d..f0cab88 100644 --- a/src/screens/BillingHistory.tsx +++ b/src/screens/BillingHistory.tsx @@ -35,7 +35,7 @@ export const BillingHistoryScreen = () => { }, ]; - const billingStatementsComponents = (statement) => { + const billingStatementsComponents = (statement: any) => { return ( ) diff --git a/src/utils/dysonsExplanation.md b/src/utils/dysonsExplanation.md new file mode 100644 index 0000000..85b4cb9 --- /dev/null +++ b/src/utils/dysonsExplanation.md @@ -0,0 +1,33 @@ +## Explanation + + I wish that I had selected this for the live coding challenge, this was fun to work on. + + I want to thank everyone who met with me today for the interview, I enjoyed talking to you all and I hope to speak with you again soon. + + +#### Summary +The assignment here is to take an array of strings, cycle through them and check each string for the following conditions: + +1. the string should NOT appear in the array 'alreadyEnrolledDependents' +2. the string SHOULD appear in the array 'ehrAttachedDependents' +3. if there's a corresponding object in the 'dependentEhrInfo' array, the "age" property should be below 18 + +- strings which pass these conditions are put into the 'verified' array within the AnalyzedDependents instance +- strings which don't get put into the 'unverified' array +- strings which are invalid are placed in neither (if I'm understanding that correctly) + +#### Approach + +The thing to avoid here is having to iterate through each of the three subarrays for each element in the dependedIds array, because each new array you have to iterate through multiplies the time complexity by the length of that array. For this particular use case, none of the arrays are particularly long, so it wouldn't be that big of a deal, but if you're doing this many times or if any of the arrays get long, then the time and compute power would get out of hand pretty quickly. + +Instead, my plan is to create an object for each array with the element as the key and an integer or boolean as the value. Then, for each element in the dependentIds array, it will be a nearly instant lookup for each of the other three arrays, so it will be a max time complexity of n * 3 if I'm doing my math right. This is probably a little bit overengineering for this use case but I think it's the right thing to do in the long run. + +In ruby, there's a method called "each_with_object" which is an array method that returns a ruby hash (js object). I couldn't find an analogue in typescript in the limited amount of time I gave myself for this challenge (to simulate the live-coding experience), but given more time I'm positive there's alternative out there somewhere. In the meantime I'm declaring separate objects. It's the same space complexity but a little longer to read. + +Another important note: in the real world, I would set up a series of tests to ensure that the information is being processed as it should. There's also some refactoring that could be done, I put everything inside the exported function so that it's all in one place for you to read. + + +#### Notes +Learning regex in a new language can be daunting, but I've been working on a project recently which utilizes regex pretty heavily and I feel very comfortable using regex in ruby. The regex that I wrote for ensuring that the string is a string of digits is in ruby and I'm 99% sure it would work - basically a negative lookahead to find non-digit characters, with a matcher for at least 1 digit character. From what I can tell js/ts regex is very similar, but it might not be exactly the same. + +If you had been live coding this with me, you would have seen me get hung up because the results weren't what I expected; after a period of debugging I found that I had an exclamation point in the wrong place. diff --git a/src/utils/functions.ts b/src/utils/functions.ts index dad589d..425757b 100644 --- a/src/utils/functions.ts +++ b/src/utils/functions.ts @@ -31,6 +31,7 @@ const dependentEhrInfo = [ { id: "161718", name: "Jenny", "age": 3, relation: "daughter" }, ]; +['101112', '131415', '161718'] // returned value type type AnalyzedDependents = { userId: string; @@ -38,6 +39,8 @@ type AnalyzedDependents = { unverified: string[]; } + + export const verifyDependents = ( ): AnalyzedDependents => { // In a real-world scenario, the function would take in userId and dependentIds as arguments. However, for this task, we will hardcode the values. @@ -51,6 +54,37 @@ export const verifyDependents = ( verified: [], unverified: [], } - + + ////// BEGIN DYSON'S SOLUTION ///// + + const alreadyEnrolledMap: { [id: string]: boolean } = {} // NOT in this one + const attachedDependentsMap: { [id: string]: boolean } = {} // YES in this one + const dependentEhrMap: { [id: string]: number } = {} // under 18 + + alreadyEnrolledDependents.forEach((dependent) => { + alreadyEnrolledMap[dependent] = true + }); + ehrAttachedDependents.forEach((dependent) => { + attachedDependentsMap[dependent] = true + }); + dependentEhrInfo.forEach((dependent) => { + dependentEhrMap[dependent.id] = dependent.age + }); + + +// kind of hardcoded this, since by the time we're in this function I'm assuming that we've narrowed the user down to this particular user + analyzedDependents.userId = userId + dependentIds.forEach((dependent) => { + console.log(`${dependent}: ${!alreadyEnrolledMap[dependent]}`) + if(!((typeof dependent) === 'string') || dependent.length < 1 || !dependent.match(/^(?!.?\D)\d+/)) { + return; + } else if(!alreadyEnrolledMap[dependent] && attachedDependentsMap[dependent] && dependentEhrMap[dependent] && dependentEhrMap[dependent] < 18) { + analyzedDependents.verified.push(dependent); + } else { + analyzedDependents.unverified.push(dependent); + } + }); + return analyzedDependents; -}; \ No newline at end of file +}; +