Merge pull request #194 from Scottish-Tech-Army/feature/sva-354-my-ex…

…perience-buttons feature/sva-354-my-experience-profile-buttons
Scottish-Tech-Army · Sep 4, 2023 · 80b70bb · 80b70bb
2 parents 790ce81 + 4867f9b
commit 80b70bb
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 41 deletions.
diff --git a/APP_DEVELOPMENT.md b/APP_DEVELOPMENT.md
@@ -2,26 +2,39 @@
 
 This file contains some tips and guidelines on building our front-end React Native app. Please add to it!
 
-- [Overview of directories](#overview-of-directories)
-- [Working with Figma](#working-with-figma)
-- [React Native and Expo](#react-native-and-expo)
-  - [Expo trade-offs](#expo-trade-offs)
-  - [Installing new packages](#installing-new-packages)
-  - [Using .env variables](#using-env-variables)
-  - [Expo config file](#expo-config-file)
-  - [Expo known issues](#expo-known-issues)
-- [NativeBase](#nativebase)
-  - [File locations, naming, moving and deleting](#file-locations-naming-moving-and-deleting)
-  - [Theming & approach](#theming--approach)
-  - [Dark mode](#dark-mode)
-  - [Reusable containers](#reusable-containers)
-  - [Custom components](#custom-components)
-  - [Icons](#icons)
-- [Images](#images)
-- [Logging errors and crashes](#logging-errors-and-crashes)
-  - [Seeing Bugsnag reports](#seeing-bugsnag-reports)
-  - [Logging errors to Bugsnag during development](#logging-errors-to-bugsnag-during-development)
-- [Performance issues](#performance-issues)
+- [App development](#app-development)
+  - [Overview of directories](#overview-of-directories)
+  - [Working with Figma](#working-with-figma)
+  - [React Native and Expo](#react-native-and-expo)
+    - [Expo trade-offs](#expo-trade-offs)
+    - [Installing new packages](#installing-new-packages)
+    - [Using .env variables](#using-env-variables)
+    - [Expo config file](#expo-config-file)
+    - [Expo known issues](#expo-known-issues)
+  - [NativeBase](#nativebase)
+    - [File locations, naming, moving and deleting](#file-locations-naming-moving-and-deleting)
+    - [Theming \& approach](#theming--approach)
+    - [Dark mode](#dark-mode)
+    - [Reusable containers](#reusable-containers)
+      - [WebViewContainer](#webviewcontainer)
+    - [Custom components](#custom-components)
+      - [Brand](#brand)
+      - [STA Matchstick](#sta-matchstick)
+      - [Checkbox](#checkbox)
+      - [ProgressBar](#progressbar)
+      - [ChoicesList](#choiceslist)
+      - [FreeSearchBar](#freesearchbar)
+      - [Modal](#modal)
+      - [NavigationHeader](#navigationheader)
+      - [SegmentedPicker](#segmentedpicker)
+      - [TopOfApp](#topofapp)
+      - [TextInputControl](#textinputcontrol)
+    - [Icons](#icons)
+  - [Images](#images)
+  - [Logging errors and crashes](#logging-errors-and-crashes)
+    - [Seeing Bugsnag reports](#seeing-bugsnag-reports)
+    - [Logging errors to Bugsnag during development](#logging-errors-to-bugsnag-during-development)
+  - [Performance issues](#performance-issues)
 
 ## Overview of directories
 
@@ -160,6 +173,25 @@ These are custom components we've developed, in addition to NativeBase readymade
 
 Displays the wide version of the STA logo
 
+#### STA Matchstick
+
+![STA Matchstick](screenshots/components/STAPencil.jpg)
+
+A Single STA Matchstick that can be reused in any component with the appropriate colour
+
+#### Checkbox
+
+![Checkbox Group](screenshots/components/Checkbox.jpg)
+
+A reusable checkbox component that can be configured for multiple different values.
+
+#### ProgressBar
+
+![Progress Bar](screenshots/components/ProgressBar.jpg)
+
+A dynamic custom progress bar for reuse in the Profile containers (or elsewhere).
+The choice of progress bar colour can be modified.
+
 #### ChoicesList
 
 ![ChoicesList component](screenshots/components/ChoicesList.png)

diff --git a/app/src/NativeBase/Components/ProfileButtons.tsx b/app/src/NativeBase/Components/ProfileButtons.tsx
@@ -23,10 +23,23 @@ const ProfileButtons: React.FC<ProfileButtonsProps> = ({
   children,
   ...props
 }) => {
+  const [pressed, setButtonPressed] = React.useState(false)
+
+  const handlePressIn = () => {
+    setButtonPressed(true)
+    onPress()
+  }
   return (
-    <Button onPress={onPress} disabled={disabled} {...props}>
-      {children}
+    <Button
+      onPress={handlePressIn}
+      {...props}
+      backgroundColor={pressed ? 'purple.100' : props.backgroundColor}
+      _text={pressed ? { color: 'white' } : props._text}
+      disabled={disabled}
+    >
+      {pressed ? 'Done' : children}
     </Button>
   )
 }
+
 export default ProfileButtons
diff --git a/app/src/NativeBase/Containers/MyExperienceContainer.tsx b/app/src/NativeBase/Containers/MyExperienceContainer.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   View,
   Text,
+  Button,
 } from 'native-base'
 import ProfileButtons from '../Components/ProfileButtons'
 import ProgressBar from '../Components/ProgressBar'
@@ -26,7 +27,7 @@ const MyExperienceContainer = () => {
   const [skillsValue, setSkillsValue] = React.useState<string[]>([]) // skills selected by the user
   const [searchTxt, setSearchTxt] = React.useState<string>('') // search text
   const [currentBox, setCurrentBox] = React.useState<number>(1) // current box in the progress bar
-
+  const [nextButton, setNextButton] = React.useState<boolean>(false) // next screen button
   /**
    * Filter the role groups based on the search text entered by the user
    */
@@ -39,6 +40,11 @@ const MyExperienceContainer = () => {
     getProgressBarColors(currentBox, 'purple.20'),
   )
 
+  const handleButtonPress = () => {
+    setNextButton(true)
+    nextScreen(currentBox, setCurrentBox)
+  }
+
   return (
     <>
       <HStack mt={-10} mb={5} alignItems={'flex-end'}>
@@ -49,7 +55,7 @@ const MyExperienceContainer = () => {
           <StaThemeLogo />
         </Flex>
       </HStack>
-      <ProgressBar colours={progressBarColourObject} />
+      {/* <ProgressBar colours={progressBarColourObject} /> */}
       <View margin={4}>
         <FreeSearchBar
           marginTop="2"
@@ -111,27 +117,31 @@ const MyExperienceContainer = () => {
             _text={{
               color: 'purple.100',
             }}
-            onPress={() => nextScreen(currentBox, setCurrentBox)}
+            onPress={handleButtonPress}
             disabled={currentBox === currentBox - 1}
           >
             Next
           </ProfileButtons>
-          <ProfileButtons
-            backgroundColor="bg.100"
-            borderColor="bg.100"
-            fontFamily="primarySemiBold"
-            _dark={{
-              backgroundColor: 'bgDarkMode.100',
-              _text: { color: 'white' },
-              borderColor: 'white',
-            }}
-            _text={{
-              color: 'darkGrey.100',
-            }}
-            onPress={() => []}
-          >
-            Skip
-          </ProfileButtons>
+          {nextButton ? (
+            <View marginBottom={8} />
+          ) : (
+            <Button
+              backgroundColor="bg.100"
+              borderColor="bg.100"
+              fontFamily="primarySemiBold"
+              _dark={{
+                backgroundColor: 'bgDarkMode.200',
+                _text: { color: 'white' },
+                borderColor: 'white',
+              }}
+              _text={{
+                color: 'darkGrey.100',
+              }}
+              onPress={() => []}
+            >
+              Skip
+            </Button>
+          )}
         </VStack>
       </ScrollView>
     </>

diff --git a/screenshots/components/Checkbox.jpg b/screenshots/components/Checkbox.jpg
diff --git a/screenshots/components/ProgressBar.jpg b/screenshots/components/ProgressBar.jpg
diff --git a/screenshots/components/STAPencil.jpg b/screenshots/components/STAPencil.jpg