HomeScreen V2

src/components/OOO/OOOForm.tsx

@@ -0,0 +1,65 @@
+import { StyleSheet, TextInput, View, Button } from 'react-native';
+import React from 'react';
+import { OOOFormType } from './OOOFormType';
+
+const OOOForm = ({
+  fromDate,
+  toDate,
+  description,
+  setToDate,
+  setFromDate,
+  setDescription,
+  handleFormSubmit,
+}: OOOFormType) => {
+  return (
+    <View style={styles.formContainer}>
+      <TextInput
+        style={styles.input}
+        placeholder="From Date"
+        value={fromDate}
+        onChangeText={setFromDate}
+      />
+      <TextInput
+        style={styles.input}
+        placeholder="To Date"
+        value={toDate}
+        onChangeText={setToDate}
+      />
+      <TextInput
+        style={[styles.input, styles.textArea]}
+        placeholder="Description"
+        value={description}
+        onChangeText={setDescription}
+        multiline
+        numberOfLines={4}
+      />
+      <Button title="Submit" onPress={handleFormSubmit} />
+    </View>
+  );
+};
+
+export default OOOForm;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  formContainer: {
+    backgroundColor: '#f9f9f9',
+    padding: 20,
+    borderRadius: 8,
+    marginTop: 20,
+  },
+  input: {
+    height: 40,
+    borderColor: '#ccc',
+    borderWidth: 1,
+    borderRadius: 4,
+    marginBottom: 10,
+    paddingHorizontal: 10,
+  },
+  textArea: {
+    height: 80,
+    textAlignVertical: 'top', // To start text from the top in multiline input
+  },
+});

src/components/OOO/OOOFormType.ts

@@ -0,0 +1,9 @@
+export type OOOFormType = {
+  toDate: number;
+  fromDate: number;
+  description: string;
+  setToDate: () => void;
+  setFromDate: () => void;
+  setDescription: () => void;
+  handleFormSubmit: () => void;
+};

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/i18n/en.ts

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

src/navigations/TabNavigation/TabNavigation.tsx

@@ -6,10 +6,10 @@ import Colors from '../../constants/colors/Colors';
 import Fonts from '../../constants/fonts/TabFont';
 import Images from '../../constants/images/Image';
 import Strings from '../../i18n/en';
-import HomeScreen from '../../screens/HomeScreen/HomeScreen';
 import ProfileScreen from '../../screens/ProfileScreen/ProfileScreen';
 import { TabViewStyle } from './style';
 import GoalsScreenStack from '../../screens/GoalScreen/GoalScreen';
+import HomeScreenV2 from '../../screens/HomeScreen/HomeScreenV2';
 
 const tab = createBottomTabNavigator();
 
