Merge branch 'master' of github.com:edazdarevic/meme

This commit is contained in:
Edin Dazdarevic
2017-09-24 21:46:02 +02:00
9 changed files with 360 additions and 23 deletions

View File

@@ -7,11 +7,14 @@ import {
import Lesson from './src/components/Lesson';
import Categories from './src/components/Categories';
import LessonCategories from './src/components/LessonCategories';
import AnatomyCard from './src/components/AnatomyCard';
import Router from './src/Router';
export default class meme extends Component {
render() {
return (
<View style={{ flex: 1 }}>
{/*
<Lesson
lessonHeaderText={'IMA LI MLIJEKA?'} lessonHeaderBackroundColor={'#7270a8'}
questions={
@@ -19,7 +22,10 @@ export default class meme extends Component {
'Uspostavljanje i zadržavanje zaliha mlijeka kad beba ne doji',
'Prejak refleks otpuštanja mlijeka ili prekomjerne zalihe',
'Koje biljke izbjegavati za vrijeme dojenja']}
/>
/>*/
}
<Router />
</View>
);
}

202
package-lock.json generated
View File

@@ -1250,6 +1250,11 @@
"integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
"dev": true
},
"clamp": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
"integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
},
"cli-cursor": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -2987,6 +2992,11 @@
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
"integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ=="
},
"hoist-non-react-statics": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
"integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -4970,6 +4980,11 @@
"resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
"integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
},
"lodash.keys": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -5334,6 +5349,19 @@
}
}
},
"mobx": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/mobx/-/mobx-3.3.0.tgz",
"integrity": "sha1-G8HdfnhUcGWvBLSb238gmMraR6o="
},
"mobx-react": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-4.3.2.tgz",
"integrity": "sha1-Hsv/pWkMxkYNtrsWwMEQNPC3g9o=",
"requires": {
"hoist-non-react-statics": "1.2.0"
}
},
"morgan": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.6.1.tgz",
@@ -5562,6 +5590,79 @@
"mimic-fn": "1.1.0"
}
},
"opencollective": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz",
"integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=",
"requires": {
"babel-polyfill": "6.23.0",
"chalk": "1.1.3",
"inquirer": "3.0.6",
"minimist": "1.2.0",
"node-fetch": "1.6.3",
"opn": "4.0.2"
},
"dependencies": {
"ansi-escapes": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
"integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
},
"babel-polyfill": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
"integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
"requires": {
"babel-runtime": "6.26.0",
"core-js": "2.5.1",
"regenerator-runtime": "0.10.5"
}
},
"inquirer": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz",
"integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=",
"requires": {
"ansi-escapes": "1.4.0",
"chalk": "1.1.3",
"cli-cursor": "2.1.0",
"cli-width": "2.2.0",
"external-editor": "2.0.5",
"figures": "2.0.0",
"lodash": "4.17.4",
"mute-stream": "0.0.7",
"run-async": "2.3.0",
"rx": "4.1.0",
"string-width": "2.1.1",
"strip-ansi": "3.0.1",
"through": "2.3.8"
}
},
"node-fetch": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
"integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
"requires": {
"encoding": "0.1.12",
"is-stream": "1.1.0"
}
},
"opn": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
"integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
"requires": {
"object-assign": "4.1.1",
"pinkie-promise": "2.0.1"
}
},
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"opn": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/opn/-/opn-3.0.3.tgz",
@@ -5716,6 +5817,21 @@
"integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
"dev": true
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
}
}
},
"path-type": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
@@ -6118,6 +6234,87 @@
}
}
},
"react-native-button": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-native-button/-/react-native-button-2.1.0.tgz",
"integrity": "sha1-o54jKSkir+6k974UHdQ+GPG1GHY=",
"requires": {
"prop-types": "15.5.10"
}
},
"react-native-deck-swiper": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/react-native-deck-swiper/-/react-native-deck-swiper-1.3.8.tgz",
"integrity": "sha1-U2LjDSksuFrrn/fJ3xvNst+vZGs=",
"requires": {
"prop-types": "15.5.10"
}
},
"react-native-dismiss-keyboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz",
"integrity": "sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k="
},
"react-native-drawer-layout": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz",
"integrity": "sha512-fjO0scqbJUfNu2wuEpvywL7DYLXuCXJ2W/zYhWz986rdLytidbys1QGVvkaszHrb4Y7OqO96mTkgpOcP8KWevw==",
"requires": {
"react-native-dismiss-keyboard": "1.0.0"
}
},
"react-native-drawer-layout-polyfill": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz",
"integrity": "sha512-XzPhfLDJrYHru+e8+dFwhf0FtTeAp7JXPpFYezYV6P1nTeA1Tia/kDpFT+O2DWTrBKBEI8FGhZnThrroZmHIxg==",
"requires": {
"react-native-drawer-layout": "1.3.2"
}
},
"react-native-progress": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/react-native-progress/-/react-native-progress-3.4.0.tgz",
"integrity": "sha512-Kqc+wwQHyBG83Fnbb84oM9qqgn1d51ABVS/RK36V+35KmihEYx33WijdQT05iwT+tfJWGArvFLsZWbd8mKyJ6A==",
"requires": {
"prop-types": "15.5.10"
}
},
"react-native-router-flux": {
"version": "4.0.0-beta.21",
"resolved": "https://registry.npmjs.org/react-native-router-flux/-/react-native-router-flux-4.0.0-beta.21.tgz",
"integrity": "sha1-zbs87FsY+rD/24q/OM55B0n2JdA=",
"requires": {
"lodash.isequal": "4.5.0",
"mobx": "3.3.0",
"mobx-react": "4.3.2",
"opencollective": "1.0.3",
"prop-types": "15.5.10",
"react-native-button": "2.1.0",
"react-navigation": "1.0.0-beta.11"
}
},
"react-native-tab-view": {
"version": "0.0.65",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.65.tgz",
"integrity": "sha1-toXqMIH/fJZIbNmXNhAmxAcwLFk=",
"requires": {
"prop-types": "15.5.10"
}
},
"react-navigation": {
"version": "1.0.0-beta.11",
"resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-1.0.0-beta.11.tgz",
"integrity": "sha1-QnHtsjzbzG64hgL3/eCnfw73oWA=",
"requires": {
"clamp": "1.0.1",
"fbjs": "0.8.12",
"hoist-non-react-statics": "1.2.0",
"path-to-regexp": "1.7.0",
"prop-types": "15.5.10",
"react-native-drawer-layout-polyfill": "1.3.2",
"react-native-tab-view": "0.0.65"
}
},
"react-proxy": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",
@@ -6442,6 +6639,11 @@
"is-promise": "2.1.0"
}
},
"rx": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
"integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
},
"rx-lite": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",

