From f58911878873d6226f2844aec1e833f90aefae90 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Tue, 17 Nov 2020 11:36:38 +0100 Subject: [PATCH 1/8] create FloatingActionButton component for use in admin and calendar screens --- .../FloatingActionButton.js | 21 +++++++++++++ .../style/FloatingActionButton.js | 30 +++++++++++++++++++ app/ui/screens/admin/AdminScreen.js | 17 ++--------- 3 files changed, 54 insertions(+), 14 deletions(-) create mode 100644 app/ui/components/floatingActionButton/FloatingActionButton.js create mode 100644 app/ui/components/floatingActionButton/style/FloatingActionButton.js diff --git a/app/ui/components/floatingActionButton/FloatingActionButton.js b/app/ui/components/floatingActionButton/FloatingActionButton.js new file mode 100644 index 0000000..3cab62b --- /dev/null +++ b/app/ui/components/floatingActionButton/FloatingActionButton.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { TouchableHighlight, View } from 'react-native'; +import Icon from 'react-native-vector-icons/MaterialIcons'; +import PropTypes from 'prop-types'; +import Colors from '../../style/Colors'; +import styles from './style/FloatingActionButton'; + +const FloatingActionButton = (props) => ( + + + + + +); + +FloatingActionButton.propTypes = { + name: PropTypes.string.isRequired, + onPress: PropTypes.func.isRequired, +}; + +export default FloatingActionButton; diff --git a/app/ui/components/floatingActionButton/style/FloatingActionButton.js b/app/ui/components/floatingActionButton/style/FloatingActionButton.js new file mode 100644 index 0000000..ec25758 --- /dev/null +++ b/app/ui/components/floatingActionButton/style/FloatingActionButton.js @@ -0,0 +1,30 @@ +import Colors from '../../../style/Colors'; +import StyleSheet from '../../../style/StyleSheet'; + +const styles = StyleSheet.create({ + filterButton: { + position: 'absolute', + bottom: 16, + right: 16, + borderRadius: 28, + overflow: 'hidden', + backgroundColor: Colors.grey, + android: { + elevation: 4, + }, + ios: { + borderColor: Colors.lightGray, + borderStyle: 'solid', + borderWidth: 0.5, + }, + }, + filterButtonWrapper: { + width: 56, + height: 56, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: Colors.magenta, + }, +}); + +export default styles; diff --git a/app/ui/screens/admin/AdminScreen.js b/app/ui/screens/admin/AdminScreen.js index 332b4aa..427c689 100644 --- a/app/ui/screens/admin/AdminScreen.js +++ b/app/ui/screens/admin/AdminScreen.js @@ -1,14 +1,6 @@ import React, { Component } from 'react'; -import { - FlatList, - RefreshControl, - Switch, - Text, - TouchableHighlight, - View, -} from 'react-native'; +import { FlatList, RefreshControl, Switch, Text, View } from 'react-native'; import PropTypes from 'prop-types'; -import Icon from 'react-native-vector-icons/MaterialIcons'; import Snackbar from 'react-native-snackbar'; import unorm from 'unorm'; @@ -17,6 +9,7 @@ import Colors from '../../style/Colors'; import SearchHeader from '../../components/searchHeader/SearchHeaderConnector'; import Button from '../../components/button/Button'; +import FloatingActionButton from '../../components/floatingActionButton/FloatingActionButton'; class AdminScreen extends Component { constructor(props) { @@ -183,11 +176,7 @@ class AdminScreen extends Component { ); const filterButton = this.props.filterTypes.length > 1 && ( - - - - - + ); if (keys.length === 0) { From a3a30c6e6d0260b5988bc7746700cf103d266040 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Tue, 17 Nov 2020 11:39:30 +0100 Subject: [PATCH 2/8] remove redundant styling --- app/ui/screens/admin/style/AdminScreen.js | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/app/ui/screens/admin/style/AdminScreen.js b/app/ui/screens/admin/style/AdminScreen.js index 4fc4649..a205e0a 100644 --- a/app/ui/screens/admin/style/AdminScreen.js +++ b/app/ui/screens/admin/style/AdminScreen.js @@ -63,29 +63,6 @@ const styles = StyleSheet.create({ selected: { backgroundColor: Colors.magenta, }, - filterButton: { - position: 'absolute', - bottom: 16, - right: 16, - borderRadius: 28, - overflow: 'hidden', - backgroundColor: Colors.grey, - android: { - elevation: 4, - }, - ios: { - borderColor: Colors.lightGray, - borderStyle: 'solid', - borderWidth: 0.5, - }, - }, - filterButtonWrapper: { - width: 56, - height: 56, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: Colors.magenta, - }, noResultsMessage: { fontSize: 18, padding: 16, From a1a44fbe6fb9b373d72fc3923bfc500986070978 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Tue, 17 Nov 2020 18:46:50 +0100 Subject: [PATCH 3/8] Add filter button to Calendar screen --- app/ui/screens/events/CalendarScreen.js | 48 ++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/app/ui/screens/events/CalendarScreen.js b/app/ui/screens/events/CalendarScreen.js index 8eb3f03..5718e0f 100644 --- a/app/ui/screens/events/CalendarScreen.js +++ b/app/ui/screens/events/CalendarScreen.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { RefreshControl, ScrollView, SectionList, Text, View } from 'react-native'; import Moment from 'moment'; +import Snackbar from 'react-native-snackbar'; import CalendarItem from './CalendarItemConnector'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen'; @@ -9,6 +10,22 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import styles from './style/CalendarScreen'; import SearchHeader from '../../components/searchHeader/SearchHeaderConnector'; import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView'; +import FloatingActionButton from '../../components/floatingActionButton/FloatingActionButton'; + +const filterTypes = [ + { + label: 'Showing all events', + checkItem: () => true, + }, + { + label: 'Showing your registrations', + checkItem: (item) => item.registered, + }, + { + label: 'Showing open registrations', + checkItem: (item) => item.registration_allowed, + }, +]; /* eslint no-param-reassign: ["error", { "props": false }] */ const addEventToSection = (sections, date, event) => { @@ -119,6 +136,13 @@ const renderItem = (item) => { }; class CalendarScreen extends Component { + constructor(props) { + super(props); + this.state = { + currentFilter: 0, + }; + } + componentDidMount() { const { keywords } = this.props; this.props.events(keywords); @@ -136,7 +160,27 @@ class CalendarScreen extends Component { }, 500); }; + filteredEvents = () => { + const { currentFilter } = this.state; + const { eventList } = this.props; + + return eventList.filter((item) => filterTypes[currentFilter].checkItem(item)); + }; + + updateFilter = () => { + const { currentFilter } = this.state; + + const newFilter = (currentFilter + 1) % filterTypes.length; + + if (newFilter !== currentFilter) { + Snackbar.show({ text: filterTypes[newFilter].label }); + this.setState({ currentFilter: newFilter }); + } + }; + render() { + const items = this.filteredEvents(); + const header = ( ( {itemHeader.section.key} )} - sections={eventListToSections(this.props.eventList)} + sections={eventListToSections(items)} keyExtractor={(item) => item.dayNumber} stickySectionHeadersEnabled onRefresh={this.handleRefresh} @@ -199,6 +243,7 @@ class CalendarScreen extends Component { {content} + ); } @@ -217,6 +262,7 @@ CalendarScreen.propTypes = { start: PropTypes.string, end: PropTypes.string, location: PropTypes.string, + registration_allowed: PropTypes.bool.isRequired, price: PropTypes.string, registered: PropTypes.bool, pizza: PropTypes.bool, From d4040cfe9142b9a9529edbe74bb45757ed5f14b5 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Tue, 17 Nov 2020 18:52:16 +0100 Subject: [PATCH 4/8] Name FloatingActionButton styles appropriately --- .../components/floatingActionButton/FloatingActionButton.js | 4 ++-- .../floatingActionButton/style/FloatingActionButton.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/ui/components/floatingActionButton/FloatingActionButton.js b/app/ui/components/floatingActionButton/FloatingActionButton.js index 3cab62b..cb7a013 100644 --- a/app/ui/components/floatingActionButton/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/FloatingActionButton.js @@ -6,8 +6,8 @@ import Colors from '../../style/Colors'; import styles from './style/FloatingActionButton'; const FloatingActionButton = (props) => ( - - + + diff --git a/app/ui/components/floatingActionButton/style/FloatingActionButton.js b/app/ui/components/floatingActionButton/style/FloatingActionButton.js index ec25758..0e25079 100644 --- a/app/ui/components/floatingActionButton/style/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/style/FloatingActionButton.js @@ -2,7 +2,7 @@ import Colors from '../../../style/Colors'; import StyleSheet from '../../../style/StyleSheet'; const styles = StyleSheet.create({ - filterButton: { + floatingActionButton: { position: 'absolute', bottom: 16, right: 16, @@ -18,7 +18,7 @@ const styles = StyleSheet.create({ borderWidth: 0.5, }, }, - filterButtonWrapper: { + floatingActionButtonWrapper: { width: 56, height: 56, justifyContent: 'center', From bfd745eef2e95f951ffeb3e30a1b47593b4d65fc Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Mon, 23 Nov 2020 22:36:33 +0100 Subject: [PATCH 5/8] Working (but not too pretty yet) filter FAB. --- app/ui/screens/events/CalendarScreen.js | 68 +++++++++++++++++++++---- package.json | 3 +- yarn.lock | 5 ++ 3 files changed, 64 insertions(+), 12 deletions(-) diff --git a/app/ui/screens/events/CalendarScreen.js b/app/ui/screens/events/CalendarScreen.js index 5718e0f..462cfeb 100644 --- a/app/ui/screens/events/CalendarScreen.js +++ b/app/ui/screens/events/CalendarScreen.js @@ -2,7 +2,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { RefreshControl, ScrollView, SectionList, Text, View } from 'react-native'; import Moment from 'moment'; -import Snackbar from 'react-native-snackbar'; +import { FloatingAction } from 'react-native-floating-action'; +import Icon from 'react-native-vector-icons/MaterialIcons'; import CalendarItem from './CalendarItemConnector'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen'; @@ -10,7 +11,37 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import styles from './style/CalendarScreen'; import SearchHeader from '../../components/searchHeader/SearchHeaderConnector'; import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView'; -import FloatingActionButton from '../../components/floatingActionButton/FloatingActionButton'; +import Colors from '../../style/Colors'; + +const actions = [ + { + text: 'All', + icon: , + name: 'filter_all', + color: Colors.magenta, + buttonSize: 46, + textColor: Colors.white, + textBackground: Colors.magenta, + }, + { + text: 'Your registrations', + icon: , + name: 'filter_registered', + color: Colors.magenta, + buttonSize: 46, + textColor: Colors.white, + textBackground: Colors.magenta, + }, + { + text: 'Open registrations', + icon: , + name: 'filter_open', + color: Colors.magenta, + buttonSize: 46, + textColor: Colors.white, + textBackground: Colors.magenta, + }, +]; const filterTypes = [ { @@ -167,15 +198,21 @@ class CalendarScreen extends Component { return eventList.filter((item) => filterTypes[currentFilter].checkItem(item)); }; - updateFilter = () => { - const { currentFilter } = this.state; - - const newFilter = (currentFilter + 1) % filterTypes.length; - - if (newFilter !== currentFilter) { - Snackbar.show({ text: filterTypes[newFilter].label }); - this.setState({ currentFilter: newFilter }); + updateFilter = (name) => { + let filter; + switch (name) { + case 'filter_registered': + filter = 1; + break; + case 'filter_open': + filter = 2; + break; + default: + filter = 0; } + this.setState({ + currentFilter: filter, + }); }; render() { @@ -243,7 +280,16 @@ class CalendarScreen extends Component { {content} - + } + actionsPaddingTopBottom={4} + onPressItem={(name) => { + this.updateFilter(name); + }} + /> ); } diff --git a/package.json b/package.json index 900b5cb..30ec004 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react-native-cli": "^2.0.1", "react-native-device-info": "^7.0.2", "react-native-dotenv": "^2.4.2", + "react-native-floating-action": "^1.21.0", "react-native-fs": "^2.16.6", "react-native-gesture-handler": "^1.8.0", "react-native-image-crop-picker": "^0.35.1", @@ -75,8 +76,8 @@ "react-native-reanimated": "^1.13.1", "react-native-render-html": "^4.2.4", "react-native-safe-area-context": "^3.1.8", - "react-native-share": "^4.0.4", "react-native-screens": "^2.12.0", + "react-native-share": "^4.0.4", "react-native-snackbar": "^2.2.3", "react-native-vector-icons": "^7.1.0", "react-native-webview": "^10.10.0", diff --git a/yarn.lock b/yarn.lock index 1bb7cfa..e6f5dc7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7467,6 +7467,11 @@ react-native-dotenv@^2.4.2: dependencies: dotenv "^8.0.0" +react-native-floating-action@^1.21.0: + version "1.21.0" + resolved "https://registry.yarnpkg.com/react-native-floating-action/-/react-native-floating-action-1.21.0.tgz#cb1e8349fec5b9aed06c8053c07372822c64b22f" + integrity sha512-ozd/iaJunrEYc4eGUWkP+4UI8yoIL0nQsToI3hnJRste/3LPhBkyu0eG3RTjc6aFY+q++JpRmgO469Ck8jJOwg== + react-native-fs@^2.16.6: version "2.16.6" resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.16.6.tgz#2901789a43210a35a0ef0a098019bbef3af395fd" From 0f91bba4bd27188b43d9863b5dbcaa38f9412b13 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Fri, 27 Nov 2020 17:48:50 +0100 Subject: [PATCH 6/8] Made the floating action button a bit prettier and more modular, so it could also be used in the admin pages. --- .../FloatingActionButton.js | 68 ++++++++++-- .../style/FloatingActionButton.js | 40 ++++--- app/ui/screens/admin/AdminScreen.js | 19 ++-- app/ui/screens/events/CalendarScreen.js | 103 +++++------------- app/ui/screens/events/EventAdminScreen.js | 6 +- app/ui/screens/pizza/PizzaAdminScreen.js | 4 +- package.json | 2 +- 7 files changed, 126 insertions(+), 116 deletions(-) diff --git a/app/ui/components/floatingActionButton/FloatingActionButton.js b/app/ui/components/floatingActionButton/FloatingActionButton.js index cb7a013..8eb8732 100644 --- a/app/ui/components/floatingActionButton/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/FloatingActionButton.js @@ -1,21 +1,71 @@ import React from 'react'; -import { TouchableHighlight, View } from 'react-native'; +import { FloatingAction } from 'react-native-floating-action'; import Icon from 'react-native-vector-icons/MaterialIcons'; import PropTypes from 'prop-types'; +import { Text, View } from 'react-native'; import Colors from '../../style/Colors'; import styles from './style/FloatingActionButton'; -const FloatingActionButton = (props) => ( - - - - - +const renderText = (text) => ( + + {text} + ); +const renderIcon = (iconName) => { + if (iconName) { + return ( + + + + ); + } + return null; +}; + +const renderItem = (item) => ( + + {renderText(item.text)} + {renderIcon(item.icon_name)} + +); + +const FloatingActionButton = (props) => { + const actions = props.actions.map((action, index) => ({ + text: action.text, + icon: , + name: index.toString(), + color: Colors.magenta, + buttonSize: 46, + textColor: Colors.white, + textBackground: Colors.magenta, + render: () => renderItem(action), + })); + + const onPress = (index) => { + props.actions[index].onPress(); + }; + + return ( + } + /> + ); +}; + FloatingActionButton.propTypes = { - name: PropTypes.string.isRequired, - onPress: PropTypes.func.isRequired, + icon_name: PropTypes.string.isRequired, + actions: PropTypes.arrayOf( + PropTypes.shape({ + icon_name: PropTypes.string, + text: PropTypes.string, + onPress: PropTypes.func.isRequired, + }) + ).isRequired, }; export default FloatingActionButton; diff --git a/app/ui/components/floatingActionButton/style/FloatingActionButton.js b/app/ui/components/floatingActionButton/style/FloatingActionButton.js index 0e25079..1717d0e 100644 --- a/app/ui/components/floatingActionButton/style/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/style/FloatingActionButton.js @@ -2,28 +2,32 @@ import Colors from '../../../style/Colors'; import StyleSheet from '../../../style/StyleSheet'; const styles = StyleSheet.create({ - floatingActionButton: { - position: 'absolute', - bottom: 16, - right: 16, - borderRadius: 28, - overflow: 'hidden', - backgroundColor: Colors.grey, - android: { - elevation: 4, - }, - ios: { - borderColor: Colors.lightGray, - borderStyle: 'solid', - borderWidth: 0.5, - }, + floatingActionButtonItem: { + flexDirection: 'row', + alignItems: 'center', }, - floatingActionButtonWrapper: { - width: 56, - height: 56, + floatingActionButtonItemIcon: { + backgroundColor: Colors.magenta, + width: 46, + height: 46, + marginLeft: 14, + borderRadius: 23, justifyContent: 'center', alignItems: 'center', + elevation: 5, + }, + floatingActionButtonItemTextWrapper: { backgroundColor: Colors.magenta, + paddingHorizontal: 10, + elevation: 5, + borderRadius: 6, + height: 28, + flexDirection: 'row', + alignItems: 'center', + }, + floatingActionButtonItemText: { + color: Colors.white, + fontSize: 16, }, }); diff --git a/app/ui/screens/admin/AdminScreen.js b/app/ui/screens/admin/AdminScreen.js index 427c689..b6fb5f8 100644 --- a/app/ui/screens/admin/AdminScreen.js +++ b/app/ui/screens/admin/AdminScreen.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { FlatList, RefreshControl, Switch, Text, View } from 'react-native'; import PropTypes from 'prop-types'; -import Snackbar from 'react-native-snackbar'; import unorm from 'unorm'; import styles from './style/AdminScreen'; @@ -12,13 +11,18 @@ import Button from '../../components/button/Button'; import FloatingActionButton from '../../components/floatingActionButton/FloatingActionButton'; class AdminScreen extends Component { + actions = this.props.filterTypes.map((filterType) => ({ + text: filterType.label, + onPress: () => this.updateFilter(filterType.checkItem), + })); + constructor(props) { super(props); this.state = { items: {}, searchKey: '', - currentFilter: 0, + currentFilter: props.filterTypes[0].checkItem, }; for (let i = 0; i < this.props.items.length; i += 1) { @@ -69,12 +73,11 @@ class AdminScreen extends Component { }; applyFilter = (keys) => { - const { filterTypes } = this.props; const { currentFilter } = this.state; return keys .filter(this.containsSearchKey) - .filter((pk) => filterTypes[currentFilter].checkItem(this.state.items[pk])); + .filter((pk) => currentFilter(this.state.items[pk])); }; cleanSearchTerm = (term) => @@ -97,14 +100,10 @@ class AdminScreen extends Component { return 0; }; - updateFilter = () => { + updateFilter = (newFilter) => { const { currentFilter } = this.state; - const { filterTypes } = this.props; - - const newFilter = (currentFilter + 1) % filterTypes.length; if (newFilter !== currentFilter) { - Snackbar.show({ text: filterTypes[newFilter].label }); this.setState({ currentFilter: newFilter }); } }; @@ -176,7 +175,7 @@ class AdminScreen extends Component { ); const filterButton = this.props.filterTypes.length > 1 && ( - + ); if (keys.length === 0) { diff --git a/app/ui/screens/events/CalendarScreen.js b/app/ui/screens/events/CalendarScreen.js index 462cfeb..fcec169 100644 --- a/app/ui/screens/events/CalendarScreen.js +++ b/app/ui/screens/events/CalendarScreen.js @@ -2,8 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { RefreshControl, ScrollView, SectionList, Text, View } from 'react-native'; import Moment from 'moment'; -import { FloatingAction } from 'react-native-floating-action'; -import Icon from 'react-native-vector-icons/MaterialIcons'; import CalendarItem from './CalendarItemConnector'; import LoadingScreen from '../../components/loadingScreen/LoadingScreen'; import ErrorScreen from '../../components/errorScreen/ErrorScreen'; @@ -11,52 +9,13 @@ import ErrorScreen from '../../components/errorScreen/ErrorScreen'; import styles from './style/CalendarScreen'; import SearchHeader from '../../components/searchHeader/SearchHeaderConnector'; import DismissKeyboardView from '../../components/dismissKeyboardView/DismissKeyboardView'; -import Colors from '../../style/Colors'; +import FloatingActionButton from '../../components/floatingActionButton/FloatingActionButton'; -const actions = [ - { - text: 'All', - icon: , - name: 'filter_all', - color: Colors.magenta, - buttonSize: 46, - textColor: Colors.white, - textBackground: Colors.magenta, - }, - { - text: 'Your registrations', - icon: , - name: 'filter_registered', - color: Colors.magenta, - buttonSize: 46, - textColor: Colors.white, - textBackground: Colors.magenta, - }, - { - text: 'Open registrations', - icon: , - name: 'filter_open', - color: Colors.magenta, - buttonSize: 46, - textColor: Colors.white, - textBackground: Colors.magenta, - }, -]; - -const filterTypes = [ - { - label: 'Showing all events', - checkItem: () => true, - }, - { - label: 'Showing your registrations', - checkItem: (item) => item.registered, - }, - { - label: 'Showing open registrations', - checkItem: (item) => item.registration_allowed, - }, -]; +const filters = { + all: () => true, + registered: (item) => item.registered, + open: (item) => item.registration_allowed, +}; /* eslint no-param-reassign: ["error", { "props": false }] */ const addEventToSection = (sections, date, event) => { @@ -167,10 +126,28 @@ const renderItem = (item) => { }; class CalendarScreen extends Component { + actions = [ + { + text: 'All', + icon_name: 'reorder', + onPress: () => this.updateFilter(filters.all), + }, + { + text: 'Your registrations', + icon_name: 'account-circle', + onPress: () => this.updateFilter(filters.registered), + }, + { + text: 'Open registrations', + icon_name: 'event-available', + onPress: () => this.updateFilter(filters.open), + }, + ]; + constructor(props) { super(props); this.state = { - currentFilter: 0, + activeFilter: filters.all, }; } @@ -192,26 +169,15 @@ class CalendarScreen extends Component { }; filteredEvents = () => { - const { currentFilter } = this.state; + const { activeFilter } = this.state; const { eventList } = this.props; - return eventList.filter((item) => filterTypes[currentFilter].checkItem(item)); + return eventList.filter(activeFilter); }; - updateFilter = (name) => { - let filter; - switch (name) { - case 'filter_registered': - filter = 1; - break; - case 'filter_open': - filter = 2; - break; - default: - filter = 0; - } + updateFilter = (filter) => { this.setState({ - currentFilter: filter, + activeFilter: filter, }); }; @@ -280,16 +246,7 @@ class CalendarScreen extends Component { {content} - } - actionsPaddingTopBottom={4} - onPressItem={(name) => { - this.updateFilter(name); - }} - /> + ); } diff --git a/app/ui/screens/events/EventAdminScreen.js b/app/ui/screens/events/EventAdminScreen.js index 24e6c6f..5e7483a 100644 --- a/app/ui/screens/events/EventAdminScreen.js +++ b/app/ui/screens/events/EventAdminScreen.js @@ -50,15 +50,15 @@ class EventAdminScreen extends Component { const filterTypes = [ { - label: 'Disabled filter', + label: 'Show all', checkItem: () => true, }, { - label: 'Filtering on payment', + label: 'Hide paid', checkItem: (item) => item.select.value === PAYMENT_TYPES.NONE, }, { - label: 'Filtering on presence', + label: 'Hide present', checkItem: (item) => !item.checkbox, }, ]; diff --git a/app/ui/screens/pizza/PizzaAdminScreen.js b/app/ui/screens/pizza/PizzaAdminScreen.js index b369aa1..bce51d9 100644 --- a/app/ui/screens/pizza/PizzaAdminScreen.js +++ b/app/ui/screens/pizza/PizzaAdminScreen.js @@ -48,11 +48,11 @@ class PizzaAdminScreen extends Component { const filterTypes = [ { - label: 'Disabled filter', + label: 'Show all', checkItem: () => true, }, { - label: 'Filtering on payment', + label: 'Hide paid', checkItem: (item) => item.select.value === PAYMENT_TYPES.NONE, }, ]; diff --git a/package.json b/package.json index 30ec004..691defa 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "/__tests__/setup.js" ], "transformIgnorePatterns": [ - "node_modules/(?!(react-native|@react-native-community|react-navigation|react-navigation-drawer|react-navigation-stack|@sentry|react-native-gesture-handler|react-native-vector-icons|react-native-linear-gradient|@react-native-firebase|react-native-image-crop-picker|react-native-reanimated|react-native-iphone-x-helper|react-native-render-html|react-native-webview|react-native-share|react-native-image-zoom-viewer|react-native-image-pan-zoom|react-native-add-calendar-event)/)" + "node_modules/(?!(react-native|@react-native-community|react-navigation|react-navigation-drawer|react-navigation-stack|@sentry|react-native-gesture-handler|react-native-vector-icons|react-native-linear-gradient|@react-native-firebase|react-native-image-crop-picker|react-native-reanimated|react-native-iphone-x-helper|react-native-render-html|react-native-webview|react-native-share|react-native-image-zoom-viewer|react-native-image-pan-zoom|react-native-add-calendar-event|react-native-floating-action)/)" ] }, "prettier": { From c8c9852e9cd2796b1e4e8c237445dee9e647581d Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Sat, 28 Nov 2020 23:21:36 +0100 Subject: [PATCH 7/8] Changed variable names to camelCase --- .../components/floatingActionButton/FloatingActionButton.js | 6 +++--- app/ui/screens/admin/AdminScreen.js | 2 +- app/ui/screens/events/CalendarScreen.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/ui/components/floatingActionButton/FloatingActionButton.js b/app/ui/components/floatingActionButton/FloatingActionButton.js index 8eb8732..9261b48 100644 --- a/app/ui/components/floatingActionButton/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/FloatingActionButton.js @@ -52,16 +52,16 @@ const FloatingActionButton = (props) => { showBackground={false} actions={actions} onPressItem={onPress} - floatingIcon={} + floatingIcon={} /> ); }; FloatingActionButton.propTypes = { - icon_name: PropTypes.string.isRequired, + iconName: PropTypes.string.isRequired, actions: PropTypes.arrayOf( PropTypes.shape({ - icon_name: PropTypes.string, + iconName: PropTypes.string, text: PropTypes.string, onPress: PropTypes.func.isRequired, }) diff --git a/app/ui/screens/admin/AdminScreen.js b/app/ui/screens/admin/AdminScreen.js index b6fb5f8..7ca16d6 100644 --- a/app/ui/screens/admin/AdminScreen.js +++ b/app/ui/screens/admin/AdminScreen.js @@ -175,7 +175,7 @@ class AdminScreen extends Component { ); const filterButton = this.props.filterTypes.length > 1 && ( - + ); if (keys.length === 0) { diff --git a/app/ui/screens/events/CalendarScreen.js b/app/ui/screens/events/CalendarScreen.js index fcec169..9adf08b 100644 --- a/app/ui/screens/events/CalendarScreen.js +++ b/app/ui/screens/events/CalendarScreen.js @@ -246,7 +246,7 @@ class CalendarScreen extends Component { {content} - + ); } From d03cdc61b2d718eaeb5d9d4f99b703f71a9cd604 Mon Sep 17 00:00:00 2001 From: Jen Dusseljee Date: Sat, 28 Nov 2020 23:27:30 +0100 Subject: [PATCH 8/8] Changed even more variable names to camelCase (I'm an idiot :p) --- .../components/floatingActionButton/FloatingActionButton.js | 4 ++-- app/ui/screens/events/CalendarScreen.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/ui/components/floatingActionButton/FloatingActionButton.js b/app/ui/components/floatingActionButton/FloatingActionButton.js index 9261b48..d72307b 100644 --- a/app/ui/components/floatingActionButton/FloatingActionButton.js +++ b/app/ui/components/floatingActionButton/FloatingActionButton.js @@ -26,14 +26,14 @@ const renderIcon = (iconName) => { const renderItem = (item) => ( {renderText(item.text)} - {renderIcon(item.icon_name)} + {renderIcon(item.iconName)} ); const FloatingActionButton = (props) => { const actions = props.actions.map((action, index) => ({ text: action.text, - icon: , + icon: , name: index.toString(), color: Colors.magenta, buttonSize: 46, diff --git a/app/ui/screens/events/CalendarScreen.js b/app/ui/screens/events/CalendarScreen.js index 9adf08b..1b345d2 100644 --- a/app/ui/screens/events/CalendarScreen.js +++ b/app/ui/screens/events/CalendarScreen.js @@ -129,17 +129,17 @@ class CalendarScreen extends Component { actions = [ { text: 'All', - icon_name: 'reorder', + iconName: 'reorder', onPress: () => this.updateFilter(filters.all), }, { text: 'Your registrations', - icon_name: 'account-circle', + iconName: 'account-circle', onPress: () => this.updateFilter(filters.registered), }, { text: 'Open registrations', - icon_name: 'event-available', + iconName: 'event-available', onPress: () => this.updateFilter(filters.open), }, ];