varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

api integration done

Browse Source
This commit is contained in:
aman.singh
2022-12-16 08:33:35 +05:30
parent 2f144efbea
commit bfc9f1ef3d
9 changed files with 180 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ProtectedRouter.tsx
View File

@@ -19,6 +19,7 @@ import {setDeviceId} from './src/reducer/userSlice';
import { _map } from './RN-UI-LIB/src/utlis/common';
import CaseDetails from './src/screens/caseDetails/CaseDetails';
import TodoList from './src/screens/todoList/TodoList';
import { setGlobalUserData } from './src/constants/Global';
const Stack = createNativeStackNavigator();
@@ -26,20 +27,23 @@ const LoginScreen = () => <Login />;
const OTPScreen = () => <OtpInput />;
const HomeScreen = () => (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<SafeAreaView>
<RenderingEngine data={data} userData={userData} />
</SafeAreaView>
</View>
);
// const HomeScreen = () => (
// <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
// <SafeAreaView>
// <RenderingEngine data={data} userData={userData} />
// </SafeAreaView>
// </View>
// );
const ProtectedRouter = () => {
const user = useSelector(
(state: RootState) => state.user,
);
const {isLoggedIn, deviceId} = user;
const {isLoggedIn, deviceId, sessionDetails} = user;
// for setting user token in global.ts for api calling's
setGlobalUserData(sessionDetails?.sessionToken);
const dispatch = useAppDispatch();

4
src/action/authActions.ts
View File

@@ -61,8 +61,8 @@ export const verifyOTP =
axiosInstance
.post(url, {otp, otpToken}, {headers: {donotHandleError: true}})
.then((response: AxiosResponse<IUser>) => {
const {sessionDetails, user, cases} = response.data;
dispatch(updateCaseList(cases))
const {sessionDetails, user} = response.data;
// dispatch(updateCaseList(cases))
dispatch(
setAuthData({
sessionDetails,

69
src/action/dataActions.ts
View File

@@ -1,48 +1,25 @@
// import {IUser, setAuthData} from '../reducer/userSlice';
// import axiosInstance, {ApiKeys, getApiUrl} from '../components/utlis/apiHelper';
// import {
// setFormLoading,
// setOTPError,
// setShowOTPScreen,
// setVerifyOTPError,
// setVerifyOTPSuccess,
// } from '../reducer/loginSlice';
// import {Dispatch} from '@reduxjs/toolkit';
// import {navigateToScreen} from '../components/utlis/navigationUtlis';
// import {AxiosResponse} from 'axios';
// import { Data } from '../components/screens/allCases/interface';
// import { setCasesListData } from '../reducer/allCasesSlice';
// import { useAppDispatch } from '../hooks';
import {Dispatch} from 'redux';
import axiosInstance, {ApiKeys, getApiUrl} from '../components/utlis/apiHelper';
import {useAppDispatch} from '../hooks';
import {setCasesListData} from '../reducer/allCasesSlice';
import {Data} from '../screens/allCases/interface';
// export interface GenerateOTPPayload {
// phoneNumber: string;
// }
export const getAllCases = () => (dispatch: Dispatch) => {
const url = getApiUrl(ApiKeys.ALL_CASES);
axiosInstance.get(url).then(async response => {
const caseDetails = await getAllCaseDetails(response.data)
console.log({allcases : response.data, details: caseDetails })
dispatch(setCasesListData({allCases : response.data, details: caseDetails }));
});
};
// export interface VerifyOTPPayload {
// otp: string;
// otpToken: string;
// }
// export const updateCaseList =
// (data: Array<Data>) =>
// (dispatch: Dispatch) => {
// dispatch(setCasesListData({listData: data}))
// };
// export const getAllCases = () =>
// (dispatch: Dispatch) => {
// const url = getApiUrl(ApiKeys.ALL_CASES);
// axiosInstance
// .get(url)
// .then((response: AxiosResponse<Array<Data>>) => {
// const listData = response.data;
// const tokens = listData.map(caseData => caseData.caseReferenceId);
// const url = getApiUrl(ApiKeys.CASE_DETAIL);
// axiosInstance
// .get(url, {params: {caseIds: tokens.join(',')}})
// .then((allCasesDetails) => {
// dispatch(setCasesListData({listData, allCasesDetails: allCasesDetails.data.body}))
// })
// })
// };
export const getAllCaseDetails = async (data: Array<Data>) => {
const caseList = data.map(caseItem => caseItem.caseReferenceId);
const url = getApiUrl(ApiKeys.CASE_DETAIL);
try {
const result = await axiosInstance.get(url, {params: {caseIds: caseList.join(',')}})
return await result.data.body;
} catch (error) {
return {};
}
};

13
src/components/utlis/apiHelper.ts
View File

@@ -16,11 +16,15 @@ const USE_MOCK = false;
export enum ApiKeys {
GENERATE_OTP,
VERIFY_OTP,
ALL_CASES,
CASE_DETAIL
}
const API_URLS: Record<ApiKeys, string> = {} as Record<ApiKeys, string>;
API_URLS[ApiKeys.GENERATE_OTP] = '/auth/otp/generate';
API_URLS[ApiKeys.VERIFY_OTP] = '/auth/otp/verify';
API_URLS[ApiKeys.ALL_CASES] = '/cases/all-cases';
API_URLS[ApiKeys.CASE_DETAIL] = '/cases/get-cases';
const MOCK_API_URLS: Record<ApiKeys, string> = {} as Record<ApiKeys, string>;
@@ -71,14 +75,19 @@ const axiosInstance = axios.create();
axiosInstance.interceptors.request.use(request => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// request['retry'] = request['retry'] && request['retry'] < 4 ? request['retry'] : 3;
request.retry = request?.retry < 4 ? request.retry : 3;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
request.headers['X-Auth-Source'] = 'mjolnir';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
request.retry = request?.retry < 4 ? request.retry : 3;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
request.headers['request-start-time'] = Date.now();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
request.headers['sessionToken'] = GLOBAL.SESSION_TOKEN || '';
request.headers['X-Session-Token'] = GLOBAL.SESSION_TOKEN || '';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
request.headers['deviceId'] = GLOBAL.DEVICE_ID || '';

18
src/reducer/allCasesSlice.ts
View File

@@ -19,6 +19,7 @@ interface IAllCasesSlice {
filterList: Data[];
newlyPinnedCases: number;
completedCases: number;
caseDetails: any;
}
const initialState: IAllCasesSlice = {
@@ -34,6 +35,7 @@ const initialState: IAllCasesSlice = {
filterList:[],
newlyPinnedCases: 0,
completedCases: 0,
caseDetails: {}
};
const allCasesSlice = createSlice({
@@ -41,7 +43,21 @@ const allCasesSlice = createSlice({
initialState,
reducers: {
setCasesListData: (state, action) => {
state.casesList = action.payload;
const {allCases, details} = action.payload;
console.log(allCases, details)
if(details.length){
const initialValue = {...state.caseDetails}
const detailsData = details.reduce(
(prev: any, item: any) => {
console.log(prev, item)
prev[item.id] = item;
return prev;
},
initialValue
)
state.caseDetails = detailsData;
}
state.casesList = allCases;
},
setCasesListMapData: (state, action) => {
const todoList: Data[] = [];

9
src/screens/allCases/AllCases.tsx
View File

@@ -1,6 +1,7 @@
import TextInput from '../../../RN-UI-LIB/src/components/TextInput';
import React, {useCallback, useEffect, useMemo} from 'react';
import {
Image,
ListRenderItemInfo,
StyleSheet,
View,
@@ -104,14 +105,11 @@ export const getItem = (item: Array<Data>, index: number) => item[index];
const AllCases = () => {
const {casesList, filterList, newlyPinnedCases} = useSelector(
const {casesList=[], filterList=[], newlyPinnedCases} = useSelector(
(state: RootState) => state.allCases,
);
const dispatch = useDispatch();
useEffect(() => {
dispatch(setCasesListData(data.allCases));
}, []);
useEffect(() => {
dispatch(setCasesListMapData(casesList));
@@ -168,7 +166,6 @@ const AllCases = () => {
dispatch(resetTodoList())
}
return (
<View style={GenericStyles.fill}>
<VirtualizedList
@@ -176,7 +173,7 @@ const AllCases = () => {
stickyHeaderIndices={[0]}
initialNumToRender={4}
renderItem={row => <Item data={row} todoList={todoList} />}
keyExtractor={item => item.caseId}
keyExtractor={item => item.caseReferenceId}
getItemCount={item => item.length}
getItem={getItem}
ItemSeparatorComponent={<Seperator />}

14
src/screens/allCases/ListItem.tsx
View File

@@ -25,7 +25,7 @@ interface IListItem {
const ListItem: React.FC<IListItem> = props => {
const {caseData, compleatedList, isTodoItem} = props;
const {type, caseId} = caseData;
const {type, caseReferenceId : caseId, customerInfo} = caseData;
const dispatch = useDispatch();
if (!compleatedList && caseData.caseStatus === caseStatus.CLOSED) {
@@ -50,10 +50,12 @@ const ListItem: React.FC<IListItem> = props => {
const handleCaseClick = () => {
navigateToScreen('caseDetail')
}
}
const caseSelected = !isTodoItem && intermediateTodoListMap?.[caseId];
const address = caseData.currentTask.metadata?.address;
return (
// Todo kunal to add the page switching logic
<Pressable onPress={handleCaseClick}>
@@ -72,7 +74,7 @@ const ListItem: React.FC<IListItem> = props => {
) : (
<Avatar
name={caseData.customerInfo.name}
dataURI={caseData.customerInfo.imageUrl}
dataURI={caseData.customerInfo.imageURL}
/>
)}
</Pressable>
@@ -82,10 +84,10 @@ const ListItem: React.FC<IListItem> = props => {
</Heading>
<Text dark ellipsizeMode="tail" numberOfLines={2}>
{caseData.currentTask.title}:{' '}
<Text>{caseData.currentTask.detail}</Text>
<Text>{caseData?.currentTask?.metadata?.address?.city}</Text>
</Text>
{/* TODO write color coding logic with tag component */}
{caseData.caseVerdict !== caseVerdict.NEW && (
{/* {caseData.caseVerdict !== caseVerdict.NEW && (
<Text
bold
dark
@@ -95,7 +97,7 @@ const ListItem: React.FC<IListItem> = props => {
}}>
{caseVerdictAndColor[caseData.caseVerdict].text}
</Text>
)}
)} */}
</View>
</View>
</Pressable>

9
src/screens/allCases/index.tsx
View File

@@ -9,11 +9,15 @@ import {caseStatus} from './interface';
import NaviLogoIcon from '../../../RN-UI-LIB/src/Icons/NaviLogoIcon';
import {COLORS} from '../../../RN-UI-LIB/src/styles/colors';
import Heading from '../../../RN-UI-LIB/src/components/Heading';
import { useDispatch } from 'react-redux';
import { getAllCases } from '../../action/dataActions';
import { useAppDispatch } from '../../hooks';
const AllCasesMain = () => {
const completed = data.allCases.filter(
caseData => caseData.caseStatus === caseStatus.CLOSED,
caseData => (caseData.caseStatus === caseStatus.CLOSED || caseData.caseStatus === caseStatus.EXPIRED || caseData.caseStatus === caseStatus.CLOSED),
);
const dispatch = useAppDispatch();
const tabItems = [
{
key: 'first',
@@ -26,6 +30,9 @@ const AllCasesMain = () => {
content: ComplatedCase,
},
];
dispatch(getAllCases());
return (
<View style={GenericStyles.fill}>
<View

117
src/screens/allCases/interface.ts
View File

@@ -9,12 +9,23 @@ export enum Type {
}
export enum caseVerdict {
NEW = 'NEW',
IN_PROGRESS = 'IN_PROGRESS',
CLOSED = 'CLOSED',
FORCE_CLOSE = 'FORCE_CLOSE',
EXPIRED = 'FORCE_CLOSE',
NEW_ADDRESS_FOUND = 'NEW_ADDRESS_FOUND',
NOT_VERIFIED = "NOT_VERIFIED",
VERIFIED = "VERIFIED",
NAFS = "NAFS",
NAFNS = "NAFNS",
NORMAL = "NORMAL",
ON_HOLD = "ON_HOLD",
EXHAUSTED = "EXHAUSTED"
}
export enum caseVerdictUIMappings {
NOT_VERIFIED = "not verified",
VERIFIED = "verified",
NAFS = "New address found",
NAFNS = "New address found non serviceable",
NORMAL = "normal",
ON_HOLD = "On hold",
EXHAUSTED = "Exhausted"
}
export enum taskStatus {
@@ -32,7 +43,18 @@ export enum caseStatus {
IN_PROGRESS = 'IN_PROGRESS',
CLOSED = 'CLOSED',
FORCE_CLOSE = 'FORCE_CLOSE',
EXPIRED = 'FORCE_CLOSE',
EXPIRED = 'EXPIRED',
}
export enum caseStatusUIMapping {
NEW = 'New',
UNASSIGNED = 'Unassigned',
ASSIGNED = 'Assigned',
IN_PROGRESS = 'In progress',
CLOSED = 'Closed',
FORCE_CLOSE = 'Force close',
EXPIRED = 'Expired',
}
export const caseVerdictAndColor = {
@@ -56,19 +78,72 @@ export const caseVerdictAndColor = {
export interface Data {
type?: Type; // this is for maintaing frontend
caseId: number;
updatedAt: number;
caseStatus: caseStatus;
caseVerdict: caseVerdict;
displayTag: string;
customerInfo: {
name: string;
imageUrl: string;
};
currentTask: {
title: string;
detail: string;
status: taskStatus;
};
pinnedRank?: number;
updatedAt: any;
allocatedAt: any;
caseReferenceId: string;
caseStatus: string;
caseVerdict: string;
customerInfo: CustomerInfo;
currentTask: CurrentTask;
}
export interface CustomerInfo {
name: string;
imageURL: string;
primaryNumber: string;
}
export interface Address {
referenceId: string;
houseNumber: string;
lineOne: string;
lineTwo: string;
locality: string;
street: string;
city: string;
state: string;
pinCode: string;
type: string;
source: string;
current: boolean;
permanent: boolean;
zipCode?: any;
addressQualityStatus?: any;
}
export interface Metadata {
'@class': ClassType;
address: Address;
geoLocation: string;
primaryPhoneNumber: string;
}
export interface CurrentTask {
title: TaskTitle;
metadata: Metadata;
status: string;
}
export enum TaskTitleUIMapping {
COMMUNICATION_ADDRESS_VERIFICATION_TASK = "Communication Address",
PERMANENT_ADDRESS_VERIFICATION_TASK = "Parmanent Address",
GEO_LOCATION_VERIFICATION_TASK = "Geolocation",
CALLING_TASK = "Calling",
NEW_ADDRESS_VERIFICATION_TASK = "New Address"
}
export enum TaskTitle {
COMMUNICATION_ADDRESS_VERIFICATION_TASK = 'COMMUNICATION_ADDRESS_VERIFICATION_TASK',
PERMANENT_ADDRESS_VERIFICATION_TASK = 'PERMANENT_ADDRESS_VERIFICATION_TASK',
GEO_LOCATION_VERIFICATION_TASK = 'GEO_LOCATION_VERIFICATION_TASK',
CALLING_TASK = 'CALLING_TASK',
NEW_ADDRESS_VERIFICATION_TASK = 'NEW_ADDRESS_VERIFICATION_TASK'
}
export enum ClassType {
'.AddressEntityMetadata',
'.GeoLocationEntityMetadata',
'.CallingEntityMetadata'
}