Browse Source

Improved theme handling and performance

keplyx 4 years ago
parent
commit
7bac5a6ddc

+ 21
- 22
components/PreviewEventDashboardItem.js View File

@@ -1,11 +1,10 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {MaterialCommunityIcons} from "@expo/vector-icons";
5 4
 import {View} from "react-native";
6 5
 import HTML from "react-native-render-html";
7 6
 import i18n from "i18n-js";
8
-import {Avatar, Card, Text, withTheme, Button} from 'react-native-paper';
7
+import {Avatar, Button, Card, withTheme} from 'react-native-paper';
9 8
 import PlanningEventManager from "../utils/PlanningEventManager";
10 9
 
11 10
 
@@ -34,28 +33,28 @@ function PreviewEventDashboardItem(props) {
34 33
                         title={props.event['title']}
35 34
                         subtitle={PlanningEventManager.getFormattedEventTime(props.event)}
36 35
                     />}
37
-                    <Card.Content style={{
38
-                        height: props.event['description'].length > 70 ? 100 : 50,
39
-                        overflow: 'hidden',
40
-                    }}>
41
-                        <HTML html={"<div>" + props.event['description'] + "</div>"}
42
-                              tagsStyles={{
43
-                                  p: {color: colors.text,},
44
-                                  div: {color: colors.text},
45
-                              }}/>
36
+                <Card.Content style={{
37
+                    height: props.event['description'].length > 70 ? 100 : 50,
38
+                    overflow: 'hidden',
39
+                }}>
40
+                    <HTML html={"<div>" + props.event['description'] + "</div>"}
41
+                          tagsStyles={{
42
+                              p: {color: colors.text,},
43
+                              div: {color: colors.text},
44
+                          }}/>
46 45
 
47
-                    </Card.Content>
48
-                    <Card.Actions style={{
49
-                        marginLeft: 'auto',
50
-                        marginTop: 'auto',
51
-                        flexDirection: 'row'
52
-                    }}>
53
-                        <Button
46
+                </Card.Content>
47
+                <Card.Actions style={{
48
+                    marginLeft: 'auto',
49
+                    marginTop: 'auto',
50
+                    flexDirection: 'row'
51
+                }}>
52
+                    <Button
54 53
                         icon={'chevron-right'}
55
-                        >
56
-                            {i18n.t("homeScreen.dashboard.seeMore")}
57
-                        </Button>
58
-                    </Card.Actions>
54
+                    >
55
+                        {i18n.t("homeScreen.dashboard.seeMore")}
56
+                    </Button>
57
+                </Card.Actions>
59 58
             </Card>
60 59
         );
61 60
     } else

+ 1
- 1
components/ProxiwashListItem.js View File

@@ -1,5 +1,5 @@
1 1
 import * as React from 'react';
2
-import {Card, Avatar, List, Text, withTheme} from 'react-native-paper';
2
+import {Avatar, Card, Text, withTheme} from 'react-native-paper';
3 3
 import {View} from "react-native";
4 4
 import ProxiwashConstants from "../constants/ProxiwashConstants";
5 5
 

+ 1
- 6
components/Sidebar.js View File

