From bfc9f1ef3d6d43896cd004a04b6983d23e6cb614 Mon Sep 17 00:00:00 2001 From: "aman.singh" Date: Fri, 16 Dec 2022 08:33:35 +0530 Subject: [PATCH] api integration done --- ProtectedRouter.tsx | 20 +++-- src/action/authActions.ts | 4 +- src/action/dataActions.ts | 69 ++++++------------ src/components/utlis/apiHelper.ts | 13 +++- src/reducer/allCasesSlice.ts | 18 ++++- src/screens/allCases/AllCases.tsx | 9 +-- src/screens/allCases/ListItem.tsx | 14 ++-- src/screens/allCases/index.tsx | 9 ++- src/screens/allCases/interface.ts | 117 ++++++++++++++++++++++++------ 9 files changed, 180 insertions(+), 93 deletions(-) diff --git a/ProtectedRouter.tsx b/ProtectedRouter.tsx index e83ef95f..33bcdc55 100644 --- a/ProtectedRouter.tsx +++ b/ProtectedRouter.tsx @@ -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 = () => ; const OTPScreen = () => ; -const HomeScreen = () => ( - - - - - -); +// const HomeScreen = () => ( +// +// +// +// +// +// ); 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(); diff --git a/src/action/authActions.ts b/src/action/authActions.ts index 9ce1d33c..f353f08d 100644 --- a/src/action/authActions.ts +++ b/src/action/authActions.ts @@ -61,8 +61,8 @@ export const verifyOTP = axiosInstance .post(url, {otp, otpToken}, {headers: {donotHandleError: true}}) .then((response: AxiosResponse) => { - const {sessionDetails, user, cases} = response.data; - dispatch(updateCaseList(cases)) + const {sessionDetails, user} = response.data; + // dispatch(updateCaseList(cases)) dispatch( setAuthData({ sessionDetails, diff --git a/src/action/dataActions.ts b/src/action/dataActions.ts index a3caebcc..6486b1ab 100644 --- a/src/action/dataActions.ts +++ b/src/action/dataActions.ts @@ -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) => -// (dispatch: Dispatch) => { -// dispatch(setCasesListData({listData: data})) -// }; - -// export const getAllCases = () => -// (dispatch: Dispatch) => { -// const url = getApiUrl(ApiKeys.ALL_CASES); -// axiosInstance -// .get(url) -// .then((response: AxiosResponse>) => { -// 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) => { + 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 {}; + } +}; diff --git a/src/components/utlis/apiHelper.ts b/src/components/utlis/apiHelper.ts index c71b68fe..19bcafe1 100644 --- a/src/components/utlis/apiHelper.ts +++ b/src/components/utlis/apiHelper.ts @@ -16,11 +16,15 @@ const USE_MOCK = false; export enum ApiKeys { GENERATE_OTP, VERIFY_OTP, + ALL_CASES, + CASE_DETAIL } const API_URLS: Record = {} as Record; 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 = {} as Record; @@ -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 || ''; diff --git a/src/reducer/allCasesSlice.ts b/src/reducer/allCasesSlice.ts index 2f99c064..06a632cb 100644 --- a/src/reducer/allCasesSlice.ts +++ b/src/reducer/allCasesSlice.ts @@ -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[] = []; diff --git a/src/screens/allCases/AllCases.tsx b/src/screens/allCases/AllCases.tsx index 9a4e9858..9269c801 100644 --- a/src/screens/allCases/AllCases.tsx +++ b/src/screens/allCases/AllCases.tsx @@ -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, 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 ( { stickyHeaderIndices={[0]} initialNumToRender={4} renderItem={row => } - keyExtractor={item => item.caseId} + keyExtractor={item => item.caseReferenceId} getItemCount={item => item.length} getItem={getItem} ItemSeparatorComponent={} diff --git a/src/screens/allCases/ListItem.tsx b/src/screens/allCases/ListItem.tsx index 3d6d9788..f04ab58d 100644 --- a/src/screens/allCases/ListItem.tsx +++ b/src/screens/allCases/ListItem.tsx @@ -25,7 +25,7 @@ interface IListItem { const ListItem: React.FC = 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 = 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 @@ -72,7 +74,7 @@ const ListItem: React.FC = props => { ) : ( )} @@ -82,10 +84,10 @@ const ListItem: React.FC = props => { {caseData.currentTask.title}:{' '} - {caseData.currentTask.detail} + {caseData?.currentTask?.metadata?.address?.city} {/* TODO write color coding logic with tag component */} - {caseData.caseVerdict !== caseVerdict.NEW && ( + {/* {caseData.caseVerdict !== caseVerdict.NEW && ( = props => { }}> {caseVerdictAndColor[caseData.caseVerdict].text} - )} + )} */} diff --git a/src/screens/allCases/index.tsx b/src/screens/allCases/index.tsx index ba6add27..70d6ce22 100644 --- a/src/screens/allCases/index.tsx +++ b/src/screens/allCases/index.tsx @@ -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 (