wire shelters and animals to backend and fix cors issue

jonahkh

2020-06-01 3a45e622b2a639d290fad7b924db9be1437923bc

wire shelters and animals to backend and fix cors issue

 .gitignore

@@ -2,3 +2,4 @@
*/target
*/.classpath
*/.project
.idea*

 adopt-a-pup/animal-service/src/main/resources/application.properties

@@ -1,5 +1,6 @@
notificationService.host=http://notification-service:8080
spring.data.mongodb.host=mongodb
spring.data.mongodb.host=localhost
spring.data.mongodb.port=27018
spring.data.mongodb.database=adopt-a-pup
spring.data.mongodb.password=developer
spring.data.mongodb.username=developer

 adopt-a-pup/envoy-gateway/envoy-gateway-configmap.yaml

@@ -36,10 +36,15 @@
                            - match: { prefix: "/email/" }
                              route: { cluster: email-service, timeout: { seconds: 60 } }
                          cors:
                            allow_origin_string_match:
                            - prefix: "*"
                            allow_methods: GET, PUT, DELETE, POST, OPTIONS
                            allow_headers: access-control-allow-origin,access-control-request-header,access-control-request-method,authorization,keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent
                            max_age: "1728000"
                            expose_headers: x-total-pages,x-total-count
                            filter_enabled:
                              default_value: {numerator: 100, denominator: HUNDRED}
                              runtime_key: cors.www.enabled
                    http_filters:
                      - name: envoy.cors
                      - name: envoy.router

 adopt-a-pup/templates/envoy-gateway-template.yaml

@@ -40,15 +40,20 @@
                                  route: { cluster: animal-service, timeout: { seconds: 60 } }
                                - match: { prefix: "/adoption/" }
                                  route: { cluster: adoption-service, timeout: { seconds: 60 } }
                                - match: { prefix: "/shelter/" }
                                - match: { prefix: "/shelters/" }
                                  route: { cluster: shelter-service, timeout: { seconds: 60 } }
                                - match: { prefix: "/email/" }
                                  route: { cluster: email-service, timeout: { seconds: 60 } }
                              cors:
                                allow_origin_string_match:
                                - prefix: "*"
                                allow_methods: GET, PUT, DELETE, POST, OPTIONS
                                allow_headers: access-control-request-header,access-control-request-method,authorization,keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent
                                allow_headers: access-control-allow-origin,access-control-request-header,access-control-request-method,authorization,keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent
                                max_age: "1728000"
                                expose_headers: x-total-pages,x-total-count
                                filter_enabled:
                                  default_value: {numerator: 100, denominator: HUNDRED}
                                  runtime_key: cors.www.enabled
                        http_filters:
                          - name: envoy.cors
                          - name: envoy.router

 adopt-a-pup/web-app/public/photos/aac7ea0a-2374-4d4b-8d3a-71e4f896e751.jpeg

 adopt-a-pup/web-app/public/photos/b62977ad-fe79-4480-a550-06f717923017.jpeg

 adopt-a-pup/web-app/public/photos/d52a8d58-9024-49dd-92b6-d443c6049ffe.jpeg

 adopt-a-pup/web-app/public/photos/e22d494c-c2be-4d32-bceb-ec675fd5540a.jpeg

 adopt-a-pup/web-app/src/App.tsx

@@ -22,6 +22,8 @@
import { AnimalService } from "./Services/AnimalService";
import { AdoptionService } from "./Services/AdoptionService";
import { ShelterService } from "./Services/ShelterService";
import AnimalDetailsView from "./Views/AnimalDetailsView";
import AnimalDetails from "./Components/AnimalDetails";
// import ShelterRESTService from "./Services/ShelterRESTService";

// Services to connect to backends
@@ -66,6 +68,12 @@
                            <NewsView newsService={newsService} />
                        </Route>
                        }
                        <Route path={`/animals/:animalId`} component={AnimalDetails}>
                            {/* <AnimalDetailsView 
                                // animalId={this.pro}
                                animalService={animalService}
                                adoptionService={adoptionService}/> */}
                        </Route>
                    </Structure>
                </Switch>
            </Router>

 adopt-a-pup/web-app/src/Components/AdoptableAnimalList.tsx

