Merge pull request #332 from ashifkhn/form-notification

Form updated for goals

src/components/ToDoComponent/SettingGoals/CreateGoals.tsx

@@ -1,21 +1,46 @@
-import React, { useState } from 'react';
+import React, { useState,useEffect,useContext } from 'react';
 import 'react-native-gesture-handler';
 import {
   Text,
   TextInput,
   View,
-  ScrollView,
   StyleSheet,
   TouchableOpacity,
+  Image,
+  FlatList
 } from 'react-native';
 import DeadLineDatePicker from './SettingGoalsComponents/DeadLineDatePicker';
+import { AuthContext } from '../../../context/AuthContext';
+import { getAllUsers } from '../../../screens/AuthScreen/Util';
 
 const MainScreen = ({ navigation }) => {
   const [selectedMember, setSelectedMember] = React.useState('');
   const [titleText, setTitleText] = useState('');
   const [descriptionText, setDescriptionText] = useState('');
+  const [isDropDownSelected, setIsDropDownSelected] =useState(false)
+  const [searchQuery, setSearchQuery] = useState('');
+  const [allUsers,setAllUsers] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { loggedInUserData } = useContext(AuthContext);
+
+
+
+  const selectDropDown =()=>{
+    setIsDropDownSelected(!isDropDownSelected)
+  }
+
+    useEffect(() => {
+        fetchData(); 
+    });
+
+  const fetchData = async () => {
+    const allUser = await getAllUsers (loggedInUserData?.token);
+    setAllUsers(allUser);
+    setIsLoading(false)
+  };
+
   return (
-    <ScrollView style={styles.container}>
+    <View style={styles.container}>
       <View
         style={{
           borderWidth: 3,
@@ -45,6 +70,7 @@ const MainScreen = ({ navigation }) => {
           value={titleText}
           onChangeText={setTitleText}
           placeholder="Enter title max of 50 characters."
+          placeholderTextColor="red"
         />
         <Text style={styles.titleText}>Description</Text>
         <TextInput
@@ -53,10 +79,11 @@ const MainScreen = ({ navigation }) => {
           onChangeText={setDescriptionText}
           maxLength={200}
           placeholder="Enter max 200 characters."
+          placeholderTextColor="red"
         />
         {/* <Text style={styles.titles}>Duration</Text>
         <DurationDropDown /> */}
-        <Text style={styles.titles}>Assigned To</Text>
+        <Text style={styles.titles}>Assign To</Text>
         {/* <DurationDropDown /> */}
         <TouchableOpacity
           onPress={() =>
@@ -70,6 +97,62 @@ const MainScreen = ({ navigation }) => {
             {selectedMember ? selectedMember : "Enter member's name"}
           </Text>
         </TouchableOpacity>
+        <View>
+
+
+        <Text style={styles.titles}>Assign To Dropdown</Text>
+          <TouchableOpacity style={styles.dropDownSelector} onPress={selectDropDown}>
+            <Text style={{color:"red"}}>
+              Select User
+            </Text>
+            {
+              !isDropDownSelected?           
+              <Image source={require("./../../../../assets/dropdown.png")} style={styles.dropDownIcon}/>:
+              <Image source={require("./../../../../assets/dropup.png")} style={styles.dropDownIcon}/>
+            }  
+        </TouchableOpacity>
+                    {
+              isDropDownSelected?
+              <View style={styles.dropDownArea}>
+                <TextInput
+                  style={[styles.inputStyle, { marginTop: 10, marginHorizontal: 5 }]}
+                  value={searchQuery}
+                  onChangeText={(text) => setSearchQuery(text)}
+                  maxLength={200}
+                  placeholder="Search User"
+                />
+                {
+                  isLoading?<Text>Loading...</Text>:
+                    <FlatList
+                      data={allUsers.filter(
+                        (item) =>
+                          item.first_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          item.last_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                          item.github_id.toLowerCase().includes(searchQuery.toLowerCase())
+                      )}
+                      renderItem={({ item, index }) => {
+                        return (
+                          <TouchableOpacity key={index} onPress={() => console.log(item)} style={styles.userDetails}>
+                            {item.picture && item.picture.url ? (
+                              <Image source={{ uri: item.picture.url }} style={styles.userImageDropDown} />
+                            ) : (
+                              <View style={styles.defaultImageContainer}>
+                                <Text style={styles.defaultImageText}>
+                                  {item.first_name.charAt(0)} {item.last_name.charAt(0)}
+                                </Text>
+                              </View>
+                            )}
+                            <Text style={styles.userNameDropDown}>{item.first_name} {item.last_name}</Text>
+                          </TouchableOpacity>
+                        );
+                      }}
+                    />
+                }
+
+            </View>
+            :null
+            }
+        </View>
         <Text style={styles.titles}>DeadLine</Text>
         <DeadLineDatePicker />
         <TouchableOpacity
@@ -79,7 +162,7 @@ const MainScreen = ({ navigation }) => {
           <Text style={styles.createButtonText}>Create</Text>
         </TouchableOpacity>
       </View>
-    </ScrollView>
+    </View>
   );
 };
 
@@ -138,6 +221,53 @@ const styles = StyleSheet.create({
     backgroundColor: '#2827CC',
   },
   titleText: {},
+  dropDownSelector:{
+    padding: 10,
+    borderRadius: 5,
+    elevation: 2,
+    fontSize: 12,
+    borderWidth: 2,
+    height:40,
+    display:"flex",
+    flexDirection:"row",
+    justifyContent:"space-between"
+  },
+  dropDownIcon:{
+    width:20,
+    height:20,
+  },
+  dropDownArea:{
+    height:250,
+    backgroundColor:"grey",
+    marginTop:10,
+    borderRadius:5
+  },
+  userNameDropDown:{
+    padding:20,
+    borderBottomColor:'white',
+    width:"90%",alignSelf:"center"
+  },
+  userDetails:{
+    display:"flex",
+    flexDirection:"row",
+    marginLeft:10
+  },
+  userImageDropDown:{
+    width:50,
+    height:50,
+    borderRadius:50
+
+  },
+  defaultImageContainer:{
+    width:50,
+    display:"flex",
+    justifyContent:"center",
+    alignItems:"center",
+    height:50,
+    backgroundColor:"rgb(29,18,131)",
+    borderRadius:50
+  },
+
 });
 
 export default MainScreen;

src/constants/apiConstant/HomeApi.ts

@@ -1,5 +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',
+  UPDATE_STATUS:'https://api.realdevsquad.com/users/status/self?userStatusFlag=true',
+  GET_ALL_USERS:'https://api.realdevsquad.com/users'
 };

src/screens/AuthScreen/Util.ts

@@ -98,6 +98,27 @@ export const getUsersStatus = async (token) => {
   }
 };
 
+export const getAllUsers = async (token) => {
+  try {
+    const res = await axios.get(HomeApi.GET_ALL_USERS, {
+      headers: {
+        'Content-type': 'application/json',
+        cookie: `rds-session=${token}`,
+      },
+    });
+    if (res?.data?.users) {
+      return res?.data?.users;
+    } 
+    else {
+      return 'Something went wrong';
+    }
+  }
+
+  catch (err) {
+    return 'Something went wrong';
+  }
+};
+
 export const submitOOOForm = async (data, token) => {
   console.log('data', data);
   const options = {