feat(adopt-a-pup): Added loader to shelter detail (#54)

Jaime Ramírez

2020-06-17 16215d163f05e4bd76071e4b66cfc32a05c766da

feat(adopt-a-pup): Added loader to shelter detail (#54)

* feat(adopt-a-pup): Added loader to shelter detail

* updated css to strech page to bottom

 adopt-a-pup/web-app/src/Services/ShelterFakeService.ts

@@ -6,7 +6,7 @@
export default class ShelterFakeService implements ShelterService {

    public async getById(id: string): Promise<Shelter> {
        return {
        return delay(() => ({
            shelterId: id,
            shelterName: "A Fake Shelter",
            state: "Minnesota",
@@ -14,7 +14,7 @@
            address: "200 Good Boy Ave",
            email: "frontdesk@minneapolismutts.com",
            phoneNumber: "212-555-9758"
        };
        }));
    }

    public async create(): Promise<string> {

 adopt-a-pup/web-app/src/Views/ShelterDetailsView.tsx

@@ -5,6 +5,8 @@
import { AdoptionService } from "../Services/AdoptionService";
import { Animal } from "../Models/Animal";
import AdoptableAnimalList from "../Components/AdoptableAnimalList";
import LoadingData from "../Components/LoadingData";
import { RESTConnectionError } from "../Services/RESTService";

type ShelterDetailsViewProps = {
    shelterService: ShelterService;
@@ -18,7 +20,13 @@

type ShelterDetailsViewState = {
    shelter?: Shelter,
    adoptableAnimals: Animal[]
    adoptableAnimals: Animal[],
    loading: boolean,
    error: {
        isActive: boolean,
        header: string,
        message: string
    }
}

export default class ShelterDetailsView
@@ -28,26 +36,71 @@
        super(props);
        this.state = {
            shelter: undefined,
            adoptableAnimals: []
            adoptableAnimals: [],
            loading: false,
            error: {
                isActive: false,
                header: "",
                message: ""
            }
        };
    }


    public async componentDidMount() {
        const { shelterId } = this.props.match.params;
        const [ shelter, adoptableAnimals ] = await Promise.all([
            this.props.shelterService.getById(shelterId),
            this.props.adoptionService.getAdoptableByShelter(shelterId)
        ]);

        this.setState({ loading: true });
        try {
            const [ shelter, adoptableAnimals ] = await Promise.all([
                this.props.shelterService.getById(shelterId),
                this.props.adoptionService.getAdoptableByShelter(shelterId)
            ]);
            this.setState({
                shelter,
                adoptableAnimals
            });
        } catch (error) {
            if (error instanceof RESTConnectionError) {
                this.showConnectionError(error);
            }
        } finally {
            this.setState({ loading: false });
        }
    }

    private showConnectionError(error: RESTConnectionError) {
        this.setState({
            shelter,
            adoptableAnimals
            error: {
                isActive: true,
                header: error.message,
                message: error.description,
            }
        });
    }

    private closeErrorAlert = () => {
        this.setState({
            error: {
                isActive: false,
                message: "",
                header: ""
            }
        });
    }

    public render() {
        const { shelter } = this.state;
        return shelter ? this.renderShelter(shelter) : this.renderMissingShelter();
        const { shelter, loading, error } = this.state;
        return (
            <LoadingData
                showLoader={loading}
                showError={error.isActive}
                errorTitle={error.header}
                errorDescription={error.message}
                onErrorClosed={this.closeErrorAlert}
            >
                {shelter ? this.renderShelter(shelter) : ""}
            </LoadingData>
        );
    }

    private renderShelter(shelter: Shelter) {
@@ -87,19 +140,6 @@
                    <AdoptableAnimalList animals={this.state.adoptableAnimals} />
                </PageSection>
            </React.Fragment>
        );
    }

    private renderMissingShelter() {
        return (
            <PageSection variant={PageSectionVariants.light}>
                <TextContent>
                    <Text component="h1">Not Found</Text>
                    <Text component="p">
                        This shelter does not exist.
                    </Text>
                </TextContent>
            </PageSection>
        );
    }


 adopt-a-pup/web-app/src/v1.css

@@ -1,3 +1,6 @@

#root { height:100%; }

.logo {
    height: 2.5rem;
}

 adopt-a-pup/web-app/src/v2.css

@@ -1,4 +1,6 @@

#root { height:100%; }

.logo {
    height: 1.8rem;
}