From 2844e0bd3b8e41103dc198a3faf8ab9d53e9591f Mon Sep 17 00:00:00 2001 From: oliviaseds Date: Mon, 8 Apr 2024 09:23:04 -0400 Subject: [PATCH 1/7] feat: task creation hifi --- client/assets/task-creation/bathing.svg | 4 + client/assets/task-creation/financial-bg.svg | 3 + client/assets/task-creation/health-bg.svg | 3 + client/assets/task-creation/home-bg.svg | 3 + client/assets/task-creation/liquid.svg | 5 + client/assets/task-creation/other-bg.svg | 3 + client/assets/task-creation/personal-bg.svg | 4 + client/assets/task-creation/pill.svg | 11 ++ client/assets/task-creation/shot.svg | 9 ++ client/assets/task-creation/toileting.svg | 3 + .../task_creation/AddressComponent.tsx | 30 ++-- .../components/task_creation/RadioGroup.tsx | 55 ++++++-- .../task_creation/TextInputLine.tsx | 6 +- .../task_creation/TextInputParagraph.tsx | 6 +- client/screens/TaskCreation.tsx | 129 ++++++++++++------ ...reation-json.ts => task-creation-json.tsx} | 7 +- 16 files changed, 213 insertions(+), 68 deletions(-) create mode 100644 client/assets/task-creation/bathing.svg create mode 100644 client/assets/task-creation/financial-bg.svg create mode 100644 client/assets/task-creation/health-bg.svg create mode 100644 client/assets/task-creation/home-bg.svg create mode 100644 client/assets/task-creation/liquid.svg create mode 100644 client/assets/task-creation/other-bg.svg create mode 100644 client/assets/task-creation/personal-bg.svg create mode 100644 client/assets/task-creation/pill.svg create mode 100644 client/assets/task-creation/shot.svg create mode 100644 client/assets/task-creation/toileting.svg rename client/types/{task-creation-json.ts => task-creation-json.tsx} (87%) diff --git a/client/assets/task-creation/bathing.svg b/client/assets/task-creation/bathing.svg new file mode 100644 index 0000000..9cc5771 --- /dev/null +++ b/client/assets/task-creation/bathing.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/assets/task-creation/financial-bg.svg b/client/assets/task-creation/financial-bg.svg new file mode 100644 index 0000000..589dfb5 --- /dev/null +++ b/client/assets/task-creation/financial-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/task-creation/health-bg.svg b/client/assets/task-creation/health-bg.svg new file mode 100644 index 0000000..9a320e3 --- /dev/null +++ b/client/assets/task-creation/health-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/task-creation/home-bg.svg b/client/assets/task-creation/home-bg.svg new file mode 100644 index 0000000..b90abae --- /dev/null +++ b/client/assets/task-creation/home-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/task-creation/liquid.svg b/client/assets/task-creation/liquid.svg new file mode 100644 index 0000000..a867417 --- /dev/null +++ b/client/assets/task-creation/liquid.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/client/assets/task-creation/other-bg.svg b/client/assets/task-creation/other-bg.svg new file mode 100644 index 0000000..3ac21b3 --- /dev/null +++ b/client/assets/task-creation/other-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/task-creation/personal-bg.svg b/client/assets/task-creation/personal-bg.svg new file mode 100644 index 0000000..2937eec --- /dev/null +++ b/client/assets/task-creation/personal-bg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/assets/task-creation/pill.svg b/client/assets/task-creation/pill.svg new file mode 100644 index 0000000..e93de32 --- /dev/null +++ b/client/assets/task-creation/pill.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/assets/task-creation/shot.svg b/client/assets/task-creation/shot.svg new file mode 100644 index 0000000..4cbad88 --- /dev/null +++ b/client/assets/task-creation/shot.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/assets/task-creation/toileting.svg b/client/assets/task-creation/toileting.svg new file mode 100644 index 0000000..ed8ef0a --- /dev/null +++ b/client/assets/task-creation/toileting.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/components/task_creation/AddressComponent.tsx b/client/components/task_creation/AddressComponent.tsx index 6caa256..fe65abf 100644 --- a/client/components/task_creation/AddressComponent.tsx +++ b/client/components/task_creation/AddressComponent.tsx @@ -5,9 +5,11 @@ export function AddressComponent() { return ( - Street Address + + STREET ADDRESS + @@ -15,16 +17,20 @@ export function AddressComponent() { - City + + CITY + - State + + STATE + @@ -32,18 +38,22 @@ export function AddressComponent() { - Zip Code + + ZIP CODE + - Phone Number + + PHONE NUMBER + { + switch (option) { + case 'Pills': + return ; + case 'Liquid': + return ; + case 'Shot': + return ; + // bathing symbol needs to be fixed + case 'Bathing': + return ; + case 'Toileting': + return ; + default: + return ; + } + }; + return ( - {title} + + {title.toUpperCase()} + - {options.map((option, index) => ( - { - handleOptionSelect(option); - }} - > - - {option} - - ))} + {options.map((option, index) => { + return ( + { + handleOptionSelect(option); + }} + > + {renderIcon(option)} + + {option} + + + ); + })} ); diff --git a/client/components/task_creation/TextInputLine.tsx b/client/components/task_creation/TextInputLine.tsx index 38fb8d2..e9084db 100644 --- a/client/components/task_creation/TextInputLine.tsx +++ b/client/components/task_creation/TextInputLine.tsx @@ -18,9 +18,11 @@ export function TextInputLine({ title, onChange }: TextInputLineProps) { return ( - {title} + + {title.toUpperCase()} + - {title} + + {title.toUpperCase()} + { + switch (header) { + case 'Medication Management': + return ; + case 'Physician Appointments': + return ; + case 'Grooming': + return ; + case 'Family Conversations': + return ; + case 'Shopping & Errands': + return ; + case 'Pay Bills': + return ; + case 'Diet': + return ; + case 'Activities': + return ; + case 'Health Insurance': + return ; + case 'Other': + return ; + default: + return null; + } + }; + const body = TaskCreationJson.types.find((t) => taskType.includes(t.Header) )?.Body; const compList: { key: string; value: string }[] = []; - body?.forEach((item) => { Object.entries(item).forEach(([key, value]) => { compList.push({ key, value }); @@ -41,7 +85,6 @@ export default function TaskCreation() { }); const [values, setValues] = useState<{ [key: string]: string }>({}); - const handleChange = (key: string, value: string) => { setValues((prevValues) => ({ ...prevValues, @@ -50,43 +93,53 @@ export default function TaskCreation() { console.log('Current values:', values); }; + const themeColor = TaskTitleToColorMap[header as string]; + return ( - - - - - - - - Step 1 of 2 + + + + + + Step 2 of 3 - {header} - {compList.map((item, index) => ( - - {item.key === 'Address' && } - {item.value === 'TextInputLine' && ( - handleChange(item.key, value)} - /> - )} - {item.value === 'TextInputParagraph' && ( - handleChange(item.key, value)} - /> - )} - {item.value.startsWith('RadioGroup') && ( - handleChange(item.key, value)} - /> - )} - - ))} - - + + {renderBackground(header ?? '')} + + + {header} + + {compList.map((item, index) => ( + + {item.key === 'Address' && } + {item.value === 'TextInputLine' && ( + handleChange(item.key, value)} + /> + )} + {item.value === 'TextInputParagraph' && ( + handleChange(item.key, value)} + /> + )} + {item.value.startsWith('RadioGroup') && ( + handleChange(item.key, value)} + /> + )} + + ))} + + + ); } diff --git a/client/types/task-creation-json.ts b/client/types/task-creation-json.tsx similarity index 87% rename from client/types/task-creation-json.ts rename to client/types/task-creation-json.tsx index c20d785..da4e5cc 100644 --- a/client/types/task-creation-json.ts +++ b/client/types/task-creation-json.tsx @@ -2,10 +2,11 @@ export const TaskCreationJson = { types: [ { Header: 'Medication Management', + Background: 'client/assets/task-creation/big-bg-med.svg', Body: [ { 'Drug Name': 'TextInputLine' }, { - 'Drug Form': 'RadioGroup: Pills, Liquid, Shot' + 'Drug Form': 'RadioGroup: Pills Liquid Shot' }, { Diagnosis: 'TextInputLine' }, { 'Prescribing Physician': 'TextInputLine' }, @@ -24,7 +25,7 @@ export const TaskCreationJson = { { Header: 'Grooming', Body: [ - { 'Grooming Type': 'RadioGroup: Bathing, Toileting' }, + { 'Grooming Type': 'RadioGroup: Bathing Toileting' }, { 'Care Instructions': 'TextInputParagraph' } ] }, @@ -39,7 +40,7 @@ export const TaskCreationJson = { { Header: 'Pay Bills', Body: [ - { 'Bill Reveicer Name': 'TextInputLine' }, + { 'Bill Receiver Name': 'TextInputLine' }, { Address: '' }, { 'Proxy Agent': 'TextInputLine' } ] From 380166910a046eef9253cf3a62058d2ee2655959 Mon Sep 17 00:00:00 2001 From: narayansharma-21 <97.sharman@gmail.com> Date: Mon, 8 Apr 2024 09:39:02 -0400 Subject: [PATCH 2/7] feat(taskType): implemented taskType hifi --- client/assets/task-creation/financial.svg | 3 + client/assets/task-creation/home.svg | 4 + client/assets/task-creation/other.svg | 11 + client/assets/task-creation/personal.svg | 4 + client/assets/task-creation/red-pill.svg | 4 + client/screens/TaskType.tsx | 241 ++++++++++++++-------- 6 files changed, 185 insertions(+), 82 deletions(-) create mode 100644 client/assets/task-creation/financial.svg create mode 100644 client/assets/task-creation/home.svg create mode 100644 client/assets/task-creation/other.svg create mode 100644 client/assets/task-creation/personal.svg create mode 100644 client/assets/task-creation/red-pill.svg diff --git a/client/assets/task-creation/financial.svg b/client/assets/task-creation/financial.svg new file mode 100644 index 0000000..56c26fc --- /dev/null +++ b/client/assets/task-creation/financial.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/assets/task-creation/home.svg b/client/assets/task-creation/home.svg new file mode 100644 index 0000000..5d6c8ef --- /dev/null +++ b/client/assets/task-creation/home.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/assets/task-creation/other.svg b/client/assets/task-creation/other.svg new file mode 100644 index 0000000..d3094c2 --- /dev/null +++ b/client/assets/task-creation/other.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/assets/task-creation/personal.svg b/client/assets/task-creation/personal.svg new file mode 100644 index 0000000..b333da5 --- /dev/null +++ b/client/assets/task-creation/personal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/assets/task-creation/red-pill.svg b/client/assets/task-creation/red-pill.svg new file mode 100644 index 0000000..d848544 --- /dev/null +++ b/client/assets/task-creation/red-pill.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx index 9def3de..9f3b5a6 100644 --- a/client/screens/TaskType.tsx +++ b/client/screens/TaskType.tsx @@ -5,7 +5,7 @@ import React, { useRef, useState } from 'react'; -import { FlatList, View } from 'react-native'; +import { SafeAreaView, View } from 'react-native'; import BottomSheet, { BottomSheetBackdrop, @@ -14,9 +14,17 @@ import BottomSheet, { import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types'; import { useNavigation } from '@react-navigation/native'; import DropDownPicker from 'react-native-dropdown-picker'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import { + GestureHandlerRootView, + ScrollView +} from 'react-native-gesture-handler'; import { Button, Text } from 'react-native-paper'; +import Financial from '../assets/task-creation/financial.svg'; +import Home from '../assets/task-creation/home.svg'; +import Other from '../assets/task-creation/other.svg'; +import Personal from '../assets/task-creation/personal.svg'; +import RedPill from '../assets/task-creation/red-pill.svg'; import { BackButton } from '../components/nav_buttons/BackButton'; import { CloseButton } from '../components/nav_buttons/CloseButton'; import { AppStackNavigation } from '../navigation/types'; @@ -33,6 +41,7 @@ export default function TaskType() { Object.values(TypeOfTask) ); + selectedTypes; useEffect(() => { setSelectedTypes( selectedCategory @@ -46,7 +55,7 @@ export default function TaskType() { value: filter })); - const bottomSheetSnapPoints = useMemo(() => ['60%'], []); + const bottomSheetSnapPoints = useMemo(() => ['50%'], []); const bottomSheetRef = useRef(null); @@ -70,88 +79,156 @@ export default function TaskType() { [] ); + function getCards(category: Category): string[] { + switch (category) { + case Category.HEALTH: + return ['Medication Management', 'Physician Appointments']; + case Category.FINANCIAL: + return ['Health Insurance']; + case Category.HOME: + return ['Diet', 'Activities']; + case Category.PERSONAL: + return [ + 'Grooming', + 'Shopping & Errands', + 'Family Conversations', + 'Pay Bills' + ]; + default: + return []; + } + } + + function getCategoryIcon(category: Category): JSX.Element | null { + switch (category) { + case Category.HEALTH: + return ; + case Category.PERSONAL: + return ; + case Category.HOME: + return ; + case Category.FINANCIAL: + return ; + case Category.OTHER: + return ; + default: + return null; + } + } + + function getCategoryTitle(category: Category): string | null { + switch (category) { + case Category.HEALTH: + return 'Health & Medical'; + case Category.PERSONAL: + return 'Personal'; + case Category.HOME: + return 'Home & Lifestyle'; + case Category.FINANCIAL: + return 'Financial & Legal'; + // case Category.OTHER: <- currently no cards so grayed out right now + // return 'Other'; + default: + return null; + } + } + return ( - - - - - - - Step 1 of 2 - - - - Type of Task - - - - - - ( - - navigation.navigate('TaskCreation', { - taskType: JSON.stringify(item) - }) - } + + + + + + - - - )} - /> - - - - - - Filter - + Step 1 of 3 + + + + + + + + Choose Type of Task + + + - { - closeBottomSheet(); - }} - style={{ - width: '95%', - marginLeft: 'auto', - marginRight: 'auto', - borderRadius: 0, - borderColor: 'transparent', - borderBottomColor: 'black' - }} - /> - - - + + {Object.values(Category).map((item, index) => ( + + 0 ? 'p-3' : ''} font-carewallet-montserrat-bold text-[11px] uppercase tracking-wide`} + > + {getCategoryTitle(item)} + + + {getCards(item).map((item2, index2) => ( + + navigation.navigate('TaskCreation', { + taskType: JSON.stringify(item2) + }) + } + > + + {getCategoryIcon(item)} + + {item2} + + + + ))} + + + ))} + + + + + + + Filter + + + + { + closeBottomSheet(); + }} + style={{ + width: '95%', + marginLeft: 'auto', + marginRight: 'auto', + borderRadius: 0, + borderColor: 'transparent', + borderBottomColor: 'black' + }} + /> + + + + ); } From 78da19c17814e67f683c4ec26f7c842de440329d Mon Sep 17 00:00:00 2001 From: narayansharma-21 <97.sharman@gmail.com> Date: Mon, 8 Apr 2024 10:57:32 -0400 Subject: [PATCH 3/7] refactor(taskType): changed some styling and refactored a little bit --- client/assets/task-creation/other.svg | 17 +++++++---------- client/screens/TaskCreation.tsx | 9 +++------ client/screens/TaskType.tsx | 26 ++++++++++++++------------ 3 files changed, 24 insertions(+), 28 deletions(-) diff --git a/client/assets/task-creation/other.svg b/client/assets/task-creation/other.svg index d3094c2..e560f7e 100644 --- a/client/assets/task-creation/other.svg +++ b/client/assets/task-creation/other.svg @@ -1,11 +1,8 @@ - - - - - - - - - - + + + + + + + diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx index 717ba1c..0d91623 100644 --- a/client/screens/TaskCreation.tsx +++ b/client/screens/TaskCreation.tsx @@ -97,16 +97,13 @@ export default function TaskCreation() { return ( - - + + - + Step 2 of 3 - {renderBackground(header ?? '')} ( null ); - const [selectedTypes, setSelectedTypes] = useState( + const [, setSelectedTypes] = useState( Object.values(TypeOfTask) ); - selectedTypes; useEffect(() => { setSelectedTypes( selectedCategory @@ -94,6 +94,8 @@ export default function TaskType() { 'Family Conversations', 'Pay Bills' ]; + case Category.OTHER: + return ['Other']; default: return []; } @@ -126,8 +128,8 @@ export default function TaskType() { return 'Home & Lifestyle'; case Category.FINANCIAL: return 'Financial & Legal'; - // case Category.OTHER: <- currently no cards so grayed out right now - // return 'Other'; + case Category.OTHER: + return 'Other'; default: return null; } @@ -135,17 +137,14 @@ export default function TaskType() { return ( - + - + - + Step 1 of 3 - @@ -166,7 +165,10 @@ export default function TaskType() { {Object.values(Category).map((item, index) => ( 0 ? 'p-3' : ''} font-carewallet-montserrat-bold text-[11px] uppercase tracking-wide`} + className={clsx( + 'font-carewallet-montserrat-bold text-xs uppercase tracking-wide', + index > 0 ? 'p-3' : '' + )} > {getCategoryTitle(item)} @@ -180,7 +182,7 @@ export default function TaskType() { }) } > - + {getCategoryIcon(item)} {item2} From c4b0bc5789284c4ca8f701af178540ba6d1efc97 Mon Sep 17 00:00:00 2001 From: Matt McCoy Date: Mon, 8 Apr 2024 13:43:54 -0400 Subject: [PATCH 4/7] style: fix title color not changing --- client/screens/TaskCreation.tsx | 46 +++++++++++++++++++-------------- client/screens/TaskType.tsx | 2 +- 2 files changed, 28 insertions(+), 20 deletions(-) diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx index 0d91623..a3a32c3 100644 --- a/client/screens/TaskCreation.tsx +++ b/client/screens/TaskCreation.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { SafeAreaView, Text, View } from 'react-native'; import { RouteProp, useRoute } from '@react-navigation/native'; +import { clsx } from 'clsx'; import { GestureHandlerRootView, ScrollView @@ -20,16 +21,16 @@ import { TextInputParagraph } from '../components/task_creation/TextInputParagra import { TaskCreationJson } from '../types/task-creation-json'; const TaskTitleToColorMap: { [key: string]: string } = { - 'Medication Management': 'carewallet-pink', - 'Physician Appointments': 'carewallet-pink', - Grooming: 'carewallet-purple', - 'Family Conversations': 'carewallet-purple', - 'Shopping & Errands': 'carewallet-purple', - 'Pay Bills': 'carewallet-purple', - Diet: 'carewallet-yellow', - Activities: 'carewallet-yellow', - 'Health Insurance': 'carewallet-green', - Other: 'carewallet-coral' + 'Medication Management': 'text-carewallet-pink', + 'Physician Appointments': 'text-carewallet-pink', + Grooming: 'text-carewallet-purple', + 'Family Conversations': 'text-carewallet-purple', + 'Shopping & Errands': 'text-carewallet-purple', + 'Pay Bills': 'text-carewallet-purple', + Diet: 'text-carewallet-yellow', + Activities: 'text-carewallet-yellow', + 'Health Insurance': 'text-carewallet-green', + Other: 'text-carewallet-coral' }; type ParamList = { @@ -41,11 +42,18 @@ type ParamList = { export default function TaskCreation() { const route = useRoute>(); const { taskType } = route.params; - const header = TaskCreationJson.types.find((t) => taskType.includes(t.Header) )?.Header; + const [themeColor, setThemeColor] = useState( + TaskTitleToColorMap[header as string] + ); + + useEffect(() => { + setThemeColor(TaskTitleToColorMap[header as string]); + }, [header]); + const renderBackground = (header: string) => { switch (header) { case 'Medication Management': @@ -84,17 +92,14 @@ export default function TaskCreation() { }); }); - const [values, setValues] = useState<{ [key: string]: string }>({}); + const [, setValues] = useState<{ [key: string]: string }>({}); const handleChange = (key: string, value: string) => { setValues((prevValues) => ({ ...prevValues, [key]: value })); - console.log('Current values:', values); }; - const themeColor = TaskTitleToColorMap[header as string]; - return ( @@ -104,10 +109,13 @@ export default function TaskCreation() { Step 2 of 3 - {renderBackground(header ?? '')} - + {renderBackground(header ?? '')} + {header} diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx index 7e933f5..eef22e9 100644 --- a/client/screens/TaskType.tsx +++ b/client/screens/TaskType.tsx @@ -13,7 +13,7 @@ import BottomSheet, { } from '@gorhom/bottom-sheet'; import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types'; import { useNavigation } from '@react-navigation/native'; -import clsx from 'clsx'; +import { clsx } from 'clsx'; import DropDownPicker from 'react-native-dropdown-picker'; import { GestureHandlerRootView, From 6783aca6bcdd0974e427a4e5745790dde5aaeda4 Mon Sep 17 00:00:00 2001 From: oliviaseds Date: Tue, 9 Apr 2024 10:45:07 -0400 Subject: [PATCH 5/7] refactor: implement matt's PR feedback --- .../task_creation/AddressComponent.tsx | 16 ++++++++-------- client/components/task_creation/RadioGroup.tsx | 11 +++++++++-- .../components/task_creation/TextInputLine.tsx | 2 +- client/screens/TaskType.tsx | 1 + client/types/task-creation-json.tsx | 1 - 5 files changed, 19 insertions(+), 12 deletions(-) diff --git a/client/components/task_creation/AddressComponent.tsx b/client/components/task_creation/AddressComponent.tsx index fe65abf..1c5fedf 100644 --- a/client/components/task_creation/AddressComponent.tsx +++ b/client/components/task_creation/AddressComponent.tsx @@ -5,7 +5,7 @@ export function AddressComponent() { return ( - + STREET ADDRESS - + CITY - + STATE @@ -38,18 +38,18 @@ export function AddressComponent() { - + ZIP CODE - + PHONE NUMBER { handleOptionSelect(option); }} > {renderIcon(option)} - + {option} diff --git a/client/components/task_creation/TextInputLine.tsx b/client/components/task_creation/TextInputLine.tsx index e9084db..c47cf16 100644 --- a/client/components/task_creation/TextInputLine.tsx +++ b/client/components/task_creation/TextInputLine.tsx @@ -18,7 +18,7 @@ export function TextInputLine({ title, onChange }: TextInputLineProps) { return ( - + {title.toUpperCase()} ({ diff --git a/client/types/task-creation-json.tsx b/client/types/task-creation-json.tsx index da4e5cc..a268a9e 100644 --- a/client/types/task-creation-json.tsx +++ b/client/types/task-creation-json.tsx @@ -2,7 +2,6 @@ export const TaskCreationJson = { types: [ { Header: 'Medication Management', - Background: 'client/assets/task-creation/big-bg-med.svg', Body: [ { 'Drug Name': 'TextInputLine' }, { From 2de064f81c2ea576fcd0afa2fe5c03f43fa02dbf Mon Sep 17 00:00:00 2001 From: oliviaseds Date: Tue, 9 Apr 2024 11:22:57 -0400 Subject: [PATCH 6/7] fix: correct bathing svg --- client/assets/task-creation/bathing.svg | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/assets/task-creation/bathing.svg b/client/assets/task-creation/bathing.svg index 9cc5771..f3b944b 100644 --- a/client/assets/task-creation/bathing.svg +++ b/client/assets/task-creation/bathing.svg @@ -1,4 +1,8 @@ - - - + + + + + + + From ca6f2097e6c340703e8c4184054bb1b24227130f Mon Sep 17 00:00:00 2001 From: oliviaseds Date: Tue, 9 Apr 2024 20:03:57 -0400 Subject: [PATCH 7/7] fix: filter works, cleanup file --- client/screens/TaskType.tsx | 115 +++++++++++++----------------------- 1 file changed, 42 insertions(+), 73 deletions(-) diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx index 24a83a7..0bafd80 100644 --- a/client/screens/TaskType.tsx +++ b/client/screens/TaskType.tsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState -} from 'react'; +import React, { useCallback, useMemo, useRef, useState } from 'react'; import { SafeAreaView, View } from 'react-native'; import BottomSheet, { @@ -29,46 +23,28 @@ import RedPill from '../assets/task-creation/red-pill.svg'; import { BackButton } from '../components/nav_buttons/BackButton'; import { CloseButton } from '../components/nav_buttons/CloseButton'; import { AppStackNavigation } from '../navigation/types'; -import { Category, CategoryToTypeMap, TypeOfTask } from '../types/type'; +import { Category, CategoryToTypeMap } from '../types/type'; export default function TaskType() { const navigation = useNavigation(); - const [open, setOpen] = useState(false); const [selectedCategory, setSelectedCategory] = useState( null ); - const [, setSelectedTypes] = useState( - Object.values(TypeOfTask) - ); - - useEffect(() => { - setSelectedTypes( - selectedCategory - ? CategoryToTypeMap[selectedCategory] - : Object.values(TypeOfTask) - ); - console.log(selectedCategory); - }, [selectedCategory]); - const filters = Object.values(Category).map((filter) => ({ label: filter, value: filter })); const bottomSheetSnapPoints = useMemo(() => ['50%'], []); - const bottomSheetRef = useRef(null); - const closeBottomSheet = () => { if (bottomSheetRef.current) { - bottomSheetRef.current.close(); // Close the BottomSheet + bottomSheetRef.current.close(); } }; - const snapToIndex = (index: number) => bottomSheetRef.current?.snapToIndex(index); - const renderBackdrop = useCallback( (props: BottomSheetDefaultBackdropProps) => ( @@ -163,18 +100,18 @@ export default function TaskType() { - {Object.values(Category).map((item, index) => ( - + {selectedCategory ? ( + 0 ? 'p-3' : '' + 'p-3' )} > - {getCategoryTitle(item)} + {selectedCategory} - {getCards(item).map((item2, index2) => ( + {CategoryToTypeMap[selectedCategory].map((item2, index2) => ( @@ -184,7 +121,7 @@ export default function TaskType() { } > - {getCategoryIcon(item)} + {getCategoryIcon(selectedCategory)} {item2} @@ -193,7 +130,39 @@ export default function TaskType() { ))} - ))} + ) : ( + Object.values(Category).map((item, index) => ( + + 0 ? 'p-3' : '' + )} + > + {item} + + + {CategoryToTypeMap[item].map((item2, index2) => ( + + navigation.navigate('TaskCreation', { + taskType: JSON.stringify(item2) + }) + } + > + + {getCategoryIcon(item)} + + {item2} + + + + ))} + + + )) + )}