@@ -21,7 +21,7 @@ type State = {
21 21
 /**
22 22
  * Class used to define a navigation drawer
23 23
  */
24
-export default class SideBar extends React.Component<Props, State> {
24
+export default class SideBar extends React.PureComponent<Props, State> {
25 25
 
26 26
     dataSet: Array<Object>;
27 27
 
@@ -122,11 +122,6 @@ export default class SideBar extends React.Component<Props, State> {
122 122
         this.getRenderItem = this.getRenderItem.bind(this);
123 123
     }
124 124
 
125
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
126
-        return nextState.active !== this.state.active;
127
-    }
128
-
129
-
130 125
     onListItemPress(item: Object) {
131 126
         if (item.link === undefined)
132 127
             this.props.navigation.navigate(item.route);

+ 1
- 1
components/WebSectionList.js View File

@@ -36,7 +36,7 @@ const MIN_REFRESH_TIME = 5  * 1000;
36 36
  * @prop fontSize {number} The icon size. Use 26 if unspecified
37 37
  * @prop width {number} The icon width. Use 30 if unspecified
38 38
  */
39
-export default class WebSectionList extends React.Component<Props, State> {
39
+export default class WebSectionList extends React.PureComponent<Props, State> {
40 40
 
41 41
     static defaultProps = {
42 42
         renderSectionHeader: null,

+ 25
- 39
components/WebViewScreen.js View File

@@ -3,8 +3,7 @@
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5 5
 import WebView from "react-native-webview";
6
-import ThemeManager from "../utils/ThemeManager";
7
-import {ActivityIndicator} from 'react-native-paper';
6
+import {ActivityIndicator, withTheme} from 'react-native-paper';
8 7
 import HeaderButton from "./HeaderButton";
9 8
 
10 9
 type Props = {
@@ -24,28 +23,31 @@ type Props = {
24 23
 /**
25 24
  * Class defining a webview screen.
26 25
  */
27
-export default class WebViewScreen extends React.Component<Props> {
26
+class WebViewScreen extends React.PureComponent<Props> {
28 27
 
29 28
     static defaultProps = {
30 29
         hasBackButton: false,
31 30
         hasSideMenu: true,
32 31
         hasFooter: true,
33 32
     };
34
-    webviewArray: Array<WebView> = [];
33
+    webviewRef: Object;
35 34
 
36 35
     onRefreshClicked: Function;
37 36
     onWebviewRef: Function;
38 37
     onGoBackWebview: Function;
39 38
     onGoForwardWebview: Function;
40
-    onOpenWebLink: Function;
39
+    getRenderLoading: Function;
41 40
 
42
-    constructor() {
43
-        super();
41
+    colors: Object;
42
+
43
+    constructor(props) {
44
+        super(props);
44 45
         this.onRefreshClicked = this.onRefreshClicked.bind(this);
45 46
         this.onWebviewRef = this.onWebviewRef.bind(this);
46 47
         this.onGoBackWebview = this.onGoBackWebview.bind(this);
47 48
         this.onGoForwardWebview = this.onGoForwardWebview.bind(this);
48
-        this.onOpenWebLink = this.onOpenWebLink.bind(this);
49
+        this.getRenderLoading = this.getRenderLoading.bind(this);
50
+        this.colors = props.theme.colors;
49 51
     }
50 52
 
51 53
     componentDidMount() {
@@ -73,38 +75,28 @@ export default class WebViewScreen extends React.Component<Props> {
73 75
     };
74 76
 
75 77
     onRefreshClicked() {
76
-        for (let view of this.webviewArray) {
77
-            if (view !== null)
78
-                view.reload();
79
-        }
78
+        if (this.webviewRef !== null)
79
+            this.webviewRef.reload();
80 80
     }
81 81
 
82 82
     onGoBackWebview() {
83
-        for (let view of this.webviewArray) {
84
-            if (view !== null)
85
-                view.goBack();
86
-        }
83
+        if (this.webviewRef !== null)
84
+            this.webviewRef.goBack();
87 85
     }
88 86
 
89 87
     onGoForwardWebview() {
90
-        for (let view of this.webviewArray) {
91
-            if (view !== null)
92
-                view.goForward();
93
-        }
94
-    }
95
-
96
-    onOpenWebLink() {
97
-        this.openWebLink(this.props.data[0]['url'])
88
+        if (this.webviewRef !== null)
89
+            this.webviewRef.goForward();
98 90
     }
99 91
 
100
-    onWebviewRef(ref: WebView) {
101
-        this.webviewArray.push(ref)
92
+    onWebviewRef(ref: Object) {
93
+        this.webviewRef = ref
102 94
     }
103 95
 
104 96
     getRenderLoading() {
105 97
         return (
106 98
             <View style={{
107
-                backgroundColor: ThemeManager.getCurrentThemeVariables().background,
99
+                backgroundColor: this.colors.background,
108 100
                 position: 'absolute',
109 101
                 top: 0,
110 102
                 right: 0,
@@ -117,34 +109,28 @@ export default class WebViewScreen extends React.Component<Props> {
117 109
                 <ActivityIndicator
118 110
                     animating={true}
119 111
                     size={'large'}
120
-                    color={ThemeManager.getCurrentThemeVariables().primary}/>
112
+                    color={this.colors.primary}/>
121 113
             </View>
122 114
         );
123 115
     }
124 116
 
125
-    getWebview(obj: Object) {
117
+    render() {
118
+        // console.log("rendering WebViewScreen");
126 119
         return (
127 120
             <WebView
128 121
                 ref={this.onWebviewRef}
129
-                source={{uri: obj['url']}}
122
+                source={{uri: this.props.data[0]['url']}}
130 123
                 style={{
131 124
                     width: '100%',
132 125
                     height: '100%',
133 126
                 }}
134 127
                 startInLoadingState={true}
135
-                injectedJavaScript={obj['customJS']}
128
+                injectedJavaScript={this.props.data[0]['customJS']}
136 129
                 javaScriptEnabled={true}
137 130
                 renderLoading={this.getRenderLoading}
138 131
             />
139 132
         );
140 133
     }
141
-
142
-    render() {
143
-        // console.log("rendering WebViewScreen");
144
-        this.webviewArray = [];
145
-        return (
146
-            this.getWebview(this.props.data[0])
147
-        );
148
-    }
149 134
 }
150 135
 
136
+export default withTheme(WebViewScreen);

+ 10
- 6
screens/About/AboutScreen.js View File

@@ -6,8 +6,7 @@ import i18n from "i18n-js";
6 6
 import appJson from '../../app';
7 7
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
8 8
 import CustomModal from "../../components/CustomModal";
9
-import ThemeManager from "../../utils/ThemeManager";
10
-import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper';
9
+import {Avatar, Button, Card, List, Text, Title, withTheme} from 'react-native-paper';
11 10
 
12 11
 const links = {
13 12
     appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
@@ -59,7 +58,7 @@ function openWebLink(link) {
59 58
 /**
60 59
  * Class defining an about screen. This screen shows the user information about the app and it's author.
61 60
  */
62
-export default class AboutScreen extends React.Component<Props, State> {
61
+class AboutScreen extends React.Component<Props, State> {
63 62
 
64 63
     debugTapCounter = 0;
65 64
     modalRef: Object;
@@ -188,11 +187,14 @@ export default class AboutScreen extends React.Component<Props, State> {
188 187
     getMainCard: Function;
189 188
     onModalRef: Function;
190 189
 
191
-    constructor(props: any) {
190
+    colors: object;
191
+
192
+    constructor(props) {
192 193
         super(props);
193 194
         this.getCardItem = this.getCardItem.bind(this);
194 195
         this.getMainCard = this.getMainCard.bind(this);
195 196
         this.onModalRef = this.onModalRef.bind(this);
197
+        this.colors = props.theme.colors;
196 198
     }
197 199
 
198 200
     getAppCard() {
@@ -326,7 +328,7 @@ export default class AboutScreen extends React.Component<Props, State> {
326 328
                     icon="email"
327 329
                     mode="contained"
328 330
                     dark={true}
329
-                    color={ThemeManager.getCurrentThemeVariables().primary}
331
+                    color={this.colors.primary}
330 332
                     style={{
331 333
                         marginTop: 20,
332 334
                         marginLeft: 'auto',
@@ -339,7 +341,7 @@ export default class AboutScreen extends React.Component<Props, State> {
339 341
                     icon="git"
340 342
                     mode="contained"
341 343
                     dark={true}
342
-                    color={ThemeManager.getCurrentThemeVariables().primary}
344
+                    color={this.colors.primary}
343 345
                     style={{
344 346
                         marginTop: 20,
345 347
                         marginLeft: 'auto',
@@ -391,3 +393,5 @@ export default class AboutScreen extends React.Component<Props, State> {
391 393
         );
392 394
     }
393 395
 }
396
+
397
+export default withTheme(AboutScreen);

+ 10
- 6
screens/About/DebugScreen.js View File

@@ -1,12 +1,11 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import ThemeManager from '../../utils/ThemeManager';
5 4
 import {Alert, Clipboard, ScrollView, View} from "react-native";
6 5
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
7 6
 import NotificationsManager from "../../utils/NotificationsManager";
8 7
 import CustomModal from "../../components/CustomModal";
9
-import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
8
+import {Button, Card, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
10 9
 
11 10
 type Props = {
12 11
     navigation: Object,
@@ -20,7 +19,7 @@ type State = {
20 19
 /**
21 20
  * Class defining the Debug screen. This screen allows the user to get detailed information on the app/device.
22 21
  */
23
-export default class DebugScreen extends React.Component<Props, State> {
22
+class DebugScreen extends React.Component<Props, State> {
24 23
 
25 24
     modalRef: Object;
26 25
     modalInputValue = '';
@@ -31,9 +30,12 @@ export default class DebugScreen extends React.Component<Props, State> {
31 30
 
32 31
     onModalRef: Function;
33 32
 
34
-    constructor(props: any) {
33
+    colors: Object;
34
+
35
+    constructor(props) {
35 36
         super(props);
36 37
         this.onModalRef = this.onModalRef.bind(this);
38
+        this.colors = props.theme.colors;
37 39
     }
38 40
 
39 41
     static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
@@ -103,14 +105,14 @@ export default class DebugScreen extends React.Component<Props, State> {
103 105
                     <Button
104 106
                         mode="contained"
105 107
                         dark={true}
106
-                        color={ThemeManager.getCurrentThemeVariables().success}
108
+                        color={this.colors.success}
107 109
                         onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
108 110
                         Save new value
109 111
                     </Button>
110 112
                     <Button
111 113
                         mode="contained"
112 114
                         dark={true}
113
-                        color={ThemeManager.getCurrentThemeVariables().danger}
115
+                        color={this.colors.danger}
114 116
                         onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
115 117
                         Reset to default
116 118
                     </Button>
@@ -166,3 +168,5 @@ export default class DebugScreen extends React.Component<Props, State> {
166 168
         );
167 169
     }
168 170
 }
171
+
172
+export default withTheme(DebugScreen);

+ 15
- 10
screens/HomeScreen.js View File

@@ -3,11 +3,10 @@
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5 5
 import i18n from "i18n-js";
6
-import ThemeManager from "../utils/ThemeManager";
7 6
 import DashboardItem from "../components/EventDashboardItem";
8 7
 import * as WebBrowser from 'expo-web-browser';
9 8
 import WebSectionList from "../components/WebSectionList";
10
-import {Text} from 'react-native-paper';
9
+import {Text, withTheme} from 'react-native-paper';
11 10
 import FeedItem from "../components/FeedItem";
12 11
 import SquareDashboardItem from "../components/SquareDashboardItem";
13 12
 import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem";
@@ -26,12 +25,13 @@ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
26 25
 
27 26
 type Props = {
28 27
     navigation: Object,
28
+    theme: Object,
29 29
 }
30 30
 
31 31
 /**
32 32
  * Class defining the app's home screen
33 33
  */
34
-export default class HomeScreen extends React.Component<Props> {
34
+class HomeScreen extends React.Component<Props> {
35 35
 
36 36
     onProxiwashClick: Function;
37 37
     onTutorInsaClick: Function;
@@ -40,14 +40,17 @@ export default class HomeScreen extends React.Component<Props> {
40 40
     getRenderItem: Function;
41 41
     createDataset: Function;
42 42
 
43
-    constructor() {
44
-        super();
43
+    colors : Object;
44
+
45
+    constructor(props) {
46
+        super(props);
45 47
         this.onProxiwashClick = this.onProxiwashClick.bind(this);
46 48
         this.onTutorInsaClick = this.onTutorInsaClick.bind(this);
47 49
         this.onMenuClick = this.onMenuClick.bind(this);
48 50
         this.onProximoClick = this.onProximoClick.bind(this);
49 51
         this.getRenderItem = this.getRenderItem.bind(this);
50 52
         this.createDataset = this.createDataset.bind(this);
53
+        this.colors = props.theme.colors;
51 54
     }
52 55
 
53 56
     /**
@@ -338,35 +341,35 @@ export default class HomeScreen extends React.Component<Props> {
338 341
                 margin: 10,
339 342
             }}>
340 343
                 <SquareDashboardItem
341
-                    color={ThemeManager.getCurrentThemeVariables().proxiwashColor}
344
+                    color={this.colors.proxiwashColor}
342 345
                     icon={'washing-machine'}
343 346
                     clickAction={this.onProxiwashClick}
344 347
                     isAvailable={parseInt(proxiwashData['washers']) > 0}
345 348
                     badgeNumber={proxiwashData['washers']}
346 349
                 />
347 350
                 <SquareDashboardItem
348
-                    color={ThemeManager.getCurrentThemeVariables().proxiwashColor}
351
+                    color={this.colors.proxiwashColor}
349 352
                     icon={'tumble-dryer'}
350 353
                     clickAction={this.onProxiwashClick}
351 354
                     isAvailable={parseInt(proxiwashData['dryers']) > 0}
352 355
                     badgeNumber={proxiwashData['dryers']}
353 356
                 />
354 357
                 <SquareDashboardItem
355
-                    color={ThemeManager.getCurrentThemeVariables().tutorinsaColor}
358
+                    color={this.colors.tutorinsaColor}
356 359
                     icon={'school'}
357 360
                     clickAction={this.onTutorInsaClick}
358 361
                     isAvailable={tutorinsaData > 0}
359 362
                     badgeNumber={tutorinsaData}
360 363
                 />
361 364
                 <SquareDashboardItem
362
-                    color={ThemeManager.getCurrentThemeVariables().proximoColor}
365
+                    color={this.colors.proximoColor}
363 366
                     icon={'shopping'}
364 367
                     clickAction={this.onProximoClick}
365 368
                     isAvailable={parseInt(proximoData) > 0}
366 369
                     badgeNumber={parseInt(proximoData)}
367 370
                 />
368 371
                 <SquareDashboardItem
369
-                    color={ThemeManager.getCurrentThemeVariables().menuColor}
372
+                    color={this.colors.menuColor}
370 373
                     icon={'silverware-fork-knife'}
371 374
                     clickAction={this.onMenuClick}
372 375
                     isAvailable={menuData.length > 0}
@@ -413,3 +416,5 @@ export default class HomeScreen extends React.Component<Props> {
413 416
         );
414 417
     }
415 418
 }
419
+
420
+export default withTheme(HomeScreen);

+ 13
- 4
screens/Planning/PlanningDisplayScreen.js View File

@@ -6,7 +6,7 @@ import ThemeManager from "../../utils/ThemeManager";
6 6
 import HTML from "react-native-render-html";
7 7
 import {Linking} from "expo";
8 8
 import PlanningEventManager from '../../utils/PlanningEventManager';
9
-import {Card} from 'react-native-paper';
9
+import {Card, withTheme} from 'react-native-paper';
10 10
 
11 11
 type Props = {
12 12
     navigation: Object,
@@ -20,10 +20,17 @@ function openWebLink(event, link) {
20 20
 /**
21 21
  * Class defining an about screen. This screen shows the user information about the app and it's author.
22 22
  */
23
-export default class PlanningDisplayScreen extends React.Component<Props> {
23
+class PlanningDisplayScreen extends React.Component<Props> {
24 24
 
25 25
     displayData = this.props.route.params['data'];
26 26
 
27
+    colors: Object;
28
+
29
+    constructor(props) {
30
+        super(props);
31
+        this.colors = props.theme.colors;
32
+    }
33
+
27 34
     render() {
28 35
         // console.log("rendering planningDisplayScreen");
29 36
         return (
@@ -44,8 +51,8 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
44 51
                     <Card.Content>
45 52
                         <HTML html={"<div>" + this.displayData.description + "</div>"}
46 53
                               tagsStyles={{
47
-                                  p: {color: ThemeManager.getCurrentThemeVariables().text,},
48
-                                  div: {color: ThemeManager.getCurrentThemeVariables().text}
54
+                                  p: {color: this.colors.text,},
55
+                                  div: {color: this.colors.text}
49 56
                               }}
50 57
                               onLinkPress={openWebLink}/>
51 58
                     </Card.Content>
@@ -54,3 +61,5 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
54 61
         );
55 62
     }
56 63
 }
64
+
65
+export default withTheme(PlanningDisplayScreen);

+ 1
- 1
screens/Proximo/ProximoAboutScreen.js View File

@@ -3,7 +3,7 @@
3 3
 import * as React from 'react';
4 4
 import {Image, ScrollView, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6
-import {Text, Card, List, Paragraph} from 'react-native-paper';
6
+import {Card, List, Paragraph, Text} from 'react-native-paper';
7 7
 
8 8
 type Props = {
9 9
     navigation: Object,

+ 13
- 9
screens/Proximo/ProximoListScreen.js View File

@@ -3,9 +3,8 @@
3 3
 import * as React from 'react';
4 4
 import {FlatList, Image, ScrollView, View} from "react-native";
5 5
 import i18n from "i18n-js";
6
-import ThemeManager from "../../utils/ThemeManager";
7 6
 import CustomModal from "../../components/CustomModal";
8
-import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
7
+import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
9 8
 
10 9
 function sortPrice(a, b) {
11 10
     return a.price - b.price;
@@ -45,7 +44,7 @@ type State = {
45 44
 /**
46 45
  * Class defining proximo's article list of a certain category.
47 46
  */
48
-export default class ProximoListScreen extends React.Component<Props, State> {
47
+class ProximoListScreen extends React.Component<Props, State> {
49 48
 
50 49
     modalRef: Object;
51 50
     originalData: Array<Object>;
@@ -56,7 +55,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
56 55
     renderItem: Function;
57 56
     onModalRef: Function;
58 57
 
59
-    constructor(props: any) {
58
+    colors: Object;
59
+
60
+    constructor(props) {
60 61
         super(props);
61 62
         this.originalData = this.props.route.params['data']['data'];
62 63
         this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
@@ -70,6 +71,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
70 71
         this.onSortMenuPress = this.onSortMenuPress.bind(this);
71 72
         this.renderItem = this.renderItem.bind(this);
72 73
         this.onModalRef = this.onModalRef.bind(this);
74
+        this.colors = props.theme.colors;
73 75
     }
74 76
 
75 77
 
@@ -133,11 +135,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
133 135
     getStockColor(availableStock: number) {
134 136
         let color: string;
135 137
         if (availableStock > 3)
136
-            color = ThemeManager.getCurrentThemeVariables().success;
138
+            color = this.colors.success;
137 139
         else if (availableStock > 0)
138
-            color = ThemeManager.getCurrentThemeVariables().warning;
140
+            color = this.colors.warning;
139 141
         else
140
-            color = ThemeManager.getCurrentThemeVariables().danger;
142
+            color = this.colors.danger;
141 143
         return color;
142 144
     }
143 145
 
@@ -270,7 +272,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
270 272
         return (
271 273
             <IconButton
272 274
                 icon="sort"
273
-                color={ThemeManager.getCurrentThemeVariables().text}
275
+                color={this.colors.text}
274 276
                 size={26}
275 277
                 onPress={this.onSortMenuPress}
276 278
             />
@@ -286,7 +288,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
286 288
                 descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
287 289
                 onPress={onPress}
288 290
                 left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
289
-                                             source={{uri: item.image}}/>}
291
+                                          source={{uri: item.image}}/>}
290 292
                 right={() =>
291 293
                     <Text style={{fontWeight: "bold"}}>
292 294
                         {item.price}€
@@ -322,3 +324,5 @@ export default class ProximoListScreen extends React.Component<Props, State> {
322 324
         );
323 325
     }
324 326
 }
327
+
328
+export default withTheme(ProximoListScreen);

+ 9
- 6
screens/Proximo/ProximoMainScreen.js View File

@@ -3,9 +3,8 @@
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native'
5 5
 import i18n from "i18n-js";
6
-import ThemeManager from "../../utils/ThemeManager";
7 6
 import WebSectionList from "../../components/WebSectionList";
8
-import {IconButton, List} from 'react-native-paper';
7
+import {List, withTheme} from 'react-native-paper';
9 8
 import HeaderButton from "../../components/HeaderButton";
10 9
 
11 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
@@ -22,7 +21,7 @@ type State = {
22 21
  * Class defining the main proximo screen. This screen shows the different categories of articles
23 22
  * offered by proximo.
24 23
  */
25
-export default class ProximoMainScreen extends React.Component<Props, State> {
24
+class ProximoMainScreen extends React.Component<Props, State> {
26 25
 
27 26
     articles: Object;
28 27
 
@@ -31,12 +30,15 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
31 30
     getRenderItem: Function;
32 31
     createDataset: Function;
33 32
 
34
-    constructor() {
35
-        super();
33
+    colors: Object;
34
+
35
+    constructor(props) {
36
+        super(props);
36 37
         this.onPressSearchBtn = this.onPressSearchBtn.bind(this);
37 38
         this.onPressAboutBtn = this.onPressAboutBtn.bind(this);
38 39
         this.getRenderItem = this.getRenderItem.bind(this);
39 40
         this.createDataset = this.createDataset.bind(this);
41
+        this.colors = props.theme.colors;
40 42
     }
41 43
 
42 44
     static sortFinalData(a: Object, b: Object) {
@@ -180,7 +182,7 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
180 182
                     left={props => <List.Icon
181 183
                         {...props}
182 184
                         icon={item.type.icon}
183
-                        color={ThemeManager.getCurrentThemeVariables().primary}/>}
185
+                        color={this.colors.primary}/>}
184 186
                     right={props => <List.Icon {...props} icon={'chevron-right'}/>}
185 187
                 />
186 188
             );
@@ -202,3 +204,4 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
202 204
     }
203 205
 }
204 206
 
207
+export default withTheme(ProximoMainScreen);

+ 1
- 1
screens/Proxiwash/ProxiwashAboutScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Image, View, ScrollView} from 'react-native';
4
+import {Image, ScrollView, View} from 'react-native';
5 5
 import i18n from "i18n-js";
6 6
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
7 7
 

+ 46
- 42
screens/Proxiwash/ProxiwashScreen.js View File

@@ -7,12 +7,11 @@ import WebSectionList from "../../components/WebSectionList";
7 7
 import NotificationsManager from "../../utils/NotificationsManager";
8 8
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
9 9
 import * as Expo from "expo";
10
-import {Avatar, Banner, Button, Card, Text} from 'react-native-paper';
10
+import {Avatar, Banner, Button, Card, Text, withTheme} from 'react-native-paper';
11 11
 import HeaderButton from "../../components/HeaderButton";
12 12
 import ProxiwashListItem from "../../components/ProxiwashListItem";
13 13
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
14 14
 import CustomModal from "../../components/CustomModal";
15
-import ThemeManager from "../../utils/ThemeManager";
16 15
 
17 16
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
18 17
 
@@ -24,6 +23,7 @@ const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
24 23
 
25 24
 type Props = {
26 25
     navigation: Object,
26
+    theme: Object,
27 27
 }
28 28
 
29 29
 type State = {
@@ -39,7 +39,7 @@ type State = {
39 39
  * Class defining the app's proxiwash screen. This screen shows information about washing machines and
40 40
  * dryers, taken from a scrapper reading proxiwash website
41 41
  */
42
-export default class ProxiwashScreen extends React.Component<Props, State> {
42
+class ProxiwashScreen extends React.Component<Props, State> {
43 43
 
44 44
     modalRef: Object;
45 45
 
@@ -51,6 +51,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
51 51
     onModalRef: Function;
52 52
 
53 53
     fetchedData: Object;
54
+    colors: Object;
54 55
 
55 56
     state = {
56 57
         refreshing: false,
@@ -65,8 +66,8 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
65 66
     /**
66 67
      * Creates machine state parameters using current theme and translations
67 68
      */
68
-    constructor() {
69
-        super();
69
+    constructor(props) {
70
+        super(props);
70 71
         stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
71 72
         stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
72 73
         stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
@@ -92,6 +93,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
92 93
         this.createDataset = this.createDataset.bind(this);
93 94
         this.onHideBanner = this.onHideBanner.bind(this);
94 95
         this.onModalRef = this.onModalRef.bind(this);
96
+        this.colors = props.theme.colors;
95 97
     }
96 98
 
97 99
     onHideBanner() {
@@ -301,7 +303,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
301 303
                     title={title}
302 304
                     left={() => <Avatar.Icon
303 305
                         icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
304
-                        color={ThemeManager.getCurrentThemeVariables().text}
306
+                        color={this.colors.text}
305 307
                         style={{backgroundColor: 'transparent'}}/>}
306 308
 
307 309
                 />
@@ -338,41 +340,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
338 340
         this.modalRef = ref;
339 341
     }
340 342
 
341
-    render() {
342
-        const nav = this.props.navigation;
343
-        return (
344
-            <View>
345
-                <Banner
346
-                    visible={this.state.bannerVisible}
347
-                    actions={[
348
-                        {
349
-                            label: 'OK',
350
-                            onPress: this.onHideBanner,
351
-                        },
352
-                    ]}
353
-                    icon={() => <Avatar.Icon
354
-                        icon={'information'}
355
-                        size={40}
356
-                    />}
357
-                >
358
-                    {i18n.t('proxiwashScreen.enableNotificationsTip')}
359
-                </Banner>
360
-                <CustomModal onRef={this.onModalRef}>
361
-                    {this.state.modalCurrentDisplayItem}
362
-                </CustomModal>
363
-                <WebSectionList
364
-                    createDataset={this.createDataset}
365
-                    navigation={nav}
366
-                    fetchUrl={DATA_URL}
367
-                    renderItem={this.getRenderItem}
368
-                    renderSectionHeader={this.getRenderSectionHeader}
369
-                    autoRefreshTime={REFRESH_TIME}
370
-                    refreshOnFocus={true}/>
371
-            </View>
372
-
373
-        );
374
-    }
375
-
376 343
     getMachineAvailableNumber(isDryer: boolean) {
377 344
         let data;
378 345
         if (isDryer)
@@ -403,7 +370,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
403 370
                     subtitle={subtitle}
404 371
                     left={() => <Avatar.Icon
405 372
                         icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
406
-                        color={ThemeManager.getCurrentThemeVariables().primary}
373
+                        color={this.colors.primary}
407 374
                         style={{backgroundColor: 'transparent'}}
408 375
                     />}
409 376
                 />
@@ -440,4 +407,41 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
440 407
             />
441 408
         );
442 409
     }
410
+
411
+    render() {
412
+        const nav = this.props.navigation;
413
+        return (
414
+            <View>
415
+                <Banner
416
+                    visible={this.state.bannerVisible}
417
+                    actions={[
418
+                        {
419
+                            label: 'OK',
420
+                            onPress: this.onHideBanner,
421
+                        },
422
+                    ]}
423
+                    icon={() => <Avatar.Icon
424
+                        icon={'information'}
425
+                        size={40}
426
+                    />}
427
+                >
428
+                    {i18n.t('proxiwashScreen.enableNotificationsTip')}
429
+                </Banner>
430
+                <CustomModal onRef={this.onModalRef}>
431
+                    {this.state.modalCurrentDisplayItem}
432
+                </CustomModal>
433
+                <WebSectionList
434
+                    createDataset={this.createDataset}
435
+                    navigation={nav}
436
+                    fetchUrl={DATA_URL}
437
+                    renderItem={this.getRenderItem}
438
+                    renderSectionHeader={this.getRenderSectionHeader}
439
+                    autoRefreshTime={REFRESH_TIME}
440
+                    refreshOnFocus={true}/>
441
+            </View>
442
+
443
+        );
444
+    }
443 445
 }
446
+
447
+export default withTheme(ProxiwashScreen);

+ 8
- 6
screens/SelfMenuScreen.js View File

@@ -2,10 +2,9 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5
-import ThemeManager from "../utils/ThemeManager";
6 5
 import i18n from "i18n-js";
7 6
 import WebSectionList from "../components/WebSectionList";
8
-import {Card, Text} from 'react-native-paper';
7
+import {Card, Text, withTheme} from 'react-native-paper';
9 8
 import AprilFoolsManager from "../utils/AprilFoolsManager";
10 9
 
11 10
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
@@ -18,7 +17,7 @@ type Props = {
18 17
  * Class defining the app's menu screen.
19 18
  * This screen fetches data from etud to render the RU menu
20 19
  */
21
-export default class SelfMenuScreen extends React.Component<Props> {
20
+class SelfMenuScreen extends React.Component<Props> {
22 21
 
23 22
     // Hard code strings as toLocaleDateString does not work on current android JS engine
24 23
     daysOfWeek = [];
@@ -27,9 +26,10 @@ export default class SelfMenuScreen extends React.Component<Props> {
27 26
     getRenderItem: Function;
28 27
     getRenderSectionHeader: Function;
29 28
     createDataset: Function;
29
+    colors: Object;
30 30
 
31
-    constructor() {
32
-        super();
31
+    constructor(props) {
32
+        super(props);
33 33
         this.daysOfWeek.push(i18n.t("date.daysOfWeek.monday"));
34 34
         this.daysOfWeek.push(i18n.t("date.daysOfWeek.tuesday"));
35 35
         this.daysOfWeek.push(i18n.t("date.daysOfWeek.wednesday"));
@@ -54,6 +54,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
54 54
         this.getRenderItem = this.getRenderItem.bind(this);
55 55
         this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
56 56
         this.createDataset = this.createDataset.bind(this);
57
+        this.colors = props.theme.colors;
57 58
     }
58 59
 
59 60
     getKeyExtractor(item: Object) {
@@ -138,7 +139,7 @@ export default class SelfMenuScreen extends React.Component<Props> {
138 139
                     marginLeft: 'auto',
139 140
                     marginRight: 'auto',
140 141
                     borderBottomWidth: 1,
141
-                    borderBottomColor: ThemeManager.getCurrentThemeVariables().primary,
142
+                    borderBottomColor: this.colors.primary,
142 143
                     marginTop: 5,
143 144
                     marginBottom: 5,
144 145
                 }}/>
@@ -178,3 +179,4 @@ export default class SelfMenuScreen extends React.Component<Props> {
178 179
     }
179 180
 }
180 181
 
182
+export default withTheme(SelfMenuScreen);

+ 0
- 8
utils/ThemeManager.js View File

@@ -133,14 +133,6 @@ export default class ThemeManager {
133 133
     }
134 134
 
135 135
     /**
136
-     * Get the variables contained in the current theme
137
-     * @returns {Object}
138
-     */
139
-    static getCurrentThemeVariables(): Object {
140
-        return ThemeManager.getCurrentTheme().colors;
141
-    }
142
-
143
-    /**
144 136
      * Set the function to be called when the theme is changed (allows for general reload of the app)
145 137
      * @param callback Function to call after theme change
146 138
      */

Loading…
Cancel
Save