We Keep Coding

Function removes all items from Flatlist, instead of selected one

I'm learning React Redux at the moment and I'm working on a food list in which the user can add and remove items from a Flatlist, up until now I worked on adding the items, which works perfectly, now I'm using the same approach to remove the item from the global state foodList, I use onLongPress to start the function removeFromFoodList in the Diet screen. When I run the code and I proceed to remove the items instead of deleting the single item it deletes all the items in the Flatlist. Thank you for your help.
Diet
class Diet extends Component {
removeItem = () => {
let foodList = this.props.foodList;
this.props.removeFromFoodList(foodList)
}
render() {
return (
<FlatList
data={this.props.foodList}
renderItem={({item}) => (
<View>
<TouchableOpacity
onLongPress={this.removeItem}
>
<Text>{item.foodName}</Text>
<Text>
{item.calories}
</Text>
<MaterialIcons name="arrow-forward-ios" />
</TouchableOpacity>
</View>
)}
keyExtractor={item => item.id}
/>
}
}
function mapStateToProps(store){
return{
foodList: store.userState.foodList
};
}
const mapDispatchToProps = { removeFromFoodList };
export default connect(mapStateToProps, mapDispatchToProps)(Diet);
INDEX
import { ADD_FOOD, REMOVE_FOOD } from "../constants/index";
export const updateFoodList = (foodList) => {
return { type: ADD_FOOD, payload: foodList}
}
export const removeFromFoodList = (foodList) => {
return { type: REMOVE_FOOD, payload: foodList}
}
REDUCERS
import { ADD_FOOD, REMOVE_FOOD } from "../constants";
const initialState = {
foodList: [],
};
export const user = (state = initialState, action) => {
switch (action.type){
case ADD_FOOD:
return{
...state,
foodList: [...action.payload],
}
case REMOVE_FOOD:
return{
...state,
foodList: [...state.foodList.filter((item) => item.id != action.id)],
}
default:
return state
}
};
ARRAY EXAMPLE
Array [
Object {
"calories": "120",
"foodId": 0.8845240802796346,
"foodName": "Rice",
},
]

I'm not sure why it returns as empty, but there are a few problems I see here.
In your reducer:
[...state.foodList.filter((item) => item.id != action.id)]
If the structure of foodlist is as provided:
Object {
"calories": "120",
"foodId": 0.8845240802796346,
"foodName": "Rice",
},
]
Then it has no id key, and even if it does, action.id doesn't exist (only action.type and action.payload exist). Try console logging action and state.foodList under case REMOVE_FOOD: to get more detail.

On the component Diet this.props.foodList contain all data of the flatlist it's ok , you pass it to the flatlist to be rendered , alwais ok , but on each item of Flatlist you have added on each a onLongPress={this.removeItem} the function removeItem execute removeFromFoodList that you put this.props.foodList as a parameters to be removed .. that why all list are removed
to fix this you need to pass a item value to removeItem():
removeItem = (itemToremove) => {
this.props.removeFromFoodList(itemToremove)
}
render() {
return (
<FlatList
data={this.props.foodList}
renderItem={({ item }) => (
<View>
<TouchableOpacity
onLongPress={this.removeItem(item)}
>
<Text>{item.foodName}</Text>
<Text>
{item.calories}
</Text>
<MaterialIcons name="arrow-forward-ios" />
</TouchableOpacity>
</View>
)}
keyExtractor={item => item.id}
/>
)
}

React Native - Dynamic State? Or equivalent solution

I am trying to build a view which displays alarm codes - these are delivered to the app in a data array as follows:
alarm:[{ location: "Main Door", code:"123456"}, { location: "Back Door", code:"456789"}],
For each instance there could be 1 or many codes.
I am displaying the codes via this map function:
return this.state.alarmsOnSite.map((data, index) => {
return (
<View key={index}>
<Text style={GlobalStyles.SubHeading}>
Alarm: {data.location}
</Text>
<View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
<Text style={GlobalStyles.starText}>
********
</Text>
<TouchableOpacity
style={CheckInStyles.eyeballImagePlacement}
>
<View style={CheckInStyles.eyeballImage} >
<Image
style={CheckInStyles.eyeballImageImage}
source={require('../images/icons/ico-eyeball.png')}
/>
</View>
</TouchableOpacity>
</View>
</View>
)
});
The brief states that on press of the touchable opacity - the stars should switch to display the code for 5 seconds only. I was thinking this would be easy with state - I could switch a display class on two Text objects to hide/show stars or code. But how do I do this with fixed state if I don't know how many alarm codes there will be? Can I use a dynamic state - is there such a thing - or does anyone have any other ideas for best approach in this situation please?

