From d0b7de5f1150d044049fb14ed5ad5e5a89c23d28 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Fri, 26 Apr 2024 18:28:41 +0100 Subject: [PATCH 01/11] login button added --- .expo/packager-info.json | 4 ++++ .expo/settings.json | 9 ++++++++- src/NativeBase/Containers/SettingsContainer.tsx | 5 ++++- 3 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 .expo/packager-info.json diff --git a/.expo/packager-info.json b/.expo/packager-info.json new file mode 100644 index 00000000..3256d068 --- /dev/null +++ b/.expo/packager-info.json @@ -0,0 +1,4 @@ +{ + "expoServerPort": null, + "packagerPort": 19000 +} diff --git a/.expo/settings.json b/.expo/settings.json index 8c89347d..a88ec67c 100644 --- a/.expo/settings.json +++ b/.expo/settings.json @@ -1,3 +1,10 @@ { - "urlRandomness": "ZIWJWVY" + "urlRandomness": "ZIWJWVY", + "dev": true, + "minify": false, + "https": false, + "hostType": "lan", + "lanType": "ip", + "scheme": null, + "devClient": false } diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index 48ff7faa..825c8e65 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -27,6 +27,7 @@ import SegmentedPicker, { SegmentedPickerOption, } from '../Components/SegmentedPicker' import { capitaliseFirstLetter } from '@/Utils/Text' +import { Button } from 'native-base' const SettingsContainer = () => { const { colorMode, toggleColorMode } = useColorMode() @@ -130,9 +131,11 @@ const SettingsContainer = () => { */} - + Version {version} + + From 9f872bf0dd226a3275bfcae850dd99a33d9973f2 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Fri, 26 Apr 2024 20:25:14 +0100 Subject: [PATCH 02/11] toggle log in/log out button --- .../Containers/SettingsContainer.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index 825c8e65..6740893d 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -88,6 +88,15 @@ const SettingsContainer = () => { setColourModeChoice(newColourMode) } + const [isLoggedIn, setIsLoggedIn] = useState(false) + + const handleLogin = () => { + setIsLoggedIn(!isLoggedIn) + } + const handleLogout = () => { + setIsLoggedIn(false) + } + return ( { Version {version} - + {isLoggedIn ? ( + + Log out + + ) : ( + + )} From 21cd378e541ab6595fe2ec256cac5d93a2202972 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Thu, 2 May 2024 14:53:00 +0200 Subject: [PATCH 03/11] work on settings screen in progress --- .../Components/PrivacyAndTermsLinks.tsx | 2 +- .../Containers/SettingsContainer.tsx | 114 ++++++++++-------- src/Navigators/Main.tsx | 1 + 3 files changed, 66 insertions(+), 51 deletions(-) diff --git a/src/NativeBase/Components/PrivacyAndTermsLinks.tsx b/src/NativeBase/Components/PrivacyAndTermsLinks.tsx index 8006a465..97c2b90e 100644 --- a/src/NativeBase/Components/PrivacyAndTermsLinks.tsx +++ b/src/NativeBase/Components/PrivacyAndTermsLinks.tsx @@ -18,7 +18,7 @@ const PrivacyAndTermsLinks: FC = ({ fontSize }) => { fontSize = fontSize ?? 'xs' return ( - + { } return ( - - - - + <> + + SETTINGS + + + + + - - Dark mode - - + + Dark mode + + - - - onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) - } - value={dataPermissionsState.errorLogs} - /> - - Automatically send bug reports to the STA team? May include - personal data - - + + + onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) + } + value={dataPermissionsState.errorLogs} + /> + + Automatically send bug reports to the STA team? May include + personal data + + - {/* Welcome screen + {/* Welcome screen { > Show splash screen on app launch */} - - - - Version {version} - + - {isLoggedIn ? ( - - Log out - - ) : ( - - )} + + Version {version} + + + + {isLoggedIn ? ( + + Log out + + ) : ( + + )} + - - + + ) } diff --git a/src/Navigators/Main.tsx b/src/Navigators/Main.tsx index f6906933..60e42b8c 100644 --- a/src/Navigators/Main.tsx +++ b/src/Navigators/Main.tsx @@ -176,6 +176,7 @@ const MainNavigator = () => { component={SettingsContainer} options={{ ...bottomTabOptions, + headerShown: false, }} /> From d8fba8caf36da1230ec6732b823d2a76133496a5 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Wed, 22 May 2024 18:01:08 +0100 Subject: [PATCH 04/11] login button and logout button with useAuth hook, styling --- .../Containers/SettingsContainer.tsx | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index a5da57ed..615a87d0 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -36,6 +36,8 @@ import SegmentedPicker, { } from '../Components/SegmentedPicker' import { capitaliseFirstLetter } from '@/Utils/Text' import { Button } from 'native-base' +import { useAuth } from '@/Services/auth' +import { navigate } from '@/Navigators/utils' const SettingsContainer = () => { const { colorMode, toggleColorMode } = useColorMode() @@ -96,18 +98,24 @@ const SettingsContainer = () => { setColourModeChoice(newColourMode) } - const [isLoggedIn, setIsLoggedIn] = useState(false) + const { authenticated: isLoggedIn, login, logout } = useAuth() const handleLogin = () => { - setIsLoggedIn(!isLoggedIn) + navigate('Login', {}) } + const handleLogout = () => { - setIsLoggedIn(false) + logout() } return ( <> - + SETTINGS @@ -118,10 +126,10 @@ const SettingsContainer = () => { space={4} padding={4} > - + - + Dark mode @@ -152,12 +160,17 @@ const SettingsContainer = () => { */} - + Version {version} - + - {isLoggedIn ? ( + + {!isLoggedIn ? ( + + ) : ( { > Log out - ) : ( - )} From f06011367e1456eab73b0eb71e3b59e00bfa1951 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Tue, 4 Jun 2024 12:15:33 +0100 Subject: [PATCH 05/11] fixed color, spacing, featureFlags for login --- .../Containers/SettingsContainer.tsx | 114 +++++++++--------- 1 file changed, 54 insertions(+), 60 deletions(-) diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index 615a87d0..80cfbdd2 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -13,16 +13,16 @@ * See more about dark mode in APP_DEVELOPMENT.md */ +import React, { useState } from 'react' import { Heading, VStack, Text, ScrollView, useColorMode, - HStack, + Button, View, } from 'native-base' -import React, { useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import Brand from '@/NativeBase/Components/Brand' import PrivacyAndTermsLinks from '@/NativeBase/Components/PrivacyAndTermsLinks' @@ -35,16 +35,18 @@ import SegmentedPicker, { SegmentedPickerOption, } from '../Components/SegmentedPicker' import { capitaliseFirstLetter } from '@/Utils/Text' -import { Button } from 'native-base' import { useAuth } from '@/Services/auth' import { navigate } from '@/Navigators/utils' +import { useFeatureFlags } from '@/Services/featureFlags' const SettingsContainer = () => { const { colorMode, toggleColorMode } = useColorMode() const dispatch = useDispatch() + // const onChangeSplash = ({ welcome, show }: Partial) => { // dispatch(changeWelcome({ welcome, show })) // } + const dataPermissionsState = useSelector( (state: { permissions: PermissionsState }) => state.permissions.data, ) @@ -57,6 +59,7 @@ const SettingsContainer = () => { // const welcomeState = useSelector( // (state: { welcome: WelcomeState }) => state.welcome.show, // ) + const [colourModeChoice, setColourModeChoice] = useState( useSystemColourMode ? 'system' : colorMode ?? 'light', ) @@ -108,47 +111,40 @@ const SettingsContainer = () => { logout() } + const featureFlags = useFeatureFlags() + return ( - <> - - SETTINGS - - - - - - - - Dark mode - - - - - - onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) - } - value={dataPermissionsState.errorLogs} - /> - - Automatically send bug reports to the STA team? May include - personal data - - - - {/* Welcome screen + + + + SETTINGS + + + + + + + + + Dark mode + + + + + + onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) + } + value={dataPermissionsState.errorLogs} + /> + + Automatically send bug reports to the STA team? May include + personal data + + + + {/* Welcome screen { > Show splash screen on app launch */} - - - - Version {version} - - - + - {!isLoggedIn ? ( + + Version {version} + + {featureFlags.login ? ( + !isLoggedIn ? ( ) : ( - Log out - - )} - + + ) + ) : null} - - + + ) } From 434cb942a034461774952faccb84aff07b00c2a9 Mon Sep 17 00:00:00 2001 From: mirkiy Date: Wed, 12 Jun 2024 18:26:40 +0100 Subject: [PATCH 06/11] login button moved out from scrolView, margin styling fixed, expo folder deleted --- .expo/README.md | 8 -- .expo/devices.json | 3 - .expo/packager-info.json | 4 - .expo/settings.json | 10 -- .../Containers/SettingsContainer.tsx | 113 ++++++++++-------- 5 files changed, 60 insertions(+), 78 deletions(-) delete mode 100644 .expo/README.md delete mode 100644 .expo/devices.json delete mode 100644 .expo/packager-info.json delete mode 100644 .expo/settings.json diff --git a/.expo/README.md b/.expo/README.md deleted file mode 100644 index f7eb5fe7..00000000 --- a/.expo/README.md +++ /dev/null @@ -1,8 +0,0 @@ -> Why do I have a folder named ".expo" in my project? -The ".expo" folder is created when an Expo project is started using "expo start" command. -> What do the files contain? -- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds. -- "settings.json": contains the server configuration that is used to serve the application manifest. -> Should I commit the ".expo" folder? -No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine. -Upon project creation, the ".expo" folder is already added to your ".gitignore" file. diff --git a/.expo/devices.json b/.expo/devices.json deleted file mode 100644 index 5efff6c8..00000000 --- a/.expo/devices.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "devices": [] -} diff --git a/.expo/packager-info.json b/.expo/packager-info.json deleted file mode 100644 index 3256d068..00000000 --- a/.expo/packager-info.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "expoServerPort": null, - "packagerPort": 19000 -} diff --git a/.expo/settings.json b/.expo/settings.json deleted file mode 100644 index a88ec67c..00000000 --- a/.expo/settings.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "urlRandomness": "ZIWJWVY", - "dev": true, - "minify": false, - "https": false, - "hostType": "lan", - "lanType": "ip", - "scheme": null, - "devClient": false -} diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index 80cfbdd2..7b0e2c78 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -114,37 +114,43 @@ const SettingsContainer = () => { const featureFlags = useFeatureFlags() return ( - - - - SETTINGS - - - - - - - - - Dark mode - - - - - - onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) - } - value={dataPermissionsState.errorLogs} - /> - - Automatically send bug reports to the STA team? May include - personal data - - - - {/* Welcome screen + <> + + + + SETTINGS + + + + + + + + + Dark mode + + + + + + onChangeErrorLogsPermission(!dataPermissionsState.errorLogs) + } + value={dataPermissionsState.errorLogs} + /> + + Automatically send bug reports to the STA team? May include + personal data + + + + {/* Welcome screen { > Show splash screen on app launch */} + - - - Version {version} - - {featureFlags.login ? ( - !isLoggedIn ? ( - - ) : ( - - ) - ) : null} - + + + + Version {version} + + {featureFlags.login ? ( + !isLoggedIn ? ( + + ) : ( + + ) + ) : null} - + ) } From b7f8e008cd9d6cbab8d75bd924ab1d712631275b Mon Sep 17 00:00:00 2001 From: mirkiy Date: Thu, 13 Jun 2024 19:41:53 +0100 Subject: [PATCH 07/11] additional styling changes for featureFlags button, removed commented old code --- .../Containers/SettingsContainer.tsx | 46 ++++--------------- 1 file changed, 8 insertions(+), 38 deletions(-) diff --git a/src/NativeBase/Containers/SettingsContainer.tsx b/src/NativeBase/Containers/SettingsContainer.tsx index 7b0e2c78..d2f0bbd5 100644 --- a/src/NativeBase/Containers/SettingsContainer.tsx +++ b/src/NativeBase/Containers/SettingsContainer.tsx @@ -1,18 +1,3 @@ -/** - * @file Settings screen showing app configuration settings. - * - * The user's dark mode preference (which NativeBase calls colour mode) is handled in two ways: - * - * 1) 'System default' choice: we use the Redux store for our 'useSystemColourMode' flag -- this says whether or not the user's chosen 'Use system default' - * (NativeBase doesn't seem to have an easy built-in way to handle this option that works.) - * Then we use NativeBase's toggleColorMode to set the colour mode to reflect whether the OS is set to dark or light -- this happens in Navigators/Application. - * - * 2) 'Dark'/'Light' choice: if they choose to manually set the colour to dark or light, we ignore the OS's setting and simply use NativeBase's toggleColorMode - * to set the colour mode to dark or light based on the user's preference. - * - * See more about dark mode in APP_DEVELOPMENT.md - */ - import React, { useState } from 'react' import { Heading, @@ -29,7 +14,6 @@ import PrivacyAndTermsLinks from '@/NativeBase/Components/PrivacyAndTermsLinks' import YesNoChoice from '@/NativeBase/Components/Forms/YesNoChoice' import { setPermissions, PermissionsState } from '@/Store/Permissions' import { changeTheme, ThemeState } from '@/Store/Theme' -// import { changeWelcome, WelcomeState } from '@/Store/Welcome' // currently not being used due to cleanup for MVP import { version } from '../../../package.json' import SegmentedPicker, { SegmentedPickerOption, @@ -43,10 +27,6 @@ const SettingsContainer = () => { const { colorMode, toggleColorMode } = useColorMode() const dispatch = useDispatch() - // const onChangeSplash = ({ welcome, show }: Partial) => { - // dispatch(changeWelcome({ welcome, show })) - // } - const dataPermissionsState = useSelector( (state: { permissions: PermissionsState }) => state.permissions.data, ) @@ -56,9 +36,6 @@ const SettingsContainer = () => { const useSystemColourMode = useSelector( (state: { theme: ThemeState }) => state.theme.useSystemColourMode, ) - // const welcomeState = useSelector( - // (state: { welcome: WelcomeState }) => state.welcome.show, - // ) const [colourModeChoice, setColourModeChoice] = useState( useSystemColourMode ? 'system' : colorMode ?? 'light', @@ -101,7 +78,7 @@ const SettingsContainer = () => { setColourModeChoice(newColourMode) } - const { authenticated: isLoggedIn, login, logout } = useAuth() + const { authenticated: isLoggedIn, logout } = useAuth() const handleLogin = () => { navigate('Login', {}) @@ -149,33 +126,26 @@ const SettingsContainer = () => { personal data + - {/* Welcome screen - onChangeSplash({ show: !welcomeState })} - > - Show splash screen on app launch - */} + + Version {version} + - - Version {version} - + {featureFlags.login ? ( !isLoggedIn ? ( - ) : ( ) : ( ) : (