implemented sticky bar in the profile screen and resolved merge confl…

…icts
Real-Dev-Squad · Oct 9, 2023 · af170ec · af170ec
1 parent 4afa701
commit af170ec
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 391 deletions.
diff --git a/App.tsx b/App.tsx
@@ -10,7 +10,9 @@ import rootSaga from './src/sagas/rootSaga';
 
 const sagaMiddleware = createSagaMiddleware();
 const middleware = [sagaMiddleware];
-export const store = compose(applyMiddleware(...middleware))(createStore)(reducers);
+export const store = compose(applyMiddleware(...middleware))(createStore)(
+  reducers,
+);
 sagaMiddleware.run(rootSaga);
 
 const App = () => {

diff --git a/src/navigations/TabNavigation/TabNavigation.tsx b/src/navigations/TabNavigation/TabNavigation.tsx
@@ -6,12 +6,11 @@ import Colors from '../../constants/colors/Colors';
 import Fonts from '../../constants/fonts/TabFont';
 import Images from '../../constants/images/Image';
 import Strings from '../../i18n/en';
-import ProfileScreen from '../../screens/ProfileScreen/ProfileScreen';
 import { TabViewStyle } from './style';
 import GoalsScreenStack from '../../screens/GoalScreen/GoalScreen';
 import HomeScreenV2 from '../../screens/HomeScreen/HomeScreenV2';
 import { useSelector } from 'react-redux';
-import Example from '../../screens/ProfileScreen/ProfileScreen2';
+import ProfileScreen2 from '../../screens/ProfileScreen/ProfileScreen2';
 
 const tab = createBottomTabNavigator();
 
@@ -92,7 +91,7 @@ const TabNavigation = () => {
 
         <tab.Screen
           name={Strings.Tab_Profile}
-          component={ProfileScreen}
+          component={ProfileScreen2}
           options={{
             headerShown: false,
             tabBarLabel: ({ focused }) => {

diff --git a/src/screens/ProfileScreen/ProfileScreen.tsx b/src/screens/ProfileScreen/ProfileScreen.tsx
@@ -26,6 +26,7 @@ import NoteworthyContributionsDropdown from './User Data/UserContributions/NoteW
 import ActiveTaskDropDown from './User Data/UserContributions/ActiveTask';
 import UserData from './User Data/UserData';
 import { useSelector, useDispatch } from 'react-redux';
+import { AuthViewStyle } from '../AuthScreen/styles';
 
 const ProfileScreen = () => {
   const dispatch = useDispatch();
@@ -94,7 +95,7 @@ const ProfileScreen = () => {
               : dispatch({ type: 'PROD' });
           }}
         />
-        <ScrollView style={styles.container}>
+        <ScrollView style={AuthViewStyle.container}>
           <NoteworthyContributionsDropdown />
           <ActiveTaskDropDown />
           <AllContributionsDropdown />

diff --git a/src/screens/ProfileScreen/ProfileScreen2.tsx b/src/screens/ProfileScreen/ProfileScreen2.tsx
@@ -1,49 +1,34 @@
 import React, { useState, useCallback, useContext } from 'react';
-import {
-  View,
-  StyleSheet,
-  ListRenderItem,
-  Text,
-  ScrollView,
-  Pressable,
-} from 'react-native';
-import { Tabs } from 'react-native-collapsible-tab-view';
+import { View, Text, ScrollView, Pressable } from 'react-native';
 import { ScreenViewContainer } from '../../styles/GlobalStyle';
 import { profileScreenStyles } from './styles';
-import withHeader from '../../helpers/withHeader';
 import ButtonWidget from '../../components/ButtonWidget';
 import Avatar from '../../components/Avatar';
 import UploadImageModalView from '../../components/GalleryModal';
 import { AuthContext } from '../../context/AuthContext';
 import { ImagePickerResponse } from 'react-native-image-picker';
 import Strings from '../../i18n/en';
-import { fetchContribution } from '../AuthScreen/Util';
-import { useFocusEffect } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
-import { useNavigation } from '@react-navigation/native';
+import UserData from './User Data/UserData';
+import { useSelector, useDispatch } from 'react-redux';
 import All from './User Data 2/All';
 import Note from './User Data 2/NoteWorthy';
-import UserData from './User Data/UserData';
-
-const HEADER_HEIGHT = 150;
-
-const DATA = [0, 1, 2, 3, 4];
-const identity = (v: unknown): string => v + '';
+import { Tabs } from 'react-native-collapsible-tab-view';
 
 const ActiveScreen = () => {
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
       <Text style={{ color: 'black' }}>Active task</Text>
     </View>
   );
 };
 
 const ProfileScreen = () => {
-  const { data: userData } = useSelector((store) => store.user);
+  const dispatch = useDispatch();
+  const { isProdEnvironment } = useSelector((store) => store.localFeatureFlag);
   const [response, setResponse] = useState<ImagePickerResponse>({});
   const [modalVisible, setModalVisible] = useState(false);
-  const [contributionData, setContributionData] = useState([]);
   const { loggedInUserData, setLoggedInUserData } = useContext(AuthContext);
+
   const openModal = useCallback(() => {
     setModalVisible(true);
   }, []);
@@ -64,16 +49,6 @@ const ProfileScreen = () => {
     return true;
   };
 
-  useFocusEffect(
-    useCallback(() => {
-      (async () => {
-        const userName = 'ankush';
-        const contributionResponse = await fetchContribution(userName);
-        setContributionData(contributionResponse.noteworthy);
-      })();
-    }, []),
-  );
-
   return (
     <ScrollView contentContainerStyle={ScreenViewContainer.container}>
       <Pressable
@@ -100,73 +75,42 @@ const ProfileScreen = () => {
           <Avatar uri={loggedInUserData?.profileUrl || ''} size={100} />
         )}
         <Text style={profileScreenStyles.titleText}>
-          {/* {loggedInUserData?.name} */}
-          <UserData userData={userData} />
+          <UserData userData={loggedInUserData} />
         </Text>
         <ButtonWidget title={'Update'} onPress={openModal} />
+        <ButtonWidget
+          title={isProdEnvironment ? 'Switch to DEV' : 'Switch to Prod'}
+          onPress={() => {
+            isProdEnvironment
+              ? dispatch({ type: 'DEV' })
+              : dispatch({ type: 'PROD' });
+          }}
+        />
       </View>
     </ScrollView>
   );
 };
 
-const Example: React.FC = () => {
-  const renderItem: ListRenderItem<number> = React.useCallback(({ index }) => {
-    return (
-      <View style={[styles.box, index % 2 === 0 ? styles.boxB : styles.boxA]} />
-    );
-  }, []);
-
+const ProfileScreen2: React.FC = () => {
   return (
-    <Tabs.Container
-      renderHeader={ProfileScreen}
-      // headerHeight={HEADER_HEIGHT}
-      containerStyle={{ backgroundColor: '#E4F1FF' }}
-    >
-      <Tabs.Tab name="All">
-        {/* <Tabs.FlatList
-          data={DATA}
-          renderItem={renderItem}
-          keyExtractor={identity}
-        /> */}
-        <Tabs.ScrollView style={{flex: 1}}>
-          <All />
+    <Tabs.Container renderHeader={ProfileScreen}>
+      <Tabs.Tab name="Noteworthy">
+        <Tabs.ScrollView style={{ flex: 1 }}>
+          <Note />
         </Tabs.ScrollView>
       </Tabs.Tab>
-      <Tabs.Tab name="Active tasks">
-        <Tabs.ScrollView style={{flex: 1}}>
-          {/* <View style={[styles.box, styles.boxA]} />
-          <View style={[styles.box, styles.boxB]} /> */}
+      <Tabs.Tab name="Active">
+        <Tabs.ScrollView style={{ flex: 1 }}>
           <ActiveScreen />
         </Tabs.ScrollView>
       </Tabs.Tab>
-      <Tabs.Tab name="Noteworthy">
-        <Tabs.ScrollView style={{flex: 1}}>
-          {/* <View style={[styles.box, styles.boxA]} />
-          <View style={[styles.box, styles.boxB]} /> */}
-          <Note />
+      <Tabs.Tab name="All">
+        <Tabs.ScrollView style={{ flex: 1 }}>
+          <All />
         </Tabs.ScrollView>
       </Tabs.Tab>
     </Tabs.Container>
   );
 };
 
-const styles = StyleSheet.create({
-  box: {
-    height: 250,
-    width: '100%',
-  },
-  boxA: {
-    backgroundColor: 'white',
-  },
-  boxB: {
-    backgroundColor: '#D8D8D8',
-  },
-  header: {
-    height: HEADER_HEIGHT,
-    width: '100%',
-    backgroundColor: '#2196f3',
-    flexWrap: 'wrap',
-  },
-});
-
-export default Example;
+export default ProfileScreen2;
diff --git a/src/screens/ProfileScreen/User Data 2/All.tsx b/src/screens/ProfileScreen/User Data 2/All.tsx
@@ -1,38 +1,30 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import {
-  StyleSheet,
   View,
-  TextInput,
   Text,
-  SafeAreaView,
   TouchableOpacity,
   Linking,
-  Button,
   ScrollView,
-  FlatList,
-  Image,
 } from 'react-native';
 import { profileScreenStyles } from '../styles';
+import { fetchContribution } from '../../AuthScreen/Util';
+import { useFocusEffect } from '@react-navigation/native';
+import { AuthContext } from '../../../context/AuthContext';
 
 const All = () => {
-  const [clicked, setClicked] = useState(false);
-  const [contributionData, setContributionData] = useState([]);
+  const [allContributionsData, setAllContributionData] = useState([]);
+  const { loggedInUserData } = useContext(AuthContext);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          'https://api.realdevsquad.com/contributions/ankush',
-        );
-        const jsonData = await response.json();
-        setContributionData(jsonData.all);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    };
-
-    fetchData();
-  }, []);
+  useFocusEffect(
+    useCallback(() => {
+      (async () => {
+        const userName = loggedInUserData?.username;
+        const contributionResponse = await fetchContribution(userName);
+        setAllContributionData(contributionResponse.all);
+      })();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []),
+  );
 
   const convertTimestampToReadableDate = (timestamp) => {
     return new Date(timestamp * 1000);
@@ -66,7 +58,7 @@ const All = () => {
 
   const calculateISODateFormat = (isoDateString) => {
     const date = new Date(isoDateString);
-    const formatDate = (date) => {
+    const formatDate = (d) => {
       const months = [
         'January',
         'February',
@@ -82,9 +74,9 @@ const All = () => {
         'December',
       ];
 
-      const day = date.getDate();
-      const monthIndex = date.getMonth();
-      const year = date.getFullYear();
+      const day = d.getDate();
+      const monthIndex = d.getMonth();
+      const year = d.getFullYear();
 
       return `${day} ${months[monthIndex]}, ${year}`;
     };
@@ -99,7 +91,7 @@ const All = () => {
   return (
     <ScrollView style={{ padding: 10, elevation: 10 }}>
       <View style={profileScreenStyles.container}>
-        {contributionData.map((item, index) => (
+        {allContributionsData.map((item, index) => (
           <View style={profileScreenStyles.DropDownElement} key={index}>
             <TouchableOpacity
               style={profileScreenStyles.DropDownbackground}
@@ -257,32 +249,4 @@ const All = () => {
   );
 };
 
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     padding: 10,
-//     backgroundColor: '#fff',
-//     // elevation: 1,
-//   },
-//   DropDownElement: {
-//     // padding: 2,
-//     color: 'black',
-//     width: '100%',
-//     alignSelf: 'center',
-//     height: 'auto',
-//   },
-//   DropDownbackground: {
-//     padding: 5,
-//     // elevation: 1,
-//     height: 'auto',
-//     alignSelf: 'center',
-//     width: '100%',
-//     // backgroundColor: '#fff',
-//     // borderRadius: 10,
-//     borderBottomWidth: 1,
-//     borderBottomColor: 'grey',
-//     // elevation: 1,
-//   },
-// });
-
 export default All;