Skip to content

Commit

Permalink
Merge pull request #302 from JAYATEJA04/250/UIEnhancement
Browse files Browse the repository at this point in the history
250/UI enhancement
  • Loading branch information
shreya-mishra authored Oct 10, 2023
2 parents 48f242b + e4f9620 commit f922019
Show file tree
Hide file tree
Showing 9 changed files with 621 additions and 34 deletions.
4 changes: 3 additions & 1 deletion App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/drawer": "^6.1.8",
"@react-navigation/material-top-tabs": "^6.6.4",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/stack": "^6.2.0",
Expand All @@ -29,6 +30,7 @@
"react-native-app-auth": "^6.4.2",
"react-native-asset": "^2.1.1",
"react-native-camera-kit": "^13.0.0",
"react-native-collapsible-tab-view": "^6.2.1",
"react-native-date-picker": "^4.2.13",
"react-native-datepicker": "^1.7.2",
"react-native-device-info": "^10.8.0",
Expand All @@ -38,11 +40,13 @@
"react-native-gesture-handler": "^1.10.3",
"react-native-image-picker": "^4.7.1",
"react-native-keychain": "^8.1.2",
"react-native-pager-view": "^6.2.1",
"react-native-paper": "^4.12.3",
"react-native-radio-buttons-group": "^2.2.11",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.9.0",
"react-native-tab-view": "^3.5.2",
"react-native-toast-message": "^2.1.5",
"react-native-webview": "^13.3.1",
"react-native-walkthrough-tooltip": "^1.5.0",
Expand Down
4 changes: 2 additions & 2 deletions src/navigations/TabNavigation/TabNavigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +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 ProfileScreen2 from '../../screens/ProfileScreen/ProfileScreen2';

const tab = createBottomTabNavigator();

Expand Down Expand Up @@ -91,7 +91,7 @@ const TabNavigation = () => {

<tab.Screen
name={Strings.Tab_Profile}
component={ProfileScreen}
component={ProfileScreen2}
options={{
headerShown: false,
tabBarLabel: ({ focused }) => {
Expand Down
22 changes: 12 additions & 10 deletions src/screens/ProfileScreen/ProfileScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
StyleSheet,
SafeAreaView,
ScrollView,
Button,
TouchableOpacity,
} from 'react-native';
import { ScreenViewContainer } from '../../styles/GlobalStyle';
import { profileScreenStyles } from './styles';
Expand All @@ -23,6 +25,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';
import AllContributionsDropdown from './User Data/UserContributions/AllContributions';

const ProfileScreen = () => {
Expand Down Expand Up @@ -57,6 +60,14 @@ const ProfileScreen = () => {
};
return (
<ScrollView contentContainerStyle={ScreenViewContainer.container}>
<Pressable
style={profileScreenStyles.logoutButton}
onPress={() => {
setLoggedInUserData(null);
}}
>
<Text style={profileScreenStyles.logoutText}>{Strings.LOGOUT}</Text>
</Pressable>
<UploadImageModalView
closeModal={closeModal}
modalVisible={modalVisible}
Expand Down Expand Up @@ -84,7 +95,7 @@ const ProfileScreen = () => {
: dispatch({ type: 'PROD' });
}}
/>
<ScrollView style={styles.container}>
<ScrollView style={AuthViewStyle.container}>
<NoteworthyContributionsDropdown />
<ActiveTaskDropDown />
<AllContributionsDropdown />
Expand All @@ -103,14 +114,5 @@ const ProfileScreen = () => {
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
marginBottom: 10,
paddingBottom: 30,
},
container2: {
borderWidth: 2,
},
});

export default withHeader(ProfileScreen);
116 changes: 116 additions & 0 deletions src/screens/ProfileScreen/ProfileScreen2.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React, { useState, useCallback, useContext } from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';
import { ScreenViewContainer } from '../../styles/GlobalStyle';
import { profileScreenStyles } from './styles';
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 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 { Tabs } from 'react-native-collapsible-tab-view';

const ActiveScreen = () => {
return (
<View style={{ justifyContent: 'flex-start', alignItems: 'center' }}>
<Text style={{ color: 'black' }}>Active task</Text>
</View>
);
};

const ProfileScreen = () => {
const dispatch = useDispatch();
const { isProdEnvironment } = useSelector((store) => store.localFeatureFlag);
const [response, setResponse] = useState<ImagePickerResponse>({});
const [modalVisible, setModalVisible] = useState(false);
const { loggedInUserData, setLoggedInUserData } = useContext(AuthContext);

const openModal = useCallback(() => {
setModalVisible(true);
}, []);

const closeModal = useCallback(() => {
setModalVisible(false);
}, []);

const removePicture = () => {
setResponse({});
closeModal();
};

const showDefaultAvatar = () => {
if (response?.assets) {
return false;
}
return true;
};

return (
<ScrollView contentContainerStyle={ScreenViewContainer.container}>
<Pressable
style={profileScreenStyles.logoutButton}
onPress={() => {
setLoggedInUserData(null);
}}
>
<Text style={profileScreenStyles.logoutText}>{Strings.LOGOUT}</Text>
</Pressable>
<UploadImageModalView
closeModal={closeModal}
modalVisible={modalVisible}
removePicture={removePicture}
response={response}
setResponse={setResponse}
/>
<View style={profileScreenStyles.mainview}>
{response?.assets &&
response.assets.map(({ uri }) => (
<Avatar key={uri} uri={uri || ''} size={100} />
))}
{showDefaultAvatar() && (
<Avatar uri={loggedInUserData?.profileUrl || ''} size={100} />
)}
<Text style={profileScreenStyles.titleText}>
<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 ProfileScreen2: React.FC = () => {
return (
<Tabs.Container renderHeader={ProfileScreen}>
<Tabs.Tab name="Noteworthy">
<Tabs.ScrollView style={{ flex: 1 }}>
<Note />
</Tabs.ScrollView>
</Tabs.Tab>
<Tabs.Tab name="Active">
<Tabs.ScrollView style={{ flex: 1 }}>
<ActiveScreen />
</Tabs.ScrollView>
</Tabs.Tab>
<Tabs.Tab name="All">
<Tabs.ScrollView style={{ flex: 1 }}>
<All />
</Tabs.ScrollView>
</Tabs.Tab>
</Tabs.Container>
);
};

export default ProfileScreen2;
Loading

0 comments on commit f922019

Please sign in to comment.