@@ -6,6 +6,8 @@
import { Animal } from "../Models/Animal";
import { AdoptionService } from "../Services/AdoptionService";
import { Residency } from "../Models/Residency";
import AnimalDetailsView from "../Views/AnimalDetailsView";
import { Link, useHistory } from "react-router-dom";


type AnimalListProps = {
@@ -18,6 +20,8 @@
    showAdoptSucessAlert: boolean,
    showAdoptErrorAlert: boolean
}



/**
 * Card list to show adoptable animals and apply for adoption
@@ -46,7 +50,7 @@
            const adoptionApplication = {
                username: "todo",
                residency: Residency.HOUSE,
                animalId: animal.id,
                animalId: animal.animalId,
                squareFootageOfHome: 100,
                occupation: "todo",
                ownOtherAnimals: false,
@@ -82,20 +86,25 @@


    private renderAnimalCard(animal: Animal) {
        const pictureSrc = `/photos/${animal.id}.jpeg`;
        const pictureSrc = `/photos/${animal.animalId}.jpeg`;

        return (
            <GalleryItem key={animal.id}>
            <GalleryItem key={animal.animalId}>
                <Card>
                    <CardHeader>
                        {animal.name}
                        {animal.animalName}
                    </CardHeader>
                    <CardBody>
                        <img src={pictureSrc} alt={animal.name}></img>
                        <img src={pictureSrc} alt={animal.animalName}></img>
                        <CardActions>
                            <Button onClick={() => this.handleAdoptButtonClick(animal)}>
                            {/* <Button onClick={() => this.handleAdoptButtonClick(animal)}>
                                Adopt
                            </Button>
                            </Button> */}
                            <Link to={`/animals/${animal.animalId}`}>
                                <Button>
                                    Details
                                </Button>
                            </Link>
                        </CardActions>
                    </CardBody>
                </Card>
