Skip to content

Instantly share code, notes, and snippets.

@Victorvikson1996

Victorvikson1996/gist:aad37386aca5c4d84c8f524280053043

Last active March 12, 2023 03:33
Show Gist options
  • Save Victorvikson1996/aad37386aca5c4d84c8f524280053043 to your computer and use it in GitHub Desktop.
Save Victorvikson1996/aad37386aca5c4d84c8f524280053043 to your computer and use it in GitHub Desktop.
Download ZIP
Request Ride
Raw
gistfile1.txt
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const rideRequestSlice = createSlice({
name: 'rideRequest',
initialState: {
address: '',
deliveryDetails: '',
isLoading: false,
error: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(requestRide.pending, (state) => {
state.isLoading = true;
state.error = null;
})
.addCase(requestRide.fulfilled, (state, action) => {
state.isLoading = false;
state.address = action.payload.address;
state.deliveryDetails = action.payload.deliveryDetails;
})
.addCase(requestRide.rejected, (state, action) => {
state.isLoading = false;
state.error = action.error.message;
});
},
});
export const requestRide = createAsyncThunk(
'rideRequest/requestRide',
async ({ address, deliveryDetails }) => {
// Make API request to server with address and delivery details
const response = await fetch('/api/ride', {
method: 'POST',
body: JSON.stringify({ address, deliveryDetails }),
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) {
throw new Error('Failed to request ride');
}
const data = await response.json();
return { address, deliveryDetails };
}
);
export const rideRequestSelector = (state) => state.rideRequest;
export default rideRequestSlice.reducer;
import React from 'react';
import { useFormik } from 'formik';
import { Button, TextInput } from 'react-native';
import { useDispatch } from 'react-redux';
import { requestRide } from './rideRequestSlice';
const RideRequestForm = () => {
const dispatch = useDispatch();
const formik = useFormik({
initialValues: { address: '', deliveryDetails: '' },
onSubmit: (values) => {
dispatch(requestRide(values));
},
});
return (
<>
<TextInput
onChangeText={formik.handleChange('address')}
value={formik.values.address}
placeholder="Enter address"
/>
<TextInput
onChangeText={formik.handleChange('deliveryDetails')}
value={formik.values.deliveryDetails}
placeholder="Enter delivery details"
/>
<Button title="Request ride" onPress={formik.handleSubmit} />
</>
);
};
export default RideRequestForm;
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { rideSlice, requestRide } from './rideSlice';
const RequestRide = () => {
const { address, deliveryDetails, requestingRide, rideRequestError } = useSelector(
(state) => state.ride
);
const dispatch = useDispatch();
const [newAddress, setNewAddress] = useState('');
const [newDeliveryDetails, setNewDeliveryDetails] = useState('');
const handleRequestRide = () => {
dispatch(rideSlice.actions.setAddress(newAddress));
dispatch(rideSlice.actions.setDeliveryDetails(newDeliveryDetails));
dispatch(requestRide());
};
return (
<View>
<TextInput value={newAddress} onChangeText={setNewAddress} />
<TextInput value={newDeliveryDetails} onChangeText={setNewDeliveryDetails} />
Raw
gistfile2.txt
import { createSlice } from '@reduxjs/toolkit';
export const rideSlice = createSlice({
name: 'ride',
initialState: {
address: null,
deliveryDetails: null,
requestingRide: false,
rideRequestError: null,
},
reducers: {
setAddress: (state, action) => {
state.address = action.payload;
},
setDeliveryDetails: (state, action) => {
state.deliveryDetails = action.payload;
},
requestRide: (state) => {
state.requestingRide = true;
state.rideRequestError = null;
},
requestRideSuccess: (state) => {
state.requestingRide = false;
state.address = null;
state.deliveryDetails = null;
},
requestRideError: (state, action) => {
state.requestingRide = false;
state.rideRequestError = action.payload;
},
},
});
import { rideSlice } from './rideSlice';
export const requestRide = () => async (dispatch, getState) => {
const { address, deliveryDetails } = getState().ride;
try {
dispatch(rideSlice.actions.requestRide());
const response = await fetch('YOUR_RIDE_REQUEST_API_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
address,
deliveryDetails,
}),
});
if (response.ok) {
dispatch(rideSlice.actions.requestRideSuccess());
} else {
const error = await response.json();
dispatch(rideSlice.actions.requestRideError(error));
}
} catch (error) {
dispatch(rideSlice.actions.requestRideError(error.message));
}
};
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { rideSlice, requestRide } from './rideSlice';
const RequestRide = () => {
const { address, deliveryDetails, requestingRide, rideRequestError } = useSelector(
(state) => state.ride
);
const dispatch = useDispatch();
const [newAddress, setNewAddress] = useState('');
const [newDeliveryDetails, setNewDeliveryDetails] = useState('');
const handleRequestRide = () => {
dispatch(rideSlice.actions.setAddress(newAddress));
dispatch(rideSlice.actions.setDeliveryDetails(newDeliveryDetails));
dispatch(requestRide());
};
return (
<View>
<TextInput value={newAddress} onChangeText={setNewAddress} />
<TextInput value={newDeliveryDetails} onChangeText={setNewDeliveryDetails} />
Raw
gistfile3.txt
import { createSlice } from '@reduxjs/toolkit';
const rideRequestSlice = createSlice({
name: 'rideRequest',
initialState: {
pickupAddress: '',
deliveryAddress: '',
isLoading: false,
error: null,
},
reducers: {
setPickupAddress: (state, action) => {
state.pickupAddress = action.payload;
},
setDeliveryAddress: (state, action) => {
state.deliveryAddress = action.payload;
},
startLoading: (state) => {
state.isLoading = true;
state.error = null;
},
requestSuccess: (state) => {
state.isLoading = false;
},
requestFailure: (state, action) => {
state.isLoading = false;
state.error = action.payload;
},
},
});
export const {
setPickupAddress,
setDeliveryAddress,
startLoading,
requestSuccess,
requestFailure,
} = rideRequestSlice.actions;
export default rideRequestSlice.reducer;
import { createAsyncThunk } from '@reduxjs/toolkit';
import rideRequestAPI from '../api/rideRequest';
export const requestRide = createAsyncThunk(
'rideRequest/requestRide',
async ({ pickupAddress, deliveryAddress, ...payload }) => {
try {
const response = await rideRequestAPI.requestRide(pickupAddress, deliveryAddress, payload);
return response.data;
} catch (error) {
throw error.response?.data?.error || error.message;
}
},
);
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { setPickupAddress, setDeliveryAddress, requestRide } from '../store/rideRequestSlice';
const RideRequestForm = () => {
const [pickupAddress, setPickupAddressState] = useState('');
const [deliveryAddress, setDeliveryAddressState] = useState('');
const dispatch = useDispatch();
const isLoading = useSelector((state) => state.rideRequest.isLoading);
const error = useSelector((state) => state.rideRequest.error);
const handleRequestRide = () => {
dispatch(requestRide({ pickupAddress, deliveryAddress }));
};
return (
<View>
<TextInput value={pickupAddress} onChangeText={setPickupAddressState} />
<TextInput value={deliveryAddress} onChangeText={setDeliveryAddressState} />
<Button title="Request Ride" onPress={handleRequestRide} disabled={isLoading} />
{error && <Text>{error}</Text>}
</View>
);
};
export default RideRequestForm;
import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { setPickupAddress, setDeliveryAddress, requestRide } from '../store/rideRequestSlice';
const RideRequestForm = () => {
const [pickupAddress, setPickupAddressState] = useState('');
const [deliveryAddress, setDeliveryAddressState] = useState('');
const dispatch = useDispatch();
const isLoading = useSelector((state) => state.rideRequest.isLoading);
const error = useSelector((state) => state.rideRequest.error);
const handleRequestRide = () => {
dispatch(requestRide({ pickupAddress, deliveryAddress }));
};
return (
<View>
<TextInput value={pickupAddress} onChangeText={setPickupAddressState} />
<TextInput value={deliveryAddress} onChangeText={setDeliveryAddressState} />
<Button title="Request Ride" onPress={handleRequestRide} disabled={isLoading} />
{error && <Text>{error}</Text>}
</View>
);
};
export default RideRequestForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment