Success Failure and Loading View Of Nxt Watch

1. Integrating APIs

1.1 Get Exclusive Prime Deals

Exclusive Prime deals are for Prime Users.
All Products are for both Prime and Non-Prime users.

2. API Call Possible Views

2.1 Success View

When the

Prime User

is logged in and accessed

Prime Deals

Section then we should show the

Exclusive Prime Deals

section.

2.2 Failure View

When the

Non-prime User

is logged in and accessed

Prime Deals

Section then we should show the

Get Exclusive Deals

section.

Reasons for API Call Failure :

Sending UnAuthorized User credentials
Not specifying Authorization header
Using the wrong HTTP method

2.3 Loading View

When the

Prime

Non-prime User

is logged in and accessed

Prime Deals

Section, we should show the

Loading view

until data is in progress.

3. E-Commerce Application

4. Best Practices

4.1 State Variable-isLoading

isLoading is used to handle Success View, Loading View only.
render() {
const {isLoading} = this.state
return <>
{ isLoading ? this.renderLoader() : this.renderProductsList() }
</>
}
JSX

4.2 State Variable-apiStatus

apiStatus is used to handle Success, Failure and Loading Views.
switch (apiStatus) {
case apiStatusConstants.success:
return this.renderPrimeDealsList()
...
...
default:
return null
}
JSX

4.3 Adding Initial State

Instead of adding empty strings in initial state we can add initial in apiStatusConstants.
File: src/components/PrimeDealsSection/index.js
...
const apiStatusConstants = {
initial: "INITIAL",
inProgress: "IN_PROGRESS",
success: "SUCCESS",
failure: "FAILURE",
};
class PrimeDealsSection extends Component {
state = {
primeDeals: [],
apiStatus: apiStatusConstants.initial,
}
renderPrimeDeals = () => {
const { apiStatus } = this.state;
switch (apiStatus) {
case apiStatusConstants.success:
return this.renderPrimeDealsSuccessView();
case apiStatusConstants.failure:
return this.renderPrimeDealsFailureView();
case apiStatusConstants.inProgress:
return this.renderLoader();
default:
return null;
}
};

render() {
return <>{this.renderPrimeDeals()}</>
}
}
export default PrimeDealsSection
JSX
Collapse

Success Failure and Loading View Of Nxt Watch

1. Integrating APIs

1.1 Get Exclusive Prime Deals

2. API Call Possible Views

2.1 Success View

2.2 Failure View

Reasons for API Call Failure :

2.3 Loading View

3. E-Commerce Application

4. Best Practices

4.1 State Variable-isLoading

isLoading is used to handle Success View, Loading View only.
render() {
const {isLoading} = this.state
return <>
{ isLoading ? this.renderLoader() : this.renderProductsList() }
</>
}
JSX

4.2 State Variable-apiStatus

apiStatus is used to handle Success, Failure and Loading Views.
switch (apiStatus) {
case apiStatusConstants.success:
return this.renderPrimeDealsList()
...
...
default:
return null
}
JSX

4.3 Adding Initial State

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form

Success Failure and Loading View Of Nxt Watch

1. Integrating APIs

1.1 Get Exclusive Prime Deals

2. API Call Possible Views

2.1 Success View

2.2 Failure View

Reasons for API Call Failure :

2.3 Loading View

3. E-Commerce Application

4. Best Practices

4.1 State Variable-isLoading

isLoading is used to handle Success View, Loading View only. 123456render() { const {isLoading} = this.state return <> { isLoading ? this.renderLoader() : this.renderProductsList() } </> }JSX

4.2 State Variable-apiStatus

apiStatus is used to handle Success, Failure and Loading Views.12345678switch (apiStatus) { case apiStatusConstants.success: return this.renderPrimeDealsList() ... ... default: return null}JSX

4.3 Adding Initial State

Post a Comment

Contact Form

isLoading is used to handle Success View, Loading View only.
render() {
const {isLoading} = this.state
return <>
{ isLoading ? this.renderLoader() : this.renderProductsList() }
</>
}
JSX

apiStatus is used to handle Success, Failure and Loading Views.
switch (apiStatus) {
case apiStatusConstants.success:
return this.renderPrimeDealsList()
...
...
default:
return null
}
JSX