@@ -25,7 +25,7 @@ const TabNavigation = () => {
       >
         <tab.Screen
           name={Strings.Tab_Home}
-          component={HomeScreen}
+          component={HomeScreenV2}
           options={{
             headerShown: false,
             tabBarLabel: ({ focused }) => {

src/screens/AuthScreen/Util.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { urls } from '../../constants/appConstant/url';
+import { HomeApi } from '../../constants/apiConstant/HomeApi';
 
 export const getUserData = async (url: string) => {
   if (url === urls.REDIRECT_URL) {
@@ -59,5 +60,30 @@ export const updateMarkYourSelfAs_ = async (markStatus: string) => {
   return res.data.status;
 };
 
+export const getUsersStatus = async () => {
+  const res = await axios.get(HomeApi.GET_USER_STATUS, {
+    headers: {
+      'Content-type': 'application/json',
+      cookie:
+        'rds-session=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJUN0lMN01COFlyaW5pVHc0YnQzOSIsImlhdCI6MTY5MjYyMTQ2NCwiZXhwIjoxNjk1MjEzNDY0fQ.DAkTkEJmhEKz9-2w6bOoPLseH6jZA9kajxmkB64CqtTc25wPRa12OKhby5_CnWmTioz3adUwGFV1JWgjtZXLNSEt1j1PSDRo_wy_XEdH5-O1OkNYFIkc4TPnTXM-eUAcGVebmRGEaD326SYZ3Zm0euqFc1zcTHdFubukIVRhgmXC-y2GC9oEr8fpH1EvGJi_H93gkyvTYuU6Z84m7q2GEEKrrTdRdkE1lycS1l-vODSex1yGPu1y8lDmhR5zdc-GbDFv7uhMDPysasmM-jM1yTZE9fEfAj97Pei3YaT0BeL5L-IIEblELqpq0IfrlyxPsgNV10zyYPOnU4NQKl6ydg',
+    },
+  });
+  console.log('res', res);
+  return res.data.data.currentStatus.state;
+};
+
+export const submitOOOForm = async (data) => {
+  const options = {
+    headers: {
+      'Content-type': 'application/json',
+      cookie:
+        'rds-session=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJUN0lMN01COFlyaW5pVHc0YnQzOSIsImlhdCI6MTY5MjYyMTQ2NCwiZXhwIjoxNjk1MjEzNDY0fQ.DAkTkEJmhEKz9-2w6bOoPLseH6jZA9kajxmkB64CqtTc25wPRa12OKhby5_CnWmTioz3adUwGFV1JWgjtZXLNSEt1j1PSDRo_wy_XEdH5-O1OkNYFIkc4TPnTXM-eUAcGVebmRGEaD326SYZ3Zm0euqFc1zcTHdFubukIVRhgmXC-y2GC9oEr8fpH1EvGJi_H93gkyvTYuU6Z84m7q2GEEKrrTdRdkE1lycS1l-vODSex1yGPu1y8lDmhR5zdc-GbDFv7uhMDPysasmM-jM1yTZE9fEfAj97Pei3YaT0BeL5L-IIEblELqpq0IfrlyxPsgNV10zyYPOnU4NQKl6ydg',
+    },
+  };
+  const body = data;
+  const res = await axios.patch(HomeApi.UPDATE_STATUS, body, options);
+  return res;
+};
+
 export const isValidTextInput = (code: string) =>
   Boolean(/^[\d]{1,4}$|^$/.test(code));

src/screens/HomeScreen/HomeScreenV2.tsx

@@ -0,0 +1,67 @@
+import { Text, View } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import Strings from '../../i18n/en';
+import OOOForm from '../../components/OOO/OOOForm';
+import { AuthScreenButton } from '../AuthScreen/Button';
+import { getUsersStatus, submitOOOForm } from '../AuthScreen/Util';
+
+const HomeScreenV2 = (): JSX.Element => {
+  const [isFormVisible, setIsFormVisible] = useState<boolean>(false);
+  const [fromDate, setFromDate] = useState<number>(Date.now());
+  const [toDate, setToDate] = useState<number>(Date.now());
+  const [description, setDescription] = useState<string>('');
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+  const fetchData = async () => {
+    const userStatus = await getUsersStatus();
+    setStatus(userStatus);
+  };
+  const handleButtonPress = () => {
+    setIsFormVisible((prev) => !prev);
+  };
+
+  const handleFormSubmit = async () => {
+    // patch api call (it should give loading , failed, error and success messages)
+    let data = {
+      currentStatus: {
+        from: fromDate,
+        message: description,
+        state: 'OOO',
+        until: toDate,
+        updateAt: 987937932,
+      },
+    };
+    const updateStatus = await submitOOOForm(data);
+    console.log({ data23131: updateStatus }); // was giving lint issues, after api call please remove this log
+    setIsFormVisible((prev) => !prev);
+  };
+
+  return (
+    <View>
+      <Text>{status}</Text>
+      <View style={{ marginTop: 20 }}>
+        <AuthScreenButton
+          text={Strings.UPDATE_STATUS_TO_OOO}
+          onPress={handleButtonPress}
+        />
+      </View>
+
+      {isFormVisible && (
+        <OOOForm
+          fromDate={fromDate}
+          toDate={toDate}
+          description={description}
+          setToDate={setToDate}
+          setFromDate={setFromDate}
+          setDescription={setDescription}
+          handleFormSubmit={handleFormSubmit}
+        />
+      )}
+    </View>
+  );
+};
+
+export default HomeScreenV2;