diff --git a/index.android.js b/index.android.js index e2e58e5..2293c80 100644 --- a/index.android.js +++ b/index.android.js @@ -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 ( + {/* + />*/ + } + + ); } diff --git a/package-lock.json b/package-lock.json index 8b7fa6a..ebd800b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8340c09..d469ab0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Router.js b/src/Router.js new file mode 100644 index 0000000..f9428c5 --- /dev/null +++ b/src/Router.js @@ -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 ( + + + + + + + + + ); +}; + +const headerStyle = function (headerBackgroudColor) { + return { + backgroundColor: headerBackgroudColor + }; + }; + +const styles = { + headerTextStyle: { + fontSize: 20, + alignSelf: 'center', + color: '#fff' + } +}; + +export default RouterComponent; diff --git a/src/components/AnatomyCard.js b/src/components/AnatomyCard.js index e9d6589..3084698 100644 --- a/src/components/AnatomyCard.js +++ b/src/components/AnatomyCard.js @@ -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 ( diff --git a/src/components/Categories.js b/src/components/Categories.js index bee61a0..3d26130 100644 --- a/src/components/Categories.js +++ b/src/components/Categories.js @@ -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 ( - - - - - + (onCategorySelected(categoryName))} + /> + onCategorySelected(categoryName)} + /> + onCategorySelected(categoryName)} + /> + onCategorySelected(categoryName)} + /> ); diff --git a/src/components/CategoryItem.js b/src/components/CategoryItem.js index bf7263b..6553a27 100644 --- a/src/components/CategoryItem.js +++ b/src/components/CategoryItem.js @@ -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 ( console.log(props.categoryName)} - style={containerStyle(props.categoryBackgroudColor)} +onPress={() => onCategorySelected(categoryName)} + style={containerStyle(categoryBackgroudColor)} > - {props.categoryName} + {categoryName} ); diff --git a/src/components/Lesson.js b/src/components/Lesson.js index e345a10..f81c116 100644 --- a/src/components/Lesson.js +++ b/src/components/Lesson.js @@ -12,10 +12,6 @@ const Lesson = (props) => { return ( - {renderQuestions()} diff --git a/src/components/LessonCategories.js b/src/components/LessonCategories.js index a3da701..de9a113 100644 --- a/src/components/LessonCategories.js +++ b/src/components/LessonCategories.js @@ -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 ( - - - - - + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> );