@plusscommunities/pluss-maintenance-app 6.1.1-beta.0 → 7.0.0-auth.0

package/src/components/MaintenanceList.js

@@ -2,50 +2,46 @@ import React, { Component } from 'react';
 import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
 import _ from 'lodash';
 import { connect } from 'react-redux';
-import { generalActions } from '../apis';
-import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
 import FilterPopupMenu from './FilterPopupMenu';
-import { Components, Colours, Config, Helper } from '../core.config';
+import { Components, Colours, Helper } from '../core.config';
 import { values } from '../values.config';
 
 class MaintenanceList extends Component {
   constructor(props) {
     super(props);
 
-    this.initialStatus = props.hasPermission ? 'Unassigned|In Progress' : '';
-
     this.state = {
       types: [],
       filteredList: props.jobs,
       loading: false,
       searchText: '',
       showFilterPopup: false,
-      selectedStatus: this.initialStatus,
-      selectedType: '',
     };
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.site);
+    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
     this.refreshTypes();
-
     this.resetDataSource();
   }
 
   componentDidUpdate(prevProps) {
     if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
-    if (!_.isEqual(prevProps.jobs, this.props.jobs)) this.resetDataSource();
+    if (!_.isEqual(prevProps.jobs, this.props.jobs) || !_.isEqual(prevProps.jobfilters, this.props.jobfilters)) this.resetDataSource();
   }
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const { selectedStatus, selectedType } = this.state;
-        // console.log('filters', { selectedStatus, selectedType });
-        const res = await generalActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
-        // console.log('refresh', JSON.stringify(res, null, 2));
-        if (selectedStatus !== this.initialStatus || !_.isEmpty(selectedType)) {
+        const { jobfilters } = this.props;
+        const res = await maintenanceActions.getJobsRecursive(this.props.site, jobfilters.status, jobfilters.priority, jobfilters.type);
+        // console.log('refresh', res ? JSON.stringify(res[0], null, 2) : null);
+        if (!_.isEmpty(jobfilters.status) || !_.isEmpty(jobfilters.priority) || !_.isEmpty(jobfilters.type)) {
           this.props.jobsAdded(res);
         } else {
           this.props.jobsLoaded(res);
@@ -59,7 +55,7 @@ class MaintenanceList extends Component {
   };
 
   refreshTypes = async () => {
-    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
     const types = data.map(t => {
       return { label: t.typeName, value: t.typeName };
     });
@@ -73,7 +69,7 @@ class MaintenanceList extends Component {
 
     this.onLoadingChanged(true, async () => {
       try {
-        const job = await generalActions.getJobByJobId(this.props.site, jobId);
+        const job = await maintenanceActions.getJobByJobId(this.props.site, jobId);
         // console.log('fetchJob', job?.data);
         this.props.jobAdded(job.data);
       } catch (error) {
@@ -88,11 +84,12 @@ class MaintenanceList extends Component {
     if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
       return this.props.options.EmptyText;
     }
-    return this.props.userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
+    return this.props.userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
   }
 
   resetDataSource = (source = '') => {
-    const { searchText, selectedStatus, selectedType } = this.state;
+    const { jobfilters } = this.props;
+    const { searchText } = this.state;
     const { jobs } = this.props;
 
     let filteredList = jobs;
@@ -107,8 +104,10 @@ class MaintenanceList extends Component {
       });
       if (!jobIdMatch) this.fetchJob(searchText);
     }
-    if (selectedStatus) filteredList = filteredList.filter(j => selectedStatus.includes(j.status));
-    if (selectedType) filteredList = filteredList.filter(j => selectedType.includes(j.type));
+    if (jobfilters.status) filteredList = filteredList.filter(j => jobfilters.status.includes(j.status));
+    if (jobfilters.priority) filteredList = filteredList.filter(j => jobfilters.priority.includes(j.priority));
+    if (jobfilters.type) filteredList = filteredList.filter(j => jobfilters.type.includes(j.type));
+    if (jobfilters.assignee) filteredList = filteredList.filter(j => jobfilters.assignee.includes(j.AssigneeId));
     if (jobIdMatch) {
       const jobIndex = filteredList.indexOf(jobIdMatch);
       if (jobIndex > -1) {
@@ -143,10 +142,29 @@ class MaintenanceList extends Component {
   };
 
   onSelectFilter = selected => {
-    this.setState({ selectedStatus: selected.status, selectedType: selected.type }, () => {
-      this.resetDataSource();
-      this.onToggleFilter();
-    });
+    this.props.jobsFilterLoaded(selected);
+    this.onToggleFilter();
+  };
+
+  getFilterButtonText = () => {
+    const { jobfilters } = this.props;
+    const filterTexts = [];
+    if (!_.isEmpty(jobfilters.status)) {
+      filterTexts.push(jobfilters.statusText);
+    }
+    if (!_.isEmpty(jobfilters.priority)) {
+      filterTexts.push(jobfilters.priority);
+    }
+    if (!_.isEmpty(jobfilters.type)) {
+      filterTexts.push(jobfilters.type);
+    }
+    if (!_.isEmpty(jobfilters.assignee)) {
+      filterTexts.push(jobfilters.assigneeName);
+    }
+    if (_.isEmpty(filterTexts)) {
+      return 'Filter';
+    }
+    return `Filtering by ${filterTexts.join(', ')}`;
   };
 
   renderEmptyList() {
@@ -157,7 +175,7 @@ class MaintenanceList extends Component {
     return (
       <TouchableOpacity onPress={this.onToggleFilter}>
         <View style={styles.filterButton}>
-          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>Filter</Text>
+          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>{this.getFilterButtonText()}</Text>
         </View>
       </TouchableOpacity>
     );
@@ -169,7 +187,7 @@ class MaintenanceList extends Component {
     return (
       <View style={styles.searchContainer}>
         <Components.GenericInput
-          placeholder="Search by Job ID or Location"
+          placeholder={`Search by ${values.textEntityName} ID or Address`}
           value={this.state.searchText}
           onChangeText={this.onSearchText}
           onSubmitEditing={this.onSearchSubmit}
@@ -186,7 +204,7 @@ class MaintenanceList extends Component {
     const { ListHeaderComponent } = this.props;
     return (
       <View>
-        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 32 }} />}
+        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 8 }} />}
         {this.renderFilterButton()}
         {this.renderSearch()}
       </View>
@@ -211,11 +229,20 @@ class MaintenanceList extends Component {
   }
 
   renderFilterPopup() {
-    const { showFilterPopup, types, selectedStatus, selectedType } = this.state;
+    const { jobfilters } = this.props;
+    const { showFilterPopup, types } = this.state;
     if (!showFilterPopup) return null;
 
     return (
-      <FilterPopupMenu site={this.props.site} types={types} status={selectedStatus} type={selectedType} onClose={this.onSelectFilter} />
+      <FilterPopupMenu
+        site={this.props.site}
+        types={types}
+        status={jobfilters.status}
+        priority={jobfilters.priority}
+        assignee={jobfilters.assignee}
+        type={jobfilters.type}
+        onClose={this.onSelectFilter}
+      />
     );
   }
 
@@ -266,9 +293,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   filterButton: {
-    position: 'absolute',
-    right: 20,
-    top: -32,
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row-reverse',
   },
   filterButtonText: {
     fontFamily: 'sf-semibold',
@@ -289,7 +316,11 @@ const mapStateToProps = state => {
     userCategory: user.category,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
     dataUpdated: notifications.dataUpdated[values.updateKey],
+    statusTypes: state[values.reducerKey].jobstatuses,
+    jobfilters: state[values.reducerKey].jobfilters,
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded }, null, { forwardRef: true })(MaintenanceList);
+export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded }, null, { forwardRef: true })(
+  MaintenanceList,
+);

package/src/components/MaintenanceListItem.js

@@ -1,22 +1,10 @@
 import React, { Component } from 'react';
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import _ from 'lodash';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import { connect } from 'react-redux';
 import moment from 'moment';
-// import {
-//   getShadowStyle,
-//   LINEGREY,
-//   TEXT_DARK,
-//   TEXT_LIGHT,
-//   COLOUR_GREEN,
-//   getMainBrandingColourFromState,
-//   hexToRGBAstring,
-//   getJobStatusProps,
-//   jobStatusOptions,
-// } from '../../js';
-// import NavigationService from '../../js/NavigationService';
-import { getJobStatusProps, jobStatusOptions } from '../helper';
+import { getJobStatus, getJobPriority } from '../helper';
 import { Services } from '../feature.config';
 import { Helper, Colours } from '../core.config';
 import { values } from '../values.config';
@@ -47,9 +35,9 @@ class MaintenanceListItem extends Component {
   }
 
   renderSeen() {
-    const { job } = this.props;
-    const showSeen = !job.status || job.status === jobStatusOptions[0].name;
-    if (!showSeen || !job.seen) {
+    const { job, hideSeen } = this.props;
+    const showSeen = !job.status || job.status === getJobStatus(null, this.props).text;
+    if (hideSeen || !showSeen || !job.seen) {
       return null;
     }
     return (
@@ -64,8 +52,10 @@ class MaintenanceListItem extends Component {
     const { job } = this.props;
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const activityTimeText = job.expectedDate ? moment(job.expectedDate).format('D MMMM') : '--';
-    const { statusText, statusColor } = getJobStatusProps(job.status);
+    const assigneeText = job.Assignee ? `Assigned to\n${job.Assignee.displayName}` : '';
+    const status = getJobStatus(job.status, this.props);
+    const priority = getJobPriority(job.priority);
+    const isStaff = this.props.user.category === 'staff'
 
     return (
       <TouchableOpacity onPress={this.onPressJob}>
@@ -73,12 +63,18 @@ class MaintenanceListItem extends Component {
           <View style={styles.jobInnerContainer}>
             <View style={styles.jobTopSection}>
               <View style={styles.jobTopLeft}>
-                {job.jobId ? <Text style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}>{`Job #${job.jobId}`}</Text> : null}
+                {job.jobId ? (
+                  <Text
+                    style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}
+                  >{`${values.textEntityName} #${job.jobId}`}</Text>
+                ) : null}
                 <Text style={styles.jobTitleText}>{job.title}</Text>
                 {job.room ? <Text style={styles.jobLocationText}>{job.room}</Text> : null}
                 <View style={styles.jobTypeSeenContainer}>
                   <View style={[styles.jobTypeContainer, { backgroundColor: Colours.hexToRGBAstring(this.props.colourBrandingMain, 0.2) }]}>
-                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]}>{job.type}</Text>
+                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
+                      {job.type}
+                    </Text>
                   </View>
                   {this.renderSeen()}
                 </View>
@@ -92,16 +88,21 @@ class MaintenanceListItem extends Component {
               {/* {this.renderDescription()} */}
               <Text style={styles.jobCreatedText}>{createdTimeText}</Text>
               <View style={styles.jobActivityContainer}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                  <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                  <Text style={styles.jobStatusText}>{statusText}</Text>
+                <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
+                  {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
+                  <Text style={styles.jobStatusText}>{status?.text}</Text>
                 </View>
-                <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
+                <View style={[styles.jobStatusLine, { borderColor: status?.color }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
-                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
-                <Text style={styles.jobStatusDateText}>{activityTimeText}</Text>
+                <View style={[styles.jobStatusCircle, { backgroundColor: status?.color }]} />
+                <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
               </View>
+              {isStaff && (
+                <View style={[styles.jobPriorityContainer, { backgroundColor: priority.color }]}>
+                  <Text style={styles.jobPriorityText}>{priority.label}</Text>
+                </View>
+              )}
             </View>
           </View>
         </View>
@@ -152,8 +153,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center',
   },
@@ -161,6 +163,7 @@ const styles = StyleSheet.create({
     fontFamily: 'sf-semibold',
     fontSize: 12,
     textAlign: 'center',
+    maxWidth: '100%',
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -228,7 +231,7 @@ const styles = StyleSheet.create({
   jobStatusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     width: 105,
     height: 30,
     paddingHorizontal: 8,
@@ -266,15 +269,34 @@ const styles = StyleSheet.create({
   jobStatusDateText: {
     flex: 1,
     textAlign: 'right',
-    fontFamily: 'sf-bold',
+    fontFamily: 'sf-medium',
     fontSize: 14,
     color: Colours.TEXT_DARK,
   },
+  jobPriorityContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 105,
+    height: 24,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  jobPriorityText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
 });
 
 const mapStateToProps = state => {
   return {
+    user: state.user,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen,
   };
 };
 

package/src/components/MaintenanceWidgetItem.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import moment from 'moment';
 import _ from 'lodash';
-import { getJobStatusProps, jobStatusOptions } from '../helper';
+import { getJobStatus } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper } from '../core.config';
 import { values } from '../values.config';
@@ -15,12 +15,12 @@ class MaintenanceWidgetItem extends Component {
   };
 
   render() {
-    const { job } = this.props;
+    const { job, hideSeen } = this.props;
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const { statusText, statusColor } = getJobStatusProps(job.status);
+    const status = getJobStatus(job.status, this.props);
     const seenText = (() => {
-      if (!job.status || job.status === jobStatusOptions[0].name) {
+      if (!job.status || job.status === getJobStatus(null, this.props).text) {
         return job.seen ? 'Seen' : 'Unseen';
       }
       return '';
@@ -35,17 +35,19 @@ class MaintenanceWidgetItem extends Component {
                 {job.title}
               </Text>
               <Text style={styles.jobCreatedTimeText}>{createdTimeText}</Text>
-              <View style={styles.jobSeenContainer}>
-                {job.seen && !_.isEmpty(seenText) && (
-                  <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
-                )}
-                <Text style={[styles.jobSeenText, job.seen && { color: this.props.colourBrandingMain }]}>{seenText}</Text>
-              </View>
+              {!hideSeen ? (
+                <View style={styles.jobSeenContainer}>
+                  {job.seen && !_.isEmpty(seenText) && (
+                    <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
+                  )}
+                  <Text style={[styles.jobSeenText, job.seen && { color: this.props.colourBrandingMain }]}>{seenText}</Text>
+                </View>
+              ) : null}
             </View>
             <View style={styles.jobBottomSection}>
-              <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                <Text style={styles.jobStatusText}>{statusText}</Text>
+              <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
+                {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
+                <Text style={styles.jobStatusText}>{status?.text}</Text>
               </View>
             </View>
           </View>
@@ -126,6 +128,8 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => {
   return {
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen,
   };
 };
 

package/src/components/PrioritySelectorPopup.js

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { jobPriorityOptions } from '../helper';
+import { Components, Colours } from '../core.config';
+
+class PrioritySelectorPopup extends PureComponent {
+  render() {
+    const { title, includeAll, allText, onClose, onSelect } = this.props;
+    let priorities = jobPriorityOptions;
+    if (includeAll)
+      priorities = [
+        {
+          label: allText || 'Show All',
+          color: this.props.colourBrandingMain,
+        },
+        ...priorities,
+      ];
+
+    return (
+      <Components.MiddlePopup style={[styles.statusPopup, { height: priorities.length * 50 + 40 }]} onClose={onClose}>
+        <Text style={styles.statusPopupTitle}>{title || 'Select Priority'}</Text>
+        <View style={styles.statusPopupOptionsContainer}>
+          {priorities.map(priority => {
+            return (
+              <TouchableOpacity key={priority.label} onPress={() => onSelect(priority.label)}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: priority.color }]}>
+                  <Text style={styles.jobStatusText}>{priority.label}</Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </Components.MiddlePopup>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  statusPopup: {
+    width: 160,
+    padding: 16,
+    borderRadius: 12,
+  },
+  statusPopupTitle: {
+    fontFamily: 'sf-bold',
+    color: Colours.TEXT_DARK,
+    fontSize: 18,
+    marginBottom: 16,
+  },
+  statusPopupOptionsContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  jobStatusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: 105,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  jobStatusText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    flex: 1,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(PrioritySelectorPopup);

package/src/components/StatusSelectorPopup.js

@@ -1,24 +1,18 @@
 import React, { PureComponent } from 'react';
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { jobStatusOptions, getJobStatusColour } from '../helper';
+import { getJobStatusOptions } from '../helper';
 import { Components, Colours } from '../core.config';
+import { values } from '../values.config';
 
 class StatusSelectorPopup extends PureComponent {
   render() {
-    const { title, filter, includeAll, allText, onClose, onSelect } = this.props;
-    let statuses = filter
-      ? filter.map(status => {
-          return {
-            name: status,
-            color: getJobStatusColour(status),
-          };
-        })
-      : jobStatusOptions;
+    const { title, includeAll, allText, onClose, onSelect } = this.props;
+    let statuses = getJobStatusOptions(this.props);
     if (includeAll)
       statuses = [
         {
-          name: allText || 'Show All',
+          text: allText || 'Show All',
           color: this.props.colourBrandingMain,
         },
         ...statuses,
@@ -30,9 +24,9 @@ class StatusSelectorPopup extends PureComponent {
         <View style={styles.statusPopupOptionsContainer}>
           {statuses.map(status => {
             return (
-              <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
+              <TouchableOpacity key={status.text} onPress={() => onSelect(status.text)}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.name}</Text>
+                  <Text style={styles.jobStatusText}>{status.text}</Text>
                 </View>
               </TouchableOpacity>
             );
@@ -80,6 +74,7 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => {
   return {
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
   };
 };
 

package/src/components/WidgetSmall.js

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { Text, View, ScrollView, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { generalActions } from '../apis';
-import { jobsLoaded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { jobsLoaded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
 import MaintenanceWidgetItem from './MaintenanceWidgetItem';
 import { Services } from '../feature.config';
-import { Colours, Components, Config } from '../core.config';
+import { Colours, Components } from '../core.config';
 import { values } from '../values.config';
 
 const MAX_ITEMS = 10;
@@ -18,6 +18,8 @@ class WidgetSmall extends Component {
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.site);
+    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
   }
 
@@ -34,13 +36,13 @@ class WidgetSmall extends Component {
   getEmptyStateText = () => {
     const { options, userCategory } = this.props;
     if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
-    return userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
+    return userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
   };
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const res = await generalActions.getJobsRecursive(this.props.site);
+        const res = await maintenanceActions.getJobsRecursive(this.props.site);
         // console.log('WidgetSmall - refresh', res.data);
         this.props.jobsLoaded(res);
       } catch (error) {
@@ -59,7 +61,7 @@ class WidgetSmall extends Component {
   };
 
   onPressAll = () => {
-    Services.navigation.navigate('maintenance', { options: this.props.options });
+    Services.navigation.navigate(values.screenMaintenance, { options: this.props.options });
   };
 
   renderContent() {
@@ -144,9 +146,9 @@ const mapStateToProps = state => {
     jobs: _.orderBy(jobs.jobs, ['createdUnix'], ['desc']),
     site: user.site,
     userCategory: user.category,
-    dataUpdated: notifications.dataUpdated.jobs,
+    dataUpdated: notifications.dataUpdated[values.updateKey],
     strings: state.strings?.config || {},
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded }, null, { forwardRef: true })(WidgetSmall);
+export default connect(mapStateToProps, { jobsLoaded, jobStatusesUpdate, jobHideSeenUpdate }, null, { forwardRef: true })(WidgetSmall);