View File

@@ -10,7 +10,8 @@
"react": "16.0.0-alpha.12",
"react-native": "0.47.0",
"react-native-deck-swiper": "^1.3.8",
"react-native-progress": "^3.4.0"
"react-native-progress": "^3.4.0",
"react-native-router-flux": "^4.0.0-beta.21"
},
"devDependencies": {
"babel-jest": "21.0.2",

60
src/Router.js Normal file
View File

@@ -0,0 +1,60 @@
import React from 'react';
import { Scene, Router, Stack } from 'react-native-router-flux';
import Categories from './components/Categories';
import LessonCategories from './components/LessonCategories';
import AnatomyCard from './components/AnatomyCard';
import Lesson from './components/Lesson';
const RouterComponent = () => {
const { headerTextStyle } = styles;
return (
<Router tintColor={'#fff'}>
<Stack key="root">
<Scene
key="categories"
component={Categories}
title="MeMe"
headerTitleStyle={headerTextStyle}
headerStyle={headerStyle('#6d6e71')}
/>
<Scene
key="lessonCategories"
component={LessonCategories}
title="LEKCIJE"
headerStyle={headerStyle('#808285')}
headerTitleStyle={headerTextStyle}
/>
<Scene
key="anatomyCard"
component={AnatomyCard}
title="Anatomy"
headerStyle={headerStyle('#808285')}
headerTitleStyle={headerTextStyle}
/>
<Scene
key="lesson"
component={Lesson}
title="IMA LI MLIJEKA?"
headerStyle={headerStyle('#7270a8')}
headerTitleStyle={headerTextStyle}
/>
</Stack>
</Router>
);
};
const headerStyle = function (headerBackgroudColor) {
return {
backgroundColor: headerBackgroudColor
};
};
const styles = {
headerTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: '#fff'
}
};
export default RouterComponent;

View File

