diff --git a/assets/userPhoto.png b/assets/userPhoto.png new file mode 100644 index 0000000..c2c8da8 Binary files /dev/null and b/assets/userPhoto.png differ diff --git a/package.json b/package.json index 07147c5..2d4ee15 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..7f14197 --- /dev/null +++ b/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!** +> 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 \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index f4018d3..2df68c8 100644 --- a/src/App.tsx +++ b/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 }; diff --git a/src/Router.ts b/src/Router.ts index 3e00784..14791e0 100644 --- a/src/Router.ts +++ b/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 +}); diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx new file mode 100644 index 0000000..e23ad3d --- /dev/null +++ b/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 { + navigateToScreen = (route: string) => this.props.navigation.navigate(route) + render() { + return ( + + + + + + + + MENU + + + + + + + + + {this.navigateToScreen('Home')}}> + Schedule + + + + + + + {this.navigateToScreen('Personal')}}> + Personal + + + + + + + ); + } +}; + +export default withNavigation(SideMenu) as React.ComponentType; \ No newline at end of file diff --git a/src/components/SideMenu/atoms.js b/src/components/SideMenu/atoms.js new file mode 100644 index 0000000..e6301ad --- /dev/null +++ b/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; +` \ No newline at end of file diff --git a/src/data/index.ts b/src/data/index.ts index e0170a2..6247995 100644 --- a/src/data/index.ts +++ b/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 +} \ No newline at end of file diff --git a/src/screen/Personal/atoms.js b/src/screen/Personal/atoms.js new file mode 100644 index 0000000..c7cf805 --- /dev/null +++ b/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; +`; diff --git a/src/screen/Personal/components/Tabs/Tabs.js b/src/screen/Personal/components/Tabs/Tabs.js new file mode 100644 index 0000000..36f2bb0 --- /dev/null +++ b/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 = () => ( + + User Info + +); + +const SettingsTab = () => ( + + SettingsTab + +); + +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 }) => ( + + ); + + renderNothing = () => null; + + render() { + return ( + this.setState({ index })} + tabBarPosition="top" + renderTabBar={props => ( + + )} + /> + ); + } +} diff --git a/src/screen/Personal/index.tsx b/src/screen/Personal/index.tsx new file mode 100644 index 0000000..f77b56c --- /dev/null +++ b/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 { + static navigationOptions: NavigationBottomTabScreenOptions = { + title: 'Personal', + tabBarIcon: + }; + + render() { + return ( + + + + + + {userInfo.name} {userInfo.surname} + Group: {userInfo.group} + + + + + + ) + } +} + +export default withNavigation(PersonalScreen) as React.ComponentType; \ No newline at end of file