Browse Source

Update services screens to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
38afbf02a3

src/screens/Services/SelfMenuScreen.js → src/screens/Services/SelfMenuScreen.tsx View File

17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
  */
18
  */
19
 
19
 
20
-// @flow
21
-
22
 import * as React from 'react';
20
 import * as React from 'react';
23
 import {View} from 'react-native';
21
 import {View} from 'react-native';
24
 import {Card, Text, withTheme} from 'react-native-paper';
22
 import {Card, Text, withTheme} from 'react-native-paper';
26
 import i18n from 'i18n-js';
24
 import i18n from 'i18n-js';
27
 import DateManager from '../../managers/DateManager';
25
 import DateManager from '../../managers/DateManager';
28
 import WebSectionList from '../../components/Screens/WebSectionList';
26
 import WebSectionList from '../../components/Screens/WebSectionList';
29
-import type {CustomThemeType} from '../../managers/ThemeManager';
30
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
27
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
31
 
28
 
32
 const DATA_URL =
29
 const DATA_URL =
33
   'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json';
30
   'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json';
34
 
31
 
35
 type PropsType = {
32
 type PropsType = {
36
-  navigation: StackNavigationProp,
37
-  theme: CustomThemeType,
33
+  navigation: StackNavigationProp<any>;
34
+  theme: ReactNativePaper.Theme;
38
 };
35
 };
39
 
36
 
40
 export type RuFoodCategoryType = {
37
 export type RuFoodCategoryType = {
41
-  name: string,
42
-  dishes: Array<{name: string}>,
38
+  name: string;
39
+  dishes: Array<{name: string}>;
43
 };
40
 };
44
 
41
 
45
 type RuMealType = {
42
 type RuMealType = {
46
-  name: string,
47
-  foodcategory: Array<RuFoodCategoryType>,
43
+  name: string;
44
+  foodcategory: Array<RuFoodCategoryType>;
48
 };
45
 };
49
 
46
 
50
 type RawRuMenuType = {
47
 type RawRuMenuType = {
51
-  restaurant_id: number,
52
-  id: number,
53
-  date: string,
54
-  meal: Array<RuMealType>,
48
+  restaurant_id: number;
49
+  id: number;
50
+  date: string;
51
+  meal: Array<RuMealType>;
55
 };
52
 };
56
 
53
 
57
 /**
54
 /**
77
   createDataset = (
74
   createDataset = (
78
     fetchedData: Array<RawRuMenuType>,
75
     fetchedData: Array<RawRuMenuType>,
79
   ): SectionListDataType<RuFoodCategoryType> => {
76
   ): SectionListDataType<RuFoodCategoryType> => {
80
-    let result = [];
77
+    let result: SectionListDataType<RuFoodCategoryType> = [];
81
     if (fetchedData == null || fetchedData.length === 0) {
78
     if (fetchedData == null || fetchedData.length === 0) {
82
       result = [
79
       result = [
83
         {
80
         {
104
    * @param section The section to render the header from
101
    * @param section The section to render the header from
105
    * @return {*}
102
    * @return {*}
106
    */
103
    */
