Staging to check forked PR's locally

App.tsx

@@ -10,7 +10,7 @@ import rootSaga from './src/sagas/rootSaga';
 
 const sagaMiddleware = createSagaMiddleware();
 const middleware = [sagaMiddleware];
-const store = compose(applyMiddleware(...middleware))(createStore)(reducers);
+export const store = compose(applyMiddleware(...middleware))(createStore)(reducers);
 sagaMiddleware.run(rootSaga);
 
 const App = () => {

android/app/build.gradle

@@ -204,6 +204,11 @@ dependencies {
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.fbjni'
     }
+    implementation ("androidx.appcompat:appcompat:1.3.1") {
+        version {
+            strictly '1.3.1'
+        }
+    }
 
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.facebook.flipper'

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
     "format-check": "prettier --check ./src",
     "format-fix": "prettier --write ./src",
-    "precommit-check": "yarn run format-fix && yarn run lint && yarn run test",
+    "precommit-check": "yarn run format-fix && yarn run lint",
     "build": "npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res; cd android ; ./gradlew assembleDebug"
   },
   "dependencies": {
@@ -32,6 +32,7 @@
     "react-native-datepicker": "^1.7.2",
     "react-native-device-info": "^10.8.0",
     "react-native-element-dropdown": "^2.0.0",
+    "react-native-encrypted-storage": "^4.0.3",
     "react-native-floating-action": "^1.22.0",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-picker": "^4.7.1",

src/components/ErrorScreen.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Modal, StyleSheet, View, Text } from 'react-native';
+
+const ErrorScreen = ({ error }: string) => {
+  return (
+    <Modal transparent={true}>
+      <View style={styles.container}>
+        <Text>{error}</Text>
+      </View>
+    </Modal>
+  );
+};
+
+export default ErrorScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    zIndex: 1,
+  },
+});

src/components/LoadingScreen.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native';
 
 function LoadingScreen() {
   return (
-    <>
+    <Modal transparent={true}>
       <View style={styles.container}>
         <ActivityIndicator size="large" />
       </View>
-    </>
+    </Modal>
   );
 }
 
@@ -18,5 +18,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     flex: 1,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    zIndex: 1,
   },
 });

src/components/OOO/OOOForm.tsx