@@ -1,7 +1,7 @@
import React from 'react';
import { View, Text } from 'react-native';
const AnatomyCard = ({title, text}) => {
const AnatomyCard = ({ title, text }) => {
const { defaultStyle, titleStyle, textStyle } = styles;
return (

View File

@@ -1,19 +1,57 @@
import React from 'react';
import { View } from 'react-native';
import ApplicationHeader from './ApplicationHeader';
import { Actions } from 'react-native-router-flux';
import CategoryItem from './CategoryItem';
const Categories = () => {
const { categoriesContainerStyle, categoriesListStyle } = styles;
const onCategorySelected = (selectedCategoryName) => {
switch (selectedCategoryName) {
case 'ANATOMIJA':
console.log('ANATOMIJA');
Actions.anatomyCard({
title: 'Bradavica',
text: 'O alveoli, o tkivu, o mliječnim putevima i živcima. Zamišljeno je da korisnik može fizički da istraži anatomiju i fizionomiju dojke. Zoomin/zoomout sa tagovima. U sekciji anatomije nas dočeka kao neka interaktivna infografika. Npr, dojka i njen presjek sa tagovima. Kada kliknemo na tag dobijemo karticu sa svim informacijama o alveoli. Kartice kao i sav drugi sadržaj ne bi pravila skrolabilnim, radje bi sadržaj rasporedjivala na više kartica. Ali recimo da u ovoj sekciji fiziologije bi za svaki pojam bila jedna kartica jer su to neki uopšteni pojmovi.'
});
break;
case 'LEKCIJE':
console.log('LEKCIJE');
Actions.lessonCategories();
break;
case 'UPITNIK':
console.log('UPITNIK');
break;
case 'REKLA KAZALA':
console.log('REKLA KAZALA');
break;
default:
console.log('ERROR');
}
};
return (
<View style={categoriesContainerStyle}>
<ApplicationHeader headerText='MeMe' headerBackgroudColor='#6d6e71' />
<View style={categoriesListStyle}>
<CategoryItem categoryName='ANATOMIJA' categoryBackgroudColor='#f7bcbc' />
<CategoryItem categoryName='LEKCIJE' categoryBackgroudColor='#f4d4d4' />
<CategoryItem categoryName='UPITNIK' categoryBackgroudColor='#bcbec0' />
<CategoryItem categoryName='REKLA KAZALA' categoryBackgroudColor='#e6e51a' />
<CategoryItem
categoryName='ANATOMIJA'
categoryBackgroudColor='#f7bcbc'
onCategorySelected={(categoryName) => (onCategorySelected(categoryName))}
/>
<CategoryItem
categoryName='LEKCIJE'
categoryBackgroudColor='#f4d4d4'
onCategorySelected={(categoryName) => onCategorySelected(categoryName)}
/>
<CategoryItem
categoryName='UPITNIK'
categoryBackgroudColor='#bcbec0'
onCategorySelected={(categoryName) => onCategorySelected(categoryName)}
/>
<CategoryItem
categoryName='REKLA KAZALA'
categoryBackgroudColor='#e6e51a'
onCategorySelected={(categoryName) => onCategorySelected(categoryName)}
/>
</View>
</View>
);

View File

@@ -1,15 +1,15 @@
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const CategoryItem = (props) => {
const CategoryItem = ({ onCategorySelected, categoryName, categoryBackgroudColor }) => {
const { categoryTextStyle } = styles;
return (
<TouchableOpacity
onPress={() => console.log(props.categoryName)}
style={containerStyle(props.categoryBackgroudColor)}
onPress={() => onCategorySelected(categoryName)}
style={containerStyle(categoryBackgroudColor)}
>
<Text style={categoryTextStyle}>
{props.categoryName}
{categoryName}
</Text>
</TouchableOpacity>
);

View File

@@ -12,10 +12,6 @@ const Lesson = (props) => {
return (
<View style={categoriesContainerStyle}>
<ApplicationHeader
headerText={props.lessonHeaderText}
headerBackgroudColor={props.lessonHeaderBackroundColor}
/>
<View style={categoriesListStyle}>
{renderQuestions()}
</View>

View File

@@ -1,19 +1,53 @@
import React from 'react';
import { View } from 'react-native';
import ApplicationHeader from './ApplicationHeader';
import { Actions } from 'react-native-router-flux';
import CategoryItem from './CategoryItem';
const LessonCategories = () => {
const { categoriesContainerStyle, categoriesListStyle } = styles;
const onLessonSelected = (selectedLesson) => {
switch(selectedLesson){
case 'IMA LI MLIJEKA?':
Actions.lesson({
lessonHeaderText: 'IMA LI MLIJEKA?',
questions:
['Kako funkcioniše produkcija mlijeka?',
'Uspostavljanje i zadržavanje zaliha mlijeka kad beba ne doji',
'Prejak refleks otpuštanja mlijeka ili prekomjerne zalihe',
'Koje biljke izbjegavati za vrijeme dojenja'
],
lessonHeaderBackroundColor: '#7270a8'
});
break;
default:
console.log(selectedLesson);
}
};
return (
<View style={categoriesContainerStyle}>
<ApplicationHeader headerText='LEKCIJE' headerBackgroudColor='#808285' />
<View style={categoriesListStyle}>
<CategoryItem categoryName='IMA LI MLIJEKA?' categoryBackgroudColor='#7270a8' />
<CategoryItem categoryName='ŠTA JE NORMALNO?' categoryBackgroudColor='#819dd1' />
<CategoryItem categoryName='MOGU LI PODOJITI AKO..?' categoryBackgroudColor='#b0bad6' />
<CategoryItem categoryName='ČESTA PITANJA?' categoryBackgroudColor='#e7e2dc' />
<CategoryItem
categoryName='IMA LI MLIJEKA?'
categoryBackgroudColor='#7270a8'
onCategorySelected={(selectedLesson) => (onLessonSelected(selectedLesson))}
/>
<CategoryItem
categoryName='ŠTA JE NORMALNO?'
categoryBackgroudColor='#819dd1'
onCategorySelected={(selectedLesson) => (onLessonSelected(selectedLesson))}
/>
<CategoryItem
categoryName='MOGU LI PODOJITI AKO..?'
categoryBackgroudColor='#b0bad6'
onCategorySelected={(selectedLesson) => (onLessonSelected(selectedLesson))}
/>
<CategoryItem
categoryName='ČESTA PITANJA?'
categoryBackgroudColor='#e7e2dc'
onCategorySelected={(selectedLesson) => (onLessonSelected(selectedLesson))}
/>
</View>
</View>
);