Merge pull request #12 from TaskRatchet/Loading-indicators

app icon update, added info popup to new task popup

ios/mobile/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,49 +1,49 @@
 {
   "images" : [
     {
-      "filename" : "TR_Icon_40.png",
+      "filename" : "TR_Icon_40x40.png",
       "idiom" : "iphone",
       "scale" : "2x",
       "size" : "20x20"
     },
     {
-      "filename" : "TR_Icon_60.png",
+      "filename" : "TR_Icon_60x60.png",
       "idiom" : "iphone",
       "scale" : "3x",
       "size" : "20x20"
     },
     {
-      "filename" : "TR_Icon_58.png",
+      "filename" : "TR_Icon_58x58.png",
       "idiom" : "iphone",
       "scale" : "2x",
       "size" : "29x29"
     },
     {
-      "filename" : "TR_Icon_87.png",
+      "filename" : "TR_Icon_87x87.png",
       "idiom" : "iphone",
       "scale" : "3x",
       "size" : "29x29"
     },
     {
-      "filename" : "TR_Icon_80.png",
+      "filename" : "TR_Icon_80x80.png",
       "idiom" : "iphone",
       "scale" : "2x",
       "size" : "40x40"
     },
     {
-      "filename" : "TR_Icon_120 1.png",
+      "filename" : "TR_Icon_120x120.png",
       "idiom" : "iphone",
       "scale" : "3x",
       "size" : "40x40"
     },
     {
-      "filename" : "TR_Icon_120.png",
+      "filename" : "TR_Icon_120x120 1.png",
       "idiom" : "iphone",
       "scale" : "2x",
       "size" : "60x60"
     },
     {
-      "filename" : "TR_Icon_180.png",
+      "filename" : "TR_Icon_180x180.png",
       "idiom" : "iphone",
       "scale" : "3x",
       "size" : "60x60"

src/components/newTaskPopup.tsx

@@ -1,13 +1,24 @@
 import {useMutation, useQueryClient} from '@tanstack/react-query';
 import React, {useState} from 'react';
-import {Modal, Pressable, Text, TextInput, View} from 'react-native';
+import {
+  Image,
+  ImageSourcePropType,
+  Modal,
+  Pressable,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 
+import infoIconBlack from '../../assets/icons/information_icon(black).png';
+import infoIconWhite from '../../assets/icons/information_icon(white).png';
 import themeProvider from '../providers/themeProvider';
 import {addTask} from '../services/taskratchet/addTask';
 import {styles} from '../styles/newTaskPopupStyle';
 import useIsDarkMode from '../utils/checkDarkMode';
 import DatePickerPopup from './datePickerPopup';
 import PressableLoading from './pressableLoading';
+import StakesInfoPopup from './stakesInfoPopup';
 import type {infoPopupProps} from './types';
 
 export default function NewTaskPopup({
@@ -56,6 +67,7 @@ export default function NewTaskPopup({
   const [dollars, setDollars] = useState(5);
   const [failMessage, setFailMessage] = useState('');
   const [datePickerModalVisible, setDatePickerModalVisible] = useState(false);
+  const [stakesInfoModalVisible, setStakesInfoModalVisible] = useState(false);
 
   const taskData = {
     title: title,
@@ -84,6 +96,19 @@ export default function NewTaskPopup({
       <Modal visible={modalVisible} transparent={true} animationType="none">
         <View style={styles.centeredView}>
           <View style={[styles.modalView, backgroundStyle]}>
+            <Pressable
+              onPress={() => {
+                setStakesInfoModalVisible(!stakesInfoModalVisible);
+              }}>
+              <Image
+                style={styles.infoIcon}
+                source={
+                  isDarkMode
+                    ? (infoIconWhite as ImageSourcePropType)
+                    : (infoIconBlack as ImageSourcePropType)
+                }
+              />
+            </Pressable>
             <View style={styles.titlePair}>
               <Text style={[styles.titleTextStyle, textColorStyle]}>Task</Text>
               <TextInput
@@ -95,7 +120,9 @@ export default function NewTaskPopup({
             </View>
 
             <View style={styles.centsPair}>
-              <Text style={[styles.textStyle, textColorStyle]}>Stakes</Text>
+              <View style={styles.stakesTextPair}>
+                <Text style={[styles.textStyle, textColorStyle]}>Stakes</Text>
+              </View>
               <TextInput
                 style={[styles.input, inputBackgroundStyle, textColorStyle]}
                 keyboardType="numeric"
@@ -139,7 +166,6 @@ export default function NewTaskPopup({
                   setModalVisible(!modalVisible);
                   resetTaskData();
                 } else {
-                  console.error('Invalid task data');
                   setFailMessage('Title and Value must be set');
                 }
               }}>
@@ -169,6 +195,11 @@ export default function NewTaskPopup({
           date={chosenDate}
           onDateChange={setChosenDate}
         />
+        <StakesInfoPopup
+          testID="stakesInfoPopup"
+          stakesInfoModalVisible={stakesInfoModalVisible}
+          setStakesInfoModalVisible={setStakesInfoModalVisible}
+        />
       </Modal>
     </View>
   );

src/components/stakesInfoPopup.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {Modal, Pressable, Text, View} from 'react-native';
+
+import themeProvider from '../providers/themeProvider';
+import {styles} from '../styles/stakesInfoPopupStyle';
+import useIsDarkMode from '../utils/checkDarkMode';
+import type {stakesInfoPopupProps} from './types';
+
+export default function StakesInfoPopup({
+  stakesInfoModalVisible,
+  setStakesInfoModalVisible,
+}: stakesInfoPopupProps): JSX.Element {
+  const isDarkMode = useIsDarkMode();
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode
+      ? themeProvider.colorsDark.secondaryLight
+      : themeProvider.colorsLight.secondary,
+  };
+
+  const textColorStyle = {
+    color: isDarkMode ? 'white' : 'black',
+  };
+
+  return (
+    <View>
+      <Modal
+        visible={stakesInfoModalVisible}
+        transparent={true}
+        animationType="none">
+        <View style={styles.centeredView}>
+          <View style={[styles.modalView, backgroundStyle]}>
+            <Text style={[styles.paragraph, textColorStyle]}>
+              <Text>
+                Setting stakes helps you stay committed to your goals. When
+                creating a task, you assign a monetary value to it. Here's how
+                it works:
+              </Text>
+              {'\n\n'}
+              <Text style={styles.bold}>Stakes Amount: </Text>
+              <Text>
+                This is the amount you pledge to pay if you don't complete the
+                task on time.
+              </Text>
+              {'\n'}
+              <Text style={styles.bold}>Completion Deadline: </Text>
+              <Text>
+                If you mark the task as complete before the deadline you set,
+                you won't be charged.
+              </Text>
+              {'\n\n'}
+              <Text style={styles.bold}>Why set stakes? </Text>
+              <Text>
+                {'\n'}
+                <Text style={styles.bold}>Motivation: </Text>
+                Adding stakes adds a level of motivation to your tasks.
+                {'\n'}
+                <Text style={styles.bold}>Accountability: </Text>
+                Committing to a financial stake can help you stay accountable to
+                your goals.
+                {'\n'}
+                <Text style={styles.bold}>Reward for Success: </Text>
+                Successfully completing tasks on time means you keep your money.
+              </Text>
+            </Text>
+            <Pressable
+              style={({pressed}) => [
+                {
+                  backgroundColor: pressed
+                    ? 'rgba(33, 150, 243, 0.5)'
+                    : '#2196F3',
+                },
+                styles.button,
+              ]}
+              onPress={() =>
+                setStakesInfoModalVisible(!stakesInfoModalVisible)
+              }>
+              <Text style={styles.buttonTextStyle}>Hide</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}

src/components/types.tsx

@@ -45,6 +45,12 @@ export type infoPopupProps = {
   setModalVisible: Dispatch<SetStateAction<boolean>>;
 };
 
+export type stakesInfoPopupProps = {
+  testID?: string;
+  stakesInfoModalVisible: boolean;
+  setStakesInfoModalVisible: Dispatch<SetStateAction<boolean>>;
+};
+
 export type ButtonLoadingProps = {
   children?: React.ReactNode;
   loading: boolean;

src/screens/LoginScreen.tsx

@@ -47,7 +47,7 @@ export default function LoginScreen({navigation}: Props): JSX.Element {
     mutationFn: () => login(userInput, passInput),
     onSettled: (data, error) => {
       if (!data || error) {
-        console.error('login error ' + String(error));
+        console.log('login error ' + String(error));
         setOutputStatus('Login Failed, try again!');
         return;
       }
@@ -63,16 +63,19 @@ export default function LoginScreen({navigation}: Props): JSX.Element {
         source={logo as ImageSourcePropType}
       />
       <SafeAreaView>
-        <Pressable style={styles.topButtonBox} onPress={handleHelpButtonPress}>
-          <Image
-            style={styles.helpImageStyle}
-            source={
-              isDarkMode
-                ? (helpIconWhite as ImageSourcePropType)
-                : (helpIconBlack as ImageSourcePropType)
-            }
-          />
+        <Pressable onPress={handleHelpButtonPress}>
+          <View style={styles.helpButtonBox}>
+            <Image
+              style={styles.helpImageStyle}
+              source={
+                isDarkMode
+                  ? (helpIconWhite as ImageSourcePropType)
+                  : (helpIconBlack as ImageSourcePropType)
+              }
+            />
+          </View>
         </Pressable>
+
         <KeyboardAvoidingView
           style={styles.container}
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -121,6 +124,10 @@ export default function LoginScreen({navigation}: Props): JSX.Element {
               loadingTextStyle={styles.loginText}
               style={styles.login}
               onPress={() => {
+                if (userInput === '' || passInput === '') {
+                  setOutputStatus('Username and Password Required');
+                  return;
+                }
                 mutation.mutate();
               }}>
               <Text style={styles.loginText}>Login</Text>

src/styles/infoPopupStyle.tsx

@@ -14,7 +14,7 @@ export const styles = StyleSheet.create({
     color: '#A8A8A8',
   },
   paragraph: {
-    fontSize: 18,
+    fontSize: 14,
     textAlign: 'center',
     margin: 5,
     marginBottom: 15,

src/styles/loginScreenStyle.tsx

@@ -92,14 +92,12 @@ export const styles = StyleSheet.create({
     textAlign: 'center',
   },
   helpImageStyle: {
-    marginRight: 5,
-    marginTop: 12,
     width: 22,
     height: 22,
   },
-  topButtonBox: {
-    position: 'absolute',
-    top: 5,
-    right: 10,
+  helpButtonBox: {
+    marginLeft: '91%',
+    marginTop: 10,
+    padding: 5,
   },
 });

src/styles/newTaskPopupStyle.tsx

@@ -52,7 +52,6 @@ export const styles = StyleSheet.create({
   titlePair: {
     marginBottom: 10,
     justifyContent: 'space-between',
-    // alignItems: 'center',
   },
   titleTextStyle: {
     marginBottom: 5,
@@ -87,4 +86,13 @@ export const styles = StyleSheet.create({
     paddingLeft: 12,
     borderRadius: 7,
   },
+  infoIcon: {
+    width: 20,
+    height: 20,
+    marginLeft: '95%',
+  },
+  stakesTextPair: {
+    flexDirection: 'row',
+    alignContent: 'center',
+  },
 });

src/styles/stakesInfoPopupStyle.tsx

@@ -0,0 +1,43 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  paragraph: {
+    fontSize: 14,
+    textAlign: 'center',
+    margin: 5,
+    marginBottom: 15,
+  },
+  buttonTextStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  button: {
+    borderRadius: 20,
+    margin: 5,
+    padding: 10,
+    elevation: 2,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+});