From 1ede60eb950ac730c7e6f04cd431ae0ff6baa31d Mon Sep 17 00:00:00 2001 From: Dave Budhram Date: Thu, 7 Dec 2023 20:57:25 -0500 Subject: [PATCH 1/2] Add persona icons to profile screens --- .../icons/AdventuringOptimistIcon.tsx | 69 +++++++++++++++++++ .../icons/EasygoingExplorerIcon.tsx | 27 ++++++++ .../components/icons/MultitaskingDynamo.tsx | 54 +++++++++++++++ .../icons/ProcrastinatingRookieIcon.tsx | 32 +++++++++ .../icons/TranquilTrailblazarIcon.tsx | 51 ++++++++++++++ .../src/components/profile/PersonaCard.tsx | 30 ++++---- .../screens/app/profile/AllPersonasScreen.tsx | 9 +-- .../screens/app/profile/MyPersonaScreen.tsx | 15 +++- .../src/screens/app/profile/PersonaScreen.tsx | 15 +++- .../src/screens/app/profile/ProfileScreen.tsx | 5 +- client-new/src/utils/PersonaUtils.tsx | 26 +++++++ server/src/migrations/data.sql | 2 +- 12 files changed, 312 insertions(+), 23 deletions(-) create mode 100644 client-new/src/components/icons/AdventuringOptimistIcon.tsx create mode 100644 client-new/src/components/icons/EasygoingExplorerIcon.tsx create mode 100644 client-new/src/components/icons/MultitaskingDynamo.tsx create mode 100644 client-new/src/components/icons/ProcrastinatingRookieIcon.tsx create mode 100644 client-new/src/components/icons/TranquilTrailblazarIcon.tsx create mode 100644 client-new/src/utils/PersonaUtils.tsx diff --git a/client-new/src/components/icons/AdventuringOptimistIcon.tsx b/client-new/src/components/icons/AdventuringOptimistIcon.tsx new file mode 100644 index 0000000..3e70954 --- /dev/null +++ b/client-new/src/components/icons/AdventuringOptimistIcon.tsx @@ -0,0 +1,69 @@ +import Svg, { Path, G, Mask, Circle } from "react-native-svg"; +import React from "react"; + + +export default function AdventuringOptimistIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/client-new/src/components/icons/EasygoingExplorerIcon.tsx b/client-new/src/components/icons/EasygoingExplorerIcon.tsx new file mode 100644 index 0000000..213accd --- /dev/null +++ b/client-new/src/components/icons/EasygoingExplorerIcon.tsx @@ -0,0 +1,27 @@ +import Svg, { Path, G, Mask, Circle } from "react-native-svg"; +import React from "react"; + + +export default function EasygoingExplorerIcon() { + return ( + + + + + + + + + + + + + + + + + + + +); +} \ No newline at end of file diff --git a/client-new/src/components/icons/MultitaskingDynamo.tsx b/client-new/src/components/icons/MultitaskingDynamo.tsx new file mode 100644 index 0000000..960d7dd --- /dev/null +++ b/client-new/src/components/icons/MultitaskingDynamo.tsx @@ -0,0 +1,54 @@ +import Svg, { Path, G, Mask, Circle } from "react-native-svg"; +import React from "react"; + + + +export default function MultitaskingDynamoIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +} \ No newline at end of file diff --git a/client-new/src/components/icons/ProcrastinatingRookieIcon.tsx b/client-new/src/components/icons/ProcrastinatingRookieIcon.tsx new file mode 100644 index 0000000..ee2e924 --- /dev/null +++ b/client-new/src/components/icons/ProcrastinatingRookieIcon.tsx @@ -0,0 +1,32 @@ +import Svg, { Path, G, Mask, Circle } from "react-native-svg"; +import React from "react"; + +export default function ProcrastinatingRookieIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} \ No newline at end of file diff --git a/client-new/src/components/icons/TranquilTrailblazarIcon.tsx b/client-new/src/components/icons/TranquilTrailblazarIcon.tsx new file mode 100644 index 0000000..5755ca9 --- /dev/null +++ b/client-new/src/components/icons/TranquilTrailblazarIcon.tsx @@ -0,0 +1,51 @@ +import Svg, { Path, G, Mask, Circle } from "react-native-svg"; +import React from "react"; + +export default function TranquilTrailblazarIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)}; \ No newline at end of file diff --git a/client-new/src/components/profile/PersonaCard.tsx b/client-new/src/components/profile/PersonaCard.tsx index 067a9f1..66777d2 100644 --- a/client-new/src/components/profile/PersonaCard.tsx +++ b/client-new/src/components/profile/PersonaCard.tsx @@ -5,9 +5,14 @@ import React from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import { TouchableOpacity } from 'react-native'; import Svg, { Path } from 'react-native-svg'; - +import { ActivityIndicator, Alert, Modal } from 'react-native'; +import { + heightPercentageToDP as h, + widthPercentageToDP as w +} from 'react-native-responsive-screen'; export type PersonaCardProps = { image?: string; + icon?: React.ReactNode; title: string; subtitle?: string; subheading?: string; @@ -41,23 +46,20 @@ export default function PersonaCard(props: PersonaCardProps) { containerBorderStyle ]} > - {props.image !== undefined && ( + {props.icon !== undefined && ( - Alternate Text + {props.icon} )} { + const toPersona = (title: string, description: string, icon: any) => { navigation.push('Persona Screen', { - props: { title: title, description: description } + props: { title: title, description: description, icon: icon } }); }; @@ -73,12 +74,12 @@ export default function AllPersonasScreen({ route, navigation }) { - toPersona(value.persona_title, value.persona_description) + toPersona(value.persona_title, value.persona_description, personaIcon(value.persona_title)) } /> diff --git a/client-new/src/screens/app/profile/MyPersonaScreen.tsx b/client-new/src/screens/app/profile/MyPersonaScreen.tsx index 6b91f3a..d123684 100644 --- a/client-new/src/screens/app/profile/MyPersonaScreen.tsx +++ b/client-new/src/screens/app/profile/MyPersonaScreen.tsx @@ -10,6 +10,11 @@ import { Text, View } from 'native-base'; import React, { useEffect, useState } from 'react'; import { ActivityIndicator } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; +import personaIcon from '@/utils/PersonaUtils'; +import { + heightPercentageToDP as h, + widthPercentageToDP as w +} from 'react-native-responsive-screen'; export default function MyPersonaScreen({ route, navigation }) { const { user } = useUser(); @@ -35,7 +40,13 @@ export default function MyPersonaScreen({ route, navigation }) { navigation.navigate('Profile Screen')} /> - + + {personaIcon(persona?.persona_title)} + + + + {/* You are an - + */} {isPending && } {error && Something went wrong ...} {persona && ( diff --git a/client-new/src/screens/app/profile/PersonaScreen.tsx b/client-new/src/screens/app/profile/PersonaScreen.tsx index 50f5dc1..52e1e45 100644 --- a/client-new/src/screens/app/profile/PersonaScreen.tsx +++ b/client-new/src/screens/app/profile/PersonaScreen.tsx @@ -5,10 +5,15 @@ import { Pressable, Text, View } from 'native-base'; import React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; import Svg, { Path } from 'react-native-svg'; +import { + heightPercentageToDP as h, + widthPercentageToDP as w +} from 'react-native-responsive-screen'; export type PersonScreenProps = { title: string; description: string; + icon: any; }; /** @@ -23,14 +28,22 @@ export default function PersonaScreen({ route, navigation }) { - + navigation.navigate('All Personas Screen')} /> + + + {props.icon} + + + + + ); diff --git a/client-new/src/screens/app/profile/ProfileScreen.tsx b/client-new/src/screens/app/profile/ProfileScreen.tsx index 09ced90..73ba8eb 100644 --- a/client-new/src/screens/app/profile/ProfileScreen.tsx +++ b/client-new/src/screens/app/profile/ProfileScreen.tsx @@ -16,6 +16,8 @@ import { widthPercentageToDP as w } from 'react-native-responsive-screen'; import { SafeAreaView } from 'react-native-safe-area-context'; +import personaIcon from '@/utils/PersonaUtils'; +import LegacyWordmark from '@/components/reusable/LegacyWordmark'; /** * Screen to render the user's profile @@ -106,7 +108,7 @@ export default function ProfileScreen({ route, navigation }) { > {/* TODO: FIX this */} - {}} /> + navigation.navigate('My Persona Screen')} diff --git a/client-new/src/utils/PersonaUtils.tsx b/client-new/src/utils/PersonaUtils.tsx new file mode 100644 index 0000000..67a1cf3 --- /dev/null +++ b/client-new/src/utils/PersonaUtils.tsx @@ -0,0 +1,26 @@ +import AdventuringOptimistIcon from "@/components/icons/AdventuringOptimistIcon" +import EasygoingExplorerIcon from "@/components/icons/EasygoingExplorerIcon" +import MultitaskingDynamoIcon from "@/components/icons/MultitaskingDynamo" +import ProcrastinatingRookieIcon from "@/components/icons/ProcrastinatingRookieIcon" +import TranquilTrailblazarIcon from "@/components/icons/TranquilTrailblazarIcon" +import React from "react" + + const personaIcon = (persona:string) => { + if (persona === 'Adventurous Optimist') { + return ; + } + else if (persona === 'Easygoing Explorer') { + return ; + } + else if (persona === 'Multitasking Dynamo') { + return ; + } + else if (persona === 'Procrastinating Rookie') { + return ; + } + else if (persona === 'Tranquil Trailblazer') { + return ; + } +} + +export default personaIcon; \ No newline at end of file diff --git a/server/src/migrations/data.sql b/server/src/migrations/data.sql index fc27b2b..537e5bf 100644 --- a/server/src/migrations/data.sql +++ b/server/src/migrations/data.sql @@ -3,7 +3,7 @@ INSERT INTO personas (persona_title, persona_description) VALUES ('Procrastinating Rookie', 'Enjoys a challenge, scarcity mindset, the ultimate planner, a perfectionist, selfish, always on the edge, half-empty glass thinker, externally motivated, all-at-once worker, quick-start guide enthusiast, uncomfortable discussing death, less nurturing, inexperienced with EOLP, racing against time, tight finances, dipping toes in the water.'), ('Easygoing Explorer', 'Thrives on adventure, abundance advocate, let''s-see-what-happens future, content with ''good enough,'' empathetic, beach-level tranquility, sunny disposition, internally motivated, explores tasks over time, full novel enthusiast, comfortable discussing death, nurturing, fairly familiar with EOLP, no rush, tight finances, ready to start.'), ('Multitasking Dynamo', 'Loves a challenge, abundance believer, the ultimate planner, prefers perfection, selfish, edgy, half-empty glass view, externally motivated, all-at-once worker, quick-start guide fan, uncomfortable discussing death, less nurturing, somewhat familiar with EOLP, procrastinator, comfortable finances, at the starting line.'), -('Tranquil Trailblzer', 'Adventuresome, abundance thinker, let''s-see-what-happens future, content with ''good enough,'' empathetic, always at the beach, glass-half-full mentality, internally motivated, an explorer of tasks, quick-start guide lover, comfortable discussing death, nurturing, knowledgeable about EOLP, no rush, comfortable finances, ready to start.'), +('Tranquil Trailblazer', 'Adventuresome, abundance thinker, let''s-see-what-happens future, content with ''good enough,'' empathetic, always at the beach, glass-half-full mentality, internally motivated, an explorer of tasks, quick-start guide lover, comfortable discussing death, nurturing, knowledgeable about EOLP, no rush, comfortable finances, ready to start.'), ('Adventurous Optimist', 'Always up for new experiences, believes in abundance, a laid-back planner, a chill perfectionist, empathetic, beach-level calmness, a sunny outlook, internally motivated, explores tasks over time, loves the full novel, comfortable discussing death, nurturing, well-versed in EOLP, has time to plan, financially stable, ready to start.'); -- Creating test users From 1ce63349d1712e1ffc3cd78eac4d120242147741 Mon Sep 17 00:00:00 2001 From: Dave Budhram Date: Thu, 7 Dec 2023 21:09:53 -0500 Subject: [PATCH 2/2] adding styles --- client-new/src/utils/PersonaUtils.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client-new/src/utils/PersonaUtils.tsx b/client-new/src/utils/PersonaUtils.tsx index 67a1cf3..fb607fe 100644 --- a/client-new/src/utils/PersonaUtils.tsx +++ b/client-new/src/utils/PersonaUtils.tsx @@ -5,6 +5,11 @@ import ProcrastinatingRookieIcon from "@/components/icons/ProcrastinatingRookieI import TranquilTrailblazarIcon from "@/components/icons/TranquilTrailblazarIcon" import React from "react" +/** + * Function to return the icon for the persona + * @param persona + * @returns + */ const personaIcon = (persona:string) => { if (persona === 'Adventurous Optimist') { return ;