When setting up your state, include a property in the objects for whether they're showing:
this.state = {
alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
// ...
};
Then in response to a touch, set that flag to true and then back to false after five seconds. For instance, if the touch is on the ToucableOpacity itself (sorry, I don't know that component):
<View style={[GlobalStyles.GreyBox, {position:'relative'}]}>
<Text style={GlobalStyles.starText}>
{data.showing ? data.code : "********"}
</Text>
<TouchableOpacity
style={CheckInStyles.eyeballImagePlacement}
onTouch={() => this.showAlarm(data)}
>
<View style={CheckInStyles.eyeballImage} >
<Image
style={CheckInStyles.eyeballImageImage}
source={require('../images/icons/ico-eyeball.png')}
/>
</View>
</TouchableOpacity>
</View>
...where showAlarm is:
showAlarm(alarm) {
let updated = null;
this.setState(
({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => {
if (a === alarm) {
return updated = {...a, showing: true};
}
return a;
})
}),
() => {
setTimeout(() => {
this.setState(({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
}));
}, 5000);
}
);
}
...or similar.
Here's a simplified example:
const whereverYoureGettingTheDataNow = [{ location: "Main Door", code:"123456"}, { location: "Back Door", code:"456789"}];
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
alarmsOnSite: whereverYoureGettingTheDataNow.map(obj => ({...obj, showing: false})),
// ...
};
}
showAlarm(alarm) {
let updated = null;
this.setState(
({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => {
if (a === alarm) {
return updated = {...a, showing: true};
}
return a;
})
}),
() => {
setTimeout(() => {
this.setState(({alarmsOnSite}) => ({
alarmsOnSite: alarmsOnSite.map(a => a === updated ? {...a, showing: false} : a)
}));
}, 5000);
}
);
}
render() {
return <div>
{this.state.alarmsOnSite.map((data, index) => (
<div key={index}>
{data.location}
<div onClick={() => this.showAlarm(data)}>
{data.showing ? data.code : "********"}
</div>
</div>
))}
</div>;
}
}
ReactDOM.render(<Example/>, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.development.js"></script>

Enzyme button simulate doesn't work as expected

I have the following react-native test code.
import { shallow } from 'enzyme';
import React from 'react';
import {
BorderlessButton,
InputBox,
ProgressBar,
} from 'components';
import Name from '../name.component';
describe('Name component', () => {
let wrapper: any;
const mockOnPress = jest.fn();
const mockSaveStep = jest.fn();
const mockProps: any = {
errors: null,
values: [{ givenName: 'givenName', familyName: 'familyName' }],
};
beforeEach(() => {
wrapper = shallow(<Name signUpForm={mockProps} saveStep={mockSaveStep} />);
});
it('should render Name component', () => {
expect(wrapper).toMatchSnapshot();
});
it('should render 2 <InputBox />', () => {
expect(wrapper.find(InputBox)).toHaveLength(2);
});
it('should render a <ProgressBar />', () => {
expect(wrapper.find(ProgressBar)).toHaveLength(1);
});
it('should render a <BorderlessButton /> with the text NEXT', () => {
expect(wrapper.find(BorderlessButton)).toHaveLength(1);
expect(wrapper.find(BorderlessButton).props().text).toEqual('NEXT');
});
it('should press the NEXT button', () => {
wrapper.find(BorderlessButton).simulate('click');
expect(mockOnPress).toHaveBeenCalled();
});
});
But the last test doesn't work properly. How can I simulate a this button click? This gives me an error saying
expect(jest.fn()).toHaveBeenCalled().
Expected mock function to have been called, but it was not called.
This is the component.
class NameComponent extends Component {
componentDidMount() {
const { saveStep } = this.props;
saveStep(1, 'Name');
}
disableButton = () => {
const {
signUpForm: {
errors, values,
},
} = this.props;
if (errors && values && errors.givenName && errors.familyName) {
if (errors.givenName.length > 0 || values.givenName === '') return true;
if (errors.familyName.length > 0 || values.familyName === '') return true;
}
}
handleNext = () => {
navigationService.navigate('PreferredName');
}
resetForm = () => {
const { resetForm } = this.props;
resetForm(SIGN_UP_FORM);
navigationService.navigate('LoginMain');
}
render() {
const { name, required } = ValidationTypes;
const { step } = this.props;
return (
<SafeAreaView style={{ flex: 1 }}>
<KeyboardAvoidingView style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : null}
enabled>
<ScreenContainer
navType={ScreenContainer.Types.LEVEL_THREE}
levelThreeOnPress={this.resetForm}>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<SinglifeText
type={SinglifeText.Types.H1}
label='Let’s start with your legal name'
style={styles.textLabel}
/>
<View style={styles.names}>
<InputBox
name='givenName'
form={SIGN_UP_FORM}
maxLength={22}
placeholder='Given name'
containerStyle={styles.givenNameContainer}
inputContainerStyle={styles.inputContainer}
errorStyles={styles.inputError}
keyboardType={KeyBoardTypes.default}
validations={[required, name]}
/>
<InputBox
name='familyName'
form={SIGN_UP_FORM}
maxLength={22}
placeholder='Family name'
inputContainerStyle={styles.inputContainer}
errorStyles={styles.inputError}
keyboardType={KeyBoardTypes.default}
validations={[required, name]}
/>
</View>
<SinglifeText
type={SinglifeText.Types.HINT}
label='Please use the same name you use with your bank'
style={styles.hint}
/>
</View>
</View>
</ScreenContainer>
<ProgressBar presentage={(step / MANUAL_SIGNUP_STEP_COUNT) * 100} />
<View style={styles.bottomButtonContainer}>
<BorderlessButton
text='NEXT'
disabled={this.disableButton()}
onPress={this.handleNext}
/>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
}
How can I solve this??

You create the function mockOnPress(), but mockOnPress() is never injected into the component.
In the component you wrote, NameComponent has a child BorderlessButton component, in which the line, onPress={this.handleNext} is hard-coded in. handleNext() is defined elsewhere as:
handleNext = () => {
navigationService.navigate('PreferredName');
}
To test that the functionality of the button is working, I see two viable options. One is to use dependency injection. Instead of hard-coding the button to call navigationService.navigate('PreferredName'), you could have it execute code that is passed in as a prop. See the following as an example:
it('Button should handle simulated click', function (done) {
wrappedButton = mount(<MyButton onClick={() => done()}>Click me!</BaseButton>)
wrappedButton.find('button').simulate('click')
}
Note that you could take the principle provided in the above example and expand it to your example by passing in the functionality you want to occur onClick as a prop to your NameComponent.
Another option you have, is to test whether clicking the button causes the side effects you want to occur. As written, pressing the button should call, navigationService.navigate('PreferredName'). Is this the intended effect? If so, you can change your test to validate whether navigationService.navigate('PreferredName') was called somehow.

Flat List not updated when data supplied with Redux (React Native)

My problem is that my flat list is not being updated when I add an element to "entriesPerDay" in my Redux store.
Both home screen and the Flat List have state mapped to props. I have tried:
- passing the data to EntriesList through props from Home Screen
- using the state from reducer as data provider of the EntriesList
Nothing seem to be working and the shouldComponentUpdate or any other relevant function is never called.
REDUCER:
case NEW_ENTRY_LOCAL:
let newState = {...state};
newState.entriesPerDay.push(action.entry);
return{
...newState
}
HOME SCREEN:
(...)
render() {
return (
<View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'flex-start' }}>
<NavBar onItemPressed={this.onItemPressedHandler}/>
<DayPicker onDatePicked={this.onDatePickedHandler} />
<TotalTime totalTime={this.props.total} />
<EntriesList entries={this.props.entriesPerDay}/>
<Timer onEntryEnd={this.onEntryEndHandler} onTimeChanged={this.onTimeChangedHandler} onEntryCreate={this.onEntryCreateHandler}/>
<Button title="clickkk" onPress={this.onItemPressedHandler}>CLICK ME</Button>
</View>
);
}
FLAT LIST:
class entriesList extends React.Component {
componentDidMount()
{
reactMixin(entriesList, TimerMixin);
this.timer = setInterval(() => {
console.log(this.props.entriesPerDay);
}, 3000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
shouldComponentUpdate(nextProps, nextState)
{
console.log("new props" + nextProps);
return true;
}
render()
{
return (
<FlatList style={styles.full}
data={this.props.entries}
extraData={this.props.entriesPerDay}
renderItem={
(info)=>(
<ListItem key={info.item.key}
startDateTime={info.item.startDateTime}
endDateTime = {info.item.endDateTime}
description = {info.item.description}
prevEntryEnd = {info.item.prevEntryEnd}
nextEntryStart = {info.item.nextEntryStart}
total = {info.item.totalTime}
/>
)
}
/>
);
}
}
const mapStateToProps = state => {
return {
serverCopy : state.entries.serverCopy,
entriesPerDay : state.entries.entriesPerDay,
pickedDate : state.entries.pickedDate,
total: state.entries.total,
local: state.entries.local
};
};
const mapDispatchToProps = dispatch => {
return {
onPickDate: (day) => dispatch(pickDay(day)),
onDataSet: (data) => dispatch(setData(data)),
onNewEntryLocal: (entry) => dispatch(newEntryLocal(entry)),
onEndEntryLocal: (entry) => dispatch(endEntryLocal(entry)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(entriesList)
;

Try :
case NEW_ENTRY_LOCAL:
let newEntriesPerDay = state.entriesPerDay.concat(action.entry);
return {
...state,
entriesPerDay: newEntriesPerDay
}
It is because entriesPerDay was just beeing copied by reference in the newState in your previous example. redux and react compare the reference and see that it's the same so no re-render will happen. That's why you should copy it manually.
Note : Use concat instead of push to return a new array (new reference)

Component not updating in react native redux app

I have two components who use the same reducer and share the same state.
The first one is a form, the second one is a separate component to
update a specific field of that form using
react-native-autocomplete-select.
In the second component, everything works fine. But when I get back
to the first component (the form), the prop that I'm updating in the
second component is now undefined. Only when I leave the component
and come back to it or reload my app does the component display the
correct value.
I'm new to redux and I thought I had figured it out but apparently, I'm still missing something.
I'll try to share as much code as possible in order to make it easy for anyone to help me out but let me know if you want me to share additional code.
I would really like to understand what's going on.
First Component
class EditElem extends Component {
componentWillMount() {
this.props.xFetch();
}
onButtonPress() {
const { name, description, elem_id } = this.props;
this.props.xSave({ name, description, elem_id });
}
render() {
return (
<ScrollView>
<View>
<Text>Information</Text>
<CardSection>
<Input
label="Name"
placeholder="..."
value={this.props.name}
onChangeText={value => this.props.xUpdate({ prop: 'name', value })}
/>
<Text style={styles.labelStyle}>Description</Text>
<Input
placeholder="Write here..."
value={this.props.description}
onChangeText={value => this.props.xUpdate({ prop: 'description', value })}
multiline = {true}
numberOfLines = {4}
/>
<TouchableWithoutFeedback onPress={ () => Actions.selectElem() }>
<View style={styles.wrapperStyle}>
<View style={styles.containerStyle}>
<Text style={styles.labelStyle}>Elem</Text>
<Text adjustsFontSizeToFit style={styles.inputStyle}>{checkElem(this.props.elem_id ? this.props.elem_id.toString() : "0")}</Text>
</View>
</View>
</TouchableWithoutFeedback>
</CardSection>
<Button title="Save Changes" onPress={this.onButtonPress.bind(this)} />
</View>
</ScrollView>
);
}
}
const mapStateToProps = (state) => {
const { name, description, elem_id } = state.x.x;
return { name, description, elem_id };
};
export default connect(mapStateToProps, { xUpdate, xFetch, xSave })(EditElem);
Second Component
class SelectElem extends Component {
componentWillMount() {
this.props.xFetch();
}
saveElem(suggestion) {
let elem_id = suggestion.id;
let text = suggestion.text
this.props.xUpdate({ prop: 'elem', text })
this.props.xUpdate({ prop: 'elem_id', elem_id })
this.props.xSave({ elem_id });
}
render() {
const suggestions = data
const onSelect = (suggestion) => {
this.saveElem(suggestion);
}
return(
<View style={{flex: 1}}>
<AutoComplete
placeholder={checkElem(this.props.elem_id ? this.props.elem_id.toString() : "0")}
onSelect={onSelect}
suggestions={suggestions}
suggestionObjectTextProperty='text'
value={this.props.elem}
onChangeText={value => this.props.xUpdate({ prop: 'elem', value })}
minimumSimilarityScore={0.4}
/>
</View>
)
}
}
const mapStateToProps = (state) => {
const { elem_id, description, name, elem } = state.x.x;
return { elem_id, description, name, elem };
};
export default connect(mapStateToProps, { xUpdate, xFetch, xSave })(SelectElem);
store
const store = createStore(reducers, {}, compose(applyMiddleware(ReduxThunk)));
reducer
export default function(state = INITIAL_STATE, action) {
switch (action.type) {
case FETCH_X:
return { ...state, x: { ...state.x, name: action.payload.name, description: action.payload.description, elem_id: action.payload.elem_id } };
case UPDATE_X:
return { ...state, x: { ...state.x, [action.payload.prop]: action.payload.value }};
case SAVE_X:
return state;
default:
return state;
}
}
Actions
export const xUpdate = ({ prop, value }) => {
return {
type: UPDATE_X,
payload: { prop, value }
};
};
export const xSave = ({ name, description, elem_id }) => {
return (dispatch) => {
axios({
method: 'post',
url: 'https:xxxxxxxxxxxxxxxxxxxx',
data: {_____________________ }
}
}).then(response => {
dispatch({ type: SAVE_X });
}).catch(error => console.log(error))
};
};

Can you check if UPDATE_X, SAVE_X ... are defined? Do you have the right import statement at the top of the file?

Ok so my problem came from my reducer actualy in my SAVE_X:
I had:
case SAVE_X:
return { state };
Instead of this:
case SAVE_X:
return { ...state, elem: { ...state.elem, elem_id: action.payload.elem_id } };