107
-  getRenderSectionHeader = ({
108
-    section,
109
-  }: {
110
-    section: {title: string},
111
-  }): React.Node => {
104
+  getRenderSectionHeader = ({section}: {section: {title: string}}) => {
112
     return (
105
     return (
113
       <Card
106
       <Card
114
         style={{
107
         style={{
141
    * @param item The item to render
134
    * @param item The item to render
142
    * @return {*}
135
    * @return {*}
143
    */
136
    */
144
-  getRenderItem = ({item}: {item: RuFoodCategoryType}): React.Node => {
137
+  getRenderItem = ({item}: {item: RuFoodCategoryType}) => {
145
     const {theme} = this.props;
138
     const {theme} = this.props;
146
     return (
139
     return (
147
       <Card
140
       <Card
163
           }}
156
           }}
164
         />
157
         />
165
         <Card.Content>
158
         <Card.Content>
166
-          {item.dishes.map((object: {name: string}): React.Node =>
159
+          {item.dishes.map((object: {name: string}) =>
167
             object.name !== '' ? (
160
             object.name !== '' ? (
168
               <Text
161
               <Text
169
                 style={{
162
                 style={{
188
    */
181
    */
189
   getKeyExtractor = (item: RuFoodCategoryType): string => item.name;
182
   getKeyExtractor = (item: RuFoodCategoryType): string => item.name;
190
 
183
 
191
-  render(): React.Node {
184
+  render() {
192
     const {navigation} = this.props;
185
     const {navigation} = this.props;
193
     return (
186
     return (
194
       <WebSectionList
187
       <WebSectionList

src/screens/Services/ServicesScreen.js → src/screens/Services/ServicesScreen.tsx View File

17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
  */
18
  */
19
 
19
 
20
-// @flow
21
-
22
 import * as React from 'react';
20
 import * as React from 'react';
23
 import {Image, View} from 'react-native';
21
 import {Image, View} from 'react-native';
24
 import {
22
 import {
32
 import i18n from 'i18n-js';
30
 import i18n from 'i18n-js';
33
 import {StackNavigationProp} from '@react-navigation/stack';
31
 import {StackNavigationProp} from '@react-navigation/stack';
34
 import CardList from '../../components/Lists/CardList/CardList';
32
 import CardList from '../../components/Lists/CardList/CardList';
35
-import type {CustomThemeType} from '../../managers/ThemeManager';
36
 import MaterialHeaderButtons, {
33
 import MaterialHeaderButtons, {
37
   Item,
34
   Item,
38
 } from '../../components/Overrides/CustomHeaderButton';
35
 } from '../../components/Overrides/CustomHeaderButton';
46
 import type {ServiceCategoryType} from '../../managers/ServicesManager';
43
 import type {ServiceCategoryType} from '../../managers/ServicesManager';
47
 
44
 
48
 type PropsType = {
45
 type PropsType = {
49
-  navigation: StackNavigationProp,
50
-  theme: CustomThemeType,
46
+  navigation: StackNavigationProp<any>;
47
+  theme: ReactNativePaper.Theme;
51
 };
48
 };
52
 
49
 
53
 class ServicesScreen extends React.Component<PropsType> {
50
 class ServicesScreen extends React.Component<PropsType> {
68
     });
65
     });
69
   }
66
   }
70
 
67
 
71
-  getAboutButton = (): React.Node => (
68
+  getAboutButton = () => (
72
     <MaterialHeaderButtons>
69
     <MaterialHeaderButtons>
73
       <Item
70
       <Item
74
         title="information"
71
         title="information"
92
    * @param source The source image to display. Can be a string for icons or a number for local images
89
    * @param source The source image to display. Can be a string for icons or a number for local images
93
    * @returns {*}
90
    * @returns {*}
94
    */
91
    */
95
-  getListTitleImage(source: string | number): React.Node {
92
+  getListTitleImage(source: string | number) {
96
     const {props} = this;
93
     const {props} = this;
97
-    if (typeof source === 'number')
94
+    if (typeof source === 'number') {
98
       return (
95
       return (
99
         <Image
96
         <Image
100
-          size={48}
101
           source={source}
97
           source={source}
102
           style={{
98
           style={{
103
             width: 48,
99
             width: 48,
105
           }}
101
           }}
106
         />
102
         />
107
       );
103
       );
104
+    }
108
     return (
105
     return (
109
       <Avatar.Icon
106
       <Avatar.Icon
110
         size={48}
107
         size={48}
121
    * @param item
118
    * @param item
122
    * @returns {*}
119
    * @returns {*}
123
    */
120
    */
124
-  getRenderItem = ({item}: {item: ServiceCategoryType}): React.Node => {
121
+  getRenderItem = ({item}: {item: ServiceCategoryType}) => {
125
     const {props} = this;
122
     const {props} = this;
126
     return (
123
     return (
127
       <TouchableRipple
124
       <TouchableRipple
136
           <Card.Title
133
           <Card.Title
137
             title={item.title}
134
             title={item.title}
138
             subtitle={item.subtitle}
135
             subtitle={item.subtitle}
139
-            left={(): React.Node => this.getListTitleImage(item.image)}
140
-            right={(): React.Node => <List.Icon icon="chevron-right" />}
136
+            left={() => this.getListTitleImage(item.image)}
137
+            right={() => <List.Icon icon="chevron-right" />}
141
           />
138
           />
142
           <CardList dataset={item.content} isHorizontal />
139
           <CardList dataset={item.content} isHorizontal />
143
         </View>
140
         </View>
147
 
144
 
148
   keyExtractor = (item: ServiceCategoryType): string => item.title;
145
   keyExtractor = (item: ServiceCategoryType): string => item.title;
149
 
146
 
150
-  render(): React.Node {
147
+  render() {
151
     return (
148
     return (
152
       <View>
149
       <View>
153
         <CollapsibleFlatList
150
         <CollapsibleFlatList
154
           data={this.finalDataset}
151
           data={this.finalDataset}
155
           renderItem={this.getRenderItem}
152
           renderItem={this.getRenderItem}
156
           keyExtractor={this.keyExtractor}
153
           keyExtractor={this.keyExtractor}
157
-          ItemSeparatorComponent={(): React.Node => <Divider />}
154
+          ItemSeparatorComponent={() => <Divider />}
158
           hasTab
155
           hasTab
159
         />
156
         />
160
         <MascotPopup
157
         <MascotPopup
163
           message={i18n.t('screens.services.mascotDialog.message')}
160
           message={i18n.t('screens.services.mascotDialog.message')}
164
           icon="cloud-question"
161
           icon="cloud-question"
165
           buttons={{
162
           buttons={{
166
-            action: null,
167
             cancel: {
163
             cancel: {
168
               message: i18n.t('screens.services.mascotDialog.button'),
164
               message: i18n.t('screens.services.mascotDialog.button'),
169
               icon: 'check',
165
               icon: 'check',

src/screens/Services/ServicesSectionScreen.js → src/screens/Services/ServicesSectionScreen.tsx View File

17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
  */
18
  */
19
 
19
 
20
-// @flow
21
-
22
 import * as React from 'react';
20
 import * as React from 'react';
23
 import {Collapsible} from 'react-navigation-collapsible';
21
 import {Collapsible} from 'react-navigation-collapsible';
24
 import {CommonActions} from '@react-navigation/native';
22
 import {CommonActions} from '@react-navigation/native';
25
 import {StackNavigationProp} from '@react-navigation/stack';
23
 import {StackNavigationProp} from '@react-navigation/stack';
26
 import CardList from '../../components/Lists/CardList/CardList';
24
 import CardList from '../../components/Lists/CardList/CardList';
27
-import CustomTabBar from '../../components/Tabbar/CustomTabBar';
28
-import withCollapsible from '../../utils/withCollapsible';
29
 import type {ServiceCategoryType} from '../../managers/ServicesManager';
25
 import type {ServiceCategoryType} from '../../managers/ServicesManager';
30
 
26
 
31
 type PropsType = {
27
 type PropsType = {
32
-  navigation: StackNavigationProp,
33
-  route: {params: {data: ServiceCategoryType | null}},
34
-  collapsibleStack: Collapsible,
28
+  navigation: StackNavigationProp<any>;
29
+  route: {params: {data: ServiceCategoryType | null}};
30
+  collapsibleStack: Collapsible;
35
 };
31
 };
36
 
32
 
37
 class ServicesSectionScreen extends React.Component<PropsType> {
33
 class ServicesSectionScreen extends React.Component<PropsType> {
38
-  finalDataset: ServiceCategoryType;
34
+  finalDataset: null | ServiceCategoryType;
39
 
35
 
40
   constructor(props: PropsType) {
36
   constructor(props: PropsType) {
41
     super(props);
37
     super(props);
38
+    this.finalDataset = null;
42
     this.handleNavigationParams();
39
     this.handleNavigationParams();
43
   }
40
   }
44
 
41
 
47
    */
44
    */
48
   handleNavigationParams() {
45
   handleNavigationParams() {
49
     const {props} = this;
46
     const {props} = this;
50
-    if (props.route.params != null) {
51
-      if (props.route.params.data != null) {
52
-        this.finalDataset = props.route.params.data;
53
-        // reset params to prevent infinite loop
54
-        props.navigation.dispatch(CommonActions.setParams({data: null}));
55
-        props.navigation.setOptions({
56
-          headerTitle: this.finalDataset.title,
57
-        });
58
-      }
47
+    if (props.route.params.data) {
48
+      this.finalDataset = props.route.params.data;
49
+      // reset params to prevent infinite loop
50
+      props.navigation.dispatch(CommonActions.setParams({data: null}));
51
+      props.navigation.setOptions({
52
+        headerTitle: this.finalDataset.title,
53
+      });
59
     }
54
     }
60
   }
55
   }
61
 
56
 
62
-  render(): React.Node {
63
-    const {props} = this;
64
-    const {
65
-      containerPaddingTop,
66
-      scrollIndicatorInsetTop,
67
-      onScroll,
68
-    } = props.collapsibleStack;
57
+  render() {
58
+    if (!this.finalDataset) {
59
+      return null;
60
+    }
69
     return (
61
     return (
70
-      <CardList
71
-        dataset={this.finalDataset.content}
72
-        isHorizontal={false}
73
-        onScroll={onScroll}
74
-        contentContainerStyle={{
75
-          paddingTop: containerPaddingTop,
76
-          paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20,
77
-        }}
78
-        scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
79
-      />
62
+      <CardList dataset={this.finalDataset.content} isHorizontal={false} />
80
     );
63
     );
81
   }
64
   }
82
 }
65
 }
83
 
66
 
84
-export default withCollapsible(ServicesSectionScreen);
67
+export default ServicesSectionScreen;

src/screens/Services/WebsiteScreen.js → src/screens/Services/WebsiteScreen.tsx View File

17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
  */
18
  */
19
 
19
 
20
-// @flow
21
-
22
 import * as React from 'react';
20
 import * as React from 'react';
23
 import {StackNavigationProp} from '@react-navigation/stack';
21
 import {StackNavigationProp} from '@react-navigation/stack';
24
 import WebViewScreen from '../../components/Screens/WebViewScreen';
22
 import WebViewScreen from '../../components/Screens/WebViewScreen';
26
 import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
24
 import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
27
 
25
 
28
 type PropsType = {
26
 type PropsType = {
29
-  navigation: StackNavigationProp,
30
-  route: {params: {host: string, path: string | null, title: string}},
27
+  navigation: StackNavigationProp<any>;
28
+  route: {params: {host: string; path: string | null; title: string}};
31
 };
29
 };
32
 
30
 
33
-const ENABLE_MOBILE_STRING = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
31
+const ENABLE_MOBILE_STRING =
32
+  '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
34
 
33
 
35
-const AVAILABLE_ROOMS_STYLE = `<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>`;
36
-const BIB_STYLE = `<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>`;
34
+const AVAILABLE_ROOMS_STYLE =
35
+  '<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>';
36
+const BIB_STYLE =
37
+  '<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>';
37
 
38
 
38
 const BIB_BACK_BUTTON =
39
 const BIB_BACK_BUTTON =
39
-  `<div style='width: 100%; display: flex'>` +
40
+  "<div style='width: 100%; display: flex'>" +
40
   `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
41
   `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
41
-  `<button id='customBackButton' class='btn btn-primary'>Retour</button>` +
42
-  `</a>` +
43
-  `</div>`;
42
+  "<button id='customBackButton' class='btn btn-primary'>Retour</button>" +
43
+  '</a>' +
44
+  '</div>';
44
 
45
 
45
 class WebsiteScreen extends React.Component<PropsType> {
46
 class WebsiteScreen extends React.Component<PropsType> {
46
   fullUrl: string;
47
   fullUrl: string;
53
 
54
 
54
   constructor(props: PropsType) {
55
   constructor(props: PropsType) {
55
     super(props);
56
     super(props);
57
+    this.fullUrl = '';
58
+    this.host = '';
56
     props.navigation.addListener('focus', this.onScreenFocus);
59
     props.navigation.addListener('focus', this.onScreenFocus);
57
     this.injectedJS = {};
60
     this.injectedJS = {};
58
     this.customPaddingFunctions = {};
61
     this.customPaddingFunctions = {};
63
     this.injectedJS[AvailableWebsites.websites.BIB] =
66
     this.injectedJS[AvailableWebsites.websites.BIB] =
64
       `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
67
       `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
65
       `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
68
       `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
66
-      `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` +
69
+      'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
67
       `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
70
       `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
68
 
71
 
69
     this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
72
     this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
72
       return (
75
       return (
73
         `$('head').append('${ENABLE_MOBILE_STRING}');` +
76
         `$('head').append('${ENABLE_MOBILE_STRING}');` +
74
         `$('.minwidth').css('top', ${padding}` +
77
         `$('.minwidth').css('top', ${padding}` +
75
-        `$('#mailview-bottom').css('min-height', 500);`
78
+        "$('#mailview-bottom').css('min-height', 500);"
76
       );
79
       );
77
     };
80
     };
78
     this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
81
     this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
103
       if (this.host != null && path != null) {
106
       if (this.host != null && path != null) {
104
         path = path.replace(this.host, '');
107
         path = path.replace(this.host, '');
105
         this.fullUrl = this.host + path;
108
         this.fullUrl = this.host + path;
106
-      } else this.fullUrl = this.host;
109
+      } else {
110
+        this.fullUrl = this.host;
111
+      }
107
 
112
 
108
-      if (title != null) navigation.setOptions({title});
113
+      if (title != null) {
114
+        navigation.setOptions({title});
115
+      }
109
     }
116
     }
110
   }
117
   }
111
 
118
 
112
-  render(): React.Node {
119
+  render() {
113
     const {navigation} = this.props;
120
     const {navigation} = this.props;
114
     let injectedJavascript = '';
121
     let injectedJavascript = '';
115
     let customPadding = null;
122
     let customPadding = null;
116
-    if (this.host != null && this.injectedJS[this.host] != null)
123
+    if (this.host != null && this.injectedJS[this.host] != null) {
117
       injectedJavascript = this.injectedJS[this.host];
124
       injectedJavascript = this.injectedJS[this.host];
118
-    if (this.host != null && this.customPaddingFunctions[this.host] != null)
125
+    }
126
+    if (this.host != null && this.customPaddingFunctions[this.host] != null) {
119
       customPadding = this.customPaddingFunctions[this.host];
127
       customPadding = this.customPaddingFunctions[this.host];
128
+    }
120
 
129
 
121
     if (this.fullUrl != null) {
130
     if (this.fullUrl != null) {
122
       return (
131
       return (

Loading…
Cancel
Save