@@ -103,7 +112,6 @@
        );

    }


    private renderAdoptErrorAlert(): React.ReactNode | null {
        if (this.state.showAdoptErrorAlert) {

 adopt-a-pup/web-app/src/Components/AnimalDetails.tsx

New file
@@ -0,0 +1,44 @@
import React from "react";
import {
    Gallery, GalleryItem, Card, CardBody, CardHeader, CardActions, Button, Alert
} from "@patternfly/react-core";
import { AnimalService } from "../Services/AnimalService";
import { Animal } from "../Models/Animal";
import { AdoptionService } from "../Services/AdoptionService";
import { Residency } from "../Models/Residency";
import AnimalDetailsView from "../Views/AnimalDetailsView";
import { Link, useHistory } from "react-router-dom";

type AnimalDetailsProps = {
    animalService: AnimalService;
    adoptionService: AdoptionService;
}

type AnimalDetailsState = {
    animal: Animal;
}

export default class AnimalDetails extends React.Component<AnimalDetailsProps, AnimalDetailsState> {
    
    constructor(props: AnimalDetailsProps) {
        super(props);
        
    }

    public async componentDidMount() {
        // We need the animal Id or somehow have the animal 
        // that was selected in AdoptableAnimalsList to be passed.. 
        // not sure how to do that
        const animalId = window.location.pathname;
        console.log(animalId);
        
    }

    public render() {
        return(
            <React.Fragment>
                hello
            </React.Fragment>
        )
    }
}

 adopt-a-pup/web-app/src/Components/SheltersList.tsx

@@ -32,7 +32,7 @@

        return (
            <List>
                {shelters.map(shelter => <ListItem key={shelter.id}>{shelter.name}</ListItem>)}
                {shelters.map(shelter => <ListItem key={shelter.shelterId}>{shelter.shelterName}</ListItem>)}
            </List>
        );
    }

 adopt-a-pup/web-app/src/Models/Animal.ts

@@ -1,7 +1,13 @@
export interface Animal {
    id: string;
    name: string;
    animalId: string;
    animalName: string;
    shelterId: string;
    breed: string;
    adoptable: boolean;
    approximateSize: string;   
    residencyRequired: string;
    weight: number;
    squareFootageOfHome: number;
    childSafe: boolean;
    otherDogSafe: boolean;
}

 adopt-a-pup/web-app/src/Models/Shelter.ts

New file
@@ -0,0 +1,9 @@
export interface Shelter {
    shelterId: string;
    shelterName: string;
    state: string;
    country: string;
    address: string;
    email: string;
    phoneNumber: string;
}

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

@@ -8,11 +8,17 @@
    public async getAdoptableByShelter(): Promise<Animal[]> {
        return [
            {
                id: "a1",
                name: "Dog 1",
                animalId: "a1",
                animalName: "Dog 1",
                breed: "Shepherd",
                shelterId: "s1",
                adoptable: true
                adoptable: true,
                weight: 100,
                approximateSize: "L",
                residencyRequired: "HOUSE",
                squareFootageOfHome: 800,
                childSafe: true,
                otherDogSafe: true
            }
        ];
    }

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

@@ -11,22 +11,34 @@
    public async getAllAdoptable(): Promise<Animal[]> {
        return [
            {
                id: "a1",
                name: "Dog 1",
                animalId: "a1",
                animalName: "Dog 1",
                breed: "Shepherd",
                shelterId: "s1",
                adoptable: true
                adoptable: true,
                weight: 100,
                approximateSize: "L",
                residencyRequired: "HOUSE",
                squareFootageOfHome: 800,
                childSafe: true,
                otherDogSafe: true
            }
        ];
    }

    public async getById(id: string): Promise<Animal> {
        return {
            id: id,
            name: "Dog 1",
        return             {
            animalId: "a1",
            animalName: "Dog 1",
            breed: "Shepherd",
            shelterId: "s1",
            adoptable: true
            adoptable: true,
            weight: 100,
            approximateSize: "L",
            residencyRequired: "HOUSE",
            squareFootageOfHome: 800,
            childSafe: true,
            otherDogSafe: true
        };
    }


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

@@ -10,23 +10,23 @@
        super(baseUrl, "shelter-service");
    }
    public async create(animal: Animal): Promise<void> {
        await this.post(`/${animal.shelterId}/create`, animal);
        await this.post(`/animals/${animal.shelterId}/create`, animal);
    }

    public getAllAdoptable(): Promise<Animal[]> {
        throw new Error("Method not implemented.");
        return this.get("/animals/getAllAdoptable")
    }

    public getById(id: string): Promise<Animal> {
        throw new Error("Method not implemented.");
        return this.get(`/animals/${id}/getAnimalById`);
    }

    public getAdoptableByShelter(): Promise<Animal[]> {
        return this.get("/getAllAdoptableByShelter");
        return this.get("/animals/getAllAdoptableByShelter");
    }

    public async applyForAdoption(adoptionApplication: AdoptionApplication): Promise<void> {
        await this.post("/applyForAdoption", adoptionApplication);
        await this.post("/animals/applyForAdoption", adoptionApplication);
    }

}

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

@@ -10,8 +10,8 @@

    public async getAll(): Promise<any[]> {
        return [
            { id: "s1", name: "Shelter 1" },
            { id: "s2", name: "Shelter 2" }
            { shelterId: "s1", shelterName: "Shelter 1" },
            { shelterId: "s2", shelterName: "Shelter 2" }
        ];
    }
}

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

@@ -1,5 +1,6 @@
import { ShelterService, ShelterParams } from "./ShelterService";
import { RESTService } from "./RESTService";
import { Shelter } from "../Models/Shelter";


export default class ShelterRESTService extends RESTService implements ShelterService {
@@ -12,7 +13,7 @@
        return this.post("/create", params);
    }

    public getAll(): Promise<Array<any>> {
        return this.get<Array<any>>("/shelters/getAll");
    public getAll(): Promise<Array<Shelter>> {
        return this.get<Array<Shelter>>("/shelters/getAll");
    }
}

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

New file
@@ -0,0 +1,19 @@
import React from "react";
import { PageSection, PageSectionVariants, Text, TextContent } from "@patternfly/react-core";
import { AdoptionService } from "../Services/AdoptionService";
import { AnimalService } from "../Services/AnimalService";

type AnimalDetailsViewProps = {
    adoptionService: AdoptionService;
    animalService: AnimalService;
}

export default class AnimalDetailsView extends React.Component<AnimalDetailsViewProps, AnimalService> {
    public render() {
        return (
            <PageSection variant={PageSectionVariants.light}>

            </PageSection>
        )
    }
}