From 701125786c2261cf4f1c072b588ea855a491d9bd Mon Sep 17 00:00:00 2001 From: MedihaZukic Date: Sat, 23 Sep 2017 21:28:20 +0200 Subject: [PATCH 1/2] Navigation (wip) --- index.android.js | 8 +- package-lock.json | 186 +++++++++++++++++++++++++++++ package.json | 3 +- src/components/AnatomyCard.js | 2 +- src/components/Categories.js | 50 +++++++- src/components/CategoryItem.js | 8 +- src/components/LessonCategories.js | 30 ++++- 7 files changed, 268 insertions(+), 19 deletions(-) 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..1926ffa 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,71 @@ } } }, + "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-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-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 +6623,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 ab659d7..0c0f9e0 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ }, "dependencies": { "react": "16.0.0-alpha.12", - "react-native": "0.47.0" + "react-native": "0.47.0", + "react-native-router-flux": "^4.0.0-beta.21" }, "devDependencies": { "babel-jest": "21.0.2", diff --git a/src/components/AnatomyCard.js b/src/components/AnatomyCard.js index 6478216..7465f20 100644 --- a/src/components/AnatomyCard.js +++ b/src/components/AnatomyCard.js @@ -2,7 +2,7 @@ import React from 'react'; import { View, Text } from 'react-native'; //import CategoryItem from './CategoryItem'; -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/LessonCategories.js b/src/components/LessonCategories.js index a3da701..1465c0f 100644 --- a/src/components/LessonCategories.js +++ b/src/components/LessonCategories.js @@ -1,19 +1,37 @@ import React from 'react'; import { View } from 'react-native'; -import ApplicationHeader from './ApplicationHeader'; import CategoryItem from './CategoryItem'; const LessonCategories = () => { const { categoriesContainerStyle, categoriesListStyle } = styles; + const onLessonSelected = (selectedLesson) => { + console.log(selectedLesson); + }; + return ( - - - - - + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> + (onLessonSelected(selectedLesson))} + /> ); From 5884e20ecf94ae51c38a88bb2781d6d4844d5b82 Mon Sep 17 00:00:00 2001 From: MedihaZukic Date: Sat, 23 Sep 2017 21:56:01 +0200 Subject: [PATCH 2/2] Navigation part 2 --- package-lock.json | 16 ++++++++++++++++ package.json | 2 +- src/Router.js | 8 ++++++++ src/components/Lesson.js | 4 ---- src/components/LessonCategories.js | 18 +++++++++++++++++- 5 files changed, 42 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1926ffa..ebd800b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6242,6 +6242,14 @@ "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", @@ -6263,6 +6271,14 @@ "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", diff --git a/package.json b/package.json index 73fbafd..d469ab0 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "react-native": "0.47.0", "react-native-deck-swiper": "^1.3.8", "react-native-progress": "^3.4.0", - "react-native-router-flux": "^4.0.0-beta.21" + "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 index 19df243..f9428c5 100644 --- a/src/Router.js +++ b/src/Router.js @@ -3,6 +3,7 @@ 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; @@ -30,6 +31,13 @@ const RouterComponent = () => { headerStyle={headerStyle('#808285')} headerTitleStyle={headerTextStyle} /> + ); 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 1465c0f..de9a113 100644 --- a/src/components/LessonCategories.js +++ b/src/components/LessonCategories.js @@ -1,12 +1,28 @@ import React from 'react'; import { View } from 'react-native'; +import { Actions } from 'react-native-router-flux'; import CategoryItem from './CategoryItem'; const LessonCategories = () => { const { categoriesContainerStyle, categoriesListStyle } = styles; const onLessonSelected = (selectedLesson) => { - console.log(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 (