forked from spring-cloud-services-samples/animal-rescue
-
Notifications
You must be signed in to change notification settings - Fork 7
/
App.js
89 lines (80 loc) · 2.96 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from 'react';
import {Button} from "semantic-ui-react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import './App.css';
import logo from './logo.svg';
import AnimalCards from "./components/animal-cards";
import Carousel from "./components/carousel";
import {getAnimals, getUsername} from "./httpClient";
import {AppContext} from "./AppContext";
const PENDING = 'pending', AUTHENTICATED = 'authenticated', ANONYMOUS = 'anonymous';
export default class App extends React.Component {
#loginLink = process.env.REACT_APP_LOGIN_URI || '/rescue/login';
#logoutLink = process.env.REACT_APP_LOGOUT_URI || '/scg-logout?redirect=/rescue';
constructor(props, context) {
super(props, context);
this.state = {
username: '',
animals: [],
userStatus: PENDING,
};
}
fetchAnimals() {
getAnimals().then(animals => this.setState({animals}));
}
getUsername = () => {
getUsername().then(name => this.setState({
username: name,
userStatus: name === '' ? ANONYMOUS : AUTHENTICATED,
}));
};
componentDidMount() {
this.fetchAnimals();
this.getUsername();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} title="Logo" width="250" alt="Logo"/>
<div className="header-buttons">
{this.getGreetButton()}
{this.getActionButton()}
</div>
</header>
<Carousel/>
<div className={"App-body"}>
<AppContext.Provider value={{refresh: () => this.fetchAnimals()}}>
<AnimalCards username={this.state.username}
animals={this.state.animals}/>
</AppContext.Provider>
</div>
</div>
);
}
getGreetButton() {
switch (this.state.userStatus) {
case ANONYMOUS:
return <Button disabled color='green' basic> Let meow greet ya! </Button>;
case AUTHENTICATED:
return <Button disabled color='green' basic> Have a cute day {this.state.username}! </Button>;
default:
return <div/>;
}
}
getActionButton() {
switch (this.state.userStatus) {
case ANONYMOUS:
return (
<Button animated='fade' color='green' href={this.#loginLink}>
<Button.Content visible>Sign in to adopt</Button.Content>
<Button.Content hidden>It only takes a loving heart</Button.Content>
</Button>
);
case AUTHENTICATED:
return <Button color='green' href={this.#logoutLink}>Sign out</Button>;
default:
return <div/>;
}
}
}