Created user info page prototype, update package.json and add side menu.

package.json

@@ -22,14 +22,17 @@
     "react": "16.5.0",
     "react-native": "0.57.2",
     "react-native-cli": "2.0.1",
+    "react-native-side-menu": "^1.1.3",
     "react-native-tab-view": "1.0.2",
+    "react-native-vector-icons": "^6.1.0",
     "react-navigation": "2.16.0",
-    "styled-components": "4.0.0-beta.9"
+    "styled-components": "^4.1.2"
   },
   "devDependencies": {
     "@types/date-fns": "2.6.0",
     "@types/react": "16.4.14",
     "@types/react-native": "0.56.24",
+    "@types/react-native-vector-icons": "^4.6.4",
     "@types/react-navigation": "2.0.22",
     "@types/styled-components": "3.0.1",
     "babel-jest": "23.6.0",

readme.md

@@ -0,0 +1,47 @@
+# Web Purple Web Site
+
+## How to start the project?
+***
+## Fork repo
+Fork [repo](https://github.com/WebPurple/app-schedule) to you own git hub account.
+***
+
+## Clone or download
+Clone your own repo by git:
+```
+git clone https://github.com/rakotoz/app-schedule.git
+```
+or download it and unzip to the folder
+---
+***
+## Install dependencies
+Open the folder with a project and use
+```
+npm install
+```
+or 
+```
+yarn install
+```
+via terminal
+***
+## Install Android studio
+
+Download an [android studio](https://developer.android.com/studio/) and install it.
+
+>## **Important!</font>**
+> Check that Hyper-V is enabled on your PC and HAXM is installed
+
+## Install adb
+
+* Download the [Windows zip](https://dl.google.com/android/repository/platform-tools-latest-windows.zip) from Google.
+* Extract it somewhere - for example, %USERPROFILE%\adb-fastboot
+* Open the Start menu, and type “advanced system settings”
+* Select “View advanced system settings”
+* Click on the Advanced tab
+* Open the “Environment Variables” window
+* Select the Path variable under “System Variables” and click the * “Edit” button
+* Click the “Edit Text” button
+* Append ;%USERPROFILE%\adb-fastboot\platform-tools to the end of the existing Path definition (the semi-colon separates each path entry)
+* Install the [universal adb driver](https://github.com/koush/UniversalAdbDriver)
+* Reboot your PC

src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { theme } from './styles/theme';
-import { Router } from './Router';
+import Router from './Router';
 
 type State = { assetsLoaded: boolean };
 

src/Router.ts

@@ -1,30 +1,33 @@
 import {
-    createStackNavigator,
     createBottomTabNavigator,
+    DrawerNavigator
 } from 'react-navigation';
 import { CalendarFeed } from './screen/CalendarFeed/CalendarFeed';
 import { EventScreen } from './screen/Event';
+import PersonalScreen from './screen/Personal';
+import SideMenu from './components/SideMenu/SideMenu'
 
 const MainStack = createBottomTabNavigator(
     {
         Home: CalendarFeed,
+        Personal: PersonalScreen
     },
     {
         initialRouteName: 'Home',
     },
 );
 
-export const Router = createStackNavigator(
-    {
-        Main: {
-            screen: MainStack,
-        },
-        Event: {
-            screen: EventScreen,
-        },
+export default DrawerNavigator({
+    Home: {
+      screen: MainStack,
     },
-    {
-        mode: 'modal',
-        headerMode: 'none',
+    Personal: {
+        screen: PersonalScreen
+    },
+    Event: {
+        screen: EventScreen,
     }
-);
+}, {
+    contentComponent: SideMenu,
+    drawerWidth: 250
+});

src/components/SideMenu/SideMenu.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { withNavigation, NavigationInjectedProps } from 'react-navigation';
+import { View, ScrollView } from 'react-native';
+import { IEvent } from '../../types/Event.type';
+import { BackgroundImage } from '../../components/BackgroundImage/BackgroundImage';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import { HeaderContent, HeaderWrapper, LogoImg, HeaderTitle, MenuWrapper, MenuItem, MenuIco, MenuItemText } from './atoms'
+
+type Props = { event: IEvent };
+
+class SideMenu extends React.Component<Props & NavigationInjectedProps> {
+    navigateToScreen = (route: string) => this.props.navigation.navigate(route)
+    render() {
+        return (
+            <View>
+                <ScrollView>
+                    <View>
+                        <HeaderWrapper>
+                            <BackgroundImage>
+                                <HeaderContent>
+                                    <LogoImg source={require('../../../assets/logo.png')} />
+                                    <HeaderTitle>MENU</HeaderTitle>
+                                </HeaderContent>
+                            </BackgroundImage>
+                        </HeaderWrapper>
+                        <MenuWrapper>
+                            <MenuItem>
+                                <MenuIco>
+                                    <Icon size={24} color={'#e62270'} name={'calendar'}/>
+                                </MenuIco>
+                                <MenuItemText onPress={() => {this.navigateToScreen('Home')}}>
+                                    Schedule
+                                </MenuItemText>
+                            </MenuItem>
+                            <MenuItem>
+                                <MenuIco>
+                                    <Icon size={24} color={'#e62270'} name={'user'}/>
+                                </MenuIco>
+                                <MenuItemText onPress={() => {this.navigateToScreen('Personal')}}>
+                                    Personal
+                                </MenuItemText>
+                            </MenuItem>
+                        </MenuWrapper>
+                    </View>
+                </ScrollView>
+            </View>
+        );
+    }
+};
+
+export default withNavigation(SideMenu) as React.ComponentType<Props>;

src/components/SideMenu/atoms.js

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import { getColor } from '../../styles/theme';
+
+export const HeaderWrapper = styled.View`
+    height: 150px;
+`;
+
+export const HeaderContent = styled.View`
+    padding: 20px;
+`;
+
+export const LogoImg = styled.Image`
+    width: 80px;
+    height: 80px;
+`;
+
+export const HeaderTitle = styled.Text`
+    color: #fff;
+    text-align: center;
+    font-size: 19px;
+    margin-top: 10px;
+`
+
+export const MenuWrapper = styled.View`
+    padding: 20px;
+`;
+
+export const MenuItem = styled.View`
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    flex-direction: row;
+`
+
+export const MenuIco = styled.Text`
+    width: 35px;
+    height: 35px;
+    margin-right: 10px;
+`
+
+export const MenuItemText = styled.Text`
+    font-size: 18px;
+    height: 35px;
+`

src/data/index.ts

@@ -31,6 +31,13 @@ type GroupSchedule = {
     numeratorStartsOn: number;
     default: RawEvent[];
 };
+type UserInfo = {
+    name: string;
+    surname: string;
+    photo: any;
+    group: string;
+    allowNotifications: boolean;
+};
 
 export const groupSchedule: GroupSchedule = {
     numeratorStartsOn: 40,
@@ -253,3 +260,11 @@ export const generateEventsForMonth = (rawEvents: GroupSchedule, from: Date, til
         .sort((e1, e2) => compareAsc(e1.startDate, e2.startDate));
     return flattenedEvents;
 };
+
+export const userInfo: UserInfo = {
+    name: 'John',
+    surname: 'Doe',
+    photo: require('../../assets/userPhoto.png'),
+    group: '121a',
+    allowNotifications: true
+}

src/screen/Personal/atoms.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.View`
+    flex: 1;
+    width: 100%;
+`;
+
+export const HeaderWrapper = styled.View`
+    height: 220px;
+    padding: 20px;
+`;
+
+export const UserImage = styled.View`
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+`;
+
+export const UserPhoto = styled.Image`
+    width: 100px;
+    height: 100px;
+    border-radius: 50;
+`;
+
+export const UserName = styled.Text`
+    font-size: 20px;
+    font-family: 'Rubik-Regular';
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 5px;
+`;
+
+export const UserGroup = styled.Text`
+    font-size: 16px;
+    font-family: 'Rubik-Regular';
+    font-weight: bold;
+    text-align: center;
+`;
+
+export const ContentWrapper = styled.View`
+    flex: 1;
+`;

src/screen/Personal/components/Tabs/Tabs.js

@@ -0,0 +1,66 @@
+// @flow
+import * as React from 'react';
+import { Text, View } from 'react-native';
+import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+const UserInfoTab = () => (
+    <View>
+        <Text>User Info</Text>
+    </View>
+);
+
+const SettingsTab = () => (
+    <View>
+        <Text>SettingsTab</Text>
+    </View>
+);
+
+export class Tabs extends React.Component {
+    static defaultProps = {
+        pageColor: '#e62270',
+    };
+
+    state = {
+        index: 0,
+        routes: [
+            { key: 'info', title: 'Info', icon: 'info-circle' },
+            { key: 'settings', title: 'Settings', icon: 'cogs' }
+        ],
+    };
+
+    renderIcon = ({ route }) => (
+        <Icon size={24} color={'#e62270'} name={route.icon} />
+    );
+
+    renderNothing = () => null;
+
+    render() {
+        return (
+            <TabView
+                navigationState={this.state}
+                renderScene={SceneMap({
+                    info: UserInfoTab,
+                    settings: SettingsTab
+                })}
+                onIndexChange={index => this.setState({ index })}
+                tabBarPosition="top"
+                renderTabBar={props => (
+                    <TabBar
+                        {...props}
+                        style={{
+                            backgroundColor: '#fff',
+                        }}
+                        renderIcon={this.renderIcon}
+                        renderLabel={this.renderNothing}
+                        labelStyle={{ color: '#545454' }}
+                        indicatorStyle={{
+                            backgroundColor: this.props.pageColor,
+                        }}
+                        useNativeDriver
+                    />
+                )}
+            />
+        );
+    }
+}

src/screen/Personal/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { withNavigation, NavigationInjectedProps, NavigationBottomTabScreenOptions } from 'react-navigation';
+import { IEvent } from '../../types/Event.type';
+import { Wrapper, HeaderWrapper, UserImage, UserPhoto, UserName, UserGroup, ContentWrapper } from './atoms';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { getColor } from '../../styles/theme';
+import { userInfo } from '../../data/index'
+import { Tabs } from './components/Tabs/Tabs';
+
+type Props = { event: IEvent };
+
+class PersonalScreen extends React.Component<Props & NavigationInjectedProps> {
+    static navigationOptions: NavigationBottomTabScreenOptions = {
+        title: 'Personal',
+        tabBarIcon: <Icon size={24} color={getColor('grape')} name="user" />
+    };
+
+    render() {
+        return (
+            <Wrapper>
+                <HeaderWrapper>
+                    <UserImage>
+                        <UserPhoto source={userInfo.photo} />
+                    </UserImage>
+                    <UserName>{userInfo.name} {userInfo.surname}</UserName>
+                    <UserGroup>Group: {userInfo.group}</UserGroup>
+                </HeaderWrapper>
+                <ContentWrapper>
+                    <Tabs />
+                </ContentWrapper>
+            </Wrapper>
+        )
+    }
+}
+
+export default withNavigation(PersonalScreen) as React.ComponentType<Props>;