@@ -0,0 +1,135 @@
+import Images from '../../constants/images/Image';
+import {
+  StyleSheet,
+  TextInput,
+  View,
+  Alert,
+  TouchableOpacity,
+  Text,
+  Pressable,
+  Image,
+} from 'react-native';
+import React from 'react';
+import { OOOFormType } from './OOOFormType';
+import DatePicker from './OOOFormDatePicker';
+
+const OOOForm = ({
+  fromDate,
+  toDate,
+  description,
+  setToDate,
+  setFromDate,
+  setDescription,
+  handleFormSubmit,
+  isLoading,
+  setIsFormVisible,
+}: OOOFormType) => {
+  const isFormValid = () => {
+    // Check if fromDate and toDate are not null or undefined
+    if (!fromDate || !toDate) {
+      Alert.alert('Error', 'Please select both From Date and To Date.');
+      return false;
+    }
+
+    // Check if fromDate is less than toDate
+    if (fromDate >= toDate) {
+      Alert.alert('Error', 'From Date must be less than To Date.');
+      return false;
+    }
+
+    // Check if description is not empty
+    if (!description) {
+      Alert.alert('Error', 'Description is required.');
+      return false;
+    }
+
+    return true;
+  };
+
+  return (
+    <View style={styles.formContainer}>
+      <Pressable onPress={(prev) => setIsFormVisible(!prev)}>
+        <Image style={styles.close} source={Images.closeIcon} />
+      </Pressable>
+      <DatePicker
+        title={`From date: ${fromDate.toLocaleString('en-US')}`}
+        onDateChange={(date) => setFromDate(date)}
+        selectedDate={fromDate}
+      />
+      <DatePicker
+        title={`To date: ${toDate.toLocaleString('en-US')}`}
+        onDateChange={(date) => setToDate(date)}
+        selectedDate={toDate}
+      />
+      <TextInput
+        style={[styles.input, styles.textArea, styles.text]}
+        value={description}
+        onChangeText={setDescription}
+        multiline
+        numberOfLines={4}
+      />
+      <TouchableOpacity
+        onPress={() => {
+          isFormValid() && handleFormSubmit();
+        }}
+        style={styles.SubmitButtonContainer}
+        disabled={isLoading}
+      >
+        <Text style={styles.SubmitButtonText}>Submit</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default OOOForm;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  formContainer: {
+    backgroundColor: '#f9f9f9',
+    paddingHorizontal: 35,
+    paddingVertical: 20,
+    borderRadius: 8,
+    marginTop: -30,
+    marginLeft: 30,
+    marginRight: 30,
+  },
+  input: {
+    height: 40,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 4,
+    marginBottom: 10,
+    marginTop: 20,
+    paddingHorizontal: 10,
+  },
+  textArea: {
+    height: 80,
+  },
+  close: {
+    height: 20,
+    width: 20,
+    marginLeft: 'auto',
+    marginBottom: 10,
+  },
+  text: {
+    color: '#000000',
+  },
+  SubmitButtonContainer: {
+    backgroundColor: '#808080',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    width: '30%',
+    borderRadius: 10,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
+  SubmitButtonText: {
+    color: '#fff',
+    alignSelf: 'center',
+    borderWidth: 1,
+    borderColor: '#808080',
+  },
+});

src/components/OOO/OOOFormDatePicker.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import DatePicker from 'react-native-date-picker';
+
+type DatePickerProps = {
+  title: string;
+  onDateChange: (date: Date) => void;
+  selectedDate: Date;
+};
+
+const DeadLineDatePicker = (props: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const { onDateChange, selectedDate, title } = props;
+  return (
+    <ScrollView>
+      <TouchableOpacity
+        style={styles.buttonStyle}
+        onPress={() => {
+          setOpen(true);
+        }}
+      >
+        <Text style={styles.buttonTextStyle}>{title}</Text>
+      </TouchableOpacity>
+      <DatePicker
+        modal
+        mode="date"
+        open={open}
+        date={selectedDate || new Date()}
+        onConfirm={(date) => {
+          setOpen(false);
+          console.log('date', date);
+          onDateChange(date);
+        }}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonStyle: {
+    width: '100%',
+    height: 50,
+    elevation: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    backgroundColor: 'white',
+    alignSelf: 'center',
+    marginTop: 10,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+  buttonTextStyle: {
+    fontWeight: '600',
+    color: 'black',
+    justifyContent: 'center',
+  },
+});
+
+export default DeadLineDatePicker;

src/components/OOO/OOOFormType.ts

@@ -0,0 +1,11 @@
+export type OOOFormType = {
+  toDate: Date;
+  fromDate: Date;
+  description: string;
+  setToDate: () => void;
+  setFromDate: () => void;
+  setDescription: () => void;
+  handleFormSubmit: () => void;
+  isLoading: boolean;
+  setIsFormVisible: () => void;
+};

src/components/ToDoComponent/Styles/TodoStyles.tsx

@@ -30,6 +30,7 @@ export const TodoStyles = StyleSheet.create({
     fontSize: 20,
     alignSelf: 'center',
     position: 'relative',
+    color: '#000000',
     top: 10,
   },
   flex: {

src/components/ToDoComponent/TodoComponent.tsx

@@ -46,7 +46,16 @@ const TodoComponent = () => {
           style={styles.CreateGoalButton}
           onPress={() => navigation.navigate('CreatingGoals')}
         >
-          <Text style={{ color: 'black', elevation: 10 }}> Add</Text>
+          <Text
+            style={{
+              color: 'black',
+              elevation: 10,
+              paddingHorizontal: 6,
+              paddingVertical: 6,
+            }}
+          >
+            Add
+          </Text>
         </TouchableOpacity>
       </View>
       <View style={{ paddingVertical: 35 }}>

src/constants/apiConstant/HomeApi.ts

@@ -0,0 +1,5 @@
+export const HomeApi = {
+  GET_USER_STATUS: 'https://api.realdevsquad.com/users/status/self',
+  UPDATE_STATUS:
+    'https://api.realdevsquad.com/users/status/self?userStatusFlag=true',
+};

src/constants/images/Image.ts

@@ -20,6 +20,9 @@ const Images = {
   //AuthScreen Icon
   refreshIcon: require('../../../assets/refresh_icon.png'),
 
+  //OOO Form Icons
+  closeIcon: require('../../../assets/close.png'),
+
   // camera gallery options
 
   cameraIcon: require('../../../assets/camera.png'),

src/i18n/en.ts

@@ -39,6 +39,9 @@ const Strings = {
   OUT_OF_OFFICE: 'ooo',
   ACTIVE: 'active',
   IDLE: 'idle',
+
+  UPDATE_STATUS_TO_OOO: 'Change your status to OOO',
+  CANCEL_OOO: 'Cancel OOO',
 };
 